雷达分页

src/views/bigScreen/management/index.vue

@@ -3,19 +3,19 @@
     <div class="left1">
       <left1></left1>
     </div>
-    <div class="left2">
+    <!-- <div class="left2">
       <left2></left2>
-    </div>
+    </div> -->
     <!-- <div class="bg1"></div> -->
 
     <div class="center1">
-      <center1></center1>
+      <!-- <center1></center1> -->
     </div>
     <!-- <div class="center2">
 			<center2></center2>
 		</div> -->
     <div class="right1">
-      <right1></right1>
+      <!-- <right1></right1> -->
     </div>
 
     <div class="right2">

src/views/bigScreen/management/left1.vue

@@ -2,6 +2,7 @@
   <div>
     <container2 title="战略指标">
       <el-pagination
+        v-if="total"
         small
         slot="datePicker"
         layout="prev, pager, next"
@@ -13,6 +14,8 @@
       >
       </el-pagination>
       <div style="height: 100%; width: 100%" ref="chart"></div>
+      <!-- <div style="height: 100%; width: 100%" ref="chartOdd" v-if="isOdd"></div>
+      <div style="height: 100%; width: 100%" ref="chartEven"></div> -->
     </container2>
     <container2 title="综合指标" style="margin-top: 10px">
       <bigScreenTabs
@@ -158,6 +161,7 @@ export default {
   },
   data() {
     return {
+      isOdd: true,
       currentPage1: 1,
       dataList: [],
       total: 0,
@@ -198,15 +202,10 @@ export default {
         method: "get",
       }).then((res) => {
         if (200 == res.code) {
-          if (res.data.length % 2 == 0) {
+          this.total = res.data.length;
-            this.total = res.data.length;
+          this.dataList = res.data;
-            this.dataList = res.data;
+          if (this.total == 0) return false;
-          } else {
+          this.setData(res.data.slice(0, 2));
-            this.total = res.data.length - 1;
-            res.data.splice(this.total);
-            this.dataList = res.data;
-            this.setData(this.dataList.slice(0, 2));
-          }
           // if (res.data.length > 2) {
           //   list = res.data.splice(0, 2);
           // } else {
@@ -220,7 +219,9 @@ export default {
       const data = this.dataList.slice(val * 2 - 2, val * 2);
       this.setData(data);
     },
+
     setData(list) {
+      if (list.length < 2) return this.setOddEchars(list);
       this.chart = echarts.init(this.$refs.chart, "macarons");
       let arr1 = [
         ...list[0].value.map((e) => parseInt(e.startNumber)),
@@ -254,7 +255,7 @@ export default {
           },
           {
             text: list[1].key,
-            left: "65%",
+            left: "68%",
             bottom: 5,
             textStyle: {
               color: "#fff",
@@ -393,6 +394,103 @@ export default {
         ],
       });
     },
+    setOddEchars(list) {
+      let arr1 = [
+        ...list[0].value.map((e) => parseInt(e.startNumber)),
+        ...list[0].value.map((e) => parseInt(e.endNumber)),
+        ...list[0].value.map((e) => parseInt(e.yearTarget)),
+      ];
+      let max0 = Math.max.apply(null, arr1);
+      if (this.chart) {
+        this.chart.dispose();
+        this.chart = null;
+      }
+      this.chart = echarts.init(this.$refs.chart, "macarons");
+      this.chart.setOption({
+        title: {
+          text: list[0].key,
+          left: "43%",
+          bottom: 5,
+          textStyle: {
+            color: "#fff",
+            fontStyle: "normal",
+            fontWeight: "600",
+            fontFamily: "sans-serif",
+            fontSize: 18,
+          },
+        },
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          left: "center",
+          data: ["初期", "当年目标", "末期"],
+          textStyle: {
+            color: "#fff",
+          },
+        },
+        color: ["#5AD8A6", "#F6D97E", "#5B8FF9"],
+        radar: [
+          {
+            indicator: [
+              ...list[0].value.map((e, index) => {
+                if (index == 0) {
+                  // return { name: e.indexName, axisLabel: { show: true }, color: '#fff' };
+                  return {
+                    name: e.indexName,
+                    max: max0,
+                    axisLabel: { show: true },
+                    color: "#fff",
+                  };
+                }
+                return {
+                  name: e.indexName,
+                  // max: Math.max(...list[0].value.map(e => e.startNumber),...list[0].value.map(e => e.indexName),...list[0].value.map(e => e.endNumber) )
+                };
+              }),
+              // { name: '登陆频次', max: 6500, axisLabel: { show: true }, color: '#fff' },
+            ],
+            center: ["50%", "50%"],
+            radius: 50,
+            name: {
+              // (圆外的标签)雷达图每个指示器名称的配置项。
+              textStyle: {
+                color: "#fff",
+              },
+            },
+            // 最大值
+            axisLabel: {
+              color: "#fff",
+            },
+          },
+        ],
+        series: [
+          {
+            type: "radar",
+            data: [
+              {
+                value: list[0].value.map((e) => e.startNumber),
+                name: "初期",
+                label: {
+                  normal: {
+                    // show: true,
+                    color: "#fff",
+                  },
+                },
+              },
+              {
+                value: list[0].value.map((e) => e.yearTarget),
+                name: "当年目标",
+              },
+              {
+                value: list[0].value.map((e) => e.endNumber),
+                name: "末期",
+              },
+            ],
+          },
+        ],
+      });
+    },
     initLine() {
       this.request({
         url: "/hx/operating/getHxSynthesizeIndexPic",

src/views/bigScreen/management/right2.vue

@@ -319,44 +319,220 @@ export default {
           // console.log(list.filter(e => e.category == '其他').map(e => e.realQuantity))
           this.initChart3(categoryTotal);
 
-          let newArray = [];
+          var app = {};
-          for (let i = 0; i < list.length; i++) {
+          var posList = [
-            const item = list[i];
+            "left",
-            newArray.push([]);
+            "right",
-            for (let j = 0; j < item.length; j++) {
+            "top",
-              const item2 = item[j];
+            "bottom",
-              if (item2.realQuantity) {
+            "inside",
-                item2["completionRate"] = (
+            "insideTop",
-                  item2.realQuantity / item2.planQuantity
+            "insideLeft",
-                ).toFixed(4);
+            "insideRight",
-                newArray[i].push(item2);
+            "insideBottom",
-              }
+            "insideTopLeft",
-            }
+            "insideTopRight",
-          }
+            "insideBottomLeft",
-          console.log(newArray);
+            "insideBottomRight",
+          ];
+
+          app.configParameters = {
+            rotate: {
+              min: -90,
+              max: 90,
+            },
+            align: {
+              options: {
+                left: "left",
+                center: "center",
+                right: "right",
+              },
+            },
+            verticalAlign: {
+              options: {
+                top: "top",
+                middle: "middle",
+                bottom: "bottom",
+              },
+            },
+            position: {
+              options: echarts.util.reduce(
+                posList,
+                function (map, pos) {
+                  map[pos] = pos;
+                  return map;
+                },
+                {}
+              ),
+            },
+            distance: {
+              min: 0,
+              max: 100,
+            },
+          };
+
+          app.config = {
+            rotate: 90,
+            align: "left",
+            verticalAlign: "middle",
+            position: "insideBottom",
+            distance: 15,
+            onChange: function () {
+              var labelOption = {
+                normal: {
+                  rotate: app.config.rotate,
+                  align: app.config.align,
+                  verticalAlign: app.config.verticalAlign,
+                  position: app.config.position,
+                  distance: app.config.distance,
+                },
+              };
+              myChart.setOption({
+                series: [
+                  {
+                    label: labelOption,
+                  },
+                  {
+                    label: labelOption,
+                  },
+                  {
+                    label: labelOption,
+                  },
+                  {
+                    label: labelOption,
+                  },
+                ],
+              });
+            },
+          };
+
+          var labelOption = {
+            show: true,
+            position: app.config.position,
+            distance: app.config.distance,
+            align: app.config.align,
+            verticalAlign: app.config.verticalAlign,
+            rotate: app.config.rotate,
+            formatter: "{c}  {name|{a}}",
+            fontSize: 16,
+            rich: {
+              name: {
+                textBorderColor: "#fff",
+              },
+            },
+          };
 
           this.chart2 = echarts.init(this.$refs.chart2);
           this.chart2.setOption({
+            color: colorList,
+            tooltip: {
+              trigger: "axis",
+              axisPointer: {
+                type: "shadow",
+              },
+              // 进行数据处理
+              formatter: function (params) {
+                var html = "";
+                if (params.length != 0) {
+                  // 可以自己打印一下console.info(params[0]);
+                  var getName = params[0].name;
+                  html += getName + "<br/>";
+                  for (var i = 0; i < params.length; i++) {
+                    // 如果为0 为空的数据我们不要了(你们可以直接判断 > 0)
+                    if (
+                      params[i].value != null &&
+                      params[i].value != 0 &&
+                      params[i].value != ""
+                    ) {
+                      html += params[i].marker;
+                      html +=
+                        params[i].seriesName + ": " + params[i].value + "<br/>";
+                    }
+                  }
+                }
+                return html;
+              },
+            },
             legend: {
-              // data: ['利润', '利润预测', '利润目标完成率'],
+              textStyle: {
-              // left: 0,
+                color: "#fff",
+              },
+              data: ["Forest", "Steppe", "Desert"],
+            },
+            toolbox: {
+              show: true,
+              orient: "vertical",
+              left: "right",
+              top: "center",
+              feature: {
+                mark: { show: true },
+                dataView: { show: true, readOnly: false },
+                magicType: {
+                  show: true,
+                  type: ["line", "bar", "stack", "tiled"],
+                },
+                restore: { show: true },
+                saveAsImage: { show: true },
+              },
+            },
+            dataZoom: {
+              type: "slider",
+              start: 0,
+              end: 50,
               textStyle: {
                 color: "#fff",
               },
             },
-            grid: {
-              left: "3%",
-              right: "6%",
-              bottom: "3%",
-              containLabel: true,
-            },
             xAxis: [
               {
                 type: "category",
-                data: monthList,
+                axisTick: { show: false },
-                axisPointer: {
+                position: "bottom",
-                  type: "shadow",
+                data: ["2012", "", "", "", ""],
+                axisLine: {
+                  lineStyle: {
+                    color: "rgb(255, 255, 255)",
+                  },
                 },
+              },
+              {
+                type: "category",
+                axisTick: { show: false },
+                position: "bottom",
+                data: ["", "2013", "", "", ""],
+                axisLine: {
+                  lineStyle: {
+                    color: "rgb(255, 255, 255)",
+                  },
+                },
+              },
+              {
+                type: "category",
+                axisTick: { show: false },
+                position: "bottom",
+                data: ["", "", "2014", "", ""],
+                axisLine: {
+                  lineStyle: {
+                    color: "rgb(255, 255, 255)",
+                  },
+                },
+              },
+              {
+                type: "category",
+                axisTick: { show: false },
+                position: "bottom",
+                data: ["", "", "", "2015", ""],
+                axisLine: {
+                  lineStyle: {
+                    color: "rgb(255, 255, 255)",
+                  },
+                },
+              },
+              {
+                type: "category",
+                axisTick: { show: false },
+                position: "bottom",
+                data: ["", "", "", "", "2016"],
                 axisLine: {
                   lineStyle: {
                     color: "rgb(255, 255, 255)",
@@ -366,39 +542,19 @@ export default {
             ],
             yAxis: [
               {
-                type: "value",
-                name: "",
-                min: 0,
-                // max: 250,
-                // interval: 50,
-                axisLabel: {
-                  formatter: "{value}",
-                },
-                splitLine: {
-                  show: false, //不显示网格线
-                },
-                splitArea: {
-                  show: false, //不显示网格区域
-                },
-                axisLine: {
-                  lineStyle: {
-                    color: "rgb(255, 255, 255)",
-                  },
-                },
-              },
-              {
-                type: "value",
                 min: 0,
                 max: 100,
-                // interval: 5,
+                interval: 20,
-                axisLabel: {
-                  formatter: "{value} %",
-                },
                 splitLine: {
-                  show: false, //不显示网格线
+                  show: true,
+                  //  改变轴线颜色
+                  lineStyle: {
+                    // 使用深浅的间隔色
+                    color: ["rgba(255, 255, 255,.5)"],
+                  },
                 },
-                splitArea: {
+                axisLabel: {
-                  show: false, //不显示网格区域
+                  formatter: "{value}",
                 },
                 axisLine: {
                   lineStyle: {
@@ -407,96 +563,95 @@ export default {
                 },
               },
             ],
-            grid: {
-              containLabel: true,
-              width: "99%",
-              left: 0,
-              top: 50,
-              bottom: 50,
-            },
-            dataZoom: {
-              type: "slider",
-              start: 0,
-              end: this.dataZoomEnd(monthList.length, 4),
-            },
             series: [
               {
-                name: "稀土",
+                name: "Forest",
                 type: "bar",
-                data: list.map(
+                barGap: 0,
-                  (e) => e.filter((e) => e.category == "稀土")[0].realQuantity
+                label: labelOption,
-                ),
+                xAxisIndex: 0,
-                itemStyle: {
+                data: [320],
-                  color: "#E3F5C2",
-                },
               },
               {
-                name: "隔热",
+                name: "Steppe",
                 type: "bar",
-                data: list.map(
+                label: labelOption,
-                  (e) => e.filter((e) => e.category == "隔热")[0].realQuantity
+                xAxisIndex: 0,
-                ),
+                data: [220],
-                itemStyle: {
-                  color: "#45D1CC",
-                },
               },
               {
-                name: "其他",
+                name: "Desert",
                 type: "bar",
-                data: list.map(
+                label: labelOption,
-                  (e) => e.filter((e) => e.category == "其他")[0].realQuantity
+                xAxisIndex: 0,
-                ),
+                data: [332],
-                itemStyle: {
-                  color: "#61C1FB",
-                },
               },
               {
-                name: "稀土完成率",
+                name: "Forest",
-                type: "line",
+                type: "bar",
-                yAxisIndex: 1,
+                barGap: 0,
-                smooth: false,
+                label: labelOption,
-                data: [
+                xAxisIndex: 1,
-                  12.0, 12.2, 13.3, 14.5, 16.3, 10.2, 20.3, 23.4, 23.0, 16.5,
+                data: ["", 320],
-                  12.0, 6.2,
-                ],
-                itemStyle: {
-                  normal: {
-                    color: "#E3F5C2",
-                  },
-                },
-                symbol: "none",
               },
               {
-                name: "隔热完成率",
+                name: "Steppe",
-                type: "line",
+                type: "bar",
-                yAxisIndex: 1,
+                label: labelOption,
-                smooth: false,
+                xAxisIndex: 1,
-                data: [
+                data: ["", 220],
-                  14.0, 14.2, 16.3, 18.5, 12.3, 20.2, 40.3, 43.4, 43.0, 26.5,
-                  22.0, 12.2,
-                ],
-                itemStyle: {
-                  normal: {
-                    color: "#45D1CC",
-                  },
-                },
-                symbol: "none",
               },
               {
-                name: "其他完成率",
+                name: "Desert",
-                type: "line",
+                type: "bar",
-                yAxisIndex: 1,
+                label: labelOption,
-                smooth: false,
+                xAxisIndex: 1,
-                data: [
+                data: ["", 232],
-                  22.0, 22.2, 32.3, 42.5, 26.3, 50.2, 30.3, 43.4, 43.0, 56.5,
+              },
-                  42.0, 56.2,
+              {
-                ],
+                name: "Forest",
-                itemStyle: {
+                type: "bar",
-                  normal: {
+                barGap: 0,
-                    color: "#61C1FB",
+                label: labelOption,
-                  },
+                xAxisIndex: 2,
-                },
+                data: ["", "", 320],
-                symbol: "none",
+              },
+              {
+                name: "Steppe",
+                type: "bar",
+                label: labelOption,
+                xAxisIndex: 2,
+                data: ["", "", 420],
+              },
+              {
+                name: "Desert",
+                type: "bar",
+                label: labelOption,
+                xAxisIndex: 2,
+                data: ["", "", 232],
+              },
+              {
+                name: "Forest",
+                type: "bar",
+                barGap: 0,
+                label: labelOption,
+                xAxisIndex: 3,
+                data: ["", "", "", 320],
+              },
+              {
+                name: "Forest",
+                type: "bar",
+                barGap: 0,
+                label: labelOption,
+                xAxisIndex: 4,
+                data: ["", "", "", "", 620],
+              },
+              {
+                name: "Steppe",
+                type: "bar",
+                label: labelOption,
+                xAxisIndex: 4,
+                data: ["", "", "", "", 290],
               },
             ],
           });

src/views/bigScreen/securityManage/center.vue

@@ -21,7 +21,7 @@
         >
           <div class="con_title con_title_bg1">
             <img src="./img/left1/icon.png" alt="" />
-            <span style="margin-left: 2px">一级：{{ v.pointName }}</span>
+            <span style="margin-left: 2px">Ⅰ级：{{ v.pointName }}</span>
           </div>
           <div class="com_img" @click="handleItem(v)">
             <img src="./img/left1/icon1.png" alt="" />
@@ -34,7 +34,7 @@
         >
           <div class="con_title con_title_bg2">
             <img src="./img/left1/icon.png" alt="" />
-            <span style="margin-left: 2px">二级：{{ v.pointName }}</span>
+            <span style="margin-left: 2px">Ⅱ级：{{ v.pointName }}</span>
           </div>
           <div class="com_img" @click="handleItem(v)">
             <img src="./img/left1/icon2.png" alt="" />
@@ -47,7 +47,7 @@
         >
           <div class="con_title con_title_bg3">
             <img src="./img/left1/icon.png" alt="" />
-            <span style="margin-left: 2px">三级：{{ v.pointName }}</span>
+            <span style="margin-left: 2px">Ⅲ级：{{ v.pointName }}</span>
           </div>
           <div class="com_img" @click="handleItem(v)">
             <img src="./img/left1/icon3.png" alt="" />

vue.config.js

@@ -34,8 +34,8 @@ module.exports = {
 			// detail: https://cli.vuejs.org/config/#devserver-proxy
 			[process.env.VUE_APP_BASE_API]: {
 				// target: `http://localhost:1818`,
-				target: `http://120.26.107.74:1818`,
+				// target: `http://120.26.107.74:1818`,
-				// target: `http://192.168.0.115:1818`,
+				target: `http://192.168.0.115:1818`,
 				// target: `http://124.70.138.50:1818`,
 				changeOrigin: true,
 				pathRewrite: {