自定义列显隐控制

xiangpei

2024-09-03 16eb67ab6b103663d30cad9ba74360f982e131cb

 src/views/screen/components/screen-data/index.vue

@@ -7,7 +7,7 @@

    <div class="data-content">
      <div class="data-panel">
        <div class="panel-title">
        <div class="panel-title" style="margin-bottom: 30px">
          <div class="icon">
            <img src="@/assets/icons/arrow.png" alt="" />
          </div>
@@ -17,28 +17,28 @@
          <div class="panel-item">
            <data-hola
              :holaTitle="`工单总数`"
              :centerValue="3000"
              :centerValue="workOrderData.totalNum"
              :holaColor="`#4ea8ff`"
            ></data-hola>
          </div>
          <div class="panel-item">
            <data-hola
              :holaTitle="`已处理工单数`"
              :centerValue="1600"
              :centerValue="workOrderData.todoNum"
              :holaColor="`#5dec24`"
            ></data-hola>
          </div>
          <div class="panel-item">
            <data-hola
              :holaTitle="`未处理工单数`"
              :centerValue="200"
              :centerValue="workOrderData.doneNum"
              :holaColor="`#dfc639`"
            ></data-hola>
          </div>
        </div>
      </div>
      <div class="data-panel">
        <div class="panel-title">
        <div class="panel-title" style="margin: 50px 0 30px 0">
          <div class="icon">
            <img src="@/assets/icons/arrow.png" alt="" />
          </div>
@@ -63,20 +63,22 @@
    WrapperTitle,
    DataHola,
  },
  props: {
    workOrderData: {
      type: Object,
      default: {},
    },
    workOrderRegion: {
      type: Array,
      default: null,
    },
  },
  data() {
    return {
      dataList: {
        name: [
          "富顺县",
          "荣县",
          "高新区",
          "自流井区",
          "贡井区",
          "大安区",
          "沿滩区",
        ],
        data1: [210, 310, 40, 102, 111, 201, 123],
        data2: [20, 30, 10, 10, 11, 21, 5],
        name: [],
        data1: [],
        data2: [],
      },
    };
  },
@@ -136,6 +138,23 @@
    chart = echarts.init(this.$refs.barChart);
    this.initEchart();
  },
  watch: {
    workOrderRegion() {
      let name = [];
      let data1 = [];
      let data2 =  [];
      this.workOrderRegion.map((item) => {
        name.push(item.area);
        data1.push(item.todoNum);
        data2.push(item.doneNum);
      })
      this.dataList.name = name;
      this.dataList.data1 = data1;
      this.dataList.data2 = data2;
      chart = echarts.init(this.$refs.barChart);
      this.initEchart();
    }
  },
};
</script>