update

12 months ago · a2f7f22a1c
parent 04c0f7ad21
commit a2f7f22a1c
15 changed files with 210 additions and 142 deletions
--- a/src/assets/images/topic/dtpie.png
+++ b/src/assets/images/topic/dtpie.png
--- a/src/loveflow/components/menu/aside.vue
+++ b/src/loveflow/components/menu/aside.vue
@ -56,7 +56,7 @@ export default {
          }
        }
      }
-      console.log(this.menuList);
+      //console.log(this.menuList);
    },
    // 点击跳转路由
    clickMenu(val) {
--- a/src/loveflow/components/menu/head.vue
+++ b/src/loveflow/components/menu/head.vue
@ -116,7 +116,7 @@ export default {
          });
        }
      }
-      console.log(this.menuList);
+      //console.log(this.menuList);
    },
    handleSelect(key) {
      sessionStorage.setItem("activeIndex", key);
--- a/src/loveflow/mixins/tableListMixins.js
+++ b/src/loveflow/mixins/tableListMixins.js
@ -41,15 +41,60 @@ export const tableListMixins = {
      let params = this.getQueryParams();

      //模拟接口返回数据总数total
-      let total = 60;
+      let total = 40;
      this.ipagination.total = total;
+      console.log(this.ipagination);

-      //console.log(params);
+      let nameArr = [
+        "杨怡伶",
+        "林亚蓉",
+        "李家伟",
+        "陈皓茜",
+        "杨郁婷",
+        "张旺茹",
+        "李彦志",
+        "张雅玫",
+        "郭育维",
+        "吴兰木",
+        "江松兰",
+        "吴淑霞",
+        "许育海",
+        "赖雅婷",
+        "谢宜恩",
+        "储世昌",
+        "张雅泰",
+        "周左达",
+        "林馨仪",
+        "史怡静",
+        "苏思翰",
+        "赵美绍",
+        "黄崇舜",
+        "杨季生",
+        "陈一柏",
+        "杨信宏",
+        "叶忠翰",
+        "林子竹",
+        "黄千倩",
+        "蔡冠宇",
+        "张玉萍",
+        "丁宜芳",
+        "谢伟元",
+        "林婉婷",
+        "刘冠良",
+        "侯盈如",
+        "王薇宣",
+        "臧杰良",
+        "陈雅惠",
+        "叶依婷",
+      ];

-      for (let i = 0; i < params.pageSize; i++) {
+      console.log(nameArr.length);
+
+      let nameIndex = (this.ipagination.currentPage - 1) * 10;
+      for (let i = 0; i < 40; i++) {
        this.dataSource.push({
-          id: params.pageNo + "_" + i,
-          name: "姓名_" + params.pageNo,
+          id: i + 1,
+          name: nameArr[nameIndex + i],
          card: "32032119879876321" + i,
          phone: "186678879" + i,
          cmy: "测试公司名称" + i,
--- a/src/views/enterpriseTopic/components/dPieTwo.vue
+++ b/src/views/enterpriseTopic/components/dPieTwo.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="dpiePanel">
+  <div class="dpiePanel" id="dpieWrap">
    <div class="dpieLegend">
      <div class="dpieRow" v-for="item in data" :key="item.name">
        <div class="flex-center">
@ -13,7 +13,13 @@
      </div>
    </div>
    <div class="flex-center" style="flex: 1">
-      <div class="dpiebg">
+      <div
+        class="dpiebg"
+        :style="{
+          height: parseInt(viewH) + 'px',
+          width: 2 * viewH + 'px',
+        }"
+      >
        <div ref="dpieWrapRef" class="dpieWrap"></div>
      </div>
    </div>
@ -25,6 +31,7 @@ import "echarts-gl";
 export default {
  data() {
    return {
+      fontSize: 12,
      data: [
        {
          name: "竞技体育用枪",
@ -49,20 +56,34 @@ export default {
        },
      ],
      total: 1,
+      viewH: 1,
    };
  },
+  created() {},
  mounted() {
    this.total = 1;
    for (let i = 0; i < this.data.length; i++) {
      this.total += this.data[i].value;
    }

+    let temp = this.getHeight();
+    let height = parseInt(temp / 4);
+    this.viewH = 2 * height;
+    console.log(height);
+    this.fontSize = 12;
+    if (height < 30) {
+      this.fontSize = 8;
+    }
+    if (height > 40) {
+      this.fontSize = 14;
+    }
+
+    setTimeout(() => {
      this.setOption();
+    }, 500);
  },
  methods: {
    setOption() {
-      let optionsData = this.data;
-      let hoveredIndex = "";
      let chartDom = this.$refs["dpieWrapRef"];
      let myChart = echarts.init(chartDom);
      const getPie3D = (pieData, internalDiameterRatio) => {
@ -276,6 +297,10 @@ export default {
      });
      option && myChart.setOption(option);
    },
+    getHeight() {
+      let div = document.getElementById("dpieWrap");
+      return div.clientHeight;
+    },
  },
  watch: {
    chartObj: {
@ -295,8 +320,8 @@ export default {
  height: 100%;
  .dpieLegend {
    position: absolute;
-    top: 100px;
    display: flex;
+    bottom: vw(10);
    flex-direction: column;
    justify-content: center;
    align-items: center;
@ -305,7 +330,6 @@ export default {
      display: flex;
      align-items: center;
      justify-content: space-between;
-      margin-bottom: 8px;
      width: 150px;
      //background-color: rgba(108, 128, 151, 0.1);
      .dpieIcon {
@ -327,8 +351,8 @@ export default {
  }
 }
 .dpieWrap {
-  width: 160px;
-  height: 80px;
+  width: 100%;
+  height: 100%;
 }
 .dpiebg {
  margin-top: vw(14);
--- a/src/views/enterpriseTopic/components/pieFive.vue
+++ b/src/views/enterpriseTopic/components/pieFive.vue
@ -18,6 +18,7 @@ export default {
  data() {
    return {
      option: {},
+      fontSize: 12,
    };
  },
  mounted() {
@ -26,8 +27,15 @@ export default {
  methods: {
    setOption() {
      let temp = this.getHeight();
-      let height = parseInt(temp / 2) - 20;
-      //console.log(height);
+      let height = parseInt(temp / 4);
+      console.log(height);
+      this.fontSize = 12;
+      if (height < 30) {
+        this.fontSize = 8;
+      }
+      if (height > 40) {
+        this.fontSize = 14;
+      }
      let total = 0;
      let data = [];
      let barChartList = this.chartObj.data;
@ -72,40 +80,18 @@ export default {
        tooltip: {
          show: false,
        },
-        title: [
-          {
-            text: "放射源总数",
-            top: 44,
-            textAlign: "center",
-            left: "48%",
-            textStyle: {
-              color: "#D0DEEE",
-              fontSize: 10,
-            },
-          },
-          {
-            text: total,
-            top: 60,
-            textAlign: "center",
-            left: "48%",
-            textStyle: {
-              fontWeight: "400",
-              color: "#92E0FF",
-              fontSize: 18,
-            },
-          },
-        ],
+
        legend: {
          data: legend,
          orient: "vertical",
-          bottom: 20,
+          bottom: parseInt(height / 2),
          icon: "diamond",
          left: "center",
          width: "100%",
          height: 40,
          itemHeight: 8,
          itemWidth: 8,
-          itemGap: 10,
+          itemGap: parseInt(this.fontSize / 2),
          padding: 0,
          //backgroundColor: "rgba(108,128,151,0.2)",
          textStyle: {
@ -129,7 +115,7 @@ export default {
          formatter: function (name) {
            const item = barChartList.filter((item) => item.name === name)[0];
            let rate = ((100 * item.value) / total).toFixed(0);
-            console.log(rate);
+            //console.log(rate);
            return `{name|${name}}{value| ${item.value}}{rate| ${rate}%}`;
          },
        },
@ -140,8 +126,8 @@ export default {
              type: "image",
              style: {
                image: bgImg,
-                width: 80,
-                height: 80,
+                width: 2 * height - 20,
+                height: 2 * height - 20,
                zIndex: 1,
              },
              left: "center",
@ -153,18 +139,31 @@ export default {
          {
            name: this.chartObj.name,
            type: "pie",
-            radius: [38, 48],
-            center: ["center", 60],
+            radius: [height - 8, height],
+            center: ["center", height + 10],
            clockWise: false,
            hoverAnimation: false,
            itemStyle: {},
            label: {
-              show: false,
-              position: "right",
+              show: true,
+              position: "center",
+              rich: {
+                label: {
+                  color: "#D0DEEE",
+                  fontSize: 10,
+                },
+                value: {
+                  padding: [4, 0, 0, 0],
+                  color: "#92E0FF",
+                  fontSize: 12,
+                },
+              },
+              formatter: `{label|放射源总数}\n{value|${total}}`,
            },
            emphasis: {
              label: {
-                show: false,
+                show: true,
+                formatter: `{label|放射源总数}\n{value|${total}}`,
              },
            },
            labelLine: {
--- a/src/views/enterpriseTopic/components/pieFour.vue
+++ b/src/views/enterpriseTopic/components/pieFour.vue
@ -47,7 +47,7 @@ export default {
          {
            // name: '访问来源1',
            type: "pie",
-            radius: ["50%", "62%"],
+            radius: ["45%", "56%"],
            center: ["50%", "45%"],
            data: [
              {
@ -79,7 +79,7 @@ export default {
            // name: '访问来源2',
            type: "pie",
            showEmptyCircle: true, //是否在无数据的时候显示一个占位圆。
-            radius: ["50%", "62%"],
+            radius: ["45%", "56%"],
            avoidLabelOverlap: true, // 标签重叠时进行调整
            center: ["50%", "45%"],
            data: [
@ -138,7 +138,7 @@ export default {
                },
                c_style: {
                  fontSize: 14,
-                  fontWeight: 500,
+                  fontWeight: 400,
                  color: "#D0DEEE",
                },
              },
--- a/src/views/enterpriseTopic/components/pieOne.vue
+++ b/src/views/enterpriseTopic/components/pieOne.vue
@ -31,17 +31,17 @@ export default {
          show: true, // 是否显示
          text: this.chartObj.name,
          textStyle: {
-            fontSize: 14,
+            fontSize: 12,
            color: "#D0DEEE",
          },
          subtextStyle: {
-            fontSize: 16,
+            fontSize: 14,
            fontWeight: 500,
            lineHeight: 10,
            color: "#E3FEFF",
          },
          left: "center",
-          top: "36%",
+          top: "38%",
        },
        series: [
          {
--- a/src/views/enterpriseTopic/components/pieThree.vue
+++ b/src/views/enterpriseTopic/components/pieThree.vue
@ -23,6 +23,9 @@ export default {
  },
  methods: {
    setOption() {
+      let temp = this.getHeight();
+      let height = parseInt(temp / 5);
+      console.log(height);
      let point = this.chartObj.point; //环形图的具体  百分比
      let total = this.chartObj.total;

@ -35,15 +38,9 @@ export default {
          show: true, // 是否显示
          text: this.chartObj.name,
          textStyle: { fontSize: 12, color: "#D0DEEE" },
-          /* subtextStyle: {
-            fontSize: 18,
-            fontWeight: 500,
-            lineHeight: 10,
-            color: "#E3FEFF",
-          }, */
          textAlign: "center",
          left: "47%",
-          top: 84,
+          top: 2 * height + 16,
        },
        color: this.chartObj.color,
        graphic: {
@ -52,12 +49,12 @@ export default {
              type: "image",
              style: {
                image: this.chartObj.icon,
-                width: 120,
-                height: 120,
+                width: 4 * height,
+                height: 4 * height,
                zIndex: 1,
              },
              left: "center",
-              top: -15,
+              top: 8-height,
            },
          ],
        },
@ -65,8 +62,8 @@ export default {
          {
            // name: '访问来源1',
            type: "pie",
-            radius: [25, 30],
-            center: ["center", 45],
+            radius: [height - 6, height],
+            center: ["center", height + 8],
            data: [
              {
                value: total, //对应显示的部分数据即100%
@ -92,14 +89,13 @@ export default {
            // name: '访问来源2',
            type: "pie",
            showEmptyCircle: true, //是否在无数据的时候显示一个占位圆。
-            radius: [25, 30],
-            center: ["center", 45],
+            radius: [height - 6, height],
+            center: ["center", height + 8],
            avoidLabelOverlap: true, // 标签重叠时进行调整
            data: [
              {
                value: total,
                itemStyle: {
-                  normal: {
                  borderRadius: 15, //圆角
                  color: {
                    // 设置渐变色
@ -117,7 +113,6 @@ export default {
                  },
                },
              },
-              },

              {
                value: total, //百分比
--- a/src/views/enterpriseTopic/components/pieTwo.vue
+++ b/src/views/enterpriseTopic/components/pieTwo.vue
@ -18,6 +18,7 @@ export default {
  data() {
    return {
      option: {},
+      fontSize: 12,
    };
  },
  mounted() {
@ -26,8 +27,15 @@ export default {
  methods: {
    setOption() {
      let temp = this.getHeight();
-      let height = parseInt(temp / 2) - 20;
-      //console.log(height);
+      let height = parseInt(temp / 4);
+      console.log(height);
+      this.fontSize = 12;
+      if (height < 30) {
+        this.fontSize = 8;
+      }
+      if (height > 40) {
+        this.fontSize = 14;
+      }
      let total = 0;
      let data = [];
      let barChartList = this.chartObj.data;
@ -72,38 +80,15 @@ export default {
        tooltip: {
          show: false,
        },
-        title: [
-          {
-            text: "总数量",
-            top: "38%",
-            textAlign: "center",
-            left: 68,
-            textStyle: {
-              color: "#D0DEEE",
-              fontSize: 12,
-            },
-          },
-          {
-            text: total,
-            top: "48%",
-            textAlign: "center",
-            left: 66,
-            textStyle: {
-              fontWeight: "400",
-              color: "#92E0FF",
-              fontSize: 22,
-            },
-          },
-        ],
        legend: {
          data: legend,
          orient: "vertical",
          top: "center",
          icon: "diamond",
-          right: "5%",
+          right: height - 10,
          itemHeight: 8,
          itemWidth: 8,
-          itemGap: 8,
+          itemGap: parseInt(this.fontSize / 2),
          padding: 0,
          //backgroundColor: "rgba(108,128,151,0.2)",
          textStyle: {
@ -127,7 +112,7 @@ export default {
          formatter: function (name) {
            const item = barChartList.filter((item) => item.name === name)[0];
            let rate = ((100 * item.value) / total).toFixed(2);
-            console.log(rate);
+            //console.log(rate);
            return `{name|${name}}{value| ${item.value}}{rate| ${rate}%}`;
          },
        },
@ -138,11 +123,11 @@ export default {
              type: "image",
              style: {
                image: bgImg,
-                width: 100,
-                height: 100,
+                width: 3 * height - 16,
+                height: 3 * height - 16,
                zIndex: 1,
              },
-              left: 20,
+              left: parseInt(0.5 * height) + 8,
              top: "center",
            },
          ],
@ -151,18 +136,31 @@ export default {
          {
            name: this.chartObj.name,
            type: "pie",
-            radius: [48, 58],
-            center: [70, "center"],
+            radius: [parseInt(1.5 * height) - 8, parseInt(1.5 * height)],
+            center: [2 * height, "center"],
            clockWise: false,
            hoverAnimation: false,
            itemStyle: {},
            label: {
-              show: false,
-              position: "right",
+              show: true,
+              position: "center",
+              rich: {
+                label: {
+                  color: "#D0DEEE",
+                  fontSize: this.fontSize,
+                },
+                value: {
+                  padding: [4, 0, 0, 0],
+                  color: "#92E0FF",
+                  fontSize: this.fontSize + 6,
+                },
+              },
+              formatter: `{label|总数量}\n{value|${total}}`,
            },
            emphasis: {
              label: {
-                show: false,
+                show: true,
+                formatter: `{label|总数量}\n{value|${total}}`,
              },
            },
            labelLine: {
--- a/src/views/enterpriseTopic/inSecurity/cmyDetail.vue
+++ b/src/views/enterpriseTopic/inSecurity/cmyDetail.vue
@ -309,7 +309,7 @@ export default {
    };
  },
  mounted() {
-    this.companyName = this.$route.query.car;
+    this.companyName = this.$route.query.cmy;
  },
  created() {},
 };
@ -424,6 +424,7 @@ export default {
    }
    .screenRowBtm {
      height: 40%;
+      overflow: hidden;
      .screenLeft {
        display: flex;
        .left {
@ -436,7 +437,7 @@ export default {
          flex: 1;
          flex-direction: column;
          .rfsjWrap {
-            height: calc(100% - 28px);
+            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
@ -458,6 +459,7 @@ export default {
                }
              }
              .name {
+                margin-top: -4px;
                font-weight: 500;
                font-size: vw(12);
                color: #ffffff;
--- a/src/views/enterpriseTopic/inSecurity/jfTable.vue
+++ b/src/views/enterpriseTopic/inSecurity/jfTable.vue
@ -53,7 +53,7 @@ export default {
  height: 100%;

  .jfTableWrap {
-    height: calc(100% - 30px);
+    height: calc(100% - 36px);
    overflow: scroll;
    &::-webkit-scrollbar {
      display: none;
--- a/src/views/enterpriseTopic/inSecurity/ycTable.vue
+++ b/src/views/enterpriseTopic/inSecurity/ycTable.vue
@ -66,7 +66,7 @@ export default {
  height: 100%;

  .ycTableWrap {
-    height: calc(100% - 40px);
+    height: calc(100% - 36px);
    overflow: scroll;
    &::-webkit-scrollbar {
      display: none;
--- a/src/views/enterpriseTopic/roadSafety/pie.vue
+++ b/src/views/enterpriseTopic/roadSafety/pie.vue
@ -129,7 +129,7 @@ export default {
          formatter: function (name) {
            const item = barChartList.filter((item) => item.name === name)[0];
            let rate = ((100 * item.value) / total).toFixed(0);
-            console.log(rate);
+            //console.log(rate);
            return `{name|${name}}{value| ${item.value}}{rate| ${rate}%}`;
          },
        },
--- a/src/views/enterpriseTopic/screen.vue
+++ b/src/views/enterpriseTopic/screen.vue
@ -524,12 +524,12 @@ export default {
            justify-content: space-between;
            align-items: center;
            .name {
-              font-size: vw(14);
+              font-size: vh(14);
              color: #e2fbff;
            }
            .value {
              font-weight: bold;
-              font-size: vw(20);
+              font-size: vh(20);
              color: #e3fffd;
              line-height: 22px;
              letter-spacing: 1px;
@ -545,16 +545,16 @@ export default {
              display: none;
            }
            .item {
-              margin: vw(8) 0;
+              margin: vh(8) 0;
              display: flex;
              align-items: center;
              justify-content: space-between;
              .name {
-                font-size: vw(12);
+                font-size: vh(12);
                color: #d0deee;
              }
              .value {
-                font-size: vw(16);
+                font-size: vh(16);
                color: #ffffff;
              }
            }
@ -572,6 +572,10 @@ export default {
        height: 100%;
        display: flex;
        flex-direction: column;
+        .screenChart {
+          display: flex;
+          flex-direction: column;
+        }
        .topCol {
          height: 120px;
          display: flex;
@ -585,6 +589,7 @@ export default {
          }
        }
        .midCol {
+          flex: 1;
          display: flex;
          flex-direction: column;
          .xfzdWrap {
@ -611,11 +616,11 @@ export default {
              }
              .nameWrap {
                .value {
-                  font-size: vw(18);
+                  font-size: vh(18);
                  color: #ffffff;
                }
                .name {
-                  font-size: vw(12);
+                  font-size: vh(12);
                  color: #d0deee;
                }
              }
@ -623,14 +628,14 @@ export default {
          }
        }
        .btmCol {
-          flex: 1;
+          flex: 2;
          display: flex;
          flex-direction: column;
          .xfsjWrap {
            flex: 1;
            margin-bottom: 10px;
            flex: 1;
-            padding: vw(12);
+            padding: vh(12);
            display: flex;
            justify-content: space-between;
            align-items: center;
@ -642,20 +647,20 @@ export default {
              padding: 2px 8px;
              .icon {
                margin-right: 4px;
-                width: vw(78);
-                height: vw(78);
+                width: vh(78);
+                height: vh(78);
                img {
                  width: 100%;
                }
              }
              .nameWrap {
                .value {
-                  font-size: vw(18);
+                  font-size: vh(18);
                  color: #ffffff;
                  text-align: center;
                }
                .name {
-                  font-size: vw(12);
+                  font-size: vh(12);
                  color: #d0deee;
                }
              }
@ -732,7 +737,7 @@ export default {
        }
        .midCol {
          height: 100%;
-          width: vw(316);
+          width: vh(316);
          display: flex;
          flex-direction: column;
        }