bihuisong 11 months ago
parent
commit
ab1f893f02

+ 1 - 0
zhsq_qk-ui/src/assets/images/qkq_index.css

@@ -96,6 +96,7 @@
 .qkq_yshj_con .qkq_yshj_list p{
 	font-size: 12px;
 	color: #fff;
+  top: 60px;
 	line-height: 22px;
 	position: relative;
 	padding-left: 13px;

+ 25 - 48
zhsq_qk-ui/src/views/fusion/index.vue

@@ -50,7 +50,7 @@
       <div class="qkq_yshj">
         <div class="qkq_tit">营商环境</div>
         <div class="qkq_yshj_con">
-          <div id="yshj"></div>
+          <div id="yshj" style="top: 60px;"></div>
           <div class="qkq_yshj_list">
             <p>规上入统<span>1000</span></p>
             <p>大型企业<span>1000</span></p>
@@ -63,8 +63,8 @@
       </div>
       <!--网格管理-->
       <div class="qkq_wggl">
-        <div class="qkq_tit">网格管理</div>
-        <div id="wggl"></div>
+        <div class="qkq_tit" style="top:70px">网格管理</div>
+        <div id="wggl" style="top:70px"></div>
       </div>
     </div>
     <!--左侧结束-->
@@ -102,7 +102,7 @@
       </div>
       <!--经济运行-->
       <div class="qkq_jjyx">
-        <div class="qkq_tit">经济运行
+        <div class="qkq_tit" style="top:20px">经济运行
           <select id="mySelect">
             <option value="option1">规上入统</option>
             <option value="option2">大型企业</option>
@@ -112,7 +112,7 @@
             <option value="option6">汽配产业</option>
           </select>
         </div>
-        <div id="jjyx"></div>
+        <div id="jjyx" style="top:20px"></div>
       </div>
       <!--事件信息-->
       <div class="qkq_jjyx">
@@ -262,7 +262,6 @@ export default {
       var myChart = echarts.init(document.getElementById('yshj'));
       let option = {
         tooltip: {},
-
         radar: {
           radius: "55%", //大小
           nameGap: 1, // 图中工艺等字距离图的距离
@@ -283,30 +282,29 @@ export default {
               return name;
             }
           },
-          indicator: [{
-            "name": '规上入统',
-            "max": "100"
-          }, {
-            "name": '大型企业',
-            "max": "100"
-          }, {
-            "name": '中型企业',
-            "max": "100"
-          }, {
-            "name": '小型企业',
-            "max": "100"
-          }, {
-            "name": '微型企业',
-            "max": "100"
-          }, {
-            "name": '汽配产业',
-            "max": "100"
-          },
-
+          indicator: [
+            {
+              "name": '规上入统',
+              "max": "100"
+            }, {
+              "name": '大型企业',
+              "max": "100"
+            }, {
+              "name": '中型企业',
+              "max": "100"
+            }, {
+              "name": '小型企业',
+              "max": "100"
+            }, {
+              "name": '微型企业',
+              "max": "100"
+            }, {
+              "name": '汽配产业',
+              "max": "100"
+            },
           ],
           axisLine: {
             lineStyle: {
-
               color: "rgba(1, 118, 214, 0.8)"
             }
           },
@@ -324,7 +322,6 @@ export default {
             }
           }
         },
-
         series: [{
           name: "营商环境分析",
           type: "radar",
@@ -357,29 +354,9 @@ export default {
           }]
         }]
       }
-
       if (option) {
         myChart.setOption(option);
       }
-
-      let value = [0, 28, 36, 12, 20, 0]; // 初始化数值为0
-      function updateData() {
-        // 每个值都从0开始往上涨,涨到100后重新开始
-        value = value.map(v => (v + 10) % 101);
-
-        let newData = {
-          value: value, // 更新雷达图的数据,这里只更新了第一个值
-        };
-
-        option.series[0].data[0] = newData; // 更新雷达图的数据
-
-        myChart.setOption(option); // 重新渲染雷达图
-      }
-
-// 设置定时器每隔一定时间更新数据
-      setInterval(() => {
-        updateData();
-      }, 1000); // 每100毫秒更新一次数据,可以根据需要调整时间间隔
     },
     grid() {
       //	网格管理

File diff suppressed because it is too large
+ 16 - 3
zhsq_qk-ui/src/views/fusion/jczl.vue


+ 11 - 1
zhsq_qk-ui/src/views/fusion/jtzl.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="background-color: #32435A">
     <div class="map">
       <supermap ref="supermap" style="height: 100%;width: 100%;position: absolute;z-index: 0;"
                 :yxtSltProps="sltProps"></supermap>
@@ -114,6 +114,16 @@
       <div class="qkq_bmfw">
         <div class="qkq_tit ">摄像头统计</div>
         <div id="jczl-bmfw" style="margin: 20px auto 0px auto; width: 350px; height: 160px"></div>
+        <div class="sb_cont sb_cont_sxt">
+          <div class="sb_in">
+            <span class="lxsb">小区内部</span>
+            <h2 class="zxsb_sl">704<i>个</i></h2>
+          </div>
+          <div class="sb_in">
+            <span class="lxsb">街道路面</span>
+            <h2 class="lxsb_sl">230<i>个</i></h2>
+          </div>
+        </div>
       </div>
     </div>
     <!--右侧结束-->

+ 34 - 30
zhsq_qk-ui/src/views/fusion/sprh.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div  style="background-color: #32435A">
     <div class="map">
       <supermap ref="supermap" style="height: 100%;width: 100%;position: absolute;z-index: 0;"
                 :yxtSltProps="sltProps"></supermap>
@@ -113,16 +113,16 @@
       <div class="qkq_bmfw">
         <div class="qkq_tit ">摄像头统计</div>
         <div id="jczl-bmfw" style="margin: 20px auto 0px auto; width: 350px; height: 160px"></div>
-		<div class="sb_cont sb_cont_sxt">
-		  <div class="sb_in">
-			   <span class="lxsb">小区内部</span>
-		    <h2 class="zxsb_sl">1234<i>个</i></h2>
-		  </div>
-		  <div class="sb_in">
-		    <span class="lxsb">街道路面</span>
-		    <h2 class="lxsb_sl">234<i>个</i></h2>
-		  </div>
-		</div>
+        <div class="sb_cont sb_cont_sxt">
+          <div class="sb_in">
+            <span class="lxsb">小区内部</span>
+            <h2 class="zxsb_sl">704<i>个</i></h2>
+          </div>
+          <div class="sb_in">
+            <span class="lxsb">街道路面</span>
+            <h2 class="lxsb_sl">230<i>个</i></h2>
+          </div>
+        </div>
       </div>
     </div>
     <!--右侧结束-->
@@ -403,7 +403,7 @@ export default {
             name: "ring5",
             type: 'custom',
             coordinateSystem: "none",
-            renderItem: function(params, api) {
+            renderItem: function (params, api) {
               return {
                 type: 'arc',
                 shape: {
@@ -426,7 +426,7 @@ export default {
             name: "ring5", //紫点
             type: 'custom',
             coordinateSystem: "none",
-            renderItem: function(params, api) {
+            renderItem: function (params, api) {
               let x0 = api.getWidth() / 2;
               let y0 = api.getHeight() / 2;
               let r = Math.min(api.getWidth(), api.getHeight()) * 0.42;
@@ -452,7 +452,7 @@ export default {
             name: "ring5",
             type: 'custom',
             coordinateSystem: "none",
-            renderItem: function(params, api) {
+            renderItem: function (params, api) {
               return {
                 type: 'arc',
                 shape: {
@@ -476,7 +476,7 @@ export default {
             name: "ring5", // 蓝色
             type: 'custom',
             coordinateSystem: "none",
-            renderItem: function(params, api) {
+            renderItem: function (params, api) {
               let x0 = api.getWidth() / 2;
               let y0 = api.getHeight() / 2;
               let r = Math.min(api.getWidth(), api.getHeight()) * 0.42;
@@ -501,7 +501,7 @@ export default {
             name: "ring5",
             type: 'custom',
             coordinateSystem: "none",
-            renderItem: function(params, api) {
+            renderItem: function (params, api) {
               return {
                 type: 'arc',
                 shape: {
@@ -526,7 +526,7 @@ export default {
             name: "ring5",
             type: 'custom',
             coordinateSystem: "none",
-            renderItem: function(params, api) {
+            renderItem: function (params, api) {
               return {
                 type: 'arc',
                 shape: {
@@ -549,7 +549,7 @@ export default {
             name: "ring5",
             type: 'custom',
             coordinateSystem: "none",
-            renderItem: function(params, api) {
+            renderItem: function (params, api) {
               let x0 = api.getWidth() / 2;
               let y0 = api.getHeight() / 2;
               let r = Math.min(api.getWidth(), api.getHeight()) * 0.47;
@@ -573,7 +573,7 @@ export default {
             name: "ring5", //绿点
             type: 'custom',
             coordinateSystem: "none",
-            renderItem: function(params, api) {
+            renderItem: function (params, api) {
               let x0 = api.getWidth() / 2;
               let y0 = api.getHeight() / 2;
               let r = Math.min(api.getWidth(), api.getHeight()) * 0.47;
@@ -714,15 +714,17 @@ export default {
           y: y1
         }
       }
+
       function draw() {
         angle = angle + 3
         myChart.setOption(option, true)
         //window.requestAnimationFrame(draw);
       }
+
       if (timerId) {
         clearInterval(timerId);
       }
-      timerId = setInterval(function() {
+      timerId = setInterval(function () {
         //用setInterval做动画感觉有问题
         draw()
       }, 100);
@@ -763,7 +765,7 @@ export default {
             name: "ring5",
             type: 'custom',
             coordinateSystem: "none",
-            renderItem: function(params, api) {
+            renderItem: function (params, api) {
               return {
                 type: 'arc',
                 shape: {
@@ -786,7 +788,7 @@ export default {
             name: "ring5", //紫点
             type: 'custom',
             coordinateSystem: "none",
-            renderItem: function(params, api) {
+            renderItem: function (params, api) {
               let x0 = api.getWidth() / 2;
               let y0 = api.getHeight() / 2;
               let r = Math.min(api.getWidth(), api.getHeight()) * 0.42;
@@ -812,7 +814,7 @@ export default {
             name: "ring5",
             type: 'custom',
             coordinateSystem: "none",
-            renderItem: function(params, api) {
+            renderItem: function (params, api) {
               return {
                 type: 'arc',
                 shape: {
@@ -836,7 +838,7 @@ export default {
             name: "ring5", // 蓝色
             type: 'custom',
             coordinateSystem: "none",
-            renderItem: function(params, api) {
+            renderItem: function (params, api) {
               let x0 = api.getWidth() / 2;
               let y0 = api.getHeight() / 2;
               let r = Math.min(api.getWidth(), api.getHeight()) * 0.42;
@@ -861,7 +863,7 @@ export default {
             name: "ring5",
             type: 'custom',
             coordinateSystem: "none",
-            renderItem: function(params, api) {
+            renderItem: function (params, api) {
               return {
                 type: 'arc',
                 shape: {
@@ -886,7 +888,7 @@ export default {
             name: "ring5",
             type: 'custom',
             coordinateSystem: "none",
-            renderItem: function(params, api) {
+            renderItem: function (params, api) {
               return {
                 type: 'arc',
                 shape: {
@@ -909,7 +911,7 @@ export default {
             name: "ring5",
             type: 'custom',
             coordinateSystem: "none",
-            renderItem: function(params, api) {
+            renderItem: function (params, api) {
               let x0 = api.getWidth() / 2;
               let y0 = api.getHeight() / 2;
               let r = Math.min(api.getWidth(), api.getHeight()) * 0.47;
@@ -933,7 +935,7 @@ export default {
             name: "ring5", //绿点
             type: 'custom',
             coordinateSystem: "none",
-            renderItem: function(params, api) {
+            renderItem: function (params, api) {
               let x0 = api.getWidth() / 2;
               let y0 = api.getHeight() / 2;
               let r = Math.min(api.getWidth(), api.getHeight()) * 0.47;
@@ -1074,15 +1076,17 @@ export default {
           y: y1
         }
       }
+
       function draw() {
         angle = angle + 3
         myChart.setOption(option, true)
         //window.requestAnimationFrame(draw);
       }
+
       if (timerId) {
         clearInterval(timerId);
       }
-      timerId = setInterval(function() {
+      timerId = setInterval(function () {
         //用setInterval做动画感觉有问题
         draw()
       }, 100);
@@ -1132,7 +1136,7 @@ export default {
           },
           top: '0%',
           left: 'bottom',
-		  bottm:'-10%'
+          bottm: '-10%'
         },
         tooltip: {
           trigger: 'axis',

+ 61 - 101
zhsq_qk-ui/src/views/fusion/yshj.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="background-color: #32435A">
     <div class="map">
       <!--            <img src="@/assets/images/qkq_mapbg.png"/>-->
       <!--      <supermap ref="supermap" style="height: 100%;width: 100%;position: absolute;z-index: 0;"-->
@@ -1386,133 +1386,93 @@ export default {
     },
     bmbjl() {
       var myChart = echarts.init(document.getElementById('bmbjl'));
-      const color = ['rgba(0, 181, 255, 0.3)']; //线条边框颜色
-      // const backgroundColor = '#101736';
       const typeList = ['xx部门', 'xx部门', 'xx部门', 'xx部门', 'xx部门', 'xx部门', 'xx部门', 'xx部门', 'xx部门', 'xx部门'];
-      const number = [10, 23, 14, 17, 20, 18, 10, 23, 14, 17];
-      // const maxData = Math.max(...number) * 1.1;
-
       let valueData = [];
       let labelData = []
       for (var i = 0; i < typeList.length; i++) {
         labelData.push(typeList[i]);
-        var lineNumber = Math.floor(Math.random() * 100);
+        var lineNumber = Math.floor(Math.random() * 1000);
         valueData.push(lineNumber);
       }
       const maxData = Math.max(...valueData) * 1.1;
-      const title = {
-        show: false,
-      };
-      const legend = {
-        show: false,
-      };
-      const tooltip = {
-        show: true,
-      };
       const indicator = labelData.reduce((acc, cur) => {
         acc.push({name: cur, max: maxData});
         return acc;
       }, []);
-      const dataArr = [
-        {
-          name: '部门办件率',
-          value: valueData,
-          symbolSize: 0,
-          symbol: 'circle',
-
-          lineStyle: {
-            width: 1,
-          },
-          areaStyle: {
-            // 单项区域填充样式
-            color: {
-              type: 'linear',
-              x: 0, //右
-              y: 0, //下
-              x2: 1, //左
-              y2: 1, //上
-              colorStops: [
-                {
-                  offset: 0,
-                  color: color[0],
-                },
-                {
-                  offset: 0.5,
-                  color: 'rgba(0,0,0,0)',
-                },
-                {
-                  offset: 1,
-                  color: color[0],
-                },
-              ],
-              global: false,
-            },
-            opacity: 1, // 区域透明度
-          },
-        },
-      ];
-
       var option = {
-        color,
-        title,
-        legend,
-        tooltip,
+        tooltip: {},
         radar: {
           center: ['50%', '50%'], //圆心坐标距离左边和上边的距离
+          nameGap: 1, // 图中工艺等字距离图的距离
           radius: ['0%', '75%'], //内外半径,不写默认是75%
-          startAngle: 90, //可以旋转图形
-          shape: 'circle',
-          axisName: {
-            color: '#fff',
-            fontSize: 11,
+          name: {
+            textStyle: {
+              color: "rgba(175, 190, 211, 1)",
+              fontSize: 10
+            },
+            textStyle: {
+              color: '#fff',
+              textShadowColor: 'rgba(0, 255, 255, 1)',
+              textShadowBlur: 5,
+              textShadowOffsetX: 0,
+              textShadowOffsetY: 0
+            },
+            formatter: function (name) {
+              return name;
+            }
           },
           indicator: indicator,
-          splitArea: {
-            show: false, //默认显示颜色分割区域,不需要显示
-          },
           axisLine: {
-            show: true, //是否显示十字交叉线
-            symbol: ['none', 'circle'],
-            symbolSize: [8, 8],
-
             lineStyle: {
-              color: '#fff',
-              width: 0,
-
-            },
+              color: "rgba(1, 118, 214, 0.8)"
+            }
+          },
+          splitArea: {
+            show: false,
+            areaStyle: {
+              color: "rgba(255,0,0,0)" // 图表背景的颜色
+            }
           },
-          axisLabel: {show: false},
           splitLine: {
-            //雷达一圈圈
             show: true,
             lineStyle: {
-              type: 'solid',
-              color: '#455063', // 雷达一圈圈颜色分隔线颜色
-              width: 1, // 分隔线线宽
-            },
-          },
+              width: 1,
+              color: "rgba(1, 135, 244, 0.8)" // 设置网格的颜色
+            }
+          }
         },
-        series: [
-          {
-            type: 'radar',
-            data: dataArr,
+        series: [{
+          name: "部门办件率",
+          type: "radar",
+          symbol: "angle",
+          itemStyle: {
+            normal: {
+              areaStyle: {
+                type: "default"
+              }
+            }
           },
-        ],
-      };
-
-      function updateData() {
-        let newData = [];
-        for (var i = 0; i < typeList.length; i++) {
-          var lineNumber = Math.floor(Math.random() * 100); // 生成0到1000之间的随机数
-          newData.push(lineNumber);
-        }
-        option.series[0].data[0].value = newData;
-        myChart.setOption(option);
+          data: [{
+            symbol: "circle",
+            symbolSize: 5,
+            value: valueData,
+            areaStyle: {
+              color: "rgba(1, 132, 238, 0.8)"
+            },
+            itemStyle: {
+              normal: {
+                borderWidth: 1,
+                color: "rgba(0, 62, 120, 1.0)",
+                borderColor: "rgba(2, 96, 176, 1)"
+              }
+            },
+            lineStyle: {
+              color: "rgba(2, 96, 176, 1)",
+              width: 1
+            }
+          }]
+        }]
       }
-
-      setInterval(function () {
-        updateData();
-      }, 1000); // 每秒更新一次数据
       if (option) {
         myChart.setOption(option);
       }

+ 2 - 2
zhsq_qk-ui/src/views/supermap/qkmap.vue

@@ -246,7 +246,7 @@ export default {
         };
 
         option = {
-          backgroundColor: "#336699",
+          // backgroundColor: "#336699",
           tooltip: {
             trigger: 'item',
             formatter: function (params) {
@@ -353,7 +353,7 @@ export default {
                 show: true,
                 textStyle: {
                   color: "#fff",
-                  fontSize: 12,
+                  fontSize: 14,
                 },
               },
               emphasis: {

+ 1 - 1
zhsq_qk-ui/src/views/supermap/supermap.vue

@@ -107,7 +107,7 @@ export default {
         this.map_jilinShiLiang = window.L.supermap.tiledMapLayer(this.workspace_qk, {
           noWrap: true
         });
-        this.map_qikaiYingXiang = window.L.supermap.tiledMapLayer(this.workspace_qkyxt, {
+        this.map_qikaiYingXiang = window.L.supermap.tiledMapLayer(this.workspace_qkyxt + '/经开影像', {
           noWrap: true
         });
         this.initSlt();