hsgy/src/components/Quality.vue

<template>
  <el-tabs
    v-model="activeName"
    type="card"
    class="demo-tabs"
    @tab-click="handleClick"
  >
  <el-tab-pane label="原水水质" name="old" key="old">
  </el-tab-pane>
  <el-tab-pane label="净水水质" name="pure" key="pure">
  </el-tab-pane>
</el-tabs>
<div class="content-water">
    <div class="date">
      <Date />
    </div>
    <div class="flow-container">
      <div class="left-div">
        <div
          v-for="(item, index) of dataList"
          :key="index"
          :class="'div' + index"
          class="process-content"
        >
          <div>{{ item.title }}</div>
          <div v-for="(it, i) of item.data" :key="i">
            <Process :itemData="it"></Process>
          </div>
        </div>
      </div>
      <div class="right-div">
        <div
          v-for="(item, index) of listData"
          :key="index"
          class="echart-content"
        >
          <LineEchart :echartData="item" :activeName="activeName" ref="refSon"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs, ref, nextTick  } from "vue";
import LineEchart from "@/components/LineEchart.vue";
import Process from "@/components/Process.vue";
import Date from "@/components/Date.vue";
import {useStore} from 'vuex';
import bus from '../utils/bus.js'
export default {
  name: "Flow",
  components: {
    LineEchart,
    Process,
    Date
  },
  setup() {
    const refSon = ref(null);
    const store = useStore();
    const state = reactive({
      listData: [
        {
          id: "echart0",
          title: "余氯查询",
        },
        {
          id: "echart1",
          title: "浊度查询",
        },
        {
          id: "echart2",
          title: "氨氮查询",
        },
        {
          id: "echart3",
          title: "COD查询",
        },
      ],
      dataList: [
        {
          title: "余氯:",
          data: [
            {
              id: "0",
              color: "#6fdbce",
              label: "COD1",
              value: "20",
            },
          ],
        },
        {
          title: "浊度:",
          data: [
            {
              id: "1",
              color: "#00baff",
              label: "COD2",
              value: "80",
            }
          ],
        },
        {
          title: "氨氮:",
          data: [
            {
              id: "3",
              color: "#308286",
              label: "氨氮",
              value: "80",
            },
          ],
        },
        {
          title: "COD:",
          data: [
            {
              id: "4",
              color: "#00baff",
              label: "COD",
              value: "80",
            }
          ],
        }
      ],
      activeName: 'old'
    });
    onMounted(() => {
      store.commit("changeSelectTab", "old");
    });
    const handleClick = (tab) => {
      console.log(tab.props.name);
      store.commit("changeSelectTab", tab.props.name);
      bus.emit('foo');
    };
    return {
      ...toRefs(state),
      handleClick,
     
    };
  },
  
};

</script>
<style>
.content-water {
  width: 100% !important;
  height: 95% !important;
}
/* .el-tabs__content{
  width: 100% !important;
  height: 95% !important;
} */
.el-tab-pane, .el-tabs {
  width: 100% !important;
  /* height: 100% !important; */
}
.el-tabs__item {
  font-weight: 800;
  font-size: 20px;
}
</style>
<style lang="scss" scoped>
.date {
  width: 100%;
  display: flex;
  justify-content: end;
  height: 3%;
}
.flow-container {
  width: 100%;
  height: 87%;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  .right-div {
    width: 75%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    .echart-content {
      width: 100%;
      height: 24%;
    }
  }
  .left-div {
    width: 22%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex-wrap: wrap;
  }
}
</style>