update

src/loveflow/components/echart/chart.vue

@@ -22,7 +22,7 @@ export default {
   methods: {
     resize() {
       console.log(11111);
-      console.log( this.dom);
+      console.log(this.dom);
       this.dom && this.dom.resize();
     },
   },
@@ -34,6 +34,9 @@ export default {
       setTimeout(() => {
         this.dom = this.$echarts.init(this.$refs.dom);
         this.dom.setOption(this.echartdata, this.notMerge);
+        this.dom.on("click", (e) => {
+          console.log(e);
+        });
       }, 100);
     });
   },

src/views/enterpriseTeamWork/components/screenMain.vue

@@ -55,7 +55,7 @@ export default {
       align-items: center;
       justify-content: center;
       width: vw(830);
-      height: vw(70);
+      height: 60px;
       background: url("~@/assets/images/team/screent.png") no-repeat center
         center;
       background-size: 100% 100%;
@@ -64,7 +64,7 @@ export default {
       color: #ffffff;
     }
     .enterpriseTeamWorkScreenMainBtm {
-      flex: 1;
+      height: calc(100% - 60px);
       width: 100%;
     }
   }

src/views/enterpriseTeamWork/elementInfo/juageMap.vue

@@ -8,15 +8,17 @@
     </div>
     <div class="mapRightWrap">
       <div class="mapTop">热点事件分布预测</div>
-      <div class="mapBtm"></div>
+      <div class="mapBtm">
+        <mapWrap></mapWrap>
+      </div>
     </div>
   </div>
 </template>
 <script>
 import hbar from "./hbar.vue";
-
+import mapWrap from "./map.vue";
 export default {
-  components: { hbar },
+  components: { hbar, mapWrap },
   data() {
     return {
       qyObj: {

src/views/enterpriseTeamWork/problemRectify/dpie.vue

@@ -2,16 +2,22 @@
   <div class="dpiePanel" id="dpieWrap">
     <div class="dpieLegend">
       <div class="dpieRow" v-for="item in data" :key="item.name">
-        <div class="flex-center">
+        <div
-          <div
+          class="dpieIcon"
-            class="dpieIcon"
+          :style="{ backgroundImage: `url(${item.itemStyle.icon})` }"
-            :style="{ backgroundColor: item.itemStyle.color }"
+        ></div>
-          ></div>
+
+        <div class="dpieNameWrap">
           <div class="dpieName">{{ item.name }}</div>
-        </div>
+          <div
-        <div class="dpieValue">{{ item.value }}</div>
+            class="dpieValue"
-        <div class="dpieRate">
+            :style="{
-          {{ ((100 * item.value) / total).toFixed(0) }}%
+              color: item.itemStyle.tcolor,
+              textShadow: item.itemStyle.textShadow,
+            }"
+          >
+            {{ item.value }}
+          </div>
         </div>
       </div>
     </div>
@@ -21,7 +27,6 @@
         :style="{
           height: parseInt(viewH) + 'px',
           width: 2 * viewH + 'px',
-          marginLeft: parseInt(0.5 * viewH) + 'px',
         }"
       >
         <div ref="dpieWrapRef" class="dpieWrap"></div>
@@ -37,17 +42,33 @@ export default {
     return {
       data: [
         {
-          name: "按照要求整改",
+          name: "已整改",
-          value: 528,
+          value: 228,
           itemStyle: {
-            color: "#FFC052",
+            color: "#378DFF",
+            icon: require("@/assets/images/team/yzgi.png"),
+            tcolor: "##E3F6FF",
+            textShadow: "0px 0px 9px rgba(87,207,255,0.88)",
           },
         },
         {
-          name: "安全隐患企业",
+          name: "未按要求整改",
-          value: 128,
+          value: 21,
           itemStyle: {
-            color: "#FF745A",
+            color: "#DC4E4E",
+            icon: require("@/assets/images/team/wzgi.png"),
+            tcolor: "#FF7757",
+            textShadow: "0px 0px 9px rgba(255,119,87,0.88)",
+          },
+        },
+        {
+          name: "整改中",
+          value: 50,
+          itemStyle: {
+            color: "#EBCD6C",
+            icon: require("@/assets/images/team/zgzi.png"),
+            tcolor: "#FFF5E3",
+            textShadow: "0px 0px 9px rgba(255,202,87,0.88)",
           },
         },
       ],
@@ -62,7 +83,7 @@ export default {
     }
 
     let temp = this.getHeight();
-    let height = parseInt(temp / 3);
+    let height = parseInt(temp / 5);
     this.viewH = 2 * height;
     console.log(height);
 
@@ -162,10 +183,10 @@ export default {
             show: false,
             boxHeight: boxHeight, //圆环的高度
             left: 0,
-            top: -18, //3d饼图的位置
+            top: -22, //3d饼图的位置
             viewControl: {
               //3d效果可以放大、旋转等，请自己去查看官方配置
-              alpha: 24, //角度
+              alpha: 22, //角度
               distance: 120, //调整视角到主体的距离，类似调整zoom
               rotateSensitivity: 0, //设置为0无法旋转
               zoomSensitivity: 0, //设置为0无法缩放
@@ -183,7 +204,7 @@ export default {
         series.sort((a, b) => {
           return b.pieData.value - a.pieData.value;
         });
-        return (height * 50) / series[0].pieData.value;
+        return (height * 60) / series[0].pieData.value;
       };
 
       // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
@@ -280,7 +301,7 @@ export default {
         radius: ["80%", "80%"],
         center: ["50%", "50%"], //指示线的位置
         itemStyle: {
-          opacity: 0,
+          opacity: 1,
         },
       });
       option && myChart.setOption(option);
@@ -313,7 +334,7 @@ export default {
     position: absolute;
     right: vw(30);
     height: 100%;
-    width: 200px;
+    width: 140px;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -321,26 +342,21 @@ export default {
       padding: vw(6) vw(8);
       display: flex;
       align-items: center;
-      justify-content: space-between;
       margin-bottom: 6px;
-      background-color: rgba(108, 128, 151, 0.1);
       .dpieIcon {
         margin-right: 6px;
-        width: 8px;
+        width: 32px;
-        height: 8px;
+        height: 38px;
-        transform: rotate(45deg);
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        background-position: center center;
       }
       .dpieName {
-        font-size: 12px;
+        font-size: 14px;
-        color: #d0deee;
+        color: #fff5e3;
       }
       .dpieValue {
-        font-size: 16px;
+        font-size: 20px;
-        color: #ffffff;
-      }
-      .dpieRate {
-        font-size: 16px;
-        color: #ffffff;
       }
     }
   }

src/views/enterpriseTeamWork/problemRectify/gauge.vue

@@ -4,6 +4,7 @@
   </div>
 </template>
 <script>
+let bgImg = require("@/assets/images/team/gauge.png");
 export default {
   props: {
     chartObj: {
@@ -59,7 +60,7 @@ export default {
           },
         },
         //圆环宽度
-        barMaxWidth: 20,
+        barMaxWidth: 12,
         radiusAxis: {
           show: false,
           type: "category",
@@ -76,9 +77,26 @@ export default {
               {
                 value: 80,
                 itemStyle: {
-                  color: "rgba(35, 176, 176, 1)",
+                  //color: "rgba(35, 176, 176, 1)",
                   shadowColor: "rgba(35, 176, 176, 0.5)",
                   shadowBlur: 10,
+                  color: {
+                    type: "linear",
+                    x: 0,
+                    y: 0,
+                    x2: 1,
+                    y2: 0,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(55, 161, 204, 1)", // 0% 处的颜色
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(8, 250, 196, 1)", // 100% 处的颜色
+                      },
+                    ],
+                  },
                 },
               },
             ],
@@ -95,7 +113,7 @@ export default {
               {
                 value: 100,
                 itemStyle: {
-                  color: "#EBEDF5",
+                  color: "#1B2221",
                 },
               },
             ],
@@ -113,20 +131,22 @@ export default {
             min: 0,
             max: 100,
             splitNumber: 10,
-            radius: "70%", //图表尺寸
+            radius: "80%", //图表尺寸
             center: ["50%", "50%"],
             detail: {
-              formatter: "{r1|{value}}{r2|%}",
+              formatter: "{r|风险评分}\n{r1|{value}分}",
               color: "auto",
               rich: {
-                r1: {
+                r: {
-                  fontSize: 30,
+                  padding: [0, 0, -30, 0],
+                  fontSize: 14,
                   verticalAlign: "bottom",
-                  padding: [0, 5, -2, 0],
+                  color: "#D0DEEE",
                 },
-                r2: {
+                r1: {
-                  fontSize: 20,
+                  fontSize: 26,
                   verticalAlign: "bottom",
+                  padding: [0, 0, -30, 0],
                 },
               },
             },
@@ -135,23 +155,28 @@ export default {
               showAbove: true,
               size: 10,
               itemStyle: {
-                borderWidth: 2,
+                borderWidth: 0,
                 borderColor: "#2262E4",
               },
             },
             pointer: {
+              //icon: "image://" + bgImg,
               icon: "path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z",
-              length: "75%",
+              length: "70%",
-              width: 10,
+              width: 6,
-              offsetCenter: [0, "5%"],
+              keepAspect: true,
+              offsetCenter: [0, 2],
+              itemStyle: {
+                color: "#3fc7af",
+              },
             },
             progress: {
               roundCap: true,
-              show: true,
+              show: false,
               width: 0,
             },
             itemStyle: {
-              color: "#2262E4",
+              color: "#E3FEFF",
             },
             data: [
               {
@@ -160,15 +185,15 @@ export default {
               },
             ],
             axisLine: {
-              show: true,
+              show: false,
               lineStyle: {
                 width: 0,
                 shadowBlur: 0,
                 color: [
-                  [0.2, "#23AFAF"],
+                  [0.2, "#A5C8C7"],
-                  [0.4, "#2270DA"],
+                  [0.4, "#A5C8C7"],
-                  [0.6, "#E99D02"],
+                  [0.6, "#A5C8C7"],
-                  [1, "#F45656"],
+                  [1, "#A5C8C7"],
                 ],
               },
             },
@@ -176,13 +201,13 @@ export default {
               show: true,
               lineStyle: {
                 color: "auto",
-                width: 2,
+                width: 1,
               },
-              length: 10,
+              length: 2,
               splitNumber: 5,
             },
             splitLine: {
-              show: true,
+              show: false,
               length: 12,
               lineStyle: {
                 color: "auto",
@@ -190,39 +215,48 @@ export default {
               },
             },
             axisLabel: {
+              show: false,
               distance: 5,
               color: "#9BA5BC",
               fontSize: 12,
             },
           },
+          //指针中心白点
           {
+            name: "小圆形",
             type: "pie",
-            labelLine: {
+            center: ["50%", "50%"],
+            animation: false,
+            hoverAnimation: false,
+            legendHoverLink: false,
+            zlevel: 0,
+            radius: ["0%", "5%"],
+            tooltip: {
               show: false,
             },
-            z: 1,
+            z: 10,
-            radius: 20,
+            label: {
-            data: [
+              normal: {
-              {
+                show: false,
-                value: 5,
+                position: "center",
-                itemStyle: {
-                  color: "#EAEBF1",
-                },
               },
-            ],
+              emphasis: {
-          },
+                show: false,
-          {
+              },
-            type: "pie",
+            },
             labelLine: {
-              show: false,
+              normal: {
+                show: false,
+              },
             },
-            z: 10,
-            radius: 5,
             data: [
               {
-                value: 100,
+                value: 0,
+                name: "2",
                 itemStyle: {
-                  color: "#fff",
+                  normal: {
+                    color: "#3fc7af",
+                  },
                 },
               },
             ],

src/views/enterpriseTeamWork/problemRectify/index.vue

@@ -56,7 +56,9 @@
               </div>
             </div>
           </div>
-          <div class="midWrap"></div>
+          <div class="midWrap">
+            <mapWrap></mapWrap>
+          </div>
           <div class="btmWrap"></div>
         </div>
         <div class="rightWrap">
@@ -114,11 +116,12 @@ import screenMain from "../components/screenMain.vue";
 import barWrap from "./bar.vue";
 import gaugeWrap from "./gauge.vue";
 import dpieWrap from "./dpie.vue";
+import mapWrap from "./map.vue";
 import { commonMixins } from "@/loveflow/mixins/commonMixins";
 import { tableListMixins } from "@/loveflow/mixins/tableListMixins";
 
 export default {
-  components: { screenMain, barWrap, gaugeWrap, dpieWrap },
+  components: { screenMain, barWrap, gaugeWrap, dpieWrap, mapWrap },
   mixins: [tableListMixins, commonMixins],
   data() {
     return {
@@ -235,6 +238,12 @@ export default {
           }
         }
       }
+      .midWrap {
+        height: calc(100% - 90px);
+      }
+      .btmWrap {
+        height: 40px;
+      }
     }
     .rightWrap {
       width: 35%;
@@ -266,6 +275,34 @@ export default {
           )
           1 1;
       }
+      .zgPieBody {
+        .topWrap {
+          margin: 20px 14px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          height: 90px;
+          background: url("~@/assets/images/team/zgn.png") no-repeat center
+            center;
+          background-size: 100% 100%;
+          .label {
+            font-weight: 500;
+            font-size: vw(18);
+            color: #d0deee;
+            margin-bottom: 4px;
+          }
+          .value {
+            font-weight: bold;
+            font-size: vw(26);
+            color: #ebf9ff;
+            text-shadow: 0px 0px 9px #159aff;
+          }
+        }
+        .btmWrap {
+          height: calc(100% - 140px);
+        }
+      }
       .zgGaugeBody {
         .topWrap {
           margin-top: 16px;
@@ -291,6 +328,12 @@ export default {
           box-sizing: border-box;
           height: calc(100% - 220px);
           overflow: hidden;
+          .el-table {
+            border: none;
+            .el-table__header-wrapper .el-table__header th {
+              border: none;
+            }
+          }
         }
       }
     }