#632 历史工况-切换时间数据不变

src/api/index.ts

@@ -37,6 +37,13 @@ export function downloadDeviceRepair() {
 export function operatingConditionList(params:any) {
   return get('/operatingCondition/conditionList',params);
 }
+
+// 工况历史记录
+// /operatingCondition/conditionHistoryRecords
+export function conditionHistoryRecords(params:any) {
+  return get('/operatingCondition/conditionHistoryRecords',params);
+}
+
 // 工况添加接口
 /**
  * 

src/views/HealthStatusAnalysis/mock.vue

@@ -7,7 +7,6 @@
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <template>
-
   <div class="all-page">
     <div class="left">
       <!-- {{machineImgParamsRef}} -->
@@ -32,7 +31,7 @@
             @change="onChangeEndDate"
           >
           </el-date-picker>
-         &emsp; &emsp; &emsp; 速度控制:&emsp;<el-input
+          &emsp; &emsp; &emsp; 速度控制:&emsp;<el-input
             style="width: 80px"
             max="60"
             min="1"
@@ -52,7 +51,7 @@
             @input="handleInputCount"
           ></el-input
           >&nbsp;分钟数据&emsp;
-          <el-button class="btn" @click="mockStart">开始</el-button>
+          <el-button class="btn" @click="onClickStart">开始</el-button>
         </div>
         <s-title titleText="系统数据监测"></s-title>
         <div class="run-status-b fullClass">
@@ -268,7 +267,7 @@
               <!-- <div class="his-select">下拉</div> -->
               <el-select
                 class="his-type"
-                @change="workChange"
+                @change="onChangeStatus"
                 v-model="hlQueryParams.tStatus"
                 style="width: 100px"
                 placeholder=""
@@ -286,7 +285,7 @@
         </div>
 
         <div class="timeEcharts">
-          <CalendarHeatmap :data="chartData" @showDetails="handleShowDetails"  />
+          <CalendarHeatmap :data="chartData" @showDetails="handleShowDetails" />
         </div>
       </div>
       <div class="right-bottom">
@@ -494,9 +493,9 @@
   >
     <!-- 模态框内容插槽 -->
     <div class="custom-warn-box">
-       <el-table
-       border
-       max-height="600"
+      <el-table
+        border
+        max-height="600"
         show-overflow-tooltip
         :data="tableData"
         style="width: 100%"
@@ -513,21 +512,15 @@
           prop="label"
           label="工况名称"
           align="center"
-          
           width="240"
         ></el-table-column>
-        <el-table-column
-          prop="type"
-          label="状态"
-          sortable
-          align="center"
-        >
-           <template v-slot="scope">
-            <div :class="['text-'] + enumStatus[scope.row.type].color">{{ enumStatus[scope.row.type].text }}</div>
+        <el-table-column prop="type" label="状态" sortable align="center">
+          <template v-slot="scope">
+            <div :class="['text-'] + enumStatus[scope.row.type].color">
+              {{ enumStatus[scope.row.type].text }}
+            </div>
           </template>
-        
         </el-table-column>
-
       </el-table>
     </div>
   </ModalComponent>
@@ -566,14 +559,15 @@ import {
   updateDataRangeSpeed,
   mockCacheData,
   setConditionTime,
-  queryDataRangeSpeed
+  queryDataRangeSpeed,
+  conditionHistoryRecords,
 } from "@/api/index";
 const wsMockUrl = import.meta.env.VITE_WS_MOCK_URL as string;
 const wsMockClient = new WebSocketClient(wsMockUrl);
 const queryParamsMock = ref({
   time: 1,
-  eDate: '',
-  sDate: '',
+  eDate: "",
+  sDate: "",
   count: 1,
 });
 // watch(
@@ -593,18 +587,19 @@ const getHStatus = async () => {
 let lineParamsAllRef = ref([]);
 const getQueryDataRangeSpeed = async () => {
   let result = await queryDataRangeSpeed({});
-   let valueObj = result.data;
-   queryParamsMock.value={
-    sDate:valueObj.start_time,
-    eDate:valueObj.end_time,
-    count:Number(valueObj.batch_size),
-    time:Number(valueObj.interval)
-   }
-   mockStart(true)
+  let valueObj = result.data;
+  queryParamsMock.value = {
+    sDate: valueObj.start_time,
+    eDate: valueObj.end_time,
+    count: Number(valueObj.batch_size),
+    time: Number(valueObj.interval),
+  };
+  handleConditionHistoryRecords(valueObj.start_time, valueObj.end_time);
+  mockStart(true);
 };
 onMounted(async () => {
   getcateData();
-  getQueryDataRangeSpeed()
+  getQueryDataRangeSpeed();
   await getPointData(btnBigIndex.value, "温度");
   getHStatus();
   if (!!sessionStorage.getItem("runStatus")) {
@@ -631,7 +626,7 @@ onMounted(async () => {
           data: its,
         };
       });
-    } 
+    }
   });
   // 处理接收到的消息
   wsMockClient.onMessage = (data: string) => {
@@ -657,6 +652,7 @@ onMounted(async () => {
           break;
         case "4":
           workMessage(newData.data);
+          console.log("workMessage ===>", newData.data);
           break;
         default:
           break;
@@ -667,114 +663,182 @@ onMounted(async () => {
   };
 });
 const onChangeStartDate = () => {
-  const sDate = new Date(queryParamsMock.value.sDate).getTime()
-  const eDate = new Date(queryParamsMock.value.eDate).getTime()
+  const sDate = new Date(queryParamsMock.value.sDate).getTime();
+  const eDate = new Date(queryParamsMock.value.eDate).getTime();
   if (sDate > eDate) {
     ElMessage({
       message: `开始时间不能大于结束时间`,
       type: "error",
     });
-    queryParamsMock.value.sDate = queryParamsMock.value.eDate
+    queryParamsMock.value.sDate = queryParamsMock.value.eDate;
   }
-}
+};
 const onChangeEndDate = () => {
-  const sDate = new Date(queryParamsMock.value.sDate).getTime()
-  const eDate = new Date(queryParamsMock.value.eDate).getTime()
+  const sDate = new Date(queryParamsMock.value.sDate).getTime();
+  const eDate = new Date(queryParamsMock.value.eDate).getTime();
   if (sDate > eDate) {
     ElMessage({
       message: `开始时间不能大于结束时间`,
       type: "error",
     });
-    queryParamsMock.value.eDate = queryParamsMock.value.sDate
+    queryParamsMock.value.eDate = queryParamsMock.value.sDate;
   }
-}
+};
 const handleInputTime = (v: any) => {
   if (v <= 0) {
     ElMessage({
       message: `参数设置错误，需大于0的整数`,
       type: "error",
     });
-    queryParamsMock.value.time = 1
+    queryParamsMock.value.time = 1;
   }
   if (!Number.isInteger(Number(v))) {
     ElMessage({
       message: `需大于0的整数`,
       type: "error",
     });
-    queryParamsMock.value.time = Math.floor(v)
+    queryParamsMock.value.time = Math.floor(v);
   }
-}
+};
 const handleInputCount = (v: any) => {
   if (v <= 0) {
     ElMessage({
       message: `参数设置错误，需大于0的整数`,
       type: "error",
     });
-    queryParamsMock.value.count = 1
+    queryParamsMock.value.count = 1;
   }
   if (!Number.isInteger(Number(v))) {
     ElMessage({
       message: `需大于0的整数`,
       type: "error",
     });
-    queryParamsMock.value.count = Math.floor(v)
+    queryParamsMock.value.count = Math.floor(v);
   }
-  console.log('handleInputCount ===>', v)
-}
-const handleDateRangeChange = (dates) => {
+};
+const handleDateRangeChange = (dates: { start: any; end: any }) => {
   let { start, end } = dates;
-  start = moment(start).format('YYYY-MM-DD');
-  end = moment(end).format('YYYY-MM-DD');
-  const duration = moment(end).diff(moment(start), 'days');
+  start = moment(start).format("YYYY-MM-DD");
+  end = moment(end).format("YYYY-MM-DD");
+  const duration = moment(end).diff(moment(start), "days");
   if (duration <= 7) {
     // hlQueryParams.value.eDate = [start, end];
     setParamsHl(start, end);
   } else {
-    const startOfWeek = moment(start).format('YYYY-MM-DD');
-    const endOfWeek = moment(start).endOf('isoWeek').format('YYYY-MM-DD');
+    const startOfWeek = moment(start).format("YYYY-MM-DD");
+    const endOfWeek = moment(start).endOf("isoWeek").format("YYYY-MM-DD");
     // hlQueryParams.value.eDate = [startOfWeek, endOfWeek];
-        setParamsHl(startOfWeek, endOfWeek);
-
+    setParamsHl(startOfWeek, endOfWeek);
   }
 };
+// 工况历史记录
+const handleConditionHistoryRecords = async (s: string, d: string) => {
+  console.log("handleConditionHistoryRecords", s, d);
+  const params = {
+    minTime: s,
+    maxTime: d,
+  };
+  const res = await conditionHistoryRecords(params);
+
+  const tStatus = hlQueryParams.value.tStatus;
+
+  const dataList: any = [];
+
+  res.data.forEach((item: any) => {
+    if (tStatus === "all") {
+      dataList.push(item);
+    } else {
+      item.data.forEach((element: any) => {
+        if (Number(element.type) === Number(tStatus)) {
+          dataList.push(item)
+        }
+      })
+    }
+  });
 
-const prevWeek = () => {
-     const duration = moment(queryParamsMock.value.eDate).diff(moment(queryParamsMock.value.sDate), 'days');
+  chartData.value = transformData(dataList);
+};
+// 上一周
+const prevWeek = async () => {
+  const duration = moment(queryParamsMock.value.eDate).diff(
+    moment(queryParamsMock.value.sDate),
+    "days"
+  );
   if (duration <= 7) {
     return;
   }
-  const start = moment(hlQueryParams.value.eDate[0]).subtract(1, "week").startOf("isoWeek");
-  const end = moment(hlQueryParams.value.eDate[0]).subtract(1, "week").endOf("isoWeek");
+  const start = moment(hlQueryParams.value.eDate[0])
+    .subtract(1, "week")
+    .startOf("isoWeek");
+  const end = moment(hlQueryParams.value.eDate[0])
+    .subtract(1, "week")
+    .endOf("isoWeek");
 
   if (start.isBefore(moment(queryParamsMock.value.sDate))) {
-    setParamsHl(moment(queryParamsMock.value.sDate), moment(queryParamsMock.value.sDate).endOf("isoWeek"));
+    setParamsHl(
+      moment(queryParamsMock.value.sDate),
+      moment(queryParamsMock.value.sDate).endOf("isoWeek")
+    );
   } else {
     setParamsHl(start, end);
   }
+  handleConditionHistoryRecords(
+    hlQueryParams.value.eDate[0],
+    hlQueryParams.value.eDate[1]
+  );
 };
-
-const nextWeek = () => {
-    const duration = moment(queryParamsMock.value.eDate).diff(moment(queryParamsMock.value.sDate), 'days');
+// 下一周
+const nextWeek = async () => {
+  const duration = moment(queryParamsMock.value.eDate).diff(
+    moment(queryParamsMock.value.sDate),
+    "days"
+  );
   if (duration <= 7) {
     return;
   }
-   const start = moment(hlQueryParams.value.eDate[1]).add(1, "week").startOf("isoWeek");
-  const end = moment(hlQueryParams.value.eDate[1]).add(1, "week").endOf("isoWeek");
+  const start = moment(hlQueryParams.value.eDate[1])
+    .add(1, "week")
+    .startOf("isoWeek");
+  const end = moment(hlQueryParams.value.eDate[1])
+    .add(1, "week")
+    .endOf("isoWeek");
 
   if (end.isAfter(moment(queryParamsMock.value.eDate))) {
-    setParamsHl(moment(queryParamsMock.value.eDate).startOf("isoWeek"), moment(queryParamsMock.value.eDate));
+    setParamsHl(
+      moment(queryParamsMock.value.eDate).startOf("isoWeek"),
+      moment(queryParamsMock.value.eDate)
+    );
   } else {
     setParamsHl(start, end);
   }
+  handleConditionHistoryRecords(
+    hlQueryParams.value.eDate[0],
+    hlQueryParams.value.eDate[1]
+  );
 };
 const setParamsHl = (start: string, end: string) => {
   hlQueryParams.value.eDate = [
     moment(start).format("YYYY-MM-DD"),
     moment(end).format("YYYY-MM-DD"),
   ];
-  setConditionTime({"min_time":hlQueryParams.value.eDate[0],"max_time":hlQueryParams.value.eDate[1]})
+  setConditionTime({
+    min_time: hlQueryParams.value.eDate[0],
+    max_time: hlQueryParams.value.eDate[1],
+  });
+};
+const onClickStart = async () => {
+  const data = {
+    start_time: moment(queryParamsMock.value.sDate).format(
+      "YYYY-MM-DD HH:mm:ss"
+    ),
+    end_time: moment(queryParamsMock.value.eDate).format("YYYY-MM-DD HH:mm:ss"),
+    interval: queryParamsMock.value.time,
+    batch_size: Number(queryParamsMock.value.count),
+  };
+  const res = await updateDataRangeSpeed(data);
+  console.log("res ===>", res);
 };
-const mockStart = async (state:boolean=false) => {
+const mockStart = async (state: boolean = false) => {
   if (queryParamsMock.value.time > 60) {
     ElMessage({
       message: `最大不超过60s`,
@@ -791,16 +855,15 @@ const mockStart = async (state:boolean=false) => {
   }
   // mounted进来使用缓存接口数据
   if (state) {
-    let resultCatch = await mockCacheData({})
+    let resultCatch = await mockCacheData({});
     if (resultCatch.data && Object.keys(resultCatch.data).length !== 0) {
       lineParamsAllRef.value = resultCatch.data.map((its: any) => {
         return {
           data: its,
         };
       });
-    } 
-  }else{
-
+    }
+  } else {
     lineParamsAllRef.value = [];
   }
   seriesData.value = [
@@ -819,28 +882,30 @@ const mockStart = async (state:boolean=false) => {
     end: queryParamsMock.value.eDate,
   });
   if (!state) {
+    console.log("mockStart state ===>", state);
     updateDataRangeSpeed({
-    start_time: moment(queryParamsMock.value.sDate).format(
-      "YYYY-MM-DD HH:mm:ss"
-    ),
-    end_time: moment(queryParamsMock.value.eDate).format("YYYY-MM-DD HH:mm:ss"),
-    interval: queryParamsMock.value.time,
-    batch_size: Number(queryParamsMock.value.count),
-  }).then((res: any) => {
-    ElMessage({
-      message: `设置成功！`,
-      type: "success",
+      start_time: moment(queryParamsMock.value.sDate).format(
+        "YYYY-MM-DD HH:mm:ss"
+      ),
+      end_time: moment(queryParamsMock.value.eDate).format(
+        "YYYY-MM-DD HH:mm:ss"
+      ),
+      interval: queryParamsMock.value.time,
+      batch_size: Number(queryParamsMock.value.count),
+    }).then((res: any) => {
+      ElMessage({
+        message: `设置成功！`,
+        type: "success",
+      });
     });
-  });
   }
-  
 };
 let cateBigRef = ref([]);
 let cateSmallRef = ref([]);
 let setParams = ref([]);
 let btnIndex = ref(0);
 let btnBigIndex = ref("右DE");
-const btnTab = (index, val) => {
+const btnTab = (index: number, val: any) => {
   btnIndex.value = index;
   getPointData(btnBigIndex.value, val);
 };
@@ -853,9 +918,9 @@ const getcateData = async () => {
   cateBigRef = data.data.devices;
   cateSmallRef.value = data.data.categories;
 };
-const getPointData = async (deviceName, categoryName) => {
+const getPointData = async (deviceName: string, categoryName: string) => {
   let data = await measurementPoints({ deviceName, categoryName });
-  setParams.value = data.data.map((its) => its.pointName);
+  setParams.value = data.data.map((its: { pointName: any }) => its.pointName);
 };
 // 获取所有显示参数
 watch(
@@ -1116,12 +1181,12 @@ const generatePastWeekData = (
 // 获取所有显示参数
 let workParamsAllRef: Ref<DataPoint[]> = ref([]);
 
-const tableData=ref([])
-const showCondModal=ref(false)
-const handleShowDetails=(data:any)=>{
-  showCondModal.value=true
-  tableData.value=data
-}
+const tableData = ref([]);
+const showCondModal = ref(false);
+const handleShowDetails = (data: any) => {
+  showCondModal.value = true;
+  tableData.value = data;
+};
 // 历史工况记录 chartData 实际图表展示的
 const chartData: Ref<DataPoint[]> = ref(
   []
@@ -1142,8 +1207,8 @@ const enumStatus = [
   {
     text: "紧急",
     color: "danger",
-  }
-]
+  },
+];
 // 运行状态文字接收
 const enumParasm = {
   0: {
@@ -1168,15 +1233,15 @@ const runstatusMessage = (data: { label: string; state: 0 | 1 | 2 }) => {
   runStatusColor.value = enumParasm[data.state].color;
   sessionStorage.setItem("runStatus", JSON.stringify(data));
 };
-const workMessage = (data: Object) => {
+const workMessage = (data: any) => {
   // 获取工况数据 一小时来一次
   // data.forEach(element => {
   //   element.type=Math.floor(Math.random() * 3)
 
   // });
-  let currentValue = workParamsAllRef.value;
-  workParamsAllRef.value = currentValue.concat(data);
-  // workParamsAllRef.value = data;
+  // let currentValue = workParamsAllRef.value;
+  // workParamsAllRef.value = currentValue.concat(data);
+  workParamsAllRef.value = data;
   workChange();
 };
 const statusGk = ref([
@@ -1248,15 +1313,21 @@ const transformData = (data: DataPoint[]) => {
     return {
       x: convertTo12HourFormat(x),
       y: weekDayMap[y],
-      date:item.date,
+      date: item.date,
       value: valueArray,
       type: `${type}`,
     };
   });
 };
+const onChangeStatus = () => {
+  console.log("onChangeStatus");
+  const s = hlQueryParams.value.eDate[0];
+  const d = hlQueryParams.value.eDate[1];
+  handleConditionHistoryRecords(s, d);
+};
 // 筛选 如果条件都有数值 在进行查询
 const workChange = () => {
-  let lastResult = [];
+  let lastResult: DataPoint[] = [];
   if (hlQueryParams.value.sDate && hlQueryParams.value.eDate) {
     const sDate: string = convertTo24Hour(hlQueryParams.value.sDate);
     const eDate: string = convertTo24Hour(hlQueryParams.value.eDate);
@@ -1279,6 +1350,7 @@ const workChange = () => {
     });
     lastResult = result;
   }
+  console.log("lastResult ===>", lastResult);
   chartData.value = transformData(lastResult);
 };
 
@@ -1938,13 +2010,13 @@ const healthColor = (status: string) => {
   text-fill-color: transparent;
 }
 
-.text-normal{
-  color: #0982FE;
+.text-normal {
+  color: #0982fe;
 }
-.text-warn{
-  color: #FF8C00;
+.text-warn {
+  color: #ff8c00;
 }
-.text-danger{
-  color: #FC3F3F;
+.text-danger {
+  color: #fc3f3f;
 }
 </style>