1

src/component/moreBar.vue

@@ -0,0 +1,180 @@
+<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";
+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: "10px",
+                color: "#ffffff",
+              },
+            },
+            grid: {
+              show: false,
+              top: "20%",
+              left: "2%",
+              bottom: "15%",
+              right: "2%",
+            },
+            xAxis: [],
+            yAxis: [
+              {
+                type: "value",
+                axisTick: { show: false },
+                splitLine: { show: false },
+                axisLabel: { show: false },
+              },
+            ],
+            series: [],
+          };
+          if (res.yData && res.xData) {
+            let series = [];
+            let names = ["当前在厅人数","总进厅人数","设备（窗口）数量"]
+            for (let i = 0; i < res.yData.length; i++) {
+              series.push({
+                name: names[i],
+                type: "bar",
+                label: {
+                  show: true,
+                  fontFamily: "苹方简M",
+                  fontSize: "10px",
+                  color: "#ffffff",
+                  position: 'top'
+                },
+                data: res.yData[i],
+              });
+            }
+            let xAxis = [
+              {
+                type: "category",
+                axisTick: { show: false },
+                axisLabel: {
+                  fontFamily: "苹方简M",
+                  fontSize: "10px",
+                  color: "#ffffff",
+                },
+                data: res.xData,
+              },
+            ];
+            option.xAxis = xAxis;
+            option.series = series;
+            this.option = { ...option };
+            this.initEcharts();
+          }
+        }
+      });
+    },
+    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>