政务运行动态

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

@@ -52,16 +52,16 @@
       <div class="qkq_tdzy">
         <div class="qkq_tit">区域办件量TOP</div>
         <div class="selectDate">
-<!--          <span class="_selectData">程锦街道</span>-->
-<!--          <a class="icon_more" @click="smalClick(this)"-->
-<!--          ><img src="@/assets/images/down.png"-->
-<!--          /></a>-->
-<!--          <div class="_moreMenu">-->
-<!--            <ul>-->
-<!--              <li class="change">东风街道</li>-->
-<!--              <li>锦城街道</li>-->
-<!--            </ul>-->
-<!--          </div>-->
+          <!--          <span class="_selectData">程锦街道</span>-->
+          <!--          <a class="icon_more" @click="smalClick(this)"-->
+          <!--          ><img src="@/assets/images/down.png"-->
+          <!--          /></a>-->
+          <!--          <div class="_moreMenu">-->
+          <!--            <ul>-->
+          <!--              <li class="change">东风街道</li>-->
+          <!--              <li>锦城街道</li>-->
+          <!--            </ul>-->
+          <!--          </div>-->
         </div>
       </div>
       <div
@@ -132,10 +132,10 @@
           <div class="nav-li-right">
             <span>营商环境</span>
           </div>
-          <div class="nav-li-right on" >
+          <div class="nav-li-right on">
             <span>政务运行</span>
           </div>
-          <div class="nav-li-right"  @click="serviceFAW('sprh')">
+          <div class="nav-li-right" @click="serviceFAW('sprh')">
             <span>安全应急</span>
           </div>
           <div class="nav-li-right">
@@ -157,13 +157,10 @@ import "@/assets/images/qkq_index.css";
 import "@/assets/images/qkq_sprh.css";
 
 
-
 export default {
   name: "yshj",
   data() {
-    return {
-
-    }
+    return {}
   },
 
   created() {
@@ -176,10 +173,10 @@ export default {
   },
   methods: {
     homePage(route) {
-      this.$router.push({ path: route });
+      this.$router.push({path: route});
     },
     serviceFAW(route) {
-      this.$router.push({ path: route });
+      this.$router.push({path: route});
     },
     smalClick(val) {
       var node = $(val).next();
@@ -192,31 +189,16 @@ export default {
     },
 
     regionTop() {
-      //区域办件量
       var myChart = echarts.init(document.getElementById('sprh-zyfb'));
-      let data = [{
-        value: 120,
-        label: '前程街道'
-      }, {
-        value: 142,
-        label: '富民街道'
-      }, {
-        value: 110,
-        label: '广兴街道'
-      },
-        {
-          value: 132,
-          label: '东风街道'
-        },
-        {
-          value: 132,
-          label: '锦绣街道  '
-        },
-        {
-          value: 132,
-          label: '锦城街道  '
-        }
+      let data = [
+        { value: 0, label: '前程街道' },
+        { value: 0, label: '富民街道' },
+        { value: 0, label: '广兴街道' },
+        { value: 0, label: '东风街道' },
+        { value: 0, label: '锦绣街道' },
+        { value: 0, label: '锦城街道' }
       ];
+
       let option = {
         grid: {
           top: 10,
@@ -237,76 +219,99 @@ export default {
             show: false
           }
         },
-        series: [{
-          name: 'label',
-          type: 'bar',
-          barWidth: 10,
-          yAxisIndex: 0,
-          label: {
-            show: true,
-            position: 2,
-            color: '#fff',
-            fontSize: 12
-          },
-          data: data.map((item) => {
-            return {
-              value: 0,
-              label: {
-                formatter() {
-                  return item.label;
-                }
-              }
-            };
-          })
-        }, {
-          name: 'value',
-          type: 'bar',
-          barWidth: 10,
-          barMinHeight: 10, // 最小高度
-          yAxisIndex: 0,
-          label: {
-            show: true,
-            position: 'right',
-            color: '#00d5e1',
-            fontSize: 12,
-            formatter({
-                        value
-                      }) {
-              return `${value}人`;
-            }
-          },
-          itemStyle: {
-            barBorderRadius: 3
+        series: [
+          {
+            name: 'label',
+            type: 'bar',
+            barWidth: 10,
+            yAxisIndex: 0,
+            label: {
+              show: true,
+              position: 2,
+              color: '#fff',
+              fontSize: 12
+            },
+            data: data.map((item) => {
+              return {
+                value: 0,
+                label: { formatter() {
+                    return item.label;
+                  } }
+              };
+            })
           },
-          data: data.map(({
-                            value
-                          }, index) => {
-            let color = new echarts.graphic.LinearGradient(1, 0, 0, 1, [{
-              offset: 1,
-              color: '#004eaf' // 0% 处的颜色
-            }, {
-              offset: 0,
-              color: '#089aa2' // 100% 处的颜色
-            }], false)
-            return {
-              value,
-              label: {
-                color
-              },
-              itemStyle: {
-                color
+          {
+            name: 'value',
+            type: 'bar',
+            barWidth: 10,
+            barMinHeight: 10,
+            yAxisIndex: 0,
+            label: {
+              show: true,
+              position: 'right',
+              color: '#00d5e1',
+              fontSize: 12,
+              formatter({ value }) {
+                return `${value}人`;
               }
-            };
-          })
-        }]
+            },
+            itemStyle: {
+              barBorderRadius: 3
+            },
+            data: data.map(({ value }, index) => {
+              let color = new echarts.graphic.LinearGradient(1, 0, 0, 1, [{
+                offset: 1,
+                color: '#004eaf'
+              }, {
+                offset: 0,
+                color: '#089aa2'
+              }], false);
+
+              return {
+                value,
+                label: { color },
+                itemStyle: { color }
+              };
+            })
+          }
+        ]
       };
 
-      if (option) {
+      let updateInterval = 1000; // 更新间隔，单位：毫秒
+      let updateData = () => {
+        data.forEach((item) => {
+          item.value += Math.floor(Math.random() * 10); // 模拟逐渐增加的数据
+          if (item.value >= 1000) {
+            item.value = 0; // 当增加到1000时重新开始
+          }
+        });
+
+        option.series[1].data = data.map(({ value }, index) => {
+          let color = new echarts.graphic.LinearGradient(1, 0, 0, 1, [{
+            offset: 1,
+            color: '#004eaf'
+          }, {
+            offset: 0,
+            color: '#089aa2'
+          }], false);
+
+          return {
+            value,
+            label: { color },
+            itemStyle: { color }
+          };
+        });
+
         myChart.setOption(option);
-      }
+      };
+
+      updateData(); // 首次更新数据
+
+      let timer = setInterval(updateData, updateInterval);
+
     },
 
-    trend(){
+    trend() {
       //办件趋势
       var myChart = echarts.init(document.getElementById('sprh-bjqstj'));
       var monthData = [];
@@ -443,51 +448,70 @@ export default {
           },
         ],
       };
+      var currentIndex = -1;
+      var timer = setInterval(function () {
+        // 生成新的随机数据
+        currentIndex++;
+        if (currentIndex >= 12) {
+          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;
 
-      if(option){
+        // 重新渲染图表
+        myChart.setOption(option);
+      }, 1000); // 每秒更新一次数据
+
+      if (option) {
         myChart.setOption(option);
       }
     },
-    matterUpTop(){
+    matterUpTop() {
       var myChart = echarts.init(document.getElementById('sprh-sxbjl10'));
       var datas = [{
-        "value": 36,
+        "value": 0,
         "name": "特种设备安全管.."
       },
         {
-          "value": 54,
+          "value": 0,
           "name": "特种设备使用登.."
         },
         {
-          "value": 29,
+          "value": 0,
           "name": "特种设备安全管.."
         },
         {
-          "value": 25,
+          "value": 0,
           "name": "一孩、二孩、三孩.."
         },
         {
-          "value": 45,
+          "value": 0,
           "name": "失业登记"
         },
         {
-          "value": 29,
+          "value": 0,
           "name": "医师执业注册（.."
         },
         {
-          "value": 25,
+          "value": 0,
           "name": "残疾人证新办"
         },
         {
-          "value": 35,
+          "value": 0,
           "name": "护士执业注册(.."
         },
         {
-          "value": 55,
+          "value": 0,
           "name": "失业登记"
         },
         {
-          "value": 65,
+          "value": 0,
           "name": "一孩、二孩、三孩.. "
         },
 
@@ -506,7 +530,7 @@ export default {
           axisPointer: {
             type: 'none'
           },
-          formatter: function(params) {
+          formatter: function (params) {
             return params[0].name + ' : ' + params[0].value
           }
         },
@@ -590,7 +614,7 @@ export default {
           zlevel: 1,
           itemStyle: {
             normal: {
-              barBorderRadius:5,
+              barBorderRadius: 5,
               color: '#3196fa',
             },
           },
@@ -606,57 +630,74 @@ export default {
             itemStyle: {
               normal: {
                 color: '#042039',
-                barBorderRadius:5,
+                barBorderRadius: 5,
               }
             },
           },
         ]
       };
 
-      if(option){
+      if (option) {
         myChart.setOption(option);
       }
+      // 设置定时器，每隔一段时间更新数据并重绘图表
+      setInterval(function() {
+        datas.forEach(function(item) {
+          item.value += Math.floor(Math.random() * 10); // 每次随机增加一个0-9的数
+          if (item.value > 1000) {
+            item.value = 0; // 当超过1000时，重置为0
+          }
+        });
+        myChart.setOption({
+          series: [{
+            data: datas
+          },
+            {
+              data: maxArr
+            }]
+        });
+      }, 1000); // 每隔1秒更新一次
     },
-    matterTop(){
+    matterTop() {
       var myChart = echarts.init(document.getElementById('sprh-sxbjl-top'));
       var datas = [{
-        "value": 36,
+        "value": 0,
         "name": "民办学校的举办.."
       },
         {
-          "value": 54,
+          "value": 0,
           "name": "失业登记.."
         },
         {
-          "value": 29,
+          "value": 0,
           "name": "民办学校的终止.."
         },
         {
-          "value": 25,
+          "value": 0,
           "name": "医师执业注册(.."
         },
         {
-          "value": 45,
+          "value": 0,
           "name": "一孩、二孩、三孩.."
         },
         {
-          "value": 29,
+          "value": 0,
           "name": "药品零售企业许.."
         },
         {
-          "value": 25,
+          "value": 0,
           "name": "护士执业注册"
         },
         {
-          "value": 35,
+          "value": 0,
           "name": "残疾人证新办"
         },
         {
-          "value": 55,
+          "value": 0,
           "name": "医疗广告审查"
         },
         {
-          "value": 65,
+          "value": 0,
           "name": "变更施工单位项.."
         },
 
@@ -675,7 +716,7 @@ export default {
           axisPointer: {
             type: 'none'
           },
-          formatter: function(params) {
+          formatter: function (params) {
             return params[0].name + ' : ' + params[0].value
           }
         },
@@ -759,7 +800,7 @@ export default {
           zlevel: 1,
           itemStyle: {
             normal: {
-              barBorderRadius:5,
+              barBorderRadius: 5,
               color: '#3196fa',
             },
           },
@@ -775,16 +816,33 @@ export default {
             itemStyle: {
               normal: {
                 color: '#042039',
-                barBorderRadius:5,
+                barBorderRadius: 5,
               }
             },
           },
         ]
       };
 
-      if(option){
+      if (option) {
         myChart.setOption(option);
       }
+      // 设置定时器，每隔一段时间更新数据并重绘图表
+      setInterval(function() {
+        datas.forEach(function(item) {
+          item.value += Math.floor(Math.random() * 10); // 每次随机增加一个0-9的数
+          if (item.value > 1000) {
+            item.value = 0; // 当超过1000时，重置为0
+          }
+        });
+        myChart.setOption({
+          series: [{
+            data: datas
+          },
+            {
+              data: maxArr
+            }]
+        });
+      }, 1000); // 每隔1秒更新一次
     },
   },
 };