hsgy/src/components/Flow.vue

<template>
  <div class="flow-container">
    <div class="left-div">
      <div class="date">
        <Date />
      </div>
      <div v-for="(item, index) of listData" :key="index" class="echart-content">
        <BarEchart :echartData="item" />
      </div>
    </div>
    <div class="right-div">
      <div v-for="(item, index) of dataList" :key="index" :class="'div' + index">
        <div>{{ item.title }}</div>
        <div v-for="(it, i) of item.data" :key="i">
          <Process :itemData="it"></Process>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, ref, toRefs,watch } from "vue";
import { ElMessage } from "element-plus";
import myApi from "@/api/myApi.js";
import BarEchart from "./BarEchart.vue";
import Process from "./Process.vue";
import Date from "@/components/Date.vue";
import { useStore } from "vuex";
export default {
  name: "Flow",
  components: {
    BarEchart,
    Process,
    Date
  },
  setup() {
    const store = useStore();
    const state = reactive({
      listData: [
        {
          id: "echart0",
          title: "UF产水流量-柱状图",
          legend: ["UF产水流量-柱状图"],
          color: ["#6fdbce", "#eafbf7"],
          filed: 'VD2716'
        },
        {
          id: "echart1",
          title: "自来水前端流量-柱状图",
          legend: ["自来水前端流量-柱状图"],
          color: ["#308286", "#eafbf7"],
          filed: 'VD2816'
        },
        {
          id: "echart2",
          title: "供水流量-柱状图",
          legend: ["供水流量-柱状图"],
          color: ["#308286", "#eafbf7"],
          filed: 'VD2866'
        },
        {
          id: "echart3",
          title: "自来水后端流量-柱状图",
          legend: ["自来水后端流量-柱状图"],
          color: ["#62d3ff", "#eafbf7"],
          filed: 'VD2766'
        },
      ],
      dataList: [
        {
          title: "UF产水瞬时流量:m3/H:",
          data: [
            {
              id: "0",
              color: "#6fdbce",
              label: "Q1",
              value: "20",
              key: 'vd2700'
            },
          ],
        },
        {
          title: "UF产水累计流量:m3",
          data: [
            {
              id: "1",
              color: "#00baff",
              label: "Q2",
              value: "80",
              key: 'vd2716'
            },
          ],
        },
        {
          title: "自来水前端瞬时流量:m3/H",
          data: [
            {
              id: "3",
              color: "#308286",
              label: "Q3",
              value: "80",
              key: 'vd2800'
            },
          ],
        },
        {
          title: "自来水前端累计流量:m3",
          data: [
            {
              id: "4",
              color: "#00baff",
              label: "Q4",
              value: "80",
              key: 'vd2816'
            },
          ],
        },
        {
          title: "供水瞬时流量:m3/H",
          data: [
            {
              id: "5",
              color: "#00baff",
              label: "Q5",
              value: "80",
              key: 'vd2850'
            },
          ],
        },
        {
          title: "供水累计流量:m3",
          data: [
            {
              id: "6",
              color: "#00baff",
              label: "Q6",
              value: "80",
              key: 'vd2866'
            },
          ],
        },
        {
          title: "自程谥来水后端瞬时流量:m3/H",
          data: [
            {
              id: "7",
              color: "#00baff",
              label: "Q7",
              value: "10",
              key: 'vd2750'
            },
          ],
        },
        {
          title: "自来水后端累计流量:m3",
          data: [
            {
              id: "8",
              color: "#00baff",
              label: "Q8",
              value: "40",
              key: 'vd2766'
            },
          ],
        }
      ],
    });
    watch(() => store.state.pclData, val => {
      if (val) {
        console.log('flow',val);
        state.dataList.forEach(ele => {
          ele.data[0].value = Number(val[ele.data[0].key]).toFixed(2)+'';
        })
      }
    }, { deep: true, immediate: true });
    // onMounted(async () => {
    //   state.dataList.forEach(ele => {
    //     ele.data[0].value = Number(state.baseData[ele.data[0].key]).toFixed(2);
    //     console.log(ele.data[0].value);
    //   })
    // });

    return {
      ...toRefs(state),
    };
  },
};
</script>

<style lang="scss" scoped>
.flow-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  padding: 10px;

  .left-div {
    width: 75%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;

    .echart-content {
      width: 49%;
      height: 46%;
    }
  }

  .right-div {
    width: 22%;
    height: 100%;
  }

  .date {
    width: 100%;
    display: flex;
    justify-content: end;
    height: 3%;
  }
}
</style>