1 line
57 KiB
JSON
1 line
57 KiB
JSON
{"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 }} <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 }} <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"]}]} |