feature/环境监控页面

src/views/report/environment/temperature/index.vue

@@ -1,310 +1,375 @@
 <template>
   <div class="mainContentBox">
-    <avue-crud ref="crudRef1" v-model:search="data1.search" :data="data1.data" :option="data1.option"
-      v-model:page="data1.page" @row-update="updateRow" @row-del="deleteRow" @search-change="dataList"
-      @search-reset="resetChange" @size-change="dataList" @current-change="dataList"
-      @selection-change="selectionChange">
-      <template #header="{ size }">
-        <div id="dailystoragecharts"></div>
-      </template>
-      <template #menu-right="{}">
-        <el-button class="ml-3" @click="exportData('/api/v1/process/census/beatInfo/export')">
-          <template #icon> <i-ep-download /> </template>导出
-        </el-button>
-      </template>
-    </avue-crud>
+    <div class="box">
+      <div class="titleText">防静电监控</div>
+      <div class="itemBox">
+        <div class="item" v-for="(item, index) in 20">
+          <div class="sc"></div>
+          <div class="gw">工位:{{ index }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="mainContentBox">
+    <div class="box">
+      <div class="titleText">温湿度监控</div>
+      <div class="charts">
+        <div id="dailystoragecharts1"></div>
+        <div id="dailystoragecharts2"></div>
+      </div>
+      <el-divider />
+      <div class="charts">
+        <div id="dailystoragecharts3"></div>
+        <div id="dailystoragecharts4"></div>
+      </div>
+    </div>
   </div>
 </template>
 <script setup>
-import { ref, getCurrentInstance } from "vue";
-import { useCrud } from "@/hooks/userCrud";
-import { useCommonStoreHook, useDictionaryStore } from "@/store";
-import dictDataUtil from "@/common/configs/dictDataUtil";
-import editSkill from "@/views/base/skill/components/edit-skill.vue";
-import { getBeatInfo } from "@/api/report";
 import * as echarts from "echarts";
-// 数据字典相关
-const { dicts } = useDictionaryStore();
-// const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
-//   useCrud({
-//     src: "/api/v1/process/census/completeOrder",
-//   });
-// ;
-const data1 = ref(
-  useCrud({
-    src: "/api/v1/process/census/beatInfo",
-  })
-);
-
-const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
-  data1.value.Methords;
-
-const { selectionChange, multipleDelete } = data1.value.Methords;
-const { checkBtnPerm, downloadTemplate, exportData } = data1.value.Utils;
-const charts = shallowRef(null);
-const chartsData = ref([]);
-
-// 设置表格列或者其他自定义的option
-data1.value.option = Object.assign(data1.value.option, {
-  selection: true,
-  menu: false,
-  menuWidth: 100,
-  addBtn: false,
-  filterBtn: false,
-  searchShowBtn: false,
-  columnBtn: false,
-  gridBtn: false,
-  editBtn: false,
-  viewBtn: false,
-  delBtn: false,
-  column: [
-    {
-      label: "日期范围",
-      prop: "searchTime",
-      search: true,
-      hide: true,
-      type: "date",
-      format: "YYYY-MM-DD",
-      valueFormat: "YYYY-MM-DD",
-      searchRange: true,
-      startPlaceholder: "开始日期",
-      endPlaceholder: "结束日期",
-    },
-    {
-      label: "订单编码",
-      prop: "orderCode",
-      overHidden: true,
-      search: true,
-      editDisabled: true,
-      hide: true,
-    },
-    {
-      label: "物料编码",
-      prop: "materialCode",
-      overHidden: true,
-      search: true,
-      editDisabled: true,
-      hide: true,
-    },
-    {
-      label: "工单编码",
-      prop: "workOrderCode",
-      width: 140,
-      overHidden: true,
-      search: true,
-      editDisabled: true,
-      hide: true,
-    },
-    //展示
-    {
-      label: "订单编码",
-      prop: "orderCode",
-      search: false,
-    },
-    {
-      label: "订单名称",
-      prop: "orderName",
-      search: false,
-    },
-    {
-      label: "工单编码",
-      prop: "workOrderCode",
-      search: false,
-    },
-    {
-      label: "工单数量",
-      prop: "planNum",
-      search: false,
+const charts1 = shallowRef(null);
+const charts2 = shallowRef(null);
+const charts3 = shallowRef(null);
+const charts4 = shallowRef(null);
+onMounted(() => {
+  charts1.value = echarts.init(document.getElementById("dailystoragecharts1"));
+  charts2.value = echarts.init(document.getElementById("dailystoragecharts2"));
+  charts3.value = echarts.init(document.getElementById("dailystoragecharts3"));
+  charts4.value = echarts.init(document.getElementById("dailystoragecharts4"));
+  charts1.value.setOption({
+    title: {
+      text: "温度",
     },
-    {
-      label: "物料编码",
-      prop: "materialCode",
-      search: false,
-    },
-    {
-      label: "物料名称",
-      prop: "materialName",
-      search: false,
+    series: [
+      {
+        type: "gauge",
+        center: ["50%", "60%"],
+        startAngle: 200,
+        endAngle: -20,
+        min: 0,
+        max: 60,
+        splitNumber: 12,
+        itemStyle: {
+          color: "#FFAB91",
+        },
+        progress: {
+          show: true,
+          width: 30,
+        },
+        pointer: {
+          show: false,
+        },
+        axisLine: {
+          lineStyle: {
+            width: 30,
+          },
+        },
+        axisTick: {
+          distance: -45,
+          splitNumber: 5,
+          lineStyle: {
+            width: 2,
+            color: "#999",
+          },
+        },
+        splitLine: {
+          distance: -52,
+          length: 14,
+          lineStyle: {
+            width: 3,
+            color: "#999",
+          },
+        },
+        axisLabel: {
+          distance: -20,
+          color: "#999",
+          fontSize: 20,
+        },
+        anchor: {
+          show: false,
+        },
+        title: {
+          show: false,
+        },
+        detail: {
+          valueAnimation: true,
+          width: "60%",
+          lineHeight: 40,
+          borderRadius: 8,
+          offsetCenter: [0, "-15%"],
+          fontSize: 60,
+          fontWeight: "bolder",
+          formatter: "{value} °C",
+          color: "inherit",
+        },
+        data: [
+          {
+            value: 20,
+          },
+        ],
+      },
+      {
+        type: "gauge",
+        center: ["50%", "60%"],
+        startAngle: 200,
+        endAngle: -20,
+        min: 0,
+        max: 60,
+        itemStyle: {
+          color: "#FD7347",
+        },
+        progress: {
+          show: true,
+          width: 8,
+        },
+        pointer: {
+          show: false,
+        },
+        axisLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        splitLine: {
+          show: false,
+        },
+        axisLabel: {
+          show: false,
+        },
+        detail: {
+          show: false,
+        },
+        data: [
+          {
+            value: 20,
+          },
+        ],
+      },
+    ],
+  });
+  charts2.value.setOption({
+    title: {
+      text: "温度",
     },
-    {
-      label: "物料规格",
-      prop: "materialModel",
-      search: false,
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "cross",
+        label: {
+          backgroundColor: "#6a7985",
+        },
+      },
     },
-    {
-      label: "标准用时(秒)",
-      prop: "standardWorktime",
-      search: false,
+    xAxis: {
+      type: "category",
+      data: ["1:00", "3:00", "5:00", "7:00", "9:00", "11:00", "13:00"],
     },
-    {
-      label: "总共用时(秒)",
-      prop: "totalTime",
-      search: false,
+    yAxis: {
+      type: "value",
     },
-    {
-      label: "时差比",
-      prop: "totalTime",
-      search: false,
-      html: true,
-      formatter: (val) => {
-        return (
-          "<span>" +
-          (Number(val.totalTime) - Number(val.standardWorktime)) +
-          "</span>"
-        );
+    series: [
+      {
+        data: [32, 20, 19, 23, 34, 23, 30],
+        type: "line",
+        smooth: true,
       },
+    ],
+  });
+  charts3.value.setOption({
+    title: {
+      text: "湿度",
     },
-  ],
-});
-
-const getCurrentMonthStartAndEndDates = () => {
-  // 获取当前日期
-  let now = new Date();
-
-  // 获取当前月份的第一天
-  let startDate = new Date(now.getFullYear(), now.getMonth(), 1);
-
-  // 获取当前月份的最后一天
-  let endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0);
-
-  // 格式化日期为'YYYY-MM-DD'格式
-  function formatDate(date) {
-    let year = date.getFullYear();
-    let month = String(date.getMonth() + 1).padStart(2, "0");
-    let day = String(date.getDate()).padStart(2, "0");
-    return `${year}-${month}-${day}`;
-  }
-
-  // 返回包含开始和结束日期的数组
-  return [formatDate(startDate), formatDate(endDate)];
-};
-const clickSearch = async () => {
-  await setChartsData();
-  setOption();
-  charts.value.setOption(
-    {
-      tooltip: {
-        trigger: "axis",
-        axisPointer: {
-          type: "shadow",
+    series: [
+      {
+        type: "gauge",
+        center: ["50%", "60%"],
+        startAngle: 200,
+        endAngle: -20,
+        min: 0,
+        max: 60,
+        splitNumber: 12,
+        itemStyle: {
+          color: "#FFAB91",
         },
-      },
-      legend: {
-        data: ["标准用时", "总共用时", "时差比"],
-      },
-      xAxis: [
-        {
-          type: "category",
-          axisTick: { show: false },
-          data: chartOption.value.xData,
+        progress: {
+          show: true,
+          width: 30,
+        },
+        pointer: {
+          show: false,
+        },
+        axisLine: {
+          lineStyle: {
+            width: 30,
+          },
+        },
+        axisTick: {
+          distance: -45,
+          splitNumber: 5,
+          lineStyle: {
+            width: 2,
+            color: "#999",
+          },
+        },
+        splitLine: {
+          distance: -52,
+          length: 14,
+          lineStyle: {
+            width: 3,
+            color: "#999",
+          },
+        },
+        axisLabel: {
+          distance: -20,
+          color: "#999",
+          fontSize: 20,
+        },
+        anchor: {
+          show: false,
         },
-      ],
-      toolbox: {
-        feature: {
-          saveAsImage: {},
+        title: {
+          show: false,
         },
+        detail: {
+          valueAnimation: true,
+          width: "60%",
+          lineHeight: 40,
+          borderRadius: 8,
+          offsetCenter: [0, "-15%"],
+          fontSize: 40,
+          fontWeight: "bolder",
+          formatter: "{value} %RH",
+          color: "inherit",
+        },
+        data: [
+          {
+            value: 20,
+          },
+        ],
       },
-      yAxis: [
-        {
-          type: "value",
+      {
+        type: "gauge",
+        center: ["50%", "60%"],
+        startAngle: 200,
+        endAngle: -20,
+        min: 0,
+        max: 60,
+        itemStyle: {
+          color: "#FD7347",
         },
-      ],
-      series: chartOption.value.series,
-    },
-    true
-  );
-};
-//设置搜索条件中的时间范围为默认此月
-const setTime = () => {
-  data1.value.search.searchTime = getCurrentMonthStartAndEndDates();
-};
-const labelOption = {
-  show: false,
-  position: "insideBottom",
-  distance: 15,
-  align: "left",
-  verticalAlign: "middle",
-  rotate: 90,
-  formatter: "{c}  {name|{a}}",
-  fontSize: 24,
-  rich: {
-    name: {},
-  },
-};
-const chartOption = ref({
-  xData: [],
-  series: [],
-});
-const setChartsData = async () => {
-  const { data } = await getBeatInfo({
-    ...data1.value.search,
-    pageSize: 99999,
+        progress: {
+          show: true,
+          width: 8,
+        },
+        pointer: {
+          show: false,
+        },
+        axisLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        splitLine: {
+          show: false,
+        },
+        axisLabel: {
+          show: false,
+        },
+        detail: {
+          show: false,
+        },
+        data: [
+          {
+            value: 20,
+          },
+        ],
+      },
+    ],
   });
-  chartsData.value = data.records;
-};
-const setOption = () => {
-  let array1 = [];
-  let array2 = [];
-  let obj1 = {
-    name: "标准用时",
-    type: "bar",
-    barGap: 0,
-    label: labelOption,
-    emphasis: {
-      focus: "series",
+  charts4.value.setOption({
+    title: {
+      text: "湿度",
     },
-    data: [],
-  };
-  let obj2 = {
-    name: "总共用时",
-    type: "bar",
-    barGap: 0,
-    label: labelOption,
-    emphasis: {
-      focus: "series",
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "cross",
+        label: {
+          backgroundColor: "#6a7985",
+        },
+      },
     },
-    data: [],
-  };
-  let obj3 = {
-    name: "时差比",
-    type: "bar",
-    barGap: 0,
-    label: labelOption,
-    emphasis: {
-      focus: "series",
+    xAxis: {
+      type: "category",
+      data: ["1:00", "3:00", "5:00", "7:00", "9:00", "11:00", "13:00"],
     },
-    data: [],
-  };
-  chartsData.value.forEach((item) => {
-    array1.push(`${item.orderName}:${item.workOrderCode}`);
-    obj1.data.push(item.standardWorktime);
-    obj2.data.push(item.totalTime);
-    obj3.data.push(Number(item.totalTime) - Number(item.standardWorktime));
+    yAxis: {
+      type: "value",
+    },
+    series: [
+      {
+        data: [32, 20, 19, 23, 34, 23, 30],
+        type: "line",
+        smooth: true,
+      },
+    ],
   });
-  array2 = [obj1, obj2, obj3];
-  chartOption.value.xData = array1;
-  chartOption.value.series = array2;
-};
-
-onMounted(async () => {
-  setTime();
-  charts.value = echarts.init(document.getElementById("dailystoragecharts"));
-  dataList();
-  clickSearch();
 });
 </script>
 <style lang="scss" scoped>
-:deep(.avue-crud__left) {
-  width: 100%;
+.box {
+  height: 30wh;
+  .itemBox {
+    display: grid;
+    margin-left: 100px;
+    margin-top: 5px;
+    grid-template-columns: repeat(
+      auto-fill,
+      minmax(80px, 1fr)
+    ); /* 自动填充列，每列最小宽度为100像素 */
+    grid-gap: 5px; /* 设置网格项之间的间距为20像素 */
+    .item {
+      display: inline-block;
+      width: 60px;
+      height: 100px;
+      .sc {
+        height: 60px;
+        border-radius: 30px;
+        margin-bottom: 10px;
+        background-color: green;
+      }
+      .gw {
+        text-align: center;
+      }
+    }
+  }
+}
+.charts {
+  display: flex;
 }
-
-.cellStyle {
-  color: "#409eff" !important;
-  cursor: "pointer" !important;
+#dailystoragecharts1 {
+  padding: 10px;
+  width: 35%;
+  height: 400px;
+  border: 1px solid #ccc;
+}
+#dailystoragecharts2 {
+  padding: 10px;
+  width: 65%;
+  height: 400px;
+  border: 1px solid #ccc;
+}
+#dailystoragecharts3 {
+  padding: 10px;
+  width: 35%;
+  height: 400px;
+  border: 1px solid #ccc;
 }
-
-#dailystoragecharts {
-  width: 100%;
+#dailystoragecharts4 {
+  padding: 10px;
+  width: 65%;
   height: 400px;
   border: 1px solid #ccc;
 }