web_sh_audit/src/components/layout/MenuCard.vue

<template>
  <!-- 外边框 -->
  <div
    ref="menuCard"
    v-loading="dataInitLoading"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    :class="$ifLeftMenu(menuData.title != undefined ? menuData.title : '') ? 'menuMainBoxA' : 'menuMainBox'"
    :style="{
      width: menuData.boxWidth ? menuData.boxWidth + 'px' : '410px',
      height: menuData.boxHeight ? menuData.boxHeight + 'px' : 'auto',
      border: menuData.type !== 'chart' && menuData.type !== 'legend' ? '' : '1px solid #2FB8FF',
      background: menuData.boxBackground ? menuData.boxBackground : ''
    }"
    @click="changeMenu()"
  >
    <!-- 头部 -->
    <div class="menuMainBox_top" v-if="menuData.type !== 'chart' && menuData.type !== 'legend'">
      <!-- 头部左侧 -->
      <div
        class="menuMainBox_top_left"
        :style="{
          width: menuData.titleWidth ? menuData.titleWidth + '%' : '50%'
        }"
      >
        <!-- 左侧箭头图标 -->
        <div class="menuMainBox_top_left_iconS" v-if="menuData.type !== 'imageMenu'"></div>
        <div class="menuMainBox_top_left_iconR" v-if="menuData.type === 'imageMenu'">
          <div
            class="menuMainBox_top_left_iconR_active"
            v-if="$ifLeftMenu(menuData.index != undefined ? menuData.title : '')"
          ></div>
        </div>
        <!-- 标题 -->
        <div class="menuMainBox_top_left_title">
          {{ (menuData.beforeTitle ? $store.state[menuData.beforeTitle] : "") + menuData.title }}
        </div>
        <!-- 右侧倾斜图标1 -->
        <div class="menuMainBox_top_left_iconE menuMainBox_top_left_iconE1"></div>
        <!-- 右侧倾斜图标2 -->
        <div class="menuMainBox_top_left_iconE menuMainBox_top_left_iconE2"></div>
      </div>
      <!-- 右侧两个倾斜方框 -->
      <div
        class="menuMainBox_top_right"
        :style="{
          width: menuData.titleWidth ? 110 - menuData.titleWidth + '%' : '60%'
        }"
      >
        <!-- 方块1 -->
        <div class="menuMainBox_top_right_d1"></div>
        <!-- 方块2 -->
        <div class="menuMainBox_top_right_d2"></div>
      </div>
      <!-- 右上角三个点（蓝橙蓝） -->
      <div class="menuMainBox_top_topRight">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <!-- 头部下的折线 -->
    <div
      class="menuMainBox_topBottom"
      v-if="menuData.type !== 'chart' && menuData.type !== 'legend'"
      :style="{
        left: menuData.titleWidth
          ? (menuData.titleWidth <= 40 ? menuData.titleWidth - 39 : menuData.titleWidth - 40) + '%'
          : '10%'
      }"
    >
      <!-- 折线右上角圆球 -->
      <div></div>
    </div>
    <div class="menuMainBox_topChart" v-if="menuData.type === 'chart' || menuData.type === 'legend'">
      <div class="menuMainBox_topChart_title">
        {{ menuData.title }}
      </div>
    </div>
    <!-- -------------------------------------------------主题------------------------------------------ -->
    <div class="menuMainBox_main" v-if="menuData.type === 'card'">
      <!-- 上部 -->
      <div class="menuMainBox_main_top" v-if="!menuData.topSolt">
        <slot name="top"> </slot>
        <TopCard v-if="menuData.commonName == 'TOP'" :dataList="menuData.topData" :columnName="menuData.field" />
      </div>
      <div class="menuMainBox_main_top" v-if="menuData.topSolt">
        <TagTableCard
          v-if="menuData.topSolt.commonName == 'TagTableCard'"
          :echartData="menuData.topSolt.commonData"
          @changeMousemoveIndex="changeMousemoveIndex"
        />
        <div
          class="menuCardFlex"
          v-if="menuData.topSolt.commonName == 'TagCard' || menuData.topSolt.commonName == 'ALLLIST'"
          :style="{
            justifyContent: menuData.topSolt.commonData.length > 1 ? 'space-between' : 'center'
          }"
        >
          <TagCard
            v-for="(item, index) in menuData.topSolt.commonData"
            :data="item"
            :index="index"
            :chartCardDataIndex="chartCardDataIndex"
            :key="item.title"
            @changeMousemoveIndex="changeMousemoveIndex"
          />
        </div>
      </div>
      <!-- 下部 -->
      <div class="menuMainBox_main_bottom" v-if="!menuData.bottomSolt">
        <slot name="bottom"></slot>
      </div>
      <div class="menuMainBox_main_bottom" v-if="menuData.bottomSolt">
        <ChartCard
          v-if="menuData.bottomSolt.commonName == 'ChartCard'"
          :title="menuData.topSolt.commonData[chartCardDataIndex].title"
          :categoryData="menuData.topSolt.commonData[chartCardDataIndex].categoryData"
          :valueData="menuData.topSolt.commonData[chartCardDataIndex].valueData"
          :unit="menuData.topSolt.commonData[chartCardDataIndex].unit"
        />
      </div>
    </div>
    <div class="menuMainBox_main" v-if="menuData.type === 'chart' || menuData.type === 'legend'">
      <div class="menuMainBox_main_all" v-if="!menuData.topSolt && !menuData.bottomSolt">
        <slot></slot>
      </div>
    </div>
    <div class="menuMainBox_main_image" v-if="menuData.type === 'imageMenu'">
      <div class="menuMainBox_main_image_box" :style="returnImageUrl(menuData.imageUrl, menuData.boxHeight)"></div>
    </div>
    <!-- 图例属性显示区域 -->
    <div v-if="menuData.type === 'legend'" class="legend"></div>
  </div>
</template>

<script>
/**
 * 模块通用组件（首页和其他页面都有用到，由于综合功能和适配场景较多，配置组合可以联系开发人员:LiuMengxiang）
 * @author: LiuMengxiang
 * @Date: 2022年11月14-18日
 */
import TagTableCard from "@/components/common/TagTableCard.vue";
import ChartCard from "@/components/common/ChartCard.vue";
import TagCard from "@/components/common/TagCard.vue";
import TopCard from "@/components/common/TopCard.vue";
export default {
  name: "menuCard",
  components: { TagTableCard, ChartCard, TagCard, TopCard },
  data() {
    return {
      dataInitLoading: false,
      resData: [],
      chartCardDataIndex: 0
    };
  },
  mounted() {
    this.$nextTick(() => {
      if (this.menuData && this.menuData.topSolt && this.menuData.topSolt.commonDataGetUrl) {
        this.dataInitLoading = true;
        this.$Get("/static/json/home/" + this.menuData.topSolt.commonDataGetUrl).then(
          res => {
            let listMap = {};
            let tableData = res;
            tableData.forEach(item => {
              if (!listMap[item.name]) {
                // type,data
                let listMap2 = {};
                if (item.data) {
                  item.data.forEach(item2 => {
                    if (listMap2[item2.type]) {
                      listMap2[item2.type]["categoryData"].push(item2.year);
                      listMap2[item2.type]["valueData"].push(item2.area);
                    } else {
                      let listMapItem = {};
                      listMapItem["categoryData"] = [item2.year];
                      listMapItem["valueData"] = [item2.area];
                      listMap2[item2.type] = listMapItem;
                    }
                  });
                }
                listMap[item.name] = listMap2;
              } else {
                console.error("json文件内容重复，重复街镇：", item.name);
              }
            });
            if (listMap) {
              let categoryData = [];
              for (let listMapKeys in listMap) {
                // type,data
                categoryData = listMap[listMapKeys];
                if (categoryData) {
                  if (!listMap["全部"]) {
                    listMap["全部"] = {};
                  }
                  for (let categoryDataKeys in categoryData) {
                    if (categoryData[categoryDataKeys]) {
                      let categoryDataItemData = categoryData[categoryDataKeys];
                      if (listMap["全部"][categoryDataKeys]) {
                        categoryDataItemData.valueData.forEach((valueIndexItem, index) => {
                          if (listMap["全部"][categoryDataKeys].valueData[index]) {
                            listMap["全部"][categoryDataKeys].valueData[index] += Number(valueIndexItem);
                          } else {
                            listMap["全部"][categoryDataKeys].valueData[index] = Number(valueIndexItem);
                          }
                        });
                      } else {
                        listMap["全部"][categoryDataKeys] = categoryDataItemData;
                      }
                    }
                  }
                }
              }
            }
            this.resData = listMap;
            if (this.resData["全部"]) {
              let _index = 0;
              let sum = 0;
              for (let keys in this.resData["全部"]) {
                this.menuData.topSolt.commonData[_index].title = keys;
                this.menuData.topSolt.commonData[_index].categoryData = this.resData["全部"][keys].categoryData;
                this.menuData.topSolt.commonData[_index].valueData = this.resData["全部"][keys].valueData;
                this.menuData.topSolt.commonData[_index].value =
                  this.resData["全部"][keys].valueData[this.resData["全部"][keys].valueData.length - 1];
                sum += this.menuData.topSolt.commonData[_index].value;
                _index++;
              }
              if (this.menuData.topSolt.commonData[4]) {
                this.menuData.topSolt.commonData[4].valueData = [sum];
              }
            }
            this.dataInitLoading = false;
          },
          error => {
            console.log("error:", error, this.menuData);
            this.dataInitLoading = false;
          }
        );
      } else if (
        this.menuData &&
        this.menuData.columnId &&
        this.menuData.commonName !== "SUM" &&
        this.menuData.commonName !== "ALLLIST"
      ) {
        this.dataInitLoading = true;
        let params = new FormData();
        params.append("columnId", this.menuData.columnId);
        if (this.menuData.field) {
          params.append("field", this.menuData.field);
        }
        params.append("states", "2,3");
        params.append("pageSize", this.menuData.pageSize ? this.menuData.pageSize : 999);
        params.append("page", 0);
        if (this.menuData.paramJson) {
          params.append("paramJson", JSON.stringify(this.menuData.paramJson));
        }
        if (this.menuData.sortField) {
          let sortparam = [
            {
              field: this.menuData.sortField.field,
              orderByType: this.menuData.sortField.orderByType
            }
          ];
          params.append("orderBy", JSON.stringify(sortparam));
        }
        this.$Post(this.menuData.getUrl ? this.menuData.getUrl : this.urlsCollection.selectContentList, params).then(
          res => {
            if (this.menuData.commonName && this.menuData.commonName === "TOP" && res.code === 200 && res.content.length > 0) {
              res.content.forEach((item, index) => {
                if (this.menuData.pageSize > index) {
                  this.resData[index] = item;
                }
              });
              this.changeHomeSpecialTown();
            } else if (res.code === 200 && res.content.data && res.content.data.length > 0) {
              let listMap = {};
              let tableData = res.content.data;
              tableData.forEach(item => {
                if (listMap[item.street]) {
                  listMap[item.street]["categoryData"].push(item.c_years);
                  listMap[item.street]["valueData"].push((item.c_float_num / 10000).toFixed(2));
                } else {
                  let listMapItem = {};
                  listMapItem["categoryData"] = [item.c_years];
                  listMapItem["valueData"] = [(item.c_float_num / 10000).toFixed(2)];
                  listMap[item.street] = listMapItem;
                }
              });
              if (listMap) {
                let categoryData = [];
                for (let listMapKeys in listMap) {
                  categoryData = listMap[listMapKeys].categoryData;
                  if (listMap[listMapKeys].valueData) {
                    if (!listMap["全部"]) {
                      listMap["全部"] = { valueData: [], categoryData: [] };
                    }
                    listMap[listMapKeys].valueData.forEach((valueIndexItem, index) => {
                      if (listMap["全部"].valueData[index]) {
                        listMap["全部"].valueData[index] += Number(valueIndexItem);
                      } else {
                        listMap["全部"].valueData[index] = Number(valueIndexItem);
                      }
                    });
                  }
                }
                if (listMap["全部"].categoryData.length == 0 && categoryData.length > 0) {
                  listMap["全部"].categoryData = categoryData;
                }
              }
              if (listMap["全部"] && listMap["全部"].valueData) {
                listMap["全部"].valueData.forEach((item, index) => {
                  listMap["全部"].valueData[index] = item.toFixed(2);
                });
              }
              this.resData = listMap;
              this.changeHomeSpecialTown();
            } else {
              this.resData = [];
              this.changeHomeSpecialTown();
            }
            this.dataInitLoading = false;
          },
          error => {
            this.resData = [];
            this.changeHomeSpecialTown();
            console.log("error:", error, this.menuData);
            this.dataInitLoading = false;
          }
        );
      } else if (this.menuData.commonName && this.menuData.commonName === "TOP") {
        this.topData(this.$store.state.homeSpecialTown);
      } else if (this.menuData.commonName && this.menuData.commonName === "ALLLIST") {
        this.allListData(this.$store.state.homeSpecialTown);
      } else if (this.menuData.commonName && this.menuData.commonName === "SUM") {
        this.sumData(this.$store.state.homeSpecialTown);
      }
      // 只有第一次创建该页面，或刷新页面时。
      if (this.menuData.menuIndex) {
        if (this.$ifMenu(this.menuData.menuIndex, this.menuData.subMenuIndex)) {
          // 立即修改display为block
          this.$refs.menuCard.style.display = "block";
          setTimeout(() => {
            this.$refs.menuCard.style.transform = "translate(0,0)";
            this.$refs.menuCard.style.opacity = "0.9";
          });
        } else {
          // 如果不符合，页面创建时就直接隐藏
          this.$refs.menuCard.style.display = "none";
        }
      }
      // 当容器创建完成时，监听窗口改变大小时间
      this.$bus.$off("windowOnresize");
      this.$bus.$on("windowOnresize", this.windowOnresize);
    });
  },
  destroy() {
    // 当容器销毁时，需要停止监听该事件
    this.$bus.$off("windowOnresize");
  },
  /**
   * 公共card组件，接收参数如下：
   * menuData =>
   * type: 类型【card:卡片;chart:echart组件;imageMenu:图片菜单;legend:图例】（必填）
   * title: 标题（必填）
   *
   * getUrl: DMS数据请求路径
   * columnId：DMS数据请求columnId
   * pageSize：DMS数据请求个数
   * field：DMS数据请求field
   * sortField=>：DMS数据请求排序配置
   *  field:排序字段
   *  orderByType：排序类型【1：正序，2：倒序】
   *
   * index: 子菜单index（只有当type为imageMenu时有效）（只有type为imageMenu时为必填）
   * imageUrl: 菜单图片地址（只有当type为imageMenu时有效）（只有type为imageMenu时为必填）
   *
   * menuIndex: 显示头部菜单对应index（显示隐藏优化，组合属性）
   * subMenuIndex: 显示头部菜单对应subIndex（显示隐藏优化，组合属性）
   * minDomWidth: 最小屏幕宽度自动隐藏【单位：Number】（显示隐藏优化，组合属性）
   * position: 动画位置【left\right\top\bottom】（显示隐藏优化，组合属性）
   *
   * boxWidth: 宽，默认为410px【单位：Number】（非必填）
   * boxHeight: 高，默认为auto【单位：Number】（非必填）
   * boxBackground: 背景色，默认为渐变蓝色【支持#\rgba】（非必填）
   * titleWidth: 标题宽度，默认为50【单位：%】（非必填）
   * gotoPageInfo: 动态跳转页面信息（非必填）=>{index:要跳转的菜单index，subIndex：要跳转的子菜单index，name：菜单名称}
   *
   * topSolt: 头部替换插槽组件信息（非必填）=>{commonName：组件名称，commonData：组件支撑数据，commonDataGetUrl：本地静态数据文件名，columnId：DMS远程数据columnId}
   * bottomSolt: 底部替换插槽组件信息（非必填）=>{commonName:组件名称，commonData：组件支撑数据}
   *
   */
  props: ["menuData"],
  methods: {
    sumData(homeSpecialTown) {
      if (this.menuData.paramJson && this.menuData.categoryData) {
        this.resData = [];
        this.dataInitLoading = true;
        this.menuData.topSolt.commonData[0].categoryData = [];
        this.menuData.topSolt.commonData[0].valueData = [];
        let _categoryData = this.menuData.categoryData;
        let _valueData = [];
        this.menuData.categoryData.forEach(item => {
          _valueData.push(0);
        });

        this.menuData.categoryData.forEach((item, _index) => {
          let params = new FormData();
          params.append("columnId", this.menuData.columnId);
          if (this.menuData.field) {
            params.append("field", this.menuData.field);
          }
          params.append("states", "2,3");
          params.append("pageSize", this.menuData.pageSize ? this.menuData.pageSize : 999);
          params.append("page", 0);
          let pramJson = {};
          pramJson.c_new_date = item;
          pramJson.sj_select = this.menuData.paramJson.sj_select;
          if (homeSpecialTown !== "全部") {
            let associatedItems = this.$store.state.selectSelectDataMap.associatedItems;
            if (associatedItems.length > 0) {
              associatedItems.forEach(item => {
                if (item.name === homeSpecialTown) {
                  pramJson.bsjz = item.index + "";
                }
              });
            }
          }
          params.append("paramJson", JSON.stringify(pramJson));
          if (this.menuData.sortField) {
            let sortparam = [
              {
                field: this.menuData.sortField.field,
                orderByType: this.menuData.sortField.orderByType
              }
            ];
            params.append("orderBy", JSON.stringify(sortparam));
          }
          this.$Post(this.menuData.getUrl ? this.menuData.getUrl : this.urlsCollection.selectContentList, params).then(
            res => {
              let sumField = 0;
              if (res.code === 200 && res.content !== "数据为空" && res.content.length > 0) {
                res.content.forEach(contentItem => {
                  sumField += Number(contentItem.number);
                });
              }
              _valueData[Number(_index)] = sumField;

              this.menuData.topSolt.commonData[0].categoryData = _categoryData;
              this.menuData.topSolt.commonData[0].valueData = _valueData;
              this.menuData.topSolt.commonData[0].value = _valueData[_valueData.length - 1];
              this.dataInitLoading = false;
            },
            error => {
              console.log("error:", error, this.menuData);
            }
          );
        });
      }
    },
    topData(homeSpecialTown) {
      this.dataInitLoading = true;
      let params = new FormData();
      params.append("columnId", this.menuData.columnId);
      if (this.menuData.field) {
        params.append("field", this.menuData.field);
      }
      params.append("states", "2,3");
      params.append("pageSize", this.menuData.pageSize ? this.menuData.pageSize : 999);
      params.append("page", 0);
      if (this.menuData.paramJson) {
        let pramJson = {};
        if (this.menuData.paramJson.sj_select) {
          pramJson.sj_select = this.menuData.paramJson.sj_select;
        }
        if (homeSpecialTown !== "全部") {
          let associatedItems = this.$store.state.selectSelectDataMap.associatedItems;
          if (associatedItems.length > 0) {
            associatedItems.forEach(item => {
              if (item.name === homeSpecialTown) {
                pramJson.bsjz = item.index + "";
              }
            });
          }
        }
        params.append("paramJson", JSON.stringify(pramJson));
      }
      if (this.menuData.sortField) {
        let sortparam = [
          {
            field: this.menuData.sortField.field,
            orderByType: this.menuData.sortField.orderByType
          }
        ];
        params.append("orderBy", JSON.stringify(sortparam));
      }
      this.$Post(this.menuData.getUrl ? this.menuData.getUrl : this.urlsCollection.selectContentList, params).then(
        res => {
          this.resData = [];
          if (res.code === 200 && res.content.length > 0) {
            res.content.forEach((item, index) => {
              if (this.menuData.pageSize > index) {
                this.resData.push(item);
              }
            });
            this.menuData.topData = this.resData;
          } else {
            this.resData = [];
            this.menuData.topData = this.resData;
          }
          this.dataInitLoading = false;
        },
        error => {
          this.resData = [];
          this.menuData.topData = this.resData;
          console.log("error:", error, this.menuData);
          this.dataInitLoading = false;
        }
      );
    },
    allListData(homeSpecialTown) {
      this.dataInitLoading = true;
      if (this.menuData.paramJson) {
        this.menuData.paramJson.sj_select.forEach((paramSjItem, paramSjIndex) => {
          let params = new FormData();
          params.append("columnId", this.menuData.columnId);
          if (this.menuData.field) {
            params.append("field", this.menuData.field);
          }
          params.append("states", "2,3");
          params.append("pageSize", this.menuData.pageSize ? this.menuData.pageSize : 999);
          params.append("page", 0);
          let pramJson = {};
          pramJson.sj_select = paramSjItem;
          if (homeSpecialTown !== "全部") {
            let associatedItems = this.$store.state.selectSelectDataMap.associatedItems;
            if (associatedItems.length > 0) {
              associatedItems.forEach(item => {
                if (item.name === homeSpecialTown) {
                  pramJson.bsjz = item.index + "";
                }
              });
            }
          }
          params.append("paramJson", JSON.stringify(pramJson));
          if (this.menuData.sortField) {
            let sortparam = [
              {
                field: this.menuData.sortField.field,
                orderByType: this.menuData.sortField.orderByType
              }
            ];
            params.append("orderBy", JSON.stringify(sortparam));
          }
          this.$Post(this.menuData.getUrl ? this.menuData.getUrl : this.urlsCollection.selectContentList, params).then(
            res => {
              this.resData = [];
              let allSum = 0;
              if (res.code === 200 && res.content.length > 0) {
                res.content.forEach(item => {
                  allSum += item.number;
                });
              }
              this.menuData.topSolt.commonData[paramSjIndex].value = allSum;
              this.dataInitLoading = false;
            },
            error => {
              this.menuData.topSolt.commonData[paramSjIndex].value = "--";
              console.log("error:", error, this.menuData);
              this.dataInitLoading = false;
            }
          );
        });
      }
    },
    // 切换街镇时
    changeHomeSpecialTown() {
      if (this.resData[this.$store.state.homeSpecialTown] && this.menuData.topSolt.commonData) {
        if (this.resData[this.$store.state.homeSpecialTown].categoryData) {
          this.menuData.topSolt.commonData[0].categoryData = this.resData[this.$store.state.homeSpecialTown].categoryData;
          this.menuData.topSolt.commonData[0].valueData = this.resData[this.$store.state.homeSpecialTown].valueData;
        } else {
          let _index = 0;
          let sum = 0;
          for (let keys in this.resData["全部"]) {
            this.menuData.topSolt.commonData[_index].title = keys;
            this.menuData.topSolt.commonData[_index].categoryData =
              this.resData[this.$store.state.homeSpecialTown][keys].categoryData;
            this.menuData.topSolt.commonData[_index].valueData =
              this.resData[this.$store.state.homeSpecialTown][keys].valueData;
            this.menuData.topSolt.commonData[_index].value =
              this.resData[this.$store.state.homeSpecialTown][keys].valueData[
                this.resData[this.$store.state.homeSpecialTown][keys].valueData.length - 1
              ];
            sum += this.menuData.topSolt.commonData[_index].value;
            _index++;
          }
          if (this.menuData.topSolt.commonData[4]) {
            this.menuData.topSolt.commonData[4].valueData = [sum];
          }
        }
      } else if (this.menuData && this.menuData.commonName && this.menuData.commonName === "TOP") {
        this.topData(this.$store.state.homeSpecialTown);
      } else if (this.menuData && this.menuData.commonName && this.menuData.commonName === "SUM") {
        this.sumData(this.$store.state.homeSpecialTown);
      } else if (this.menuData && this.menuData.commonName && this.menuData.commonName === "ALLLIST") {
        this.allListData(this.$store.state.homeSpecialTown);
      } else if (this.menuData && this.menuData.topSolt && this.menuData.topSolt.commonData) {
        this.menuData.topSolt.commonData.forEach((item, index) => {
          this.menuData.topSolt.commonData[index].categoryData = [];
          this.menuData.topSolt.commonData[index].valueData = [];
          if (this.menuData.topSolt.commonData[index].valueData) {
            this.menuData.topSolt.commonData[index].valueData = 0;
          }
          if (this.menuData.topSolt.commonData[index].value) {
            this.menuData.topSolt.commonData[index].value = 0;
          }
        });
      }
    },
    // 当用户使用光标切换交互组件时触发
    changeMousemoveIndex(index) {
      if (this.chartCardDataIndex != index) {
        this.chartCardDataIndex = index;
      }
    },
    // 用户点击菜单标题时，调用全局函数，根据全局暂存对象
    changeMenu() {
      if (this.menuData != undefined && this.menuData.index != undefined && this.menuData.title != undefined) {
        this.$store.commit("changeLeftMenuTitle", this.menuData.title);
        if (this.menuData.menuIndex != undefined && this.menuData.subMenuIndex != undefined) {
          this.$store.commit("changeBackMenu", {
            index: this.menuData.menuIndex,
            subIndex: this.menuData.subMenuIndex,
            name: this.menuData.menuName ? this.menuData.menuName : ""
          });
        }
      }
      if (this.menuData != undefined && this.menuData.gotoPageInfo != undefined) {
        this.$store.commit("changeNavSelect", this.menuData.gotoPageInfo);
      }
    },
    // 根据菜单imageURL和boxHeight对象自动生成元素的样式（背景以及高度）
    returnImageUrl(imageUrl, boxHeight) {
      let returnStyle = "";
      if (boxHeight) {
        returnStyle += "heihgt:" + (boxHeight - 36) + "px;";
      }
      returnStyle += "background-image: url('" + imageUrl + "');";
      return returnStyle;
    },
    // 组件显示隐藏时，动画样式返回。
    showChange() {
      if (this.menuData != undefined && this.menuData.menuIndex != undefined) {
        if (this.$ifMenu(this.menuData.menuIndex, this.menuData.subMenuIndex)) {
          // 立即修改display为block
          this.$refs.menuCard.style.display = "block";
          this.$refs.menuCard.style.opacity = "0";
          setTimeout(() => {
            this.$refs.menuCard.style.transform = "translate(0,0)";
            this.$refs.menuCard.style.opacity = "0.9";
          }, 300);
        } else {
          // 延迟0.3s后修改display为none
          this.$refs.menuCard.style.transform = this.positionTotransform();
          this.$refs.menuCard.style.opacity = "0";
          setTimeout(() => {
            this.$refs.menuCard.style.display = "none";
          }, 300);
        }
      }
    },
    // 根据组件定位，返回不同的显示隐藏动画位置
    positionTotransform() {
      switch (this.menuData.position) {
        case "left":
          return "translate(-50%,0)";
        case "right":
          return "translate(50%,0)";
        case "top":
          return "translate(0,-50%)";
        case "bottom":
          return "translate(0,50%)";
        default:
          return "translate(0,0)";
      }
    },
    windowOnresize(windowClient) {
      try {
        if (
          windowClient.windowsWidth != undefined &&
          this.$ifMenu(this.menuData.menuIndex, this.menuData.subMenuIndex) &&
          this.menuData.minDomWidth != null
        ) {
          if (
            this.menuData.minDomWidth < windowClient.windowsWidth &&
            this.$refs.menuCard != undefined &&
            this.$refs.menuCard.style.display == "none"
          ) {
            // 立即修改display为block
            this.$refs.menuCard.style.display = "block";
            setTimeout(() => {
              this.$refs.menuCard.style.transform = "translate(0,0)";
              this.$refs.menuCard.style.opacity = "0.9";
            }, 300);
          } else if (
            this.menuData.minDomWidth > windowClient.windowsWidth &&
            this.$refs.menuCard != undefined &&
            this.$refs.menuCard.style.display == "block"
          ) {
            // 延迟0.3s后修改display为none
            this.$refs.menuCard.style.transform = this.positionTotransform();
            this.$refs.menuCard.style.opacity = "0";
            setTimeout(() => {
              this.$refs.menuCard.style.display = "none";
            }, 300);
          }
        }
      } catch (error) {
        console.error("MenuCard组件出现异常：", error);
      }
    }
  },
  watch: {
    "$store.state.navSelect": {
      handler() {
        this.$nextTick(() => {
          this.showChange();
        });
      },
      deep: true
    },
    "$store.state.homeSpecialTown": {
      handler() {
        this.$nextTick(() => {
          this.changeHomeSpecialTown();
        });
      },
      deep: true
    }
  }
};
</script>

<style lang="less" scoped>
@borderColor: #00aaff;
@borderColor32: #00aaff32;
@borderColor64: #00aaff64;
@topTitleBgLeft: #002645;
@topTitleMinLeft: #002f56;
@lightColor: #74ffff;
.menuMainBox,
.menuMainBoxA {
  transition: all 0.3s;
}
.menuMainBox {
  position: relative;
  z-index: 999;
  margin: 10px 5px;
  min-height: 60px;
  border: 2px solid transparent;
  border-image: --webkit-linear-gradient(to top, @borderColor, transparent) 1;
  border-image: --moz-linear-gradient(to top, @borderColor, transparent) 1;
  border-image: linear-gradient(to top, @borderColor, transparent) 1;
  &:hover {
    border-image: --webkit-linear-gradient(to top, @lightColor, transparent) 1;
    border-image: --moz-linear-gradient(to top, @lightColor, transparent) 1;
    border-image: linear-gradient(to top, @lightColor, transparent) 1;
    .menuMainBox_top {
      background-color: @lightColor;
      &_left {
        background-image: --webkit-linear-gradient(to left, @lightColor, #007dff);
        background-image: --moz-linear-gradient(to left, @lightColor, #007dff);
        background-image: linear-gradient(to left, @lightColor, #007dff);
      }
    }
  }
  cursor: pointer;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  //   type !== chart
  &_top {
    position: relative;
    width: 100%;
    height: 36px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    align-content: center;
    overflow: hidden;
    background-color: @topTitleMinLeft;
    &_left {
      position: relative;
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      align-content: center;
      height: 100%;
      background-image: --webkit-linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
      background-image: --moz-linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
      background-image: linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
      border-bottom: 2px solid @borderColor;
      &_iconS {
        margin: 10px;
        width: 20px;
        height: 20px;
        background-image: linear-gradient(to top, #0071b2, #1deef5);
        clip-path: polygon(0 0, 100% 50%, 0 100%, 30% 50%, 0 0);
      }
      &_iconR {
        position: relative;
        margin: 15px;
        width: 10px;
        height: 10px;
        background-image: transparent;
        border: 1px solid #1deef5;
        border-radius: 20px;
        &_active {
          position: absolute;
          transform: translate(-50%, -50%);
          top: 50%;
          left: 50%;
          width: 5px;
          height: 5px;
          background-color: #1deef5;
          border-radius: 20px;
        }
      }
      &_title {
        font-size: 28px;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        color: #ffffff;
      }
      &_iconE {
        position: absolute;
        margin-left: 10px;
        width: 15px;
        height: 30px;
        background-image: linear-gradient(to bottom, transparent, transparent, #00a6c0);
        transform: skew(-45deg);
      }
      &_iconE1 {
        right: 27px;
      }
      &_iconE2 {
        right: 7px;
      }
    }
    &_right {
      position: absolute;
      right: -10%;
      height: 100%;
      border-top: 2px solid @borderColor;
      border-left: 2px solid @borderColor;
      transform: skew(-45deg);
      background-color: @topTitleBgLeft;
      border-image: --webkit-linear-gradient(to right, @borderColor, @topTitleBgLeft) 1;
      border-image: --moz-linear-gradient(to right, @borderColor, @topTitleBgLeft) 1;
      border-image: linear-gradient(to right, @borderColor, @topTitleBgLeft) 1;
      &_d1 {
        position: absolute;
        left: 10px;
        width: 50px;
        height: 20px;
        background-color: @borderColor64;
      }
      &_d2 {
        position: absolute;
        left: 70px;
        width: 80px;
        height: 10px;
        background-color: @borderColor32;
      }
    }
    &_topRight {
      position: absolute;
      top: 0;
      right: 0;
      display: flex;
      div:nth-child(1) {
        width: 5px;
        height: 2px;
        background-color: @borderColor;
      }
      div:nth-child(2) {
        margin: 0 1px;
        width: 5px;
        height: 2px;
        background-color: #f19b56;
      }
      div:nth-child(3) {
        width: 5px;
        height: 2px;
        background-color: @borderColor;
      }
    }
  }
  &:hover {
    .menuMainBox_main_image_box {
      background-size: 110% 220px;
    }
  }
}
// 选中后的样式
.menuMainBoxA {
  position: relative;
  z-index: 999;
  margin: 10px 5px;
  min-height: 60px;
  border: 2px solid transparent;
  border-image: --webkit-linear-gradient(to top, @lightColor, transparent) 1;
  border-image: --moz-linear-gradient(to top, @lightColor, transparent) 1;
  border-image: linear-gradient(to top, @lightColor, transparent) 1;
  cursor: pointer;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  //   type !== chart
  .menuMainBox_top {
    position: relative;
    width: 100%;
    height: 36px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    align-content: center;
    overflow: hidden;
    background-color: @lightColor;
    &_left {
      position: relative;
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      align-content: center;
      height: 100%;
      border-bottom: 2px solid @borderColor;
      background-image: --webkit-linear-gradient(to left, @lightColor, #007dff);
      background-image: --moz-linear-gradient(to left, @lightColor, #007dff);
      background-image: linear-gradient(to left, @lightColor, #007dff);
      &_iconS {
        margin: 10px;
        width: 20px;
        height: 20px;
        background-image: linear-gradient(to top, #0071b2, #1deef5);
        clip-path: polygon(0 0, 100% 50%, 0 100%, 30% 50%, 0 0);
      }
      &_iconR {
        position: relative;
        margin: 15px;
        width: 10px;
        height: 10px;
        background-image: transparent;
        border: 1px solid #1deef5;
        border-radius: 20px;
        &_active {
          position: absolute;
          transform: translate(-50%, -50%);
          top: 50%;
          left: 50%;
          width: 5px;
          height: 5px;
          background-color: #1deef5;
          border-radius: 20px;
        }
      }
      &_title {
        font-size: 28px;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        color: #ffffff;
      }
      &_iconE {
        position: absolute;
        margin-left: 10px;
        width: 15px;
        height: 30px;
        background-image: linear-gradient(to bottom, transparent, transparent, #00a6c0);
        transform: skew(-45deg);
      }
      &_iconE1 {
        right: 27px;
      }
      &_iconE2 {
        right: 7px;
      }
    }
    &_right {
      position: absolute;
      right: -10%;
      height: 100%;
      border-top: 2px solid @borderColor;
      border-left: 2px solid @borderColor;
      transform: skew(-45deg);
      background-color: @topTitleBgLeft;
      border-image: --webkit-linear-gradient(to right, @borderColor, @topTitleBgLeft) 1;
      border-image: --moz-linear-gradient(to right, @borderColor, @topTitleBgLeft) 1;
      border-image: linear-gradient(to right, @borderColor, @topTitleBgLeft) 1;
      &_d1 {
        position: absolute;
        left: 10px;
        width: 50px;
        height: 20px;
        background-color: @borderColor64;
      }
      &_d2 {
        position: absolute;
        left: 70px;
        width: 80px;
        height: 10px;
        background-color: @borderColor32;
      }
    }
    &_topRight {
      position: absolute;
      top: 0;
      right: 0;
      display: flex;
      div:nth-child(1) {
        width: 5px;
        height: 2px;
        background-color: @borderColor;
      }
      div:nth-child(2) {
        margin: 0 1px;
        width: 5px;
        height: 2px;
        background-color: #f19b56;
      }
      div:nth-child(3) {
        width: 5px;
        height: 2px;
        background-color: @borderColor;
      }
    }
  }
  &:hover {
    .menuMainBox_main_image_box {
      background-size: 110% 220px;
    }
  }
}
// 公共样式
.menuMainBox_topBottom {
  position: absolute;
  top: 20px;
  width: 38%;
  height: 20px;
  border-bottom: 2px solid @borderColor;
  border-right: 2px solid @borderColor;
  transform: skew(-45deg);
  border-image: --webkit-linear-gradient(to left, @borderColor, transparent) 1;
  border-image: --moz-linear-gradient(to left, @borderColor, transparent) 1;
  border-image: linear-gradient(to left, @borderColor, transparent) 1;
  z-index: 9999;
  div {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 4px;
    height: 4px;
    border-radius: 4px;
    background-color: @borderColor;
    transform: skew(45deg);
  }
}
//   type === chart
.menuMainBox_topChart {
  width: 100%;
  height: 30px;
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: center;
  background-image: --webkit-linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
  background-image: --moz-linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
  background-image: linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
  &_title {
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 300;
    color: #e6e6e6;
    line-height: 60px;
  }
}
// 卡片主题
.menuMainBox_main {
  position: relative;
  padding-top: 10px;
  width: 100%;
  height: calc(100% - 30px);
  background-image: --webkit-linear-gradient(to top, @topTitleMinLeft, @topTitleBgLeft);
  background-image: --moz-linear-gradient(to top, @topTitleMinLeft, @topTitleBgLeft);
  background-image: linear-gradient(to top, @topTitleMinLeft, @topTitleBgLeft);
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
  &::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
  &_top {
    margin: 0 10px;
    width: calc(100% - 20px);
  }
  &_bottom {
    margin: 0 10px;
    width: calc(100% - 20px);
  }
  &_all {
    margin: 0 10px;
    width: calc(100% - 20px);
    height: calc(100% - 10px);
  }
  &_image {
    margin: 0px 10px;
    width: calc(100% - 20px);
    height: 210px;
    background-size: 100% 200px;
    background-repeat: no-repeat;
  }
}

// 卡片主题
.menuMainBox_main_image {
  position: relative;
  margin: 0;
  width: 100%;
  height: calc(100% - 30px);
  &_box {
    width: 100%;
    height: 200px;
    background-size: 100% 200px;
    background-repeat: no-repeat;
    transition: all 0.3s;
  }
}

// 图例上部图片
.legend {
  position: absolute;
  left: -2px;
  top: -13px;
  width: 104px;
  height: 20px;
  background: url("../../assets/home/legend_line.png") no-repeat center;
}
// tagcard
.menuCardFlex {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  position: relative;
  .borders {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 110px;
    height: 100px;
    background: linear-gradient(to left, @borderColor, @borderColor) left top no-repeat,
      linear-gradient(to bottom, @borderColor, @borderColor) left top no-repeat,
      linear-gradient(to left, @borderColor, @borderColor) right top no-repeat,
      linear-gradient(to bottom, @borderColor, @borderColor) right top no-repeat,
      linear-gradient(to left, @borderColor, @borderColor) left bottom no-repeat,
      linear-gradient(to bottom, @borderColor, @borderColor) left bottom no-repeat,
      linear-gradient(to left, @borderColor, @borderColor) right bottom no-repeat,
      linear-gradient(to left, @borderColor, @borderColor) right bottom no-repeat;
    background-size: 6px 6px, 6px 6px, 6px 6px, 6px 6px;
  }
}
</style>