{"remainingRequest":"F:\\lixiaobang\\suyi1111\\suyiScreen\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!F:\\lixiaobang\\suyi1111\\suyiScreen\\src\\views\\land\\index.vue?vue&type=style&index=0&lang=scss&","dependencies":[{"path":"F:\\lixiaobang\\suyi1111\\suyiScreen\\src\\views\\land\\index.vue","mtime":1675647877694},{"path":"F:\\lixiaobang\\suyi1111\\suyiScreen\\node_modules\\css-loader\\dist\\cjs.js","mtime":1670891605104},{"path":"F:\\lixiaobang\\suyi1111\\suyiScreen\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1670891614531},{"path":"F:\\lixiaobang\\suyi1111\\suyiScreen\\node_modules\\postcss-loader\\src\\index.js","mtime":1670891611021},{"path":"F:\\lixiaobang\\suyi1111\\suyiScreen\\node_modules\\sass-loader\\dist\\cjs.js","mtime":1670891612963},{"path":"F:\\lixiaobang\\suyi1111\\suyiScreen\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1670891604112},{"path":"F:\\lixiaobang\\suyi1111\\suyiScreen\\node_modules\\vue-loader\\lib\\index.js","mtime":1670891614530}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCg0KLmR2LXNjcm9sbC1yYW5raW5nLWJvYXJkIC5yYW5raW5nLWluZm8gLnJhbmsgew0KICBkaXNwbGF5OiBub25lOw0KfQ0K"},{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAy1BA;AACA;AACA","file":"index.vue","sourceRoot":"src/views/land","sourcesContent":["<template>\r\n  <div id=\"index\" ref=\"appRef\" style=\"overflow: hidden\">\r\n    <!-- <div class=\"bg\" :style=\"{\r\n        backgroundImage:\r\n            'url(' + require(`../../assets/${backgroundPic.index}.png`) + ')',\r\n    }\"> -->\r\n\r\n    <!-- <iframe\r\n      name=\"myframe\"\r\n      frameborder=\"0\"\r\n      width=\"100%\"\r\n      height=\"100%\"\r\n      style=\"position: absolute;\"\r\n      ref=\"iframe\"\r\n      :src=\"videoUrl\"\r\n      :key=\"videoUrl\"\r\n    ></iframe> -->\r\n    <div class=\"bg\" @contextmenu.prevent=\"show()\">\r\n      <!-- <div class=\"body-bottom\" @contextmenu.prevent=\"show()\"></div>\r\n      <dv-loading v-if=\"loading\">Loading...</dv-loading> -->\r\n\r\n      <!-- <div v-else class=\"host-body\"> -->\r\n      <headerIndex style=\"position: \" />\r\n      <div class=\"mains\">\r\n        <div class=\"leftContent\">\r\n          <div class=\"kehuCount\">\r\n            <div style=\"color: #fff; font-size: 12px\">客户总数</div>\r\n            <div style=\"color: #fff; font-size: 25px; font-weight: 700\">\r\n              {{ totalCustomer }}&nbsp;&nbsp;<span\r\n                style=\"color: #fff; font-size: 12px\"\r\n                >个</span\r\n              >\r\n            </div>\r\n          </div>\r\n          <div class=\"countInfor\">\r\n            <div\r\n              class=\"content\"\r\n              v-for=\"(item, index) in leftInfodata\"\r\n              :key=\"index\"\r\n            >\r\n              <div\r\n                style=\"width: 100px; height: 100px\"\r\n                :id=\"'echarts' + index\"\r\n              ></div>\r\n              <!-- <img :src=\"item.pic\" style=\"width:30px;height:30px\"/> -->\r\n              <div class=\"text\">\r\n                <div style=\"color: #fff; font-size: 12px\">{{ item.text }}</div>\r\n                <div style=\"color: #fff; font-size: 24px; font-weight: 300\">\r\n                  {{ item.num }}\r\n                </div>\r\n              </div>\r\n              <div\r\n                style=\"\r\n                  color: #fff;\r\n                  font-size: 12px;\r\n                  display: flex;\r\n                  align-items: flex-end;\r\n                  height: 58%;\r\n                \"\r\n              >\r\n                {{ item.unit }}\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"rightContent\">\r\n          <div class=\"kehuCount\">\r\n            <div style=\"color: #fff; font-size: 12px\">主要总数</div>\r\n            <div style=\"color: #fff; font-size: 25px; font-weight: 700\">\r\n              {{ totalTransformationSite }}&nbsp;&nbsp;<span\r\n                style=\"color: #fff; font-size: 12px\"\r\n                >个</span\r\n              >\r\n            </div>\r\n          </div>\r\n          <div class=\"countInfor\">\r\n            <div\r\n              class=\"content\"\r\n              v-for=\"(item, index) in rightInfodata\"\r\n              :key=\"index\"\r\n            >\r\n              <div\r\n                style=\"width: 100px; height: 100px\"\r\n                :id=\"'rightEcharts' + index\"\r\n              ></div>\r\n              <!-- <img :src=\"item.pic\" style=\"width:32px;height:32px\"/> -->\r\n              <div class=\"text\">\r\n                <div style=\"color: #fff; font-size: 12px\">{{ item.text }}</div>\r\n                <div style=\"color: #fff; font-size: 24px; font-weight: 300\">\r\n                  {{ item.num }}\r\n                </div>\r\n              </div>\r\n              <div\r\n                style=\"\r\n                  color: #fff;\r\n                  font-size: 12px;\r\n                  display: flex;\r\n                  align-items: flex-end;\r\n                  height: 58%;\r\n                \"\r\n              >\r\n                {{ item.unit }}\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <!-- </div> -->\r\n        <!-- 背景圆圈装饰 -->\r\n        <div class=\"decorate\">\r\n          <img\r\n            src=\"@/assets/newbanImg/beijingyuan.png\"\r\n            style=\"width: 100%; height: 100%\"\r\n          />\r\n        </div>\r\n        <!-- 江苏地图 -->\r\n        <div class=\"jiangsuMap\" v-show=\"jiangsuMapShow\">\r\n          <img\r\n            src=\"@/assets/newbanImg/jiangsuMap.png\"\r\n            style=\"width: 100%; height: 100%\"\r\n          />\r\n        </div>\r\n        <!-- 江苏地图市级图标 -->\r\n        <div class=\"shijiIcon\" v-show=\"shijiIconShow\">\r\n          <img src=\"@/assets/newbanImg/xuzhou.png\" class=\"xuzhou\" />\r\n          <img src=\"@/assets/newbanImg/lianyungang.png\" class=\"lianyungang\" />\r\n          <img src=\"@/assets/newbanImg/suqian.png\" class=\"suqian\" />\r\n          <img src=\"@/assets/newbanImg/huaian.png\" class=\"huaian\" />\r\n          <img src=\"@/assets/newbanImg/yancheng.png\" class=\"yancheng\" />\r\n          <img src=\"@/assets/newbanImg/yangzhou.png\" class=\"yangzhou\" />\r\n          <img src=\"@/assets/newbanImg/taizhou.png\" class=\"taizhou\" />\r\n          <img src=\"@/assets/newbanImg/nantong.png\" class=\"nantong\" />\r\n          <img src=\"@/assets/newbanImg/zhenjiang.png\" class=\"zhenjiang\" />\r\n          <img src=\"@/assets/newbanImg/suzhou.png\" class=\"suzhou\" />\r\n          <img src=\"@/assets/newbanImg/wuxi.png\" class=\"wuxi\" />\r\n          <img src=\"@/assets/newbanImg/changzhou.png\" class=\"changzhou\" />\r\n          <img\r\n            src=\"@/assets/newbanImg/nanjing.png\"\r\n            class=\"nanjing\"\r\n            v-show=\"!nanjingIconShow\"\r\n          />\r\n          <img\r\n            src=\"@/assets/newbanImg/nanjing.png\"\r\n            class=\"nanjing1\"\r\n            v-show=\"nanjingIconShow\"\r\n            @mouseover=\"regionMouseEnter\"\r\n            @click=\"switchNanJing\"\r\n          />\r\n          <div\r\n            class=\"nanjingxuanshi\"\r\n            v-show=\"nanjingsekuai\"\r\n            @mouseover=\"regionMouseEnter\"\r\n          ></div>\r\n          <img\r\n            src=\"@/assets/newbanImg/nanjingsekuai.png\"\r\n            class=\"nanjingsekuai\"\r\n            @mouseleave=\"regionMouseLeave\"\r\n            @click=\"switchNanJing\"\r\n            v-show=\"!nanjingsekuai\"\r\n          />\r\n        </div>\r\n        <!-- 南京地图-->\r\n        <div class=\"nanjingMap\" v-show=\"!jiangsuMapShow\">\r\n          <img src=\"@/assets/newbanImg/nanjingMap.png\" />\r\n        </div>\r\n        <div class=\"qujiIcon\" v-show=\"qujiIconShow\">\r\n          <img src=\"@/assets/newbanImg/liuhe.png\" class=\"liuhe\" />\r\n          <img src=\"@/assets/newbanImg/pukou.png\" class=\"pukou\" />\r\n          <img src=\"@/assets/newbanImg/yuhua.png\" class=\"yuhua\" />\r\n          <img src=\"@/assets/newbanImg/jianye.png\" class=\"jianye\" />\r\n          <img src=\"@/assets/newbanImg/gulou.png\" class=\"gulou\" />\r\n          <img src=\"@/assets/newbanImg/qixia.png\" class=\"qixia\" />\r\n          <img src=\"@/assets/newbanImg/xuanwu.png\" class=\"xuanwu\" />\r\n          <img src=\"@/assets/newbanImg/qinhuai.png\" class=\"qinhuai\" />\r\n          <img src=\"@/assets/newbanImg/jiangning.png\" class=\"jiangning\" />\r\n          <img src=\"@/assets/newbanImg/gaochun.png\" class=\"gaochun\" />\r\n          <img src=\"@/assets/newbanImg/lishui.png\" class=\"lishui\" />\r\n        </div>\r\n        <!-- 南京黄色定位图标 -->\r\n        <div class=\"datushaIcon\" v-show=\"qujiIconShow\">\r\n          <div class=\"yellowIcon\">\r\n            <div\r\n              style=\"width: 288px; height: 47px\"\r\n              v-show=\"popShow\"\r\n              @mouseover=\"popInfor\"\r\n              @mouseleave=\"popInforLeave\"\r\n            ></div>\r\n            <img\r\n              src=\"@/assets/newbanImg/title.png\"\r\n              style=\"width: 288px; height: 47px; cursor: pointer; z-index: 9999\"\r\n              @mouseover=\"popInfor\"\r\n              @mouseleave=\"popInforLeave\"\r\n              v-show=\"!popShow\"\r\n            />\r\n            \r\n            <img\r\n              src=\"@/assets/newbanImg/yellowIcon.png\"\r\n              style=\"width: 160px; height: 161px; cursor: pointer\"\r\n              @click=\"intoMain\"\r\n            />\r\n          </div>\r\n        </div>\r\n        <div v-show=\"popShow\" id=\"pop\">\r\n          <div class=\"mask\">\r\n            <img\r\n              src=\"@/assets/newbanImg/contentPop.png\"\r\n              style=\"width: 288px; height: 275px\"\r\n              @mouseover=\"popInfor\"\r\n              @mouseleave=\"popInforLeave\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport CustomDvScrollBoard from \"@/components/customDvScrollBoard\";\r\nimport CustomDvScrollBoard1 from \"@/components/customDvScrollBoard1\";\r\nimport drawMixin from \"@/utils/drawMixin\";\r\nimport headerIndex from \"@/components/layout/header\";\r\nimport BasicBox from \"@/components/BasicBox\";\r\nimport dialogComponent from \"@/components/dialog\";\r\nimport Chart from \"./chart.vue\";\r\n// import io from 'socket.io-client'\r\nimport BasicBox5 from \"@/components/BasicBox5\";\r\nimport axios from \"axios\";\r\nimport { getHomePageInfo } from \"@/api/api\";\r\nimport mqtt from \"mqtt\";\r\n// let socketRefs = '';\r\n\r\nexport default {\r\n  mixins: [drawMixin],\r\n  data() {\r\n    return {\r\n      qujiIconShow: false, //区级图标显示\r\n      jiangsuMapShow: true, //江苏地图显示\r\n      shijiIconShow: false, //市级图标降落\r\n      nanjingIconShow: false, // 南京动效图标显示\r\n      nanjingsekuai: true, //南京色块显示\r\n      totalCustomer: \"\", //客户总数\r\n      totalTransformationSite: \"\", //主要总数\r\n      popShow: false,\r\n      leftInfodata: [\r\n        {\r\n          pic: require(\"@/assets/newbanImg/biandianzhan.png\"),\r\n          num: \"\",\r\n          text: \"变电站总数\",\r\n          unit: \"座\",\r\n          name: \"totalSite\",\r\n        },\r\n        {\r\n          pic: require(\"@/assets/newbanImg/daibangongdan.png\"),\r\n          num: \"\",\r\n          text: \"代办工单总数\",\r\n          unit: \"条\",\r\n          name: \"workOrder\",\r\n        },\r\n        {\r\n          pic: require(\"@/assets/newbanImg/jinggao.png\"),\r\n          num: \"\",\r\n          text: \"告警总数\",\r\n          unit: \"条\",\r\n          name: \"warningNum\",\r\n        },\r\n      ],\r\n      rightInfodata: [\r\n        {\r\n          pic: require(\"@/assets/newbanImg/zhuyao.png\"),\r\n          num: \"\",\r\n          text: \"主要总容量\",\r\n          unit: \"kVA\",\r\n          name: \"transformationCapacity\",\r\n        },\r\n        {\r\n          pic: require(\"@/assets/newbanImg/shishifuhe.png\"),\r\n          num: \"\",\r\n          text: \"实时负荷\",\r\n          unit: \"kW\",\r\n          name: \"realTimeLoad\",\r\n        },\r\n        {\r\n          pic: require(\"@/assets/newbanImg/zuori.png\"),\r\n          num: \"\",\r\n          text: \"昨日总电量\",\r\n          unit: \"kWh\",\r\n          name: \"yesterdayTotalElectricity\",\r\n        },\r\n      ],\r\n      Visible: false,\r\n      basicInfoShow: true,\r\n      videoUrl: \"/land/landMap.html\",\r\n      cityName: \"\",\r\n      nanj: true,\r\n      landC: false,\r\n      backgroundPic: {\r\n        index: \"landRes/BG\",\r\n      },\r\n      activeColor: -1,\r\n      loading: false,\r\n      imgListData: {},\r\n      imgList: [],\r\n\r\n      configData: {\r\n        jiangsu: {\r\n          // header:['规划用途', '全省数量', '全省占比'],\r\n          data: [],\r\n        },\r\n        nanjing: {\r\n          // header:['规划用途', '南京数量', '南京占比'],\r\n          data: [],\r\n        },\r\n        zhenjiang: {\r\n          header: [\"规划用途\", \"全省数量\", \"全省占比\"],\r\n          data: [],\r\n        },\r\n        changzhou: {\r\n          header: [],\r\n          data: [],\r\n        },\r\n      },\r\n      config: {\r\n        // header:['规划用途', '全省数量', '全省占比'],\r\n        data: [],\r\n      },\r\n      config1: {\r\n        data: [],\r\n      },\r\n      levelConfigData: { nanjing: { data: [0] } },\r\n      levelConfig: {\r\n        data: [10],\r\n        shape: \"round\",\r\n        waveNum: 2,\r\n      },\r\n      levelConfig1: {\r\n        data: [55],\r\n        shape: \"round\",\r\n        waveNum: 2,\r\n      },\r\n      resourcesListData: {\r\n        nanjing: [\r\n          {\r\n            name: \"南京规划阶段\",\r\n            count: 4,\r\n          },\r\n          {\r\n            name: \"南京计划阶段\",\r\n            count: 4,\r\n          },\r\n          {\r\n            name: \"南京建设阶段\",\r\n            count: 1,\r\n          },\r\n          {\r\n            name: \"南京投运阶段\",\r\n            count: 1,\r\n          },\r\n        ],\r\n        zhenjiang: [\r\n          {\r\n            name: \"规划阶段\",\r\n            count: 62,\r\n          },\r\n          {\r\n            name: \"计划阶段\",\r\n            count: 9,\r\n          },\r\n          {\r\n            name: \"建设阶段\",\r\n            count: 2,\r\n          },\r\n          {\r\n            name: \"投运阶段\",\r\n            count: 5,\r\n          },\r\n        ],\r\n      },\r\n      resourcesList: [],\r\n      centerListData: {\r\n        nanjing: [],\r\n        zhenjiang: [],\r\n      },\r\n      centerList: [\r\n        {\r\n          title: \"不动产权证信息\",\r\n          count: 0,\r\n          imgUrl: require(\"@/assets/landRes/bdc.png\"),\r\n        },\r\n        {\r\n          title: \"土地证信息\",\r\n          count: \"无\",\r\n          imgUrl: require(\"@/assets/landRes/tdz.png\"),\r\n        },\r\n        {\r\n          title: \"房产证信息\",\r\n          count: 0,\r\n          imgUrl: require(\"@/assets/landRes/fdc.png\"),\r\n        },\r\n        {\r\n          title: \"确权情况\",\r\n          count: 0,\r\n          imgUrl: require(\"@/assets/landRes/qq.png\"),\r\n        },\r\n      ],\r\n      rankingConfig: {\r\n        data: [\r\n          {\r\n            name: \"类别1\",\r\n            value: 6,\r\n          },\r\n          {\r\n            name: \"类别2\",\r\n            value: 8,\r\n          },\r\n          {\r\n            name: \"类别3\",\r\n            value: 9,\r\n          },\r\n          {\r\n            name: \"类别4\",\r\n            value: 3,\r\n          },\r\n          {\r\n            name: \"类别5\",\r\n            value: 8,\r\n          },\r\n          {\r\n            name: \"类别6\",\r\n            value: 11,\r\n          },\r\n          {\r\n            name: \"类别7\",\r\n            value: 13,\r\n          },\r\n          {\r\n            name: \"类别7\",\r\n            value: 6,\r\n          },\r\n        ],\r\n        rowNum: 7,\r\n        waitTime: 99999999999999999,\r\n      },\r\n      //   socketId:'',\r\n      //默认数据\r\n      workListData: [],\r\n      workListDatafcz: [],\r\n      //建筑物信息\r\n      //   workList:[\r\n      //      { key: \"建筑物名称\", value: \"\",name:\"jd\" },\r\n      //     { key: \"坐落地址\", value: \"\",name:\"tudi\" },\r\n      //     { key: \"不动产证号\", value: \"\" ,name:\"bdczh\"},\r\n      //     { key: \"权利人\", value: \"\",name:\"qlr\" },\r\n      //     { key: \"坐落\", value: \"\" ,name:\"zl\"},\r\n      //   ],\r\n      workList: [],\r\n      runOnce: true,\r\n      //不动产权证信息\r\n      workListBdc: [],\r\n      //土地证\r\n      workListNew: [],\r\n      //房产证数据\r\n      workListFCZ: [],\r\n      workListqq: [{ key: \"确权信息\", value: \"\", name: \"qq\" }],\r\n      tit: \"建筑物信息\",\r\n      //   socketData:'jiangsu',\r\n      count: 1,\r\n      params: {},\r\n      leftOpen: true,\r\n      rightOpen: true,\r\n      jdNameNew: \"\",\r\n      itemViewM: \"\",\r\n      photoPathsM: [],\r\n      searchShow: true,\r\n      leftNum : []\r\n    };\r\n  },\r\n\r\n  components: {\r\n    headerIndex,\r\n    BasicBox,\r\n    CustomDvScrollBoard,\r\n    CustomDvScrollBoard1,\r\n    dialogComponent,\r\n    BasicBox5,\r\n    Chart,\r\n  },\r\n  computed: {\r\n  },\r\n  mounted() {\r\n    // this.getDataByMqtt(\r\n    //       \"ws://175.24.235.243:8083/mqtt\",\r\n    //       \"tra_topic\"\r\n    // );\r\n    let that = this;\r\n    window.addEventListener(\"message\", function (e) {\r\n      var res = e.data;\r\n      if (res.params != null) {\r\n        that.searchShow = false;\r\n      }\r\n    });\r\n    //市级图标降落\r\n    window.setTimeout(() => {\r\n      that.shijiIconShow = true;\r\n    }, 1600);\r\n    //南京市图标动效显示\r\n    window.setTimeout(() => {\r\n      that.nanjingIconShow = true;\r\n    }, 2600);\r\n    window.setInterval(() => {\r\n      getHomePageInfo({}).then((res) => {\r\n        that.leftNum = []\r\n        console.log(res.data.data,'数据');\r\n        that.totalCustomer = res.data.data.totalCustomer;\r\n        that.totalTransformationSite = res.data.data.totalTransformationSite;\r\n        let realTimeLoad = res.data.data.realTimeLoad.toString();\r\n        let realData = realTimeLoad.substring(0, realTimeLoad.indexOf(\".\") + 3);\r\n        for (var key in res.data.data) {\r\n          for (let i = 0; i < that.leftInfodata.length; i++) {\r\n            if (key == that.leftInfodata[i].name) {\r\n              that.leftInfodata[i].num = res.data.data[key];\r\n              that.leftNum.push(that.leftInfodata[i].num)\r\n            }\r\n          }\r\n          for (let i = 0; i < that.rightInfodata.length; i++) {\r\n            if (key == that.rightInfodata[i].name) {\r\n              that.rightInfodata[i].num = res.data.data[key];\r\n              that.rightInfodata[1].num = realData;\r\n            }\r\n          }\r\n        }\r\n      });\r\n    }, 3000);\r\n      that.leftInfodata.forEach((item, index) => {\r\n              if (index == 0) {\r\n                that.leftInitEcharts(\"echarts\" + index,that.leftNum[0]);\r\n              }else if (index == 1) {\r\n                that.leftInitEcharts(\"echarts\" + index,that.leftNum[1]);\r\n              }else if (index == 2) {\r\n                that.leftInitEcharts(\"echarts\" + index,that.leftNum[2]);\r\n              }\r\n            });\r\n    \r\n    this.rightInfodata.forEach((item, index) => {\r\n      if (index != null) {\r\n        this.rightInitEcharts(\"rightEcharts\" + index);\r\n      }\r\n    });\r\n  },\r\n  beforeDestroy() {\r\n    clearInterval(this.timing);\r\n  },\r\n\r\n  watch: {\r\n    jdNameNew: {\r\n      handler(newVal) {\r\n        this.$refs.iframe.contentWindow.getMessageFromParent(newVal);\r\n      },\r\n    },\r\n  },\r\n  methods: {\r\n    //南京区域移入操作\r\n    regionMouseEnter() {\r\n      this.nanjingsekuai = false;\r\n    },\r\n    //南京区域移出操作\r\n    regionMouseLeave() {\r\n      this.nanjingsekuai = true;\r\n    },\r\n    //切换南京地图\r\n    switchNanJing() {\r\n      this.jiangsuMapShow = false;\r\n      this.shijiIconShow = false;\r\n      window.setTimeout(() => {\r\n        this.qujiIconShow = true;\r\n      }, 1600);\r\n    },\r\n    leftInitEcharts(id,echartsData) {\r\n      let data = [];\r\n      var imageUrl = \"\";\r\n      if (id == \"echarts0\") {\r\n        imageUrl = \"/newbanImg/biandianzhan.png\";\r\n      } else if (id == \"echarts1\") {\r\n        imageUrl = \"/newbanImg/daibangongdan.png\";\r\n      } else if (id == \"echarts2\") {\r\n        imageUrl = \"/newbanImg/jinggao.png\";\r\n      }\r\n      var myChart = this.$echarts.init(document.getElementById(id));\r\n      var option = {\r\n        angleAxis: {\r\n          max: 100,\r\n          // 隐藏刻度线\r\n          show: false,\r\n          startAngle: 90,\r\n        },\r\n        radiusAxis: {\r\n          type: \"category\",\r\n          show: true,\r\n          axisLabel: {\r\n            show: false,\r\n          },\r\n          axisLine: {\r\n            show: false,\r\n          },\r\n          axisTick: {\r\n            show: false,\r\n          },\r\n           data: ['a', 'b', 'c'],\r\n          z: 10,\r\n        },\r\n        polar: {\r\n          radius: \"100%\", //图形大小\r\n        },\r\n        graphic: {\r\n          elements: [\r\n            {\r\n              type: \"image\",\r\n              left: \"center\",\r\n              top: \"middle\",\r\n              style: {\r\n                image: imageUrl,\r\n                width: 20,\r\n                height: 20,\r\n              },\r\n            },\r\n          ],\r\n        },\r\n               series: [\r\n                      {\r\n                        name:'a',\r\n                          type: \"bar\",\r\n                            data: [,'56.77'],\r\n                          showBackground: true,\r\n                          barGap: '-100%',\r\n                          roundCap: true,\r\n                          z: 10,\r\n                          // backgroundStyle: {\r\n                          //     color: 'red',\r\n                          // },\r\n                          coordinateSystem: \"polar\",\r\n                          barWidth: 2,\r\n                          itemStyle: {\r\n                            normal: {\r\n                              color: \"rgb(24,234,253)\",\r\n                            },\r\n                          },\r\n                      },\r\n                       {\r\n                      // 浅色背景\r\n                      type: 'bar',\r\n                      data: [,100],\r\n                      z: 0,\r\n                      silent: true,\r\n                      coordinateSystem: 'polar',\r\n                      barMaxWidth: 3,\r\n                      name:'c',\r\n                      roundCap: true,\r\n                      color: 'rgb(52,69,96)',\r\n                      barGap: '-100%',\r\n                  },\r\n               ]\r\n       \r\n      };\r\n      myChart.setOption(option);\r\n    },\r\n    rightInitEcharts(id) {\r\n      var imageUrl = \"\";\r\n      if (id == \"rightEcharts0\") {\r\n        imageUrl = \"/newbanImg/zhuyao.png\";\r\n      } else if (id == \"rightEcharts1\") {\r\n        imageUrl = \"/newbanImg/shishifuhe.png\";\r\n      } else if (id == \"rightEcharts2\") {\r\n        imageUrl = \"/newbanImg/zuori.png\";\r\n      }\r\n      var myChart = this.$echarts.init(document.getElementById(id));\r\n      var option = {\r\n        angleAxis: {\r\n          max: 100,\r\n          // 隐藏刻度线\r\n          show: false,\r\n          startAngle: 90,\r\n        },\r\n        radiusAxis: {\r\n          type: \"category\",\r\n          show: true,\r\n          axisLabel: {\r\n            show: false,\r\n          },\r\n          axisLine: {\r\n            show: false,\r\n          },\r\n          axisTick: {\r\n            show: false,\r\n          },\r\n          data: ['a', 'b', 'c'],\r\n          z: 10,\r\n        },\r\n        polar: {\r\n          radius: \"100%\", //图形大小\r\n        },\r\n        graphic: {\r\n          elements: [\r\n            {\r\n              type: \"image\",\r\n              left: \"center\",\r\n              top: \"middle\",\r\n              style: {\r\n                image: imageUrl,\r\n                width: 25,\r\n                height: 25,\r\n              },\r\n            },\r\n          ],\r\n        },\r\n        series: [\r\n                       {\r\n                        name:'a',\r\n                          type: \"bar\",\r\n                            data: [,'56.77'],\r\n                          showBackground: true,\r\n                          barGap: '-100%',\r\n                          roundCap: true,\r\n                          z: 10,\r\n                          // backgroundStyle: {\r\n                          //     color: 'red',\r\n                          // },\r\n                          coordinateSystem: \"polar\",\r\n                          barWidth: 2,\r\n                          itemStyle: {\r\n                            normal: {\r\n                              color: \"rgb(24,234,253)\",\r\n                            },\r\n                          },\r\n                      },\r\n                       {\r\n                      // 浅色背景\r\n                      type: 'bar',\r\n                      data: [,'100'],\r\n                      z: 0,\r\n                      silent: true,\r\n                      coordinateSystem: 'polar',\r\n                      barMaxWidth: 3,\r\n                      name:'c',\r\n                      roundCap: true,\r\n                      color: 'rgb(52,69,96)',\r\n                      barGap: '-100%',\r\n                  },\r\n        ],\r\n      };\r\n      myChart.setOption(option);\r\n    },\r\n    intoMain() {\r\n      this.$router.push(\"landChildren\");\r\n    },\r\n    popInfor() {\r\n      // // 鼠标在盒子内移动后盒子变粉\r\n      this.popShow = true;\r\n    },\r\n    popInforLeave() {\r\n      this.popShow = false;\r\n    },\r\n    guid() {\r\n      return \"xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx\".replace(/[xy]/g, function (c) {\r\n        var r = (Math.random() * 16) | 0,\r\n          v = c == \"x\" ? r : (r & 0x3) | 0x8;\r\n        return v.toString(16);\r\n      });\r\n    },\r\n    // mqtt订阅（独立）\r\n    getDataByMqtt(url, topic) {\r\n      const clientId = this.guid(); // 用户名\r\n      const host = url; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt\r\n      const options = {\r\n        // 配置\r\n        // 测试：订阅本机IP\r\n        // host: host,\r\n        // port: port,\r\n\r\n        keepalive: 60, // 心跳时间，默认60s，设置为0禁用\r\n        // username: 'test',  // 用户名（可选）\r\n        // password: 1234,  // 密码（可选）\r\n        clientId: clientId, // 客户端ID，默认随机生成\r\n        protocolId: \"MQTT\",\r\n        protocolVersion: 4,\r\n        clean: true, // false在离线时接收QoS1和2的消息\r\n        reconnectPeriod: 2000, // 重连间隔，默认1000毫秒\r\n        connectTimeout: 30 * 1000, // 收到CONNACK之前的等待时间\r\n        will: {\r\n          // 遗嘱消息（客户端严重断开连接时Broker将自动发送的消息）\r\n          topic: \"WillMsg\", // 要发布的主题\r\n          payload: \"[MQTT-TEST] 遗嘱消息：连接异常断开！\", // 要发布的消息\r\n          qos: 2, // QoS(Quality of Service)，QoS0：只负责发，QoS1：保证消息至少送达1次，QoS2：保证消息到且仅到1次\r\n          retain: false, // 保留标志\r\n        },\r\n      };\r\n      if (this.mqttClient == undefined) {\r\n        this.mqttClient = mqtt.connect(host, options); // 连接\r\n        // const client = mqtt.connect(host, options); // 连接\r\n        // const client = mqtt.connect(host)  // 连接\r\n        // 错误回调\r\n        this.mqttClient.on(\"error\", (err) => {\r\n          console.log(\"[MQTT-TEST] 连接错误……\");\r\n          this.mqttClient.end();\r\n        });\r\n        // 重连回调\r\n        this.mqttClient.on(\"reconnect\", () => {\r\n          console.log(\"[MQTT-TEST] 重连中……\");\r\n        });\r\n        // 连接回调\r\n        this.mqttClient.on(\"connect\", (e) => {\r\n          // console.log(\r\n          // );\r\n          // 订阅\r\n          this.mqttClient.subscribe(topic, { qos: 2 });\r\n          console.log(\"[MQTT-TEST] 连接回调....\");\r\n        });\r\n        // 接收回调\r\n        this.mqttClient.on(\"message\", (topic, message, packet) => {\r\n          console.log(\r\n            `[MQTT-TEST] 从主题 \"${topic}\" 收到的内容: ${message.toString()}`\r\n          );\r\n          // 解析后端数据\r\n          let dataReceived = JSON.parse(message.toString());\r\n          // this.infodata[4].num =  dataReceived.realTimeLoad\r\n          console.log(dataReceived.realTimeLoad, \"dataReceived\");\r\n        });\r\n      }\r\n    },\r\n    show: function () {\r\n      this.leftOpen = true;\r\n      this.rightOpen = true;\r\n      this.basicInfoShow = true;\r\n    },\r\n    \r\n    \r\n    /**\r\n     * 动态传输城市名称\r\n     * @param event\r\n     */\r\n    // handleMessage(event) {\r\n    //   // 获取从iframe页面中传过来的值\r\n    //   // var cmd = event.data.cmd;\r\n    //   this.cityName = event.data.params;\r\n    // },\r\n    build() {\r\n      this.$router.push(\"/build\");\r\n    },\r\n  },\r\n  created() {\r\n    window[\"vueDefinedMyProp\"] = (build) => {\r\n      this.build();\r\n    };\r\n    window.show = this.show;\r\n  },\r\n};\r\n</script>\r\n<style lang=\"scss\">\r\n.dv-scroll-ranking-board .ranking-info .rank {\r\n  display: none;\r\n}\r\n</style>\r\n\r\n<style lang=\"scss\" scoped>\r\n@import \"~@/common/var.scss\";\r\n\r\n/* 返回按钮 */\r\n.back-button a {\r\n  position: absolute;\r\n  right: 22px;\r\n  top: 41px;\r\n  width: 55px;\r\n  height: 21px;\r\n  background-color: transparent;\r\n  border: 0;\r\n  background-image: url(\"../../assets/bt-02.png\");\r\n  cursor: pointer;\r\n}\r\n.bg {\r\n  height: 1920px;\r\n  width: 1080px;\r\n  background: url(\"../../assets/newbanImg/mapBeijing.png\") no-repeat !important;\r\n  background-size: 100% 100% !important;\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  align-content: space-around;\r\n  .mains {\r\n    width: 100%;\r\n    height: calc(100% - 149px);\r\n    display: flex;\r\n    padding: 0 10px;\r\n    box-sizing: border-box;\r\n    justify-content: space-between;\r\n    align-items: flex-end;\r\n    .leftContent {\r\n      width: 20%;\r\n      height: 85%;\r\n      padding: 0 10px;\r\n      .kehuCount {\r\n        height: 15%;\r\n        width: 100%;\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: space-evenly;\r\n        padding-left: 10%;\r\n      }\r\n      .countInfor {\r\n        height: calc(100% - 40%);\r\n        width: 55%;\r\n        .content {\r\n          height: 25%;\r\n          width: 100%;\r\n          display: flex;\r\n          align-items: center;\r\n          justify-content: space-around;\r\n          .text {\r\n            height: 50%;\r\n            display: flex;\r\n            flex-direction: column;\r\n            justify-content: space-between;\r\n          }\r\n        }\r\n      }\r\n    }\r\n    .rightContent {\r\n      width: 20%;\r\n      height: 85%;\r\n      padding: 0 10px;\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: flex-end;\r\n      .kehuCount {\r\n        height: 15%;\r\n        width: 55%;\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: space-evenly;\r\n      }\r\n      .countInfor {\r\n        height: calc(100% - 40%);\r\n        width: 67%;\r\n        .content {\r\n          height: 25%;\r\n          width: 100%;\r\n          display: flex;\r\n          align-items: center;\r\n          justify-content: space-around;\r\n          .text {\r\n            height: 50%;\r\n            display: flex;\r\n            flex-direction: column;\r\n            justify-content: space-between;\r\n          }\r\n        }\r\n      }\r\n    }\r\n    .datushaIcon {\r\n      position: absolute !important;\r\n      top: 32%;\r\n      left: 37%;\r\n      animation: datushaIcon 1s linear;\r\n    }\r\n    @keyframes datushaIcon {\r\n      0% {\r\n        top: 0px;\r\n      } //初始时图片位于顶部\r\n      100% {\r\n        top: 32%;\r\n      } //最终时图片位于300px处\r\n    }\r\n    .yellowIcon {\r\n      position: absolute !important;\r\n      top: 32%;\r\n      left: 37%;\r\n      z-index: 999;\r\n      animation: movepoint 1s infinite;\r\n      display: flex;\r\n      flex-direction: column;\r\n    }\r\n    #pop {\r\n      position: absolute !important;\r\n      top: 5%;\r\n      left: 37%;\r\n      display: inline-block;\r\n      overflow: hidden;\r\n      width: 288px;\r\n      height: 275px;\r\n      .mask {\r\n        position: absolute;\r\n        width: 288px;\r\n        height: 275px;\r\n        top: 0;\r\n        left: 0;\r\n        z-index: 999;\r\n      }\r\n    }\r\n    @keyframes movepoint {\r\n      0% {\r\n        transform: translateY(0px);\r\n      }\r\n      50% {\r\n        transform: translateY(5px);\r\n      }\r\n      100% {\r\n        transform: translateY(0px);\r\n      }\r\n    }\r\n    .mask {\r\n      animation: animate 3s linear;\r\n      overflow: hidden;\r\n    }\r\n    \r\n    @keyframes animate {\r\n      from {\r\n        height: 48px;\r\n        top: 275px;\r\n      }\r\n      to {\r\n        height: 275px;\r\n        top: 0px;\r\n      }\r\n    }\r\n    \r\n  }\r\n  //背景圆圈的效果\r\n  .decorate {\r\n    width: 1091px;\r\n    height: 934px;\r\n    position: absolute;\r\n    top: 9%;\r\n    left: 22%;\r\n    -webkit-animation: scaleout 1.5s infinite ease-in-out;\r\n    animation: scaleout 1.5s infinite ease-in-out;\r\n  }\r\n  @-webkit-keyframes scaleout {\r\n    0% {\r\n      -webkit-transform: scale(1);\r\n    }\r\n\r\n    100% {\r\n      -webkit-transform: scale(1.02);\r\n      opacity: 0;\r\n    }\r\n  }\r\n  @keyframes scaleout {\r\n    0% {\r\n      transform: scale(1);\r\n      -webkit-transform: scale(1);\r\n    }\r\n\r\n    100% {\r\n      transform: scale(1.02);\r\n      -webkit-transform: scale(1.02);\r\n      opacity: 0;\r\n    }\r\n  }\r\n  //江苏地图效果\r\n  .jiangsuMap {\r\n    width: 1920px;\r\n    height: 1080px;\r\n    position: absolute;\r\n    top: 0;\r\n    -webkit-animation: scalemap 1.5s infinite ease-in-out;\r\n    animation: scalemap 1.5s infinite ease-in-out;\r\n    animation-iteration-count: 1;\r\n    -webkit-animation-iteration-count: 1;\r\n    opacity: 1;\r\n    z-index: 100;\r\n  }\r\n  @-webkit-keyframes scalemap {\r\n    0% {\r\n      -webkit-transform: scale(0);\r\n      opacity: 0;\r\n    }\r\n\r\n    100% {\r\n      -webkit-transform: scale(1);\r\n      opacity: 1;\r\n    }\r\n  }\r\n  @keyframes scalemap {\r\n    0% {\r\n      transform: scale(0);\r\n      -webkit-transform: scale(0);\r\n      opacity: 0;\r\n    }\r\n\r\n    100% {\r\n      transform: scale(1);\r\n      -webkit-transform: scale(1);\r\n      opacity: 1;\r\n    }\r\n  }\r\n  //南京地图\r\n  .nanjingMap {\r\n    width: 1920px;\r\n    height: 1080px;\r\n    position: absolute;\r\n    top: 0;\r\n    -webkit-animation: scalemap 1.5s infinite ease-in-out;\r\n    animation: scalemap 1.5s infinite ease-in-out;\r\n    animation-iteration-count: 1;\r\n    -webkit-animation-iteration-count: 1;\r\n    opacity: 1;\r\n    z-index: 100;\r\n  }\r\n  //江苏省市级图标\r\n  .shijiIcon {\r\n    width: 1920px;\r\n    height: 1080px;\r\n    position: absolute;\r\n    z-index: 200;\r\n    top: 0;\r\n  }\r\n  .xuzhou {\r\n    animation: xuzhou 1s linear; //动画名称为falling，持续时间1s，动画速度变化线性\r\n    animation-iteration-count: 1;\r\n    width: 68px;\r\n    height: 45px;\r\n    position: absolute;\r\n    top: 21%;\r\n    left: 30%;\r\n  }\r\n  .lianyungang {\r\n    animation: lianyungang 1s linear; //动画名称为falling，持续时间1s，动画速度变化线性\r\n    animation-iteration-count: 1;\r\n    width: 68px;\r\n    height: 45px;\r\n    position: absolute;\r\n    top: 18%;\r\n    left: 45%;\r\n  }\r\n  .suqian {\r\n    animation: suqian 1s linear; //动画名称为falling，持续时间1s，动画速度变化线性\r\n    animation-iteration-count: 1;\r\n    width: 68px;\r\n    height: 45px;\r\n    position: absolute;\r\n    top: 28%;\r\n    left: 38%;\r\n  }\r\n  .huaian {\r\n    animation: huaian 1s linear; //动画名称为falling，持续时间1s，动画速度变化线性\r\n    animation-iteration-count: 1;\r\n    width: 68px;\r\n    height: 45px;\r\n    position: absolute;\r\n    top: 35%;\r\n    left: 40%;\r\n  }\r\n  .yancheng {\r\n    animation: yancheng 1s linear; //动画名称为falling，持续时间1s，动画速度变化线性\r\n    animation-iteration-count: 1;\r\n    width: 68px;\r\n    height: 45px;\r\n    position: absolute;\r\n    top: 30%;\r\n    left: 53%;\r\n  }\r\n  .yangzhou {\r\n    animation: yangzhou 1s linear; //动画名称为falling，持续时间1s，动画速度变化线性\r\n    animation-iteration-count: 1;\r\n    width: 68px;\r\n    height: 45px;\r\n    position: absolute;\r\n    top: 43%;\r\n    left: 46%;\r\n  }\r\n  .taizhou {\r\n    animation: taizhou 1s linear; //动画名称为falling，持续时间1s，动画速度变化线性\r\n    animation-iteration-count: 1;\r\n    width: 68px;\r\n    height: 45px;\r\n    position: absolute;\r\n    top: 47%;\r\n    left: 53%;\r\n  }\r\n  .nantong {\r\n    animation: nantong 1s linear; //动画名称为falling，持续时间1s，动画速度变化线性\r\n    animation-iteration-count: 1;\r\n    width: 68px;\r\n    height: 45px;\r\n    position: absolute;\r\n    top: 47%;\r\n    left: 63%;\r\n  }\r\n  .zhenjiang {\r\n    animation: zhenjiang 1s linear; //动画名称为falling，持续时间1s，动画速度变化线性\r\n    animation-iteration-count: 1;\r\n    width: 68px;\r\n    height: 45px;\r\n    position: absolute;\r\n    top: 52%;\r\n    left: 46%;\r\n  }\r\n  .wuxi {\r\n    animation: wuxi 1s linear; //动画名称为falling，持续时间1s，动画速度变化线性\r\n    animation-iteration-count: 1;\r\n    width: 68px;\r\n    height: 45px;\r\n    position: absolute;\r\n    top: 62%;\r\n    left: 56%;\r\n  }\r\n  .suzhou {\r\n    animation: suzhou 1s linear; //动画名称为falling，持续时间1s，动画速度变化线性\r\n    animation-iteration-count: 1;\r\n    width: 68px;\r\n    height: 45px;\r\n    position: absolute;\r\n    top: 65%;\r\n    left: 61%;\r\n  }\r\n  .changzhou {\r\n    animation: changzhou 1s linear; //动画名称为falling，持续时间1s，动画速度变化线性\r\n    animation-iteration-count: 1;\r\n    width: 68px;\r\n    height: 45px;\r\n    position: absolute;\r\n    top: 61%;\r\n    left: 46%;\r\n  }\r\n  .nanjing {\r\n    animation: nanjing 1s linear; //动画名称为falling，持续时间1s，动画速度变化线性\r\n    animation-iteration-count: 1;\r\n    width: 167px;\r\n    height: 168px;\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 36%;\r\n  }\r\n  .nanjing1 {\r\n    animation: movepoint 1s infinite;\r\n    z-index: 200;\r\n    cursor: pointer;\r\n    width: 167px;\r\n    height: 168px;\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 36%;\r\n  }\r\n  .nanjingxuanshi {\r\n    width: 182px;\r\n    height: 282px;\r\n    position: absolute;\r\n    top: 46%;\r\n    left: 36%;\r\n    cursor: pointer;\r\n  }\r\n  .nanjingsekuai {\r\n    width: 182px;\r\n    height: 282px;\r\n    position: absolute;\r\n    top: 46%;\r\n    left: 36%;\r\n    cursor: pointer;\r\n  }\r\n  @keyframes xuzhou {\r\n    0% {\r\n      top: 0px;\r\n    } //初始时图片位于顶部\r\n    100% {\r\n      top: 21%;\r\n    } //最终时图片位于300px处\r\n  }\r\n  @keyframes lianyungang {\r\n    0% {\r\n      top: 0px;\r\n    } //初始时图片位于顶部\r\n    100% {\r\n      top: 18%;\r\n    } //最终时图片位于300px处\r\n  }\r\n  @keyframes suqian {\r\n    0% {\r\n      top: 0px;\r\n    } //初始时图片位于顶部\r\n    100% {\r\n      top: 28%;\r\n    } //最终时图片位于300px处\r\n  }\r\n  @keyframes huaian {\r\n    0% {\r\n      top: 0px;\r\n    } //初始时图片位于顶部\r\n    100% {\r\n      top: 35%;\r\n    } //最终时图片位于300px处\r\n  }\r\n  @keyframes yancheng {\r\n    0% {\r\n      top: 0px;\r\n    } //初始时图片位于顶部\r\n    100% {\r\n      top: 30%;\r\n    } //最终时图片位于300px处\r\n  }\r\n  @keyframes yangzhou {\r\n    0% {\r\n      top: 0px;\r\n    } //初始时图片位于顶部\r\n    100% {\r\n      top: 43%;\r\n    } //最终时图片位于300px处\r\n  }\r\n  @keyframes taizhou {\r\n    0% {\r\n      top: 0px;\r\n    } //初始时图片位于顶部\r\n    100% {\r\n      top: 47%;\r\n    } //最终时图片位于300px处\r\n  }\r\n  @keyframes nantong {\r\n    0% {\r\n      top: 0px;\r\n    } //初始时图片位于顶部\r\n    100% {\r\n      top: 47%;\r\n    } //最终时图片位于300px处\r\n  }\r\n  @keyframes zhenjiang {\r\n    0% {\r\n      top: 0px;\r\n    } //初始时图片位于顶部\r\n    100% {\r\n      top: 52%;\r\n    } //最终时图片位于300px处\r\n  }\r\n  @keyframes changzhou {\r\n    0% {\r\n      top: 0px;\r\n    } //初始时图片位于顶部\r\n    100% {\r\n      top: 61%;\r\n    } //最终时图片位于300px处\r\n  }\r\n  @keyframes wuxi {\r\n    0% {\r\n      top: 0px;\r\n    } //初始时图片位于顶部\r\n    100% {\r\n      top: 62%;\r\n    } //最终时图片位于300px处\r\n  }\r\n  @keyframes suzhou {\r\n    0% {\r\n      top: 0px;\r\n    } //初始时图片位于顶部\r\n    100% {\r\n      top: 65%;\r\n    } //最终时图片位于300px处\r\n  }\r\n  @keyframes nanjing {\r\n    0% {\r\n      top: 0px;\r\n    } //初始时图片位于顶部\r\n    100% {\r\n      top: 50%;\r\n    } //最终时图片位于300px处\r\n  }\r\n  //区级图标\r\n  .qujiIcon {\r\n    width: 1920px;\r\n    height: 1080px;\r\n    position: absolute;\r\n    z-index: 200;\r\n    top: 0;\r\n    .liuhe {\r\n      width: 103px;\r\n      height: 75px;\r\n      position: absolute;\r\n      top: 24%;\r\n      left: 40%;\r\n      animation: liuhe 1s linear;\r\n    }\r\n    @keyframes liuhe {\r\n      0% {\r\n        top: 0px;\r\n      } //初始时图片位于顶部\r\n      100% {\r\n        top: 24%;\r\n      } //最终时图片位于300px处\r\n    }\r\n    .pukou {\r\n      width: 103px;\r\n      height: 75px;\r\n      position: absolute;\r\n      top: 41%;\r\n      left: 31%;\r\n      animation: pukou 1s linear;\r\n    }\r\n    @keyframes pukou {\r\n      0% {\r\n        top: 0px;\r\n      } //初始时图片位于顶部\r\n      100% {\r\n        top: 41%;\r\n      } //最终时图片位于300px处\r\n    }\r\n    .yuhua {\r\n      width: 103px;\r\n      height: 75px;\r\n      position: absolute;\r\n      top: 43%;\r\n      left: 36%;\r\n      animation: yuhua 1s linear;\r\n    }\r\n    @keyframes yuhua {\r\n      0% {\r\n        top: 0px;\r\n      } //初始时图片位于顶部\r\n      100% {\r\n        top: 43%;\r\n      } //最终时图片位于300px处\r\n    }\r\n    .jianye {\r\n      width: 103px;\r\n      height: 75px;\r\n      position: absolute;\r\n      top: 37%;\r\n      left: 38%;\r\n      animation: jianye 1s linear;\r\n    }\r\n    @keyframes jianye {\r\n      0% {\r\n        top: 0px;\r\n      } //初始时图片位于顶部\r\n      100% {\r\n        top: 37%;\r\n      } //最终时图片位于300px处\r\n    }\r\n    .gulou {\r\n      width: 103px;\r\n      height: 75px;\r\n      position: absolute;\r\n      top: 33%;\r\n      left: 38.5%;\r\n      animation: gulou 1s linear;\r\n    }\r\n    @keyframes gulou {\r\n      0% {\r\n        top: 0px;\r\n      } //初始时图片位于顶部\r\n      100% {\r\n        top: 33%;\r\n      } //最终时图片位于300px处\r\n    }\r\n    .qixia {\r\n      width: 103px;\r\n      height: 75px;\r\n      position: absolute;\r\n      top: 30%;\r\n      left: 44%;\r\n      animation: qixia 1s linear;\r\n    }\r\n    @keyframes qixia {\r\n      0% {\r\n        top: 0px;\r\n      } //初始时图片位于顶部\r\n      100% {\r\n        top: 30%;\r\n      } //最终时图片位于300px处\r\n    }\r\n    .xuanwu {\r\n      width: 103px;\r\n      height: 75px;\r\n      position: absolute;\r\n      top: 35%;\r\n      left: 42%;\r\n      animation: xuanwu 1s linear;\r\n    }\r\n    @keyframes xuanwu {\r\n      0% {\r\n        top: 0px;\r\n      } //初始时图片位于顶部\r\n      100% {\r\n        top: 35%;\r\n      } //最终时图片位于300px处\r\n    }\r\n    .qinhuai {\r\n      width: 103px;\r\n      height: 75px;\r\n      position: absolute;\r\n      top: 41%;\r\n      left: 42%;\r\n      animation: qinhuai 1s linear;\r\n    }\r\n    @keyframes qinhuai {\r\n      0% {\r\n        top: 0px;\r\n      } //初始时图片位于顶部\r\n      100% {\r\n        top: 41%;\r\n      } //最终时图片位于300px处\r\n    }\r\n    .jiangning {\r\n      width: 103px;\r\n      height: 75px;\r\n      position: absolute;\r\n      top: 45%;\r\n      left: 46%;\r\n      animation: jiangning 1s linear;\r\n    }\r\n    @keyframes jiangning {\r\n      0% {\r\n        top: 0px;\r\n      } //初始时图片位于顶部\r\n      100% {\r\n        top: 45%;\r\n      } //最终时图片位于300px处\r\n    }\r\n    .gaochun {\r\n      width: 103px;\r\n      height: 75px;\r\n      position: absolute;\r\n      top: 70%;\r\n      left: 60%;\r\n      animation: gaochun 1s linear;\r\n    }\r\n    @keyframes gaochun {\r\n      0% {\r\n        top: 0px;\r\n      } //初始时图片位于顶部\r\n      100% {\r\n        top: 70%;\r\n      } //最终时图片位于300px处\r\n    }\r\n    .lishui {\r\n      width: 103px;\r\n      height: 75px;\r\n      position: absolute;\r\n      top: 52%;\r\n      left: 57%;\r\n      animation: lishui 1s linear;\r\n    }\r\n    @keyframes lishui {\r\n      0% {\r\n        top: 0px;\r\n      } //初始时图片位于顶部\r\n      100% {\r\n        top: 52%;\r\n      } //最终时图片位于300px处\r\n    }\r\n  }\r\n}\r\n.back-button a:hover {\r\n  background-image: url(\"../../assets/bt-002.png\");\r\n}\r\n.body-left {\r\n  // width: 500px!important;\r\n  // background: url('../../assets/left.png') no-repeat!important;\r\n}\r\n.body-right {\r\n  // width: 500px!important;\r\n  // background: url('../../assets/right.png') no-repeat!important;\r\n}\r\n\r\n.body-bottom {\r\n  height: 130px !important;\r\n  background: url(\"../../assets/down.png\") no-repeat !important;\r\n}\r\n\r\n.informationOverview {\r\n  // width: 50%;\r\n  width: 43%;\r\n  display: inline-block;\r\n  margin-bottom: 10px;\r\n  padding: 20px 0 10px 0;\r\n\r\n  .cont {\r\n    height: 100%;\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: space-evenly;\r\n    padding-left: 15px;\r\n\r\n    p {\r\n      text-align: center;\r\n\r\n      &:nth-child(1) {\r\n        color: #53a0ca;\r\n        font-weight: bolder;\r\n        border-bottom: 1px solid #103a55;\r\n        padding-bottom: 5px;\r\n      }\r\n\r\n      &:nth-child(2) {\r\n        padding-top: 5px;\r\n        font-weight: bolder;\r\n        font-size: 24px;\r\n      }\r\n    }\r\n  }\r\n\r\n  img {\r\n    float: left;\r\n    padding-left: 30px;\r\n  }\r\n}\r\n\r\n.left {\r\n  height: 100%;\r\n  // width: 26%;\r\n  width: 24%;\r\n  margin-left: 2%;\r\n  padding-top: 15px;\r\n}\r\n\r\n.right {\r\n  height: 100%;\r\n  // width: 29%;\r\n  // margin-right: 1%;\r\n  width: 25%;\r\n  margin-right: 3%;\r\n  padding-top: 15px;\r\n\r\n  .panelBox {\r\n    display: flex;\r\n  }\r\n\r\n  .panel {\r\n    // margin: 20px;\r\n    position: relative;\r\n    text-align: center;\r\n\r\n    span {\r\n      position: absolute;\r\n      position: absolute;\r\n      top: 41px;\r\n      left: 42px;\r\n      font-weight: bold;\r\n    }\r\n\r\n    div {\r\n      color: $default-font-color;\r\n      margin-top: 10px;\r\n      font-weight: bold;\r\n    }\r\n\r\n    &:not(:last-child) {\r\n      margin-right: 20px;\r\n      text-align: center;\r\n    }\r\n\r\n    &_box {\r\n      width: 98px;\r\n      height: 98px;\r\n      background-size: 100%;\r\n    }\r\n\r\n    // background-image: url(\"~@/assets/wisdom2/panel-blue.png\");\r\n    background-repeat: no-repeat;\r\n    background-position: top;\r\n\r\n    // &:nth-child(2) {\r\n    //   background-image: url(\"~@/assets/wisdom2/panel-green.png\")\r\n    // }\r\n\r\n    // &:nth-child(3) {\r\n    //   background-image: url(\"~@/assets/wisdom2/panel-blue.png\")\r\n    // }\r\n\r\n    // &:nth-child(4) {\r\n    //   background-image: url(\"~@/assets/wisdom2/panel-green.png\")\r\n    // }\r\n  }\r\n}\r\n\r\n.center {\r\n  width: 41%;\r\n  height: 20%;\r\n  padding: 0 10px;\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  align-content: flex-start;\r\n  position: relative;\r\n  left: 30%;\r\n}\r\n\r\n.scaleDesign {\r\n  /* display: inline-block; */\r\n  width: 50%;\r\n  text-align: center;\r\n  /* line-height: 90px; */\r\n  height: 100%;\r\n  display: block;\r\n  float: left;\r\n  margin-top: 10px;\r\n\r\n  &_item {\r\n    height: 50%;\r\n    height: 50%;\r\n    display: flex;\r\n\r\n    padding-left: 10px;\r\n    justify-content: center;\r\n\r\n    &:first-child {\r\n      margin-bottom: 20px;\r\n    }\r\n\r\n    .dv-water-pond-level {\r\n      display: -webkit-inline-box;\r\n    }\r\n  }\r\n}\r\n\r\n.scaleDesign2 {\r\n  display: inline-block;\r\n\r\n  width: 50%;\r\n  text-align: center;\r\n\r\n  &_item {\r\n    margin-bottom: 15px;\r\n  }\r\n}\r\n\r\n.leftModel {\r\n  width: 24%;\r\n  left: 1%;\r\n  top: 35%;\r\n  position: absolute;\r\n  transition: left 0.5s linear 0s;\r\n  .box {\r\n    font-size: 14px;\r\n    background: url(\"~@/assets/landRes/boxM.png\") no-repeat;\r\n    // background-size: 100% 95%;\r\n    width: 50%;\r\n    margin: 1%;\r\n    text-align: center;\r\n    display: inline-block;\r\n    p {\r\n      color: #b4e9ff;\r\n      font-size: 16px;\r\n      font-weight: 700;\r\n      padding: 15px 0;\r\n      width: 75%;\r\n    }\r\n    img {\r\n      float: left;\r\n      padding-left: 10px;\r\n      padding-top: 6px;\r\n    }\r\n  }\r\n  .box:hover {\r\n    background: url(\"~@/assets/landRes/boxX.png\") no-repeat;\r\n    p {\r\n      color: #00fcff;\r\n      text-shadow: 0 0 5px #00fcff, 0 0 10px #00fcff, 0 0 15px #00fcff,\r\n        0 0 20px #00fcff;\r\n    }\r\n  }\r\n  .boxActive {\r\n    background: url(\"~@/assets/landRes/boxX.png\") no-repeat;\r\n    width: 50%;\r\n    margin: 1%;\r\n    text-align: center;\r\n    display: inline-block;\r\n    font-size: 14px;\r\n    p {\r\n      color: #00fcff;\r\n      text-shadow: 0 0 5px #00fcff, 0 0 10px #00fcff, 0 0 15px #00fcff,\r\n        0 0 20px #00fcff;\r\n      font-size: 16px;\r\n      font-weight: 700;\r\n      padding: 15px 0;\r\n      width: 75%;\r\n    }\r\n    img {\r\n      float: left;\r\n      padding-left: 10px;\r\n      padding-top: 6px;\r\n    }\r\n  }\r\n}\r\n.leftClose {\r\n  left: -350px;\r\n  transition: left 0.5s linear 0s;\r\n}\r\n.rightModel {\r\n  right: 1%;\r\n  position: absolute;\r\n  height: 100%;\r\n  width: 10.5%;\r\n  top: 25%;\r\n\r\n  .search-middle {\r\n    height: 15%;\r\n    background: #fff;\r\n    border: 2px solid #4cfc9ba1;\r\n    // width: 80%;\r\n    width: 100%;\r\n    float: right;\r\n  }\r\n  .search-middle li {\r\n    width: 100%;\r\n    padding: 0px 10px;\r\n    margin: 15px 0px;\r\n    // text-align: center;\r\n    .liBox {\r\n      width: 30%;\r\n      height: 30px;\r\n      text-align: center;\r\n      line-height: 30px;\r\n      display: inline-block;\r\n      color: #fff;\r\n    }\r\n  }\r\n  .search-middle .search-container {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 100%;\r\n  }\r\n  .search-middle .search-container input:focus {\r\n    outline: none;\r\n  }\r\n  .search-middle .search-container input::-webkit-input-placeholder {\r\n    color: rgb(211, 245, 255);\r\n  }\r\n  .search-middle .search-container button {\r\n    width: 80px;\r\n    height: 100%;\r\n    position: absolute;\r\n    right: 0;\r\n    top: 0;\r\n    background-color: transparent;\r\n    background: 10px 10px url(~@/assets/search-button.png) no-repeat;\r\n    border: 0;\r\n    border-radius: 0;\r\n    text-align: center;\r\n    line-height: 30px;\r\n    cursor: pointer;\r\n    padding-left: 20px;\r\n    color: #b4e9ff;\r\n  }\r\n  .rightShow {\r\n    top: 5%;\r\n    position: absolute;\r\n    right: 0px;\r\n    width: 100%;\r\n    transition: right 0.5s linear 0s;\r\n    .basicInfo {\r\n      margin-top: 20px;\r\n      li {\r\n        padding: 15px 0 !important;\r\n      }\r\n    }\r\n    .dialogN {\r\n      margin-top: 20px;\r\n    }\r\n  }\r\n\r\n  .rightClose {\r\n    right: -500px;\r\n    transition: right 0.5s linear 0s;\r\n  }\r\n}\r\n\r\n.d1 {\r\n  // position: absolute;\r\n  // left: 830px;\r\n  // top: 395px;\r\n  // left: 15px;\r\n  // top: 395px;\r\n  width: 154px;\r\n  height: 53px;\r\n  line-height: 35px;\r\n  text-align: center;\r\n  background: url(\"~@/assets/landRes/1-dialog.png\") no-repeat center;\r\n\r\n  &:hover {\r\n    background: url(\"~@/assets/landRes/1-dialog-highlight.png\") no-repeat center;\r\n    cursor: pointer;\r\n    color: #fff;\r\n  }\r\n}\r\n.d2 {\r\n  // position: absolute;\r\n  // left: 1060px;\r\n  // top: 485px;\r\n  width: 182px;\r\n  height: 53px;\r\n  line-height: 35px;\r\n  text-align: center;\r\n  background: url(\"~@/assets/landRes/2-dialog.png\") no-repeat center;\r\n\r\n  &:hover {\r\n    background: url(\"~@/assets/landRes/2-dialog-highlight.png\") no-repeat center;\r\n    cursor: pointer;\r\n    color: #fff;\r\n  }\r\n}\r\n\r\n.d3 {\r\n  position: absolute;\r\n  left: 520px;\r\n  top: 515px;\r\n  width: 234px;\r\n  height: 53px;\r\n  line-height: 35px;\r\n  text-align: center;\r\n  font-size: 14px;\r\n  background: url(\"~@/assets/landRes/3-dialog.png\") no-repeat center;\r\n\r\n  &:hover {\r\n    background: url(\"~@/assets/landRes/3-dialog-highlight.png\") no-repeat center;\r\n    cursor: pointer;\r\n    color: #fff;\r\n  }\r\n}\r\n.footer-nav {\r\n  position: absolute;\r\n  /* top: 220px; */\r\n  top: 105px;\r\n  left: 1%;\r\n  margin: auto;\r\n  /* transform: scale(1, 1) translate(-50%, -50%); */\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: space-between;\r\n  width: 98%;\r\n}\r\n.baseBlock {\r\n  cursor: pointer;\r\n  width: 11.3%;\r\n  height: 100px;\r\n  background: url(\"../../assets/newimgs/zongshuKuang.png\") no-repeat;\r\n  background-size: 100% 100%;\r\n  display: flex;\r\n  flex-flow: row nowrap;\r\n  // justify-content: space-between;\r\n  align-items: center;\r\n  padding: 0 15px;\r\n  box-sizing: border-box;\r\n}\r\n.baseBlock p {\r\n  width: 40%;\r\n  font-size: 22px;\r\n  color: #fff;\r\n  letter-spacing: 1px;\r\n  text-align: left;\r\n}\r\n@import \"../../assets/scss/index.scss\";\r\n</style>\r\n"]}]}