1 line
52 KiB
JSON
1 line
52 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":1673862895951},{"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:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoNCi5kdi1zY3JvbGwtcmFua2luZy1ib2FyZCAucmFua2luZy1pbmZvIC5yYW5rIHsNCiAgZGlzcGxheTogbm9uZTsNCn0NCg=="},{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAs/BA;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\r\n style=\"position: \"\r\n />\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;\">{{totalCustomer}} <span style=\"color:#fff;font-size:12px\">个</span></div>\r\n </div>\r\n <div class=\"countInfor\">\r\n <div class=\"content\" v-for=\"(item,index) in leftInfodata\" :key=\"index\">\r\n <div style=\"width:100px;height:100px\" :id=\"'echarts'+ index\"></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;\">{{item.num}}</div>\r\n </div>\r\n <div style=\"color:#fff;font-size:12px;display: flex;align-items: flex-end;height:58%\">{{item.unit}}</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;\">{{totalTransformationSite}} <span style=\"color:#fff;font-size:12px\">个</span></div>\r\n </div>\r\n <div class=\"countInfor\">\r\n <div class=\"content\" v-for=\"(item,index) in rightInfodata\" :key=\"index\">\r\n <div style=\"width:100px;height:100px\" :id=\"'rightEcharts'+ index\"></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;\">{{item.num}}</div>\r\n </div>\r\n <div style=\"color:#fff;font-size:12px;display: flex;align-items: flex-end;height:58%\">{{item.unit}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- </div> -->\r\n <div class=\"yellowIcon\">\r\n <div style=\"width:288px;height:47px;\" v-show=\"popShow\" @mouseover=\"popInfor\" @mouseleave=\"popInforLeave\"></div>\r\n <img src=\"@/assets/newbanImg/title.png\" style=\"width:288px;height:47px;cursor: pointer;z-index:9999\" @mouseover=\"popInfor\" @mouseleave=\"popInforLeave\" v-show=\"!popShow\"/>\r\n <img src=\"@/assets/newbanImg/yellowIcon.png\" style=\"width:160px;height:161px;cursor: pointer;\" @click=\"intoMain\"/>\r\n </div>\r\n <div v-show=\"popShow\" id=\"pop\">\r\n <div class=\"mask\">\r\n <img src=\"@/assets/newbanImg/contentPop.png\" style=\"width:288px;height:275px;\" @mouseover=\"popInfor\" @mouseleave=\"popInforLeave\"/>\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 totalCustomer:'',//客户总数\r\n totalTransformationSite:'',//主要总数\r\n popShow:false,\r\n leftInfodata:[\r\n {pic:require('@/assets/newbanImg/biandianzhan.png'),num:'',text:'变电站总数',unit:'座',name:'totalSite'},\r\n {pic:require('@/assets/newbanImg/daibangongdan.png'),num:'',text:\"代办工单总数\",unit:'条',name:'workOrder'},\r\n {pic:require('@/assets/newbanImg/jinggao.png'),num:'',text:\"告警总数\",unit:'条',name:'warningNum'},\r\n ],\r\n rightInfodata:[\r\n {pic:require('@/assets/newbanImg/zhuyao.png'),num:'',text:'主要总容量',unit:'kVA',name:'transformationCapacity'},\r\n {pic:require('@/assets/newbanImg/shishifuhe.png'),num:'',text:\"实时负荷\",unit:'kW',name:'realTimeLoad'},\r\n {pic:require('@/assets/newbanImg/zuori.png'),num:'',text:\"昨日总电量\",unit:'kWh',name:'yesterdayTotalElectricity'},\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 zhengjiang: {\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 zhengjiang: [\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 zhengjiang: [],\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 };\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 // query() {\r\n // return this.socketData\r\n // },\r\n // 'socketRefs': function(){\r\n // return this.firstname + '-' + this.lastname\r\n // }\r\n },\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 this.cancelLoading();\r\n // this.initWebSocket();\r\n // window.addEventListener(\"message\", this.handleMessage);\r\n this.go(\"nanjing\");\r\n // this.type=this.params.type\r\n // this.getJdData(this.params.type)\r\n // this.workListData = this.workList\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.setInterval(()=>{\r\n getHomePageInfo({\r\n }).then((res)=>{\r\n this.totalCustomer = res.data.data.totalCustomer\r\n this.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 < this.leftInfodata.length; i++) {\r\n if (key == this.leftInfodata[i].name) {\r\n this.leftInfodata[i].num = res.data.data[key]\r\n }\r\n }\r\n for (let i = 0; i < this.rightInfodata.length; i++) {\r\n if (key == this.rightInfodata[i].name) {\r\n this.rightInfodata[i].num = res.data.data[key]\r\n this.rightInfodata[1].num = realData\r\n }\r\n }\r\n }\r\n })\r\n },3000)\r\n this.leftInfodata.forEach((item,index) => {\r\n if (index != null) {\r\n this.leftInitEcharts('echarts' + index)\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 leftInitEcharts(id){\r\n console.log(id,'id');\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 },\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 type: 'bar',\r\n data: ['56.77'],\r\n showBackground: true,\r\n roundCap: true,\r\n // backgroundStyle: {\r\n // color: 'rgba(64, 76, 76, 1)',\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 myChart.setOption(option);\r\n },\r\n rightInitEcharts(id){\r\n console.log(id,'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 },\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 type: 'bar',\r\n data: ['56.77'],\r\n showBackground: true,\r\n roundCap: true,\r\n // backgroundStyle: {\r\n // color: 'rgba(64, 76, 76, 1)',\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 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 },\r\n go(val) {\r\n if (val == \"nanjing\") {\r\n this.nanj = false;\r\n this.landC = true;\r\n // console.log(\"\")\r\n this.imgList = this.imgListData.nanjing;\r\n // this.centerList = this.centerListData.nanjing\r\n this.config = this.configData.nanjing.data;\r\n this.resourcesList = this.resourcesListData.nanjing;\r\n this.levelConfig.data = this.levelConfigData.nanjing.data;\r\n // this.$forceUpdate();\r\n // this.cancelLoading();\r\n } else if (val == \"landChild\") {\r\n this.$router.push(\"/landChild\");\r\n this.landC = false;\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 getJdData(val) {\r\n axios\r\n .get(\"/json/qqData.json\")\r\n .then((result) => {\r\n for (var i = 0; i < result.data.length; i++) {\r\n if (result.data[i].jd == this.params.params) {\r\n this.workListqq[0].value = result.data[i].qq;\r\n }\r\n }\r\n })\r\n .catch((error) => {\r\n console.log(error);\r\n });\r\n if (val == \"不动产\") {\r\n // this.tit=\"土地证信息\"\r\n this.workListData = [];\r\n axios\r\n .get(\"/json/jdData.json\")\r\n .then((result) => {\r\n console.log(\"getMenuData111\", result.data);\r\n for (var i = 0; i < result.data.length; i++) {\r\n if (result.data[i].jd == this.params.params) {\r\n console.log(\"result.data[i]\", result.data[i]);\r\n // this.workList.push(result.data[i])\r\n this.workListData.push(result.data[i]);\r\n this.changeWorkListBdc(result.data[i]);\r\n this.changeWorkList(result.data[i]);\r\n }\r\n }\r\n })\r\n .catch((error) => {\r\n console.log(error);\r\n });\r\n } else if (val == \"土地证\") {\r\n // this.tit=\"土地证信息\"\r\n this.workListData = [];\r\n this.fczShow = true;\r\n axios\r\n .get(\"/json/tdData.json\")\r\n .then((result) => {\r\n console.log(\"getMenuData111\", result.data);\r\n console.log(\"this.params.params\", this.params.params);\r\n for (var i = 0; i < result.data.length; i++) {\r\n if (result.data[i].jd == this.params.params) {\r\n console.log(\"result.data[i]\", result.data[i]);\r\n this.workListData.push(result.data[i]);\r\n this.changeWorkListTd(result.data[i]);\r\n this.changeWorkList(result.data[i]);\r\n }\r\n }\r\n })\r\n .catch((error) => {\r\n console.log(error);\r\n });\r\n this.workListDatafcz = [];\r\n axios\r\n .get(\"/json/fczData.json\")\r\n .then((result) => {\r\n console.log(\"getMenuData111\", result.data);\r\n for (var i = 0; i < result.data.length; i++) {\r\n if (result.data[i].jd == this.params.params) {\r\n console.log(\"result.data[i]\", result.data[i]);\r\n this.workListDatafcz.push(result.data[i]);\r\n this.changeWorkListfcz(result.data[i]);\r\n // this.changeWorkList(result.data[i])\r\n }\r\n }\r\n })\r\n .catch((error) => {\r\n console.log(error);\r\n });\r\n } else {\r\n this.workListData = [];\r\n this.fczShow = true;\r\n axios\r\n .get(\"/json/jdData.json\")\r\n .then((result) => {\r\n console.log(\"getMenuData111\", result.data);\r\n for (var i = 0; i < result.data.length; i++) {\r\n if (result.data[i].jd == this.params.params) {\r\n this.changeWorkListBdc(result.data[i]);\r\n }\r\n }\r\n })\r\n .catch((error) => {\r\n console.log(error);\r\n });\r\n axios\r\n .get(\"/json/tdData.json\")\r\n .then((result) => {\r\n console.log(\"getMenuData111\", result.data);\r\n console.log(\"this.params.params\", this.params.params);\r\n for (var i = 0; i < result.data.length; i++) {\r\n if (result.data[i].jd == this.params.params) {\r\n console.log(\"result.data[i]\", result.data[i]);\r\n this.workListData.push(result.data[i]);\r\n this.changeWorkListTd(result.data[i]);\r\n this.changeWorkList(result.data[i]);\r\n }\r\n }\r\n })\r\n .catch((error) => {\r\n console.log(error);\r\n });\r\n this.workListDatafcz = [];\r\n axios\r\n .get(\"/json/fczData.json\")\r\n .then((result) => {\r\n console.log(\"getMenuData111\", result.data);\r\n for (var i = 0; i < result.data.length; i++) {\r\n if (result.data[i].jd == this.params.params) {\r\n console.log(\"result.data[i]\", result.data[i]);\r\n this.workListDatafcz.push(result.data[i]);\r\n this.changeWorkListfcz(result.data[i]);\r\n // this.changeWorkList(result.data[i])\r\n }\r\n }\r\n })\r\n .catch((error) => {\r\n console.log(error);\r\n });\r\n }\r\n },\r\n getMain() {\r\n this.$router.push({\r\n name: \"landChild\",\r\n params: { id: this.params.params, type: this.params.type },\r\n });\r\n },\r\n //建筑物信息\r\n changeWorkList(data) {\r\n var entries = Object.entries(data);\r\n var list = entries.map(function (item) {\r\n return {\r\n value: item[1],\r\n name: item[0],\r\n };\r\n });\r\n for (var i = 0; i < list.length; i++) {\r\n for (var t = 0; t < this.workList.length; t++) {\r\n if (list[i].name == this.workList[t].name) {\r\n this.workList[t].value = list[i].value;\r\n }\r\n }\r\n }\r\n this.workListData = this.workList;\r\n },\r\n //不动产\r\n changeWorkListBdc(data) {\r\n // this.workListBdc=[]\r\n var entries = Object.entries(data);\r\n var list = entries.map(function (item) {\r\n return {\r\n value: item[1],\r\n name: item[0],\r\n };\r\n });\r\n for (var i = 0; i < list.length; i++) {\r\n for (var t = 0; t < this.workListBdc.length; t++) {\r\n if (list[i].name == this.workListBdc[t].name) {\r\n this.workListBdc[t].value = list[i].value;\r\n }\r\n }\r\n }\r\n // this.workListData = this.workListBdc\r\n },\r\n //土地证\r\n changeWorkListTd(data) {\r\n console.log(\"data\", data);\r\n var entries = Object.entries(data);\r\n var list = entries.map(function (item) {\r\n return {\r\n value: item[1],\r\n name: item[0],\r\n };\r\n });\r\n for (var i = 0; i < list.length; i++) {\r\n for (var t = 0; t < this.workListNew.length; t++) {\r\n if (list[i].name == this.workListNew[t].name) {\r\n this.workListNew[t].value = list[i].value;\r\n }\r\n }\r\n }\r\n this.workListData = this.workListNew;\r\n },\r\n //房产证\r\n changeWorkListfcz(data) {\r\n var entries = Object.entries(data);\r\n var list = entries.map(function (item) {\r\n return {\r\n value: item[1],\r\n name: item[0],\r\n };\r\n });\r\n for (var i = 0; i < list.length; i++) {\r\n for (var t = 0; t < this.workListFCZ.length; t++) {\r\n if (list[i].name == this.workListFCZ[t].name) {\r\n this.workListFCZ[t].value = list[i].value;\r\n }\r\n }\r\n }\r\n // this.workListData = this.workListFCZ\r\n },\r\n //获取地图参数\r\n getFromIframe(value) {\r\n this.tit = \"建筑物信息\";\r\n (this.workListBdc = [\r\n // { key: \"建筑物名称\", value: \"\",name:\"jd\" },\r\n // { key: \"坐落地址\", value: \"\",name:\"tudi\" },\r\n { key: \"不动产证号\", value: \"\", name: \"bdczh\" },\r\n { key: \"权力性质\", value: \"\", name: \"qlxz\" },\r\n { key: \"用途\", value: \"\", name: \"yt\" },\r\n { key: \"宗地面积\", value: \"\", name: \"zdmj\" },\r\n { key: \"建筑面积\", value: \"\", name: \"jzmj\" },\r\n { key: \"权利人\", value: \"\", name: \"qlr\" },\r\n // { key: \"共有情况\", value: \"\",name:\"gyqk\" },\r\n // { key: \"坐落\", value: \"\" ,name:\"zl\"},\r\n // { key: \"不动产单元号\", value: \"\" ,name:\"bdcdyh\"},\r\n // { key: \"权力类型\", value: \"\" ,name:\"qllx\"},\r\n // { key: \"使用期限\", value: \"\" ,name:\"syqx\"},\r\n // { key: \"房屋结构\", value: \"\" ,name:\"fwjg\"},\r\n // { key: \"房屋总层数\", value: \"\" ,name:\"fwzcs\"},\r\n // { key: \"所在层数\", value: \"\" ,name:\"szcs\"},\r\n // { key: \"丘权号\", value: \"\" ,name:\"qqh\"},\r\n // { key: \"来源\", value: \"\" ,name:\"ly\"},\r\n ]),\r\n (this.workListNew = [\r\n // { key: \"建筑物名称\", value: \"\",name:\"jd\" },\r\n // { key: \"坐落地址\", value: \"\",name:\"tudi\" },\r\n { key: \"土地证号\", value: \"\", name: \"tdzh\" },\r\n { key: \"权力性质\", value: \"\", name: \"syqlx\" },\r\n { key: \"土地用途\", value: \"\", name: \"dlyt\" },\r\n { key: \"土地面积\", value: \"\", name: \"tdmj\" },\r\n { key: \"权利人\", value: \"\", name: \"tdsyqr\" },\r\n // { key: \"共有情况\", value: \"\",name:\"gyqk\" },\r\n // { key: \"坐落\", value: \"\",name:\"zl\" },\r\n // { key: \"地号\", value: \"\" ,name:\"dh\"},\r\n\r\n // { key: \"图号\", value: \"\" ,name:\"th\"},\r\n\r\n // { key: \"使用权面积\", value: \"\",name:\"syqmj\" },\r\n // { key: \"终止日期\", value: \"\" ,name:\"zzrq\"},\r\n ]),\r\n (this.workListFCZ = [\r\n // { key: \"建筑物名称\", value: \"\",name:\"jd\" },\r\n // { key: \"坐落地址\", value: \"\",name:\"tudi\" },\r\n // { key: \"房产证号\", value: \"\" ,name:\"fczh\"},\r\n // { key: \"房产使用权人\", value: \"\",name:\"fwsyqr\" },\r\n // { key: \"坐落\", value: \"\",name:\"zl\" },\r\n // { key: \"房屋用途\", value: \"\" ,name:\"fwcb\"},\r\n // { key: \"结构\", value: \"\",name:\"jg\" },\r\n // { key: \"房屋总层数\", value: \"\",name:\"fwzcs\" },\r\n // { key: \"面积\", value: \"\" ,name:\"jzmj\"},\r\n // { key: \"面积\", value: \"\" ,name:\"cqly\"},\r\n { key: \"房产证号\", value: \"\", name: \"fczh\" },\r\n { key: \"房屋产别\", value: \"\", name: \"fwcb\" },\r\n { key: \"房屋用途\", value: \"\", name: \"fwyt\" },\r\n { key: \"房屋面积\", value: \"\", name: \"jzmj\" },\r\n { key: \"房产使用权人\", value: \"\", name: \"fwsyqr\" },\r\n ]),\r\n (this.activeColor = -1);\r\n this.workListqq = [{ key: \"确权信息\", value: \"\", name: \"qq\" }];\r\n this.params = value;\r\n if (this.params.type == \"不动产\") {\r\n this.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: 0,\r\n imgUrl: require(\"@/assets/landRes/qq.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 } else if (this.params.type == \"土地证\") {\r\n this.centerList = [\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 title: \"证件查看\",\r\n count: 0,\r\n imgUrl: require(\"@/assets/landRes/bdc.png\"),\r\n },\r\n ];\r\n }\r\n this.getJdData(this.params.type);\r\n this.leftOpen = false;\r\n this.rightOpen = false;\r\n this.Visible = false;\r\n this.basicInfoShow = true;\r\n },\r\n\r\n //菜单跳转\r\n btn(val, index) {\r\n if (val != \"证件查看\") {\r\n this.tit = val;\r\n }\r\n\r\n this.Visible = false;\r\n this.basicInfoShow = true;\r\n this.activeColor = index;\r\n if (val == \"不动产权证信息\") {\r\n this.workListData = this.workListBdc;\r\n this.rightOpen = false;\r\n } else if (val == \"土地证信息\") {\r\n this.workListData = this.workListNew;\r\n this.rightOpen = false;\r\n } else if (val == \"房产证信息\") {\r\n this.workListData = this.workListFCZ;\r\n this.rightOpen = false;\r\n } else if (val == \"确权情况\") {\r\n console.log(\"this.workListqq\", this.workListqq);\r\n this.workListData = this.workListqq;\r\n this.rightOpen = false;\r\n }\r\n },\r\n\r\n search(data) {\r\n console.log(\"data\", data);\r\n this.Visible = true;\r\n this.basicInfoShow = false;\r\n this.rightOpen = false;\r\n this.$nextTick(() => {\r\n //这里的dialog与上面dialog-component组件里面的ref属性值是一致的\r\n //init调用的是dialog-component组件里面的init方法\r\n //data是传递给弹窗页面的值\r\n this.$refs.dialog.init(data);\r\n });\r\n },\r\n //关闭查询弹框\r\n getClose() {\r\n this.Visible = false;\r\n this.rightOpen = true;\r\n this.basicInfoShow = true;\r\n },\r\n getjdName(val) {\r\n this.jdNameNew = val;\r\n },\r\n getjdNameClick(val) {\r\n console.log(\"val\", val);\r\n this.$router.push({\r\n name: \"landChild\",\r\n params: { id: val.jd, type: val.type },\r\n });\r\n },\r\n goPage(val) {\r\n if (val == 0) {\r\n console.log(\"返回房地资源-主场景\");\r\n // this.$router.push(\"/land\");\r\n this.$router.push(\"/\");\r\n }\r\n },\r\n cancelLoading() {\r\n setTimeout(() => {\r\n this.loading = false;\r\n }, 500);\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.getFromIframe = this.getFromIframe;\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 }\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 .yellowIcon{\r\n position: absolute !important;\r\n top: 28%;\r\n left: 36%;\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: 6%;\r\n left: 36%;\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\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 }\r\n .mask{\r\n animation: animate 3s linear;\r\n overflow: hidden;\r\n }\r\n @keyframes animate{\r\n from {\r\n height: 0px;\r\n top : 230px;\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.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\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"]}]} |