新增组件

src/component/custom6.vue

@@ -5,18 +5,26 @@
     </div>
     <div class="content">
       <div class="datas">
-        <div class="datas-tip">
-          <div class="datas-tip-li d-t-s">空闲：0-70</div>
-          <div class="datas-tip-li d-t-w">较忙：70-90</div>
-          <div class="datas-tip-li d-t-e">拥挤：90-100</div>
+        <div class="datas-tip" v-if="yjd[numsKeys[numsIndex]]">
+          <div class="datas-tip-li d-t-t">
+            {{ tipTitleFormat([numsKeys[numsIndex]]) }}
+          </div>
+          <div class="datas-tip-li d-t-s">
+            一般：{{ yjd[numsKeys[numsIndex]].yb || "" }}
+          </div>
+          <div class="datas-tip-li d-t-w">
+            较忙：{{ yjd[numsKeys[numsIndex]].jm || "" }}
+          </div>
+          <div class="datas-tip-li d-t-e">
+            繁忙：{{ yjd[numsKeys[numsIndex]].fm || "" }}
+          </div>
         </div>
-        <!-- <div class="box box1" style="--color: #19ffff"> -->
         <div
           class="box box1"
           :style="
             nums.jt
-              ? nums.jt > 70
-                ? nums.jt > 90
+              ? nums.jt > yjdFormat(yjd['jt'] ? yjd['jt'].jm : '')
+                ? nums.jt > yjdFormat(yjd['jt'] ? yjd['jt'].fm : '')
                   ? '--color: #e84545'
                   : '--color: #ffde7d'
                 : '--color: #19ffff'
@@ -38,8 +46,8 @@
                   <div class="box-con-bottom-right">
                     {{
                       nums.jt
-                        ? nums.jt > 70
-                          ? nums.jt > 90
+                        ? nums.jt > yjdFormat(yjd["jt"] ? yjd["jt"].jm : "")
+                          ? nums.jt > yjdFormat(yjd["jt"] ? yjd["jt"].fm : "")
                             ? "拥挤"
                             : "较忙"
                           : "空闲"
@@ -55,8 +63,8 @@
           class="box box2"
           :style="
             nums.zht
-              ? nums.zht > 70
-                ? nums.zht > 90
+              ? nums.zht > yjdFormat(yjd['zht'] ? yjd['zht'].jm : '')
+                ? nums.zht > yjdFormat(yjd['zht'] ? yjd['zht'].fm : '')
                   ? '--color: #e84545'
                   : '--color: #ffde7d'
                 : '--color: #19ffff'
@@ -70,7 +78,7 @@
                   class="box-con-top"
                   :class="numsKeys[numsIndex] == 'zht' ? 'active' : ''"
                 >
-                  自助厅拥挤度
+                  自助区拥挤度
                 </div>
                 <div class="box-con-bottom">
                   <div class="box-con-bottom-left">{{ nums.zht || 0 }}</div>
@@ -78,8 +86,9 @@
                   <div class="box-con-bottom-right">
                     {{
                       nums.zht
-                        ? nums.zht > 70
-                          ? nums.zht > 90
+                        ? nums.zht > yjdFormat(yjd["zht"] ? yjd["zht"].jm : "")
+                          ? nums.zht >
+                            yjdFormat(yjd["zht"] ? yjd["zht"].fm : "")
                             ? "拥挤"
                             : "较忙"
                           : "空闲"
@@ -95,8 +104,8 @@
           class="box box3"
           :style="
             nums.wsbs
-              ? nums.wsbs > 70
-                ? nums.wsbs > 90
+              ? nums.wsbs > yjdFormat(yjd['wsbs'] ? yjd['wsbs'].jm : '')
+                ? nums.wsbs > yjdFormat(yjd['wsbs'] ? yjd['wsbs'].fm : '')
                   ? '--color: #e84545'
                   : '--color: #ffde7d'
                 : '--color: #19ffff'
@@ -110,7 +119,7 @@
                   class="box-con-top"
                   :class="numsKeys[numsIndex] == 'wsbs' ? 'active' : ''"
                 >
-                  网上办税厅拥挤度
+                  网上办税区拥挤度
                 </div>
                 <div class="box-con-bottom">
                   <div class="box-con-bottom-left">{{ nums.wsbs || 0 }}</div>
@@ -118,8 +127,10 @@
                   <div class="box-con-bottom-right">
                     {{
                       nums.wsbs
-                        ? nums.wsbs > 70
-                          ? nums.wsbs > 90
+                        ? nums.wsbs >
+                          yjdFormat(yjd["wsbs"] ? yjd["wsbs"].jm : "")
+                          ? nums.wsbs >
+                            yjdFormat(yjd["wsbs"] ? yjd["wsbs"].fm : "")
                             ? "拥挤"
                             : "较忙"
                           : "空闲"
@@ -135,21 +146,25 @@
           class="datas-show"
           :style="
             nums[numsKeys[numsIndex]]
-              ? nums[numsKeys[numsIndex]] > 70
-                ? nums[numsKeys[numsIndex]] > 90
+              ? nums[numsKeys[numsIndex]] >
+                yjdFormat(yjd[numsKeys[numsIndex]] ? yjd[numsKeys[numsIndex]].jm : '')
+                ? nums[numsKeys[numsIndex]] >
+                  yjdFormat(yjd[numsKeys[numsIndex]] ? yjd[numsKeys[numsIndex]].fm : '')
                   ? '--color: #e84545'
                   : '--color: #ffde7d'
                 : '--color: #19ffff'
               : '--color: #19ffff'
           "
         >
-          <div class="datas-show-tip">拥挤度</div>
+          <div class="datas-show-tip">{{tipTitleFormat([numsKeys[numsIndex]])}}拥挤度</div>
           <div class="datas-show-num">{{ nums[numsKeys[numsIndex]] || 0 }}</div>
           <div class="datas-show-state">
             {{
               nums[numsKeys[numsIndex]]
-                ? nums[numsKeys[numsIndex]] > 70
-                  ? nums[numsKeys[numsIndex]] > 90
+                ? nums[numsKeys[numsIndex]] >
+                  yjdFormat(yjd[numsKeys[numsIndex]] ? yjd[numsKeys[numsIndex]].jm : "")
+                  ? nums[numsKeys[numsIndex]] >
+                    yjdFormat(yjd[numsKeys[numsIndex]] ? yjd[numsKeys[numsIndex]].fm : "")
                     ? "拥挤"
                     : "较忙"
                   : "空闲"
@@ -178,18 +193,36 @@ export default {
       numsKeys: [],
       numsIndex: 0,
       timer2: null,
+      yjd: {},
     };
   },
 
   mounted() {
     this.init();
-    this.lb();
   },
 
   methods: {
+    tipTitleFormat(e) {
+      if (e) {
+        return e == "wsbs"
+          ? "网上办税区"
+          : e == "jt"
+          ? "办税厅"
+          : e == "zht"
+          ? "自助区"
+          : "";
+      } else {
+        return;
+      }
+    },
+    yjdFormat(e) {
+      if (e) {
+        return e.split("-")[0];
+      } else {
+        return 40;
+      }
+    },
     lb() {
-      clearTimeout(this.timer2);
-      this.timer2 = null;
       let nums = this.nums;
       this.numsKeys = Object.keys(nums);
       if (this.numsIndex < this.numsKeys.length - 1) {
@@ -198,8 +231,10 @@ export default {
         this.numsIndex = 0;
       }
       this.timer2 = setTimeout(() => {
+        clearTimeout(this.timer2);
+        this.timer2 = null;
         this.lb();
-      }, 5 * 1000);
+      }, 10 * 1000);
     },
     bgFormat(e) {
       if (e) {
@@ -262,7 +297,16 @@ export default {
             let newNums = JSON.stringify(res.data);
             if (oldNums != newNums) {
               this.$nextTick(() => {
-                this.nums = res.data;
+                this.nums = {
+                  jt: res.data.jt,
+                  wsbs: res.data.wsbs,
+                  zht: res.data.zht,
+                };
+                this.yjd = res.data.yjd;
+
+                if (!this.timer2) {
+                  this.lb();
+                }
               });
             }
             setTimeout(() => {
@@ -316,6 +360,10 @@ export default {
           font-family: "苹方简M";
         }
 
+        .d-t-t {
+          color: #ffffff;
+        }
+
         .d-t-s {
           color: #19ffff;
         }
@@ -361,7 +409,7 @@ export default {
             }
 
             .active {
-              color: #f08a5d;
+              // color: #f08a5d;
               // animation: active 1.5s infinite;
             }
 
@@ -442,7 +490,7 @@ export default {
         top: 50%;
         left: 50%;
         transform: translate(-50%, calc(-50% + 30px));
-        width: 200px;
+        width: fit-content;
         height: 170px;
 
         .datas-show-tip {

src/component/custom9.vue

@@ -0,0 +1,195 @@
+<template>
+  <div id="module-foldline">
+    <div
+      :style="
+        'font-weight:' +
+        fontweight +
+        ';font-family:' +
+        fontfamily +
+        ';font-size: ' +
+        fontsize +
+        'px;color: ' +
+        color +
+        ';letter-spacing:' +
+        letterspacing +
+        'px;height: ' +
+        titleHeight +
+        'px;line-height: ' +
+        titleHeight +
+        'px;text-align: ' +
+        textposition +
+        ';' +
+        padding
+      "
+    >
+      {{ this.list.bt }}
+    </div>
+    <div
+      :style="
+        'margin-top: ' +
+        margintop +
+        'px;width:100%;height:' +
+        (this.height - titleHeight - margintop) +
+        'px;'
+      "
+    >
+      <div :id="this.list.bt" style="width: 100%; height: 100%" />
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import { Interface } from "@/api/index";
+import { Message } from "element-ui";
+const colors = [
+    "#1fab89",
+    "#f5c7f7",
+    "#ff2e63",
+    "#08d9d6",
+    "#aa96da",
+    "#e84545",
+    "#ff9999",
+    "#a1eafb",
+    "#f57170",
+]
+export default {
+  props: ["height", "list"],
+  data() {
+    return {
+      fontweight: "",
+      fontsize: "",
+      fontfamily: "",
+      color: "",
+      letterspacing: "",
+      titleHeight: "",
+      textposition: "",
+      padding: "",
+      margintop: "",
+      xAxisunit: "",
+      option: {},
+    };
+  },
+  mounted() {
+    this.getCss();
+  },
+  methods: {
+    getCss() {
+      const part = JSON.parse(this.list.config);
+      this.fontweight = part.fontweight;
+      this.fontsize = part.fontsize;
+      this.fontfamily = part.fontfamily;
+      this.color = part.color;
+      this.letterspacing = part.letterspacing;
+      this.titleHeight = Number(part.titleHeight);
+      this.textposition = part.textposition;
+      this.padding =
+        part.textposition == "left"
+          ? "padding:0 0 0 " + part.padding + "px;"
+          : part.textposition == "right"
+          ? "padding:0 " + part.padding + "px 0 0 ;"
+          : "";
+      this.margintop = Number(part.margintop);
+      this.xAxisunit = part.xAxisunit;
+      this.getInfo();
+    },
+    getInfo() {
+      const form = {
+        qqfs: this.list.qqfs,
+        jkUrl: this.list.jkUrl,
+        data: {
+          swjgdm: this.$route.query.swjgdm,
+        },
+      };
+      Interface(form).then((res) => {
+        if (res.code !== 200) {
+          Message.error(this.list.bt + res.msg);
+          setTimeout(() => {
+            this.getInfo();
+          }, 10 * 1000);
+        } else {
+          let option = {
+            title: {
+              show: false,
+            },
+            legend: {
+              show: true,
+              textStyle: {
+                fontFamily: "苹方简M",
+                fontSize: "12px",
+                color: "#ffffff",
+              },
+            },
+            grid: {
+              top: "5%",
+              left: "15%",
+              bottom: "5%",
+              right: "2%",
+            },
+            xAxis: {
+              type: "value",
+              axisTick: { show: false },
+              splitLine: { show: false },
+              axisLabel: { show: false },
+            },
+            yAxis: {},
+            series: [],
+          };
+          if (res.yData && res.xData) {
+            let series = {
+              type: "bar",
+              itemStyle: {
+                color: function (param) {
+                  return colors[param.dataIndex];
+                },
+              },
+              label: {
+                show: true,
+                fontFamily: "苹方简M",
+                fontSize: "12px",
+                color: "#ffffff",
+                position: "right",
+              },
+              data: res.yData,
+            };
+            let yAxis = {
+              type: "category",
+              axisTick: { show: false },
+              axisLabel: {
+                fontFamily: "苹方简M",
+                fontSize: "12px",
+                color: "#ffffff",
+              },
+              data: res.xData,
+              axisLine: {
+                lineStyle: {
+                    color: "#ffffff"
+                }
+              }
+            };
+            option.yAxis = yAxis;
+            option.series = series;
+            this.option = { ...option };
+            this.initEcharts();
+          }
+
+          setTimeout(() => {
+            this.getInfo();
+          }, 60 * 1000);
+        }
+      });
+    },
+    initEcharts() {
+      const myChart = echarts.init(document.getElementById(this.list.bt));
+      myChart.setOption(this.option);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+#module-foldline {
+  width: 100%;
+  height: 100%;
+}
+</style>