大屏

src/App.vue

@@ -27,6 +27,7 @@
         let rem = wW * 100 / designSize;
         document.documentElement.style.fontSize = rem + 'px';
         store.dispatch('user/setFontSize', rem)
+        window.location.reload()
       });
     }
   }

src/views/command/overBar.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="overBar" :id="id"></div>
+</template>
+
+<script>
+import { Chart } from "@antv/g2";
+import { mapGetters } from "vuex";
+
+export default {
+  name: "bar",
+  data() {
+    return {
+      data: []
+    };
+  },
+  props: {
+    width: {
+      type: Number,
+      default() {
+        return 0;
+      }
+    },
+    height: {
+      type: Number,
+      default() {
+        return 0;
+      }
+    },
+    id: {
+      type: String,
+      default() {
+        return "";
+      }
+    }
+  },
+  computed: {
+    ...mapGetters(["fontSize"])
+  },
+  mounted() {
+
+    this.data = [
+      { name: '未完成', month: '1', value: 15 },
+      { name: '未完成', month: '2', value: 10 },
+      { name: '未完成', month: '3', value: 10 },
+      { name: '未完成', month: '4', value: 10 },
+      { name: '未完成', month: '5', value: 10 },
+      { name: '未完成', month: '6', value: 10 },
+      { name: '未完成', month: '7', value: 10 },
+      { name: '未完成', month: '8', value: 10 },
+      { name: '未完成', month: '9', value: 10 },
+      { name: '未完成', month: '10', value: 10 },
+      { name: '未完成', month: '11', value: 10 },
+      { name: '未完成', month: '12', value: 10 },
+      { name: '已完成', month: '1', value: 60 },
+      { name: '已完成', month: '2', value: 74 },
+      { name: '已完成', month: '3', value: 74 },
+      { name: '已完成', month: '4', value: 74 },
+      { name: '已完成', month: '5', value: 74 },
+      { name: '已完成', month: '6', value: 74 },
+      { name: '已完成', month: '7', value: 74 },
+      { name: '已完成', month: '8', value: 74 },
+      { name: '已完成', month: '9', value: 74 },
+      { name: '已完成', month: '10', value: 74 },
+      { name: '已完成', month: '11', value: 74 },
+      { name: '已完成', month: '12', value: 74 },
+    ];
+
+    const chart = new G2.Chart({
+      container: this.id,
+      autoFit: true,
+      height: this.height,
+      width: this.width,
+      padding: ["auto"]
+    });
+    chart.axis("month", {
+      title: null,
+      tickLine: null,
+      line: null,
+      label: {
+        offset: 10,
+        textStyle: {
+          fill: "#ffffff",
+          fontSize: this.$root.$options.filters.filterPx(0.12, this.fontSize),
+          fontWeight: 300
+        },
+        formatter(val) {
+          return val+ '月';
+        }
+      },
+    });
+    chart.axis("value", {
+      title: null,
+      grid: null,
+      line: null,
+      label: {
+        offset: 10,
+        textStyle: {
+          fill: "#ffffff",
+          fontSize: this.$root.$options.filters.filterPx(0.12, this.fontSize),
+          fontWeight: 300
+        }
+      }
+    });
+    chart.legend({
+      position: "top-center",
+      offsetX:  this.$root.$options.filters.filterPx(1.4,this.fontSize),
+      offsetY:  this.$root.$options.filters.filterPx(-0.24,this.fontSize),
+      textStyle: {
+        fill: "#ffffff",
+        fontSize:  this.$root.$options.filters.filterPx(0.14,this.fontSize),
+        fontWeight: 300
+      }
+    });
+    chart.intervalStack()
+      .position('month*value')
+      .size(this.$root.$options.filters.filterPx(0.088, this.fontSize))
+      .color('name',['#FFDC12','#0CD1D6']);
+    chart.render();
+    this.chart = chart;
+    let me = this;
+    setTimeout(function() {
+      me.chart.changeData(me.data);
+    }, 1000);
+  },
+  methods: {}
+};
+</script>
+
+<style lang="less">
+.overBar{
+  >div{
+    display: flex;
+  }
+}
+</style>

src/views/command/transverseBar.vue

@@ -0,0 +1,191 @@
+<template>
+  <div class="comandTransverseBar" :id="id"></div>
+</template>
+
+<script>
+import G2 from "@antv/g2";
+import { mapGetters } from "vuex";
+
+export default {
+  name: "comandTransverseBar",
+  data() {
+    return {
+      data: []
+    };
+  },
+  props: {
+    width: {
+      type: Number,
+      default() {
+        return 0;
+      }
+    },
+    height: {
+      type: Number,
+      default() {
+        return 0;
+      }
+    },
+    id: {
+      type: String,
+      default() {
+        return '';
+      }
+    }
+  },
+  computed: {
+    ...mapGetters(["fontSize"])
+  },
+  mounted() {
+    this.data = [
+      { type: "固城湖", value: 45, cat: "4", cc: "1." },
+      { type: "百家湖", value: 54, cat: "4" },
+      { type: "莫愁湖莫愁湖", value: 65, cat: "4" },
+      { type: "玄武湖", value: 80, cat: "3" },
+      { type: "金川河", value: 110, cat: "2" },
+      { type: "秦淮河", value: 187, cat: "1" }
+    ];
+    const chart = new G2.Chart({
+      container: this.id,
+      autoFit: true,
+      height: this.height,
+      width: this.width,
+      padding: [
+        "auto",
+        this.$root.$options.filters.filterPx(0.5,this.fontSize),
+        "auto",
+        this.$root.$options.filters.filterPx(1,this.fontSize)
+      ]
+    });
+    chart.scale({
+      value: {
+        min: 0,
+        alias: "问题"
+      }
+    });
+    chart.axis("type", {
+      title: null,
+      tickLine: null,
+      line: null,
+      label: {
+        offset: this.$root.$options.filters.filterPx(0.9,this.fontSize),
+        custom: true, // 使用自定义文本
+        htmlTemplate(text, item, index) {
+          console.log(item);
+          if (index == 5) {
+            return (
+              '<div class="radio"><div class="radio-dev one">1</div><div>' +
+              text +
+              "</div></div>"
+            );
+          } else if (index == 4) {
+            return (
+              '<div class="radio"><div class="radio-dev two">2</div><div>' +
+              text +
+              "</div></div>"
+            );
+          } else if (index == 3) {
+            return (
+              '<div class="radio"><div class="radio-dev three">3</div><div>' +
+              text +
+              "</div></div>"
+            );
+          } else {
+            return (
+              '<div class="radio"><div class="radio-dev other">' +
+              (index==2?4:(index==1?5:(index==0)?6:0))+
+              "</div><div>" +
+              text +
+              "</div></div>"
+            );
+          }
+        }
+      }
+    });
+    chart.axis("value", {
+      label: null,
+      grid: null,
+      title: null
+    });
+    chart.tooltip(false);
+    chart.legend(false);
+    chart.coord().transpose();
+    chart
+      .interval()
+      .opacity(1)
+      .position("type*value")
+      .color("cat", ["#2F858F", '#EFE134', "#FB9A08", "#EB1005"])
+      .size(this.$root.$options.filters.filterPx(0.069,this.fontSize))
+      .label("value", {
+        textStyle: {
+          fill: "#ffffff",
+          fontSize: this.$root.$options.filters.filterPx(0.14,this.fontSize),
+        },
+        offset: 10
+      });
+
+    chart.render();
+    this.chart = chart;
+    let me = this;
+    setTimeout(function() {
+      me.chart.changeData(me.data);
+    }, 1000);
+  },
+  methods: {}
+};
+</script>
+
+<style lang="less">
+.comandTransverseBar {
+  >div{
+    display: flex;
+    align-items: center;
+  }
+  .radio {
+    display: flex;
+    font-family: PingFangSC-Regular;
+    font-size: 0.17rem;
+    align-items: center;
+    .radio-dev {
+      width: 0.156rem;
+      height: 0.156rem;
+      line-height: 0.156rem;
+      border-radius: 50%;
+      box-shadow: 0 0 0.04rem #00e7e3;
+      border: 0.01rem solid rgba(255, 255, 255, 0.5);
+      text-align: center;
+      font-size: 0.1rem;
+    }
+    > div:last-child {
+      width: 0.587rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      -o-text-overflow: ellipsis;
+      white-space: nowrap;
+      margin-left: 0.105rem;
+      font-size: 0.14rem;
+      color: #ffffff;
+    }
+  }
+
+  .one {
+    color: #dd1006;
+    border-color: #dd1006 !important;
+  }
+
+  .two {
+    color:#FB9A08;
+    border-color: #FB9A08 !important;
+  }
+
+  .three {
+    color: #EFE134;
+    border-color: #EFE134 !important;
+  }
+
+  .other {
+    color: #2F858F;
+    border-color: #2F858F !important;
+  }
+}
+</style>

src/views/main/bar.vue

@@ -91,7 +91,6 @@ export default {
       .position("type*value")
       .size(this.$root.$options.filters.filterPx(0.21, this.fontSize))
       .color("vote", value => {
-        console.log(value);
         if (value == 1) {
           return "l(270) 0:rgba(36,177,180,0.00) 1:#4AD9DB";
         }

src/views/main/transverseBar.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import { Chart } from "@antv/g2";
+import G2 from "@antv/g2";
 import { mapGetters } from "vuex";
 
 export default {
@@ -45,7 +45,7 @@ export default {
       { type: "金川河", value: 110, cat: "2" },
       { type: "秦淮河", value: 187, cat: "1" }
     ];
-    const chart = new Chart({
+    const chart = new G2.Chart({
       container: this.id,
       autoFit: true,
       height: this.height,