|
@@ -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;
|
|
|
}
|