Merge branch 'master' of http://192.168.10.18:3000/limeng/zhsq_qk_2.0

zhsq_qk-ui/src/assets/images/qkq_sprh.css

@@ -313,6 +313,11 @@ padding-left: 20px;
   color: #d0e3fd;
   font-family: 'MyWebFont';
 }
+.nav-li-left.on{
+  transform: rotate(353deg);
+  background: url(../images/nav-background-left-on.png) no-repeat;
+
+}
 .nav-li-left{
   transform: rotate(353deg);
   background: url(../images/nav-background-left.png) no-repeat;
@@ -444,136 +449,136 @@ padding-left: 20px;
   align-items: center;
 }
 
-
-/* 基层治理 */
-.jczl_tit{
-	margin: 5px 0px 5px 0px;
-	text-align: center;
-}
-.jczl_tit span{
-	color: #fff;
-	font-size: 14px;
-	margin-left: 14px;
-	text-align: center;
-}
-.jczl_tit span u{
-	color: #0055ff;
-	font-size: 16px;
-	padding: 0px 4px;
-}
-.jczl_tit span:nth-last-child(1) u{
-	color: #ddcd14;
-	font-size: 16px;
-	padding: 0px 4px;
-}
-.bmfw_mssq{
-	height: 200px;
-	overflow-y: scroll;
-	padding-left: 32px;
-}
-.bmfw_mssq p{
-	font-size: 14px;
-	color: #fff;
-	line-height: 30px;
-	padding-left: 10px;
-}
-.bmfw_mssq p:nth-child(odd){
-	background: rgba(16, 75, 131, 0.3);
-}
-.bmfw_mssq p i{
-	display: inline-block;
-	float: right;
-}
-
-.scrll_bar::-webkit-scrollbar{
-	width: 0px;
-	height: 0px;
-	
-}
-.qkq_jmzs{
-	text-align: center;
-}
-.qkq_jmzs span{
-	font-size: 16px;
-	color: #fff;
-}
-.qkq_jmzs b{
-	font-size: 20px;
-	color: #1990ea;
-	display: inline-block;
-	padding: 4px 8px;
-	border: 1px solid #1351af;
-	border-radius: 4px;
-	margin: 0px 8px;
-	letter-spacing: 1px;
-}
-.tsrq_scro{
-	height: 200px;
-	overflow-y: scroll;
-}
-.tsrq_scro::-webkit-scrollbar{
-	width: 0px;
-	height: 0px;
-	
-}
-.xqqy_div{
-	display: flex;
-	flex-direction: row;
-	   padding-bottom: 15px;
-}
-.xqqy_div .xqqy_tit{
-	width: 100%;
-	 padding: 15px 0px 15px 5%;
-}
-.xqqy_div .xqqy_tit p{
-	margin-bottom: 3px;
-	width: 33%;
-	float: left;
-}
-.xqqy_div .xqqy_tit p span{
-	font-size: 12px;
-	color: #fff;
-	text-align: left;
-	display: flex;
-	flex-direction: row;
-}
-.xqqy_div .xqqy_tit p b{
-	font-size: 18px;
-	color: #1990ea;
-	padding-right: 5px;
-}
-.xqqy_div .xqqy_tit p i{
-	font-size: 12px;
-	color: #fff;
-	line-height: 26px;
-}
-#sprh-xqqy{
-	width: 60%;
+
+/* 基层治理 */
+.jczl_tit{
+	margin: 5px 0px 5px 0px;
+	text-align: center;
+}
+.jczl_tit span{
+	color: #fff;
+	font-size: 14px;
+	margin-left: 14px;
+	text-align: center;
+}
+.jczl_tit span u{
+	color: #0055ff;
+	font-size: 16px;
+	padding: 0px 4px;
+}
+.jczl_tit span:nth-last-child(1) u{
+	color: #ddcd14;
+	font-size: 16px;
+	padding: 0px 4px;
+}
+.bmfw_mssq{
+	height: 200px;
+	overflow-y: scroll;
+	padding-left: 32px;
+}
+.bmfw_mssq p{
+	font-size: 14px;
+	color: #fff;
+	line-height: 30px;
+	padding-left: 10px;
+}
+.bmfw_mssq p:nth-child(odd){
+	background: rgba(16, 75, 131, 0.3);
 }
-.qkq_mssq{
-	display: flex;
-	flex-direction: row;
+.bmfw_mssq p i{
+	display: inline-block;
+	float: right;
+}
+
+.scrll_bar::-webkit-scrollbar{
+	width: 0px;
+	height: 0px;
+
+}
+.qkq_jmzs{
+	text-align: center;
+}
+.qkq_jmzs span{
+	font-size: 16px;
+	color: #fff;
+}
+.qkq_jmzs b{
+	font-size: 20px;
+	color: #1990ea;
+	display: inline-block;
+	padding: 4px 8px;
+	border: 1px solid #1351af;
+	border-radius: 4px;
+	margin: 0px 8px;
+	letter-spacing: 1px;
+}
+.tsrq_scro{
+	height: 200px;
+	overflow-y: scroll;
+}
+.tsrq_scro::-webkit-scrollbar{
+	width: 0px;
+	height: 0px;
+
+}
+.xqqy_div{
+	display: flex;
+	flex-direction: row;
+	   padding-bottom: 15px;
+}
+.xqqy_div .xqqy_tit{
+	width: 100%;
+	 padding: 15px 0px 15px 5%;
+}
+.xqqy_div .xqqy_tit p{
+	margin-bottom: 3px;
+	width: 33%;
+	float: left;
+}
+.xqqy_div .xqqy_tit p span{
+	font-size: 12px;
+	color: #fff;
+	text-align: left;
+	display: flex;
+	flex-direction: row;
+}
+.xqqy_div .xqqy_tit p b{
+	font-size: 18px;
+	color: #1990ea;
+	padding-right: 5px;
+}
+.xqqy_div .xqqy_tit p i{
+	font-size: 12px;
+	color: #fff;
+	line-height: 26px;
+}
+#sprh-xqqy{
+	width: 60%;
+}
+.qkq_mssq{
+	display: flex;
+	flex-direction: row;
 	justify-content: space-around;
-margin: 10px auto 20px auto;
+margin: 10px auto 20px auto;
 padding: 0px 10px;
 }
 
-.qkq_mssq_div{
-	display: flex;
+.qkq_mssq_div{
+	display: flex;
 	flex-direction: row;
 
-}
-.qkq_mssq_div img{
+}
+.qkq_mssq_div img{
 	margin-right: 10px;
-}
-.qkq_mssq_div p{
-	font-size: 22px;
-	font-weight: 900;
-	color: #ddcd14;
+}
+.qkq_mssq_div p{
+	font-size: 22px;
+	font-weight: 900;
+	color: #ddcd14;
 	padding-top: 10px;
-}
-.qkq_mssq_div span{
-	font-size: 14px;
+}
+.qkq_mssq_div span{
+	font-size: 14px;
 	color: #fff;
 }
 

zhsq_qk-ui/src/views/fusion/jczl.vue

@@ -1,7 +1,9 @@
 <template>
   <div>
     <div class="map">
-      <img src="@/assets/images/sprh-map.png"/>
+<!--      <img src="@/assets/images/sprh-map.png"/>-->
+      <supermap ref="supermap" style="height: 100%;width: 100%;position: absolute;z-index: 0;"
+                :yxtSltProps="sltProps"></supermap>
     </div>
     <!-- 阴影背景 -->
     <div class="bj_left"><img src="@/assets/images/sprhbj-left.png"/></div>
@@ -10,6 +12,10 @@
     <!--头部开始-->
     <div class="header">
       <h1>城市运行一网统管指挥中心</h1>
+      <div class="map_tab">
+        <button @click="sltHandle" :class="{ 'on': btnOne }">矢量图</button>
+        <button @click="yxtHandle" :class="{ 'on': btnTwo }">影像图</button>
+      </div>
     </div>
     <!--头部结束-->
     <!-- 中间开始 -->
@@ -216,7 +222,7 @@
           <div class="nav-li-left" @click="serviceFAW('jtzl')">
             <span>交通治理</span>
           </div>
-          <div class="nav-li-left">
+          <div class="nav-li-left on">
             <span>基层治理</span>
           </div>
         </div>
@@ -225,7 +231,7 @@
           <a>返回首页</a>
         </div>
         <div class="nav-bottom-right">
-          <div class="nav-li-right on">
+          <div class="nav-li-right">
             <span>营商环境</span>
           </div>
           <div class="nav-li-right" @click="serviceFAW('yshj')">
@@ -251,13 +257,17 @@ import jQuery from 'jquery'
 import "@/assets/images/qkq_body.css";
 import "@/assets/images/qkq_index.css";
 import "@/assets/images/qkq_sprh.css";
-
+import supermap from "@/views/supermap/supermap";
 
 export default {
   name: "jczl",
+  components: {supermap},
   data() {
     return {
       currentTime: '',
+      sltProps: null,
+      btnOne: false,
+      btnTwo: false
     }
   },
 
@@ -278,6 +288,16 @@ export default {
     }, 1000);
   },
   methods: {
+    sltHandle() {
+      this.btnOne = true
+      this.btnTwo = false
+      this.$refs.supermap.getSupermap(null, null, null, "slt", null, null)
+    },
+    yxtHandle() {
+      this.btnTwo = true
+      this.btnOne = false
+      this.$refs.supermap.getSupermap(null, null, null, "yxt", null, null)
+    },
     homePage(route) {
       this.$router.push({path: route});
     },
@@ -297,6 +317,14 @@ export default {
     regionTop() {
       //便民服务
       var myChart = echarts.init(document.getElementById('jczl-bmfw'));
+      let data = ['类型1', '类型2', '类型3', '类型4', '类型5', '类型6']
+      let valueData = [];
+      let labelData = []
+      for (var i = 0; i < data.length; i++) {
+        labelData.push(data[i]);
+        var lineNumber = Math.floor(Math.random() * 900);
+        valueData.push(lineNumber);
+      }
       var option = {
         title: {
           show: true,
@@ -337,7 +365,7 @@ export default {
           axisTick: {
             show: false,
           },
-          data: ['类型1', '类型2', '类型3', '类型4', '类型5', '类型6']
+          data: labelData
         },
         yAxis: {
           name: '',
@@ -386,11 +414,29 @@ export default {
             position: ['0', '-12'],
             color: '#fff',
           },
-          data: [120, 200, 150, 80, 70, 110],
+          data: valueData,
           type: 'bar',
         }]
       };
+      var currentIndex = -1;
+      var timer = setInterval(function () {
+        // 生成新的随机数据
+        currentIndex++;
+        if (currentIndex >= 6) {
+          currentIndex = 0;
+          for (var i = 0; i < valueData.length; i++) {
+            valueData[i] = Math.floor(Math.random() * 700);
+          }
+        } else {
+          valueData[currentIndex] = Math.floor(Math.random() * 700);
+        }
 
+        // 更新 option 中的数据
+        option.series[0].data = valueData;
+
+        // 重新渲染图表
+        myChart.setOption(option);
+      }, 1000); // 每秒更新一次数据
       if (option) {
         myChart.setOption(option);
       }
@@ -745,8 +791,14 @@ export default {
     matterTop() {
       // 居民总数
       var myChart = echarts.init(document.getElementById('sprh-jmzs'));
-      var labelData = ['前程街道办事处', '富民街道办事处', '东风街道办事处', '锦城街道办事处']
-      var valueData = [52, 32, 12, 53, 65];
+      var data = ['前程街道办事处', '富民街道办事处', '东风街道办事处', '锦程街道办事处']
+      let labelData = []
+      let valueData = []
+      for (var i = 0; i < data.length; i++) {
+        labelData.push(data[i]);
+        var lineNumber = Math.floor(Math.random() * 10000) / 100;
+        valueData.push(lineNumber);
+      }
       var option = {
         xAxis: {
           show: false,
@@ -813,7 +865,25 @@ export default {
           },
         ],
       };
+      var currentIndex = -1;
+      var timer = setInterval(function () {
+        // 生成新的随机数据
+        currentIndex++;
+        if (currentIndex >= 4) {
+          currentIndex = 0;
+          for (var i = 0; i < valueData.length; i++) {
+            valueData[i] = Math.floor(Math.random() * 1000);
+          }
+        } else {
+          valueData[currentIndex] = Math.floor(Math.random() * 1000);
+        }
 
+        // 更新 option 中的数据
+        option.series[0].data = valueData;
+
+        // 重新渲染图表
+        myChart.setOption(option);
+      }, 1000); // 每秒更新一次数据
       if (option) {
         myChart.setOption(option);
       }
@@ -822,8 +892,14 @@ export default {
     tsrqqktj() {
       // 特殊人群
       var myChart = echarts.init(document.getElementById('sprh-tsrq'));
-      var labelData = ['社区矫正人员', '劳模', '志愿者', '失业人员', '信访人员', '残疾人', '低保人员', '精神病人', '释解安置人员', '吸毒人员', '重点稳控人员', '活跃分子', '闹访骨干', '吸毒人员未成年子女', '服刑人员未成年子女', '留守人员', '军烈属', '台胞侨胞', '老龄人', '失信被执行人', '社保人员', '医保人员']
-      var valueData = [52, 32, 12, 53, 65, 52, 32, 12, 53, 65, 52, 32, 53, 65, 52, 32, 12, 53, 65, 52, 32, 12, 53, 65];
+      var data = ['社区矫正人员', '劳模', '志愿者', '失业人员', '信访人员', '残疾人', '低保人员', '精神病人', '释解安置人员', '吸毒人员', '重点稳控人员', '活跃分子', '闹访骨干', '吸毒人员未成年子女', '服刑人员未成年子女', '留守人员', '军烈属', '台胞侨胞', '老龄人', '失信被执行人', '社保人员', '医保人员']
+      var valueData = [];
+      let labelData = []
+      for (var i = 0; i < data.length; i++) {
+        labelData.push(data[i]);
+        var lineNumber = Math.floor(Math.random() * 10000);
+        valueData.push(lineNumber);
+      }
       var option = {
         xAxis: {
           show: false,
@@ -890,6 +966,25 @@ export default {
           },
         ],
       };
+      var currentIndex = -1;
+      var timer = setInterval(function () {
+        // 生成新的随机数据
+        currentIndex++;
+        if (currentIndex >= 22) {
+          currentIndex = 0;
+          for (var i = 0; i < valueData.length; i++) {
+            valueData[i] = Math.floor(Math.random() * 1000);
+          }
+        } else {
+          valueData[currentIndex] = Math.floor(Math.random() * 1000);
+        }
+
+        // 更新 option 中的数据
+        option.series[0].data = valueData;
+
+        // 重新渲染图表
+        myChart.setOption(option);
+      }, 1000); // 每秒更新一次数据
       if (option) {
         myChart.setOption(option);
       }
@@ -918,7 +1013,7 @@ export default {
       const data = [];
       for (let i = 0; i < res.length; i++) {
         data.push({
-          value: res[i].value,
+          value: Math.floor(Math.random() * 1000),
           name: res[i].label,
           itemStyle: {
             normal: {
@@ -1021,6 +1116,26 @@ export default {
         }]
       };
 
+      var currentIndex = -1;
+      var timer = setInterval(function () {
+        // 生成新的随机数据
+        currentIndex++;
+        if (currentIndex >= 2) {
+          currentIndex = 0;
+          for (var i = 0; i < data.length; i++) {
+            data[i].value = Math.floor(Math.random() * 500);
+          }
+        } else {
+          data[currentIndex].value = Math.floor(Math.random() * 500);
+        }
+
+        // 更新 option 中的数据
+        option.series[0].data = data;
+
+        // 重新渲染图表
+        myChart.setOption(option);
+      }, 1000); // 每秒更新一次数据
+
       if (option) {
         myChart.setOption(option);
       }
@@ -1028,6 +1143,15 @@ export default {
     nl() {
       // 年龄
       var myChart = echarts.init(document.getElementById('sprh-nl'));
+      var data = ['0-10岁', '11-20岁', '21-30岁', '31-40岁', '41-50岁', '51-60岁', '61-70岁', '71-80岁', '80岁以上']
+      var monthData = []
+      var lineData = []
+      for (var i = 1; i <= data.length; i++) {
+        monthData.push(data[i])
+        var lineNumber = Math.floor(Math.random() * 10000);
+        lineData.push(lineNumber);
+      }
+
       var option = {
         grid: {
           left: '12%',
@@ -1036,7 +1160,7 @@ export default {
           right: '8%'
         },
         xAxis: {
-          data: ['0-10岁', '11-20岁', '21-30岁', '31-40岁', '41-50岁', '51-60岁', '61-70岁', '71-80岁', '80岁以上'],
+          data: monthData,
           axisTick: {
             show: true
           },
@@ -1119,10 +1243,30 @@ export default {
               opacity: 1
             }
           },
-          data: [123, 60, 25, 18, 12, 9, 2, 12, 40]
+          data: lineData
         }]
       };
 
+      var currentIndex = -1;
+      var timer = setInterval(function () {
+        // 生成新的随机数据
+        currentIndex++;
+        if (currentIndex >= 9) {
+          currentIndex = 0;
+          for (var i = 0; i < lineData.length; i++) {
+            lineData[i] = Math.floor(Math.random() * 1000);
+          }
+        } else {
+          lineData[currentIndex] = Math.floor(Math.random() * 1000);
+        }
+
+        // 更新 option 中的数据
+        option.series[0].data = lineData;
+
+        // 重新渲染图表
+        myChart.setOption(option);
+      }, 1000); // 每秒更新一次数据
+
 
       if (option) {
         myChart.setOption(option);
@@ -1131,6 +1275,41 @@ export default {
     hy() {
       // 婚姻比例
       var myChart = echarts.init(document.getElementById('sprh-hy'));
+      let data = ['已婚', '未婚', '离异']
+      let nameData = [];
+      let valueData = [];
+      for (var i = 0; i < data.length; i++) {
+        let object1 = {}
+        let object2 = {}
+        let tooltip = {}
+        let labelData = []
+        let itemStyle = {
+          normal: {
+            color: 'rgba(0,0,0,0)',
+            label: {
+              show: false
+            },
+            labelLine: {
+              show: false
+            }
+          },
+          emphasis: {
+            color: 'rgba(0,0,0,0)'
+          }
+        };
+        nameData.push(data[i])
+        var lineNumber = Math.floor(Math.random() * 10000);
+        this.$set(object1, "name", data[i]);
+        this.$set(object1, "value", lineNumber);
+        this.$set(object2, "name", "总数");
+        this.$set(object2, "value", lineNumber += lineNumber);
+        this.$set(object2, "itemStyle", itemStyle);
+        this.$set(tooltip, "show", false);
+        this.$set(object2, "tooltip", tooltip);
+        labelData.push(object1);
+        labelData.push(object2);
+        valueData.push(labelData)
+      }
       var dataStyle = {
         normal: {
           label: {
@@ -1170,7 +1349,7 @@ export default {
           left: "35%",
           itemWidth: 0,
           itemHeight: 0,
-          data: ['已婚', '未婚', '离异'],
+          data: nameData,
           itemGap: 0,
           textStyle: {
             color: '#ttf',
@@ -1192,19 +1371,7 @@ export default {
           radius: ['90%', '75%'],
           itemStyle: dataStyle,
 
-          data: [{
-            value: 7645434,
-            name: '已婚'
-          }, {
-            value: 3612343,
-            name: '总数',
-            tooltip: {
-              show: false
-            },
-            itemStyle: placeHolderStyle
-          }
-
-          ]
+          data: valueData[0]
         }, {
           name: 'Line 3',
           type: 'pie',
@@ -1213,17 +1380,7 @@ export default {
           itemStyle: dataStyle,
           hoverAnimation: false,
 
-          data: [{
-            value: 2632321,
-            name: '未婚'
-          }, {
-            value: 2212343,
-            name: '总数',
-            tooltip: {
-              show: false
-            },
-            itemStyle: placeHolderStyle
-          }]
+          data: valueData[1]
         }, {
           name: 'Line 2',
           type: 'pie',
@@ -1232,27 +1389,35 @@ export default {
           radius: ['70%', '55%'],
           itemStyle: dataStyle,
 
-          data: [{
-            value: 1823323,
-            name: '离异'
-          }, {
-            value: 1812343,
-            name: '总数',
-            tooltip: {
-              show: false
-            },
-            itemStyle: placeHolderStyle
-          }]
+          data: valueData[2]
         }
 
         ]
       };
-
-
+      var currentIndex = -1;
+      var timer = setInterval(function () {
+        // 生成新的随机数据
+        currentIndex++;
+        if (currentIndex >= 3) {
+          currentIndex = 0;
+          for (var i = 0; i < valueData.length; i++) {
+            valueData[i][0].value = Math.floor(Math.random() * 10000);
+          }
+        } else {
+          valueData[currentIndex][0].value = Math.floor(Math.random() * 10000);
+        }
+        // 更新 option 中的数据
+        option.series[0].data = valueData[0];
+        option.series[1].data = valueData[1];
+        option.series[2].data = valueData[2];
+        // 重新渲染图表
+        myChart.setOption(option);
+      }, 1000); // 每秒更新一次数据
       if (option) {
         myChart.setOption(option);
       }
     },
+
     getCurrentTime() {
       const now = new Date();
       const year = now.getFullYear();

zhsq_qk-ui/src/views/fusion/sprh.vue

@@ -12,8 +12,8 @@
     <div class="header">
       <h1>城市运行一网统管指挥中心</h1>
       <div class="map_tab">
-        <button @click="sltHandle" class="on">矢量图</button>
-        <button @click="yxtHandle">影像图</button>
+        <button @click="sltHandle" :class="{ 'on': btnOne }">矢量图</button>
+        <button @click="yxtHandle" :class="{ 'on': btnTwo }">影像图</button>
       </div>
     </div>
     <!--头部结束-->
@@ -114,10 +114,10 @@
           <div class="nav-li-left">
             <span>城市管理</span>
           </div>
-          <div class="nav-li-left on" @click="handleNavigation('jtzl')">
+          <div class="nav-li-left" @click="handleNavigation('jtzl')">
             <span>交通治理</span>
           </div>
-          <div class="nav-li-left on" @click="handleNavigation('jczl')">
+          <div class="nav-li-left" @click="handleNavigation('jczl')">
             <span>基层治理</span>
           </div>
         </div>
@@ -166,7 +166,9 @@ export default {
       dropdownVisible: false,
       cameras: [],
       sltProps: null,
-      currentTime: ''
+      currentTime: '',
+      btnOne: false,
+      btnTwo: false
     };
     // 可根据实际情况添加更多设备列表
   },
@@ -185,9 +187,13 @@ export default {
 
   methods: {
     sltHandle() {
+      this.btnOne = true
+      this.btnTwo = false
       this.$refs.supermap.getSupermap(null, null, null, "slt", null, null)
     },
     yxtHandle() {
+      this.btnTwo = true
+      this.btnOne = false
       this.$refs.supermap.getSupermap(null, null, null, "yxt", null, null)
     },
     handleNavigation(route) {

zhsq_qk-ui/src/views/fusion/yshj.vue

@@ -117,7 +117,7 @@
           <div class="nav-li-left">
             <span>城市管理</span>
           </div>
-          <div class="nav-li-left on" @click="serviceFAW('jtzl')">
+          <div class="nav-li-left" @click="serviceFAW('jtzl')">
             <span>交通治理</span>
           </div>
           <div class="nav-li-left" @click="serviceFAW('jczl')">