pqs-9100_client/frontend/src/views/home/tabs/dashboard.vue

<!-- 真正的首页 -->
<template>
  <div class="static">
    <div class="left_tree">
      <tree ref="treeRef" @jump="jump" />
    </div>
    <!-- <span class="new_span">测试scss颜色</span> -->
    <div class="right_container">
      <!-- 功能选择 -->
      <div class="container_function">
        <!-- <div class="function_title"><p>功能选择</p></div> -->
        <div class="function_main">
          <div
            class="function_item"
            :class="
              item.checked ? 'function_item checked_function' : 'function_item'
            "
            v-for="(item, index) in tabsList"
            :key="index"
            @click="handleCheckFunction(index)"
          >
            <div class="item_img">
              <img :src="item.img" alt="" />
            </div>
            <div class="item_text">
              <p>{{ item.label }}</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 饼图 -->
      <div class="container_charts">
        <div class="charts_info">
          <pie
            :customData="{
              title: '检测状态',
              textAlign: 'right',
            }"
            :legendData="{
              icon: 'circle',
              left: 'left',
            }"
            :chartsData="chartsData1"
            ref="pieRef1"
          ></pie>
        </div>
        <div class="charts_info">
          <pie
            :customData="{
              title: '检测结果',
              textAlign: 'right',
            }"
            :legendData="{
              icon: 'circle',
              left: 'left',
            }"
            :chartsData="chartsData2"
            ref="pieRef2"
          ></pie>
        </div>
        <div class="charts_info">
          <pie
            :customData="{
              title: '报告状态',
              textAlign: 'right',
            }"
            :legendData="{
              icon: 'circle',
              left: 'left',
            }"
            :chartsData="chartsData3"
            ref="pieRef3"
          ></pie>
        </div>
      </div>
      <!-- 筛选条件 -->
      <div class="container_title">
        <el-form :model="form" label-width="80px" :inline="true">
          <!-- <el-form-item label="功能选择">
            <el-select v-model="form.activeTabs" @change="changeSelect">
              <el-option
                v-for="(item, index) in tabsList"
                :label="item.label"
                :value="item.value"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="检测状态" v-if="form.activeTabs != 5">
            <el-select v-model="form.checkStatus" @change="changeSelect">
              <el-option
                v-for="(item, index) in checkStatusList"
                :label="item.label"
                :value="item.value"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="报告状态" v-if="form.activeTabs != 5">
            <el-select v-model="form.checkReportStatus" @change="changeSelect">
              <el-option
                v-for="(item, index) in checkReportStatusList"
                :label="item.label"
                :value="item.value"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="检测结果" v-if="form.activeTabs != 5">
            <el-select v-model="form.checkResult" @change="changeSelect">
              <el-option
                v-for="(item, index) in checkResultList"
                :label="item.label"
                :value="item.value"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="绑定状态" v-if="form.activeTabs == 5">
            <el-select v-model="form.deviceBindStatus" @change="changeSelect">
              <el-option
                v-for="(item, index) in deviceBindStatusList"
                :label="item.label"
                :value="item.value"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备类型" v-if="form.activeTabs == 5">
            <el-select v-model="form.deviceType" @change="changeSelect">
              <el-option
                v-for="(item, index) in deviceTypeList"
                :label="item.label"
                :value="item.value"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="制造厂商" v-if="form.activeTabs == 5">
            <el-select v-model="form.manufacturer" @change="changeSelect">
              <el-option
                v-for="(item, index) in manufacturerList"
                :label="item.label"
                :value="item.value"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :icon="Search" @click="handleSearch"
              >查询</el-button
            >
            <el-button
              type="primary"
              @click="handleDetection"
              v-if="form.activeTabs === 0"
              >启动自动检测</el-button
            >
            <el-button
              type="primary"
              @click="handleDetection"
              v-if="form.activeTabs === 1"
              >启动手动检测</el-button
            >
            <el-button type="primary" v-if="form.activeTabs === 2"
              >报告生成</el-button
            >
            <el-button type="primary" v-if="form.activeTabs === 5"
              >设备导入</el-button
            >
            <!-- <el-button type="primary" @click="planDetail">计划详情</el-button> -->
          </el-form-item>
        </el-form>
      </div>
      <!-- 列表数据 -->
      <div class="container_table">
        <Table></Table>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { getStaticTreeData } from "@/api/plan/static.ts";
import pie from "@/components/echarts/pie/default.vue";
import { useRouter } from "vue-router";
import tree from "../components/tree.vue";
import Table from "../components/table.vue";
import { data } from "@/api/plan/static.json";
import { Refresh, Search } from "@element-plus/icons-vue";
const treeRef = ref();
const form: any = ref({
  activeTabs: 0, //功能选择
  checkStatus: 0, //检测状态
  checkReportStatus: 0, //检测报告状态
  checkResult: 0, //检测结果
  deviceBindStatus: 0, //绑定状态
  deviceType: 0, //设备类型
  manufacturer: 0, //制造厂商
});
const router = useRouter();
localStorage.setItem("color", "red");
//功能选择数据
const tabsList = ref([
  {
    label: "自动检测",
    value: 0,
    img: "/src/assets/images/plan/static/1.svg",
    checked: true,
  },
  {
    label: "手动检测",
    value: 1,
    img: "/src/assets/images/plan/static/2.svg",
    checked: false,
  },
  {
    label: "报告生成",
    value: 2,
    img: "/src/assets/images/plan/static/3.svg",
    checked: false,
  },
  {
    label: "设备归档",
    value: 3,
    img: "/src/assets/images/plan/static/4.svg",
    checked: false,
  },
  {
    label: "设备浏览",
    value: 4,
    img: "/src/assets/images/plan/static/5.svg",
    checked: false,
  },
  {
    label: "设备导入",
    value: 5,
    img: "/src/assets/images/plan/static/6.svg",
    checked: false,
  },
]);
//检测状态数据
const checkStatusList = [
  {
    label: "未检测",
    value: 0,
  },
  {
    label: "检测中",
    value: 1,
  },
  {
    label: "检测完成",
    value: 2,
  },
  {
    label: "归档",
    value: 3,
  },
];
//检测报告状态数据
const checkReportStatusList = [
  {
    label: "未生成报告",
    value: 0,
  },
  {
    label: "已生成报告",
    value: 1,
  },
];
//检测结果数组
const checkResultList = [
  {
    label: "/",
    value: null,
  },
  {
    label: "不合格",
    value: 0,
  },
  {
    label: "合格",
    value: 1,
  },
];
//绑定状态数组
const deviceBindStatusList = [
  {
    label: "未绑定",
    value: 0,
  },
  {
    label: "已绑定",
    value: 1,
  },
];
//设备类型数组
const deviceTypeList = [
  {
    label: "PQS882A",
    value: 0,
  },
  {
    label: "PQS882B4",
    value: 1,
  },
  {
    label: "PQS882B5",
    value: 2,
  },
  {
    label: "PQS882B6",
    value: 3,
  },
  {
    label: "PQS882B7",
    value: 4,
  },
  {
    label: "PQS882B8",
    value: 5,
  },
];
//制造厂商数组
const manufacturerList = [
  {
    label: "南京灿能电力",
    value: 0,
  },
  {
    label: "南瑞继保",
    value: 1,
  },
  {
    label: "中电",
    value: 2,
  },
];
form.value.activeTabs = tabsList.value[0].value;
const pieRef1 = ref(),
  pieRef2 = ref(),
  pieRef3 = ref();
const changeSelect = () => {
  console.log(form.value.activeTabs);
  getPieData();
};
const chartsData1: any = ref([]),
  chartsData2: any = ref([]),
  chartsData3: any = ref([]);
const getPieData = () => {
  chartsData1.value = [
    { value: Math.floor(Math.random() * 100) + 1, name: "未检测" },
    { value: Math.floor(Math.random() * 100) + 1, name: "检测中" },
    { value: Math.floor(Math.random() * 100) + 1, name: "检测完成" },
    { value: Math.floor(Math.random() * 100) + 1, name: "归档" },
  ];
  chartsData2.value = [
    { value: Math.floor(Math.random() * 100) + 1, name: "/" },
    { value: Math.floor(Math.random() * 100) + 1, name: "合格" },
    { value: Math.floor(Math.random() * 100) + 1, name: "不合格" },
  ];
  // pieRef2.value.init();
  chartsData3.value = [
    { value: Math.floor(Math.random() * 100) + 1, name: "已生成报告" },
    { value: Math.floor(Math.random() * 100) + 1, name: "未生成报告" },
  ];
  // pieRef3.value.init();
  pieRef1.value.init();
};
const getTree = () => {
  getStaticTreeData({ userName: "zhangsan", planName: "111" }).then((res) => {
    console.log(res, "99999999");
    // treeRef.value.getTreeData(res.data);
    treeRef.value.getTreeData(data);
  });
};
//前往检测
const handleDetection = () => {
  router.push({
    path: "/detection",
  });
};
//前往计划详情
const planDetail = () => {
  router.push({
    path: "/plan/planList",
  });
};
//功能选择css切换
const handleCheckFunction = (val: any) => {
  tabsList.value.map((item: any, index: any) => {
    if (val == index) {
      item.checked = true;
    } else {
      item.checked = false;
    }
  });
  form.value.activeTabs = val;
};
// 树点击跳转
const jump = (e: any) => {
  console.log("🚀 ~ jump ~ e:", e);
  router.push({
    path: "/plan/planList",
  });
};
onMounted(() => {
  console.log();
  getTree();
  getPieData();
});
</script>
<style lang="scss" scoped>
.static {
  width: 100%;
  height: calc(100vh - 165px);
  display: flex;
  justify-content: space-between;
  background-color: #eee;
  .left_tree {
    width: auto;
    height: 100%;
    background-color: #fff;
  }
  .right_container {
    flex: 1;
    // width: 100%;
    padding: 0 10px 0 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    .container_title {
      width: 100%;
      // min-height: 60px;
      height: auto !important;
      background: #fff;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 10px;
      border-radius: 4px;
      padding: 10px;
      box-sizing: border-box;
      .el-form {
        width: 100%;
        .el-form-item {
          .el-button {
            margin: 0 10px;
          }
        }
      }
      ::v-deep .el-form-item {
        margin-bottom: 8px !important;
      }
    }
    .container_function {
      width: 100%;
      height: 70px;
      background: #fff;
      border-radius: 4px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      padding: 10px 50px 10px 30px;
      box-sizing: border-box;
      .function_title {
        height: 100%;
        height: 20px;
        width: 100px;
        // line-height: 70px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        p {
          font-size: 14px;
          font-weight: 800;
          text-align: center;
          margin: 0;
        }
      }
      .function_main {
        flex: 1;
        display: flex;
        justify-content: space-between;
        .function_item {
          width: 120px;
          height: 50px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          cursor: pointer;
          // border: 1px solid var(--el-color-primary);
          .item_img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #607eab;
            display: flex;
            align-items: center;
            justify-content: center;
            img {
              width: 30px;
              height: auto;
            }
          }
          .item_img:nth-child(3),
          .item_img:nth-child(6) {
            padding: 10px !important;
            img {
              width: 20px !important;
              height: auto;
            }
          }
          .item_text {
            p {
              margin: 0;
              color: var(--el-color-primary);
              font-weight: 800;
              color: #000;
            }
          }
        }
        .function_item:hover,
        .checked_function {
          .item_img {
            background-color: var(--el-color-primary);
          }
          .item_text {
            p {
              color: var(--el-color-primary);
            }
          }
        }
      }
    }
    .container_charts {
      width: 100%;
      min-height: 200px !important;
      // border: 2px solid green;
      background-color: #eee;
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      .charts_info {
        flex: none;
        width: 32.9%;
        height: 100% !important;
        // border: 2px solid pink;
        background-color: #fff;
        border-radius: 4px;
      }
    }
    .container_table {
      width: 100%;
      flex: 1;
      // height: 400px;
      border-radius: 4px;
    }
  }
}
.el-select {
  min-width: 180px;
}
</style>