布袋周期页面联调

src/utils/chart.js

@@ -69,10 +69,9 @@ export const getDustLineOption = (xData = [], seriesData = []) => ({
     containLabel: true,
   },
   legend: {
-    data: ["健康度指数（%）"],
+    data: ["周期(天数)"],
     bottom: "0%",
-    icon: "circle",
-    itemWidth: 10,
+    itemWidth: 20,
     itemHeight: 10,
     itemGap: 10,
   },
@@ -105,7 +104,7 @@ export const getDustLineOption = (xData = [], seriesData = []) => ({
   },
   series: [
     {
-      name: "",
+      name: "周期(天数)",
       type: "line",
       color: "#399DFA",
       data: seriesData,

src/views/collectorList/collectorList.vue

@@ -5,7 +5,7 @@
         <el-form :inline="true" :model="formInline" class="demo-form-inline">
           <el-form-item label="仓室">
             <el-input
-              v-model="formInline.deviceName"
+              v-model="formInline.compart"
               placeholder="请输入仓室名称"
               style="width: 180px"
               clearable
@@ -13,7 +13,7 @@
           </el-form-item>
           <el-form-item label="除尘器名称">
             <el-input
-              v-model="formInline.deviceName"
+              v-model="formInline.dusterName"
               placeholder="请输入除尘器名称"
               style="width: 180px"
               clearable
@@ -30,7 +30,7 @@
             />
           </el-form-item>
           <el-form-item>
-            <el-button type="default" class="default-btn" @click="onSubmit"
+            <el-button type="default" class="default-btn" @click="onRest"
               >重置</el-button
             >
             <el-button type="primary" class="search-btn" @click="onSubmit"
@@ -50,7 +50,7 @@
         <common-table
           :data="tableData.list"
           :columns="tableColumns"
-          :default-page-size="10"
+          :default-page-size="20"
           @pagination-change="handlePaginationChange"
           :pagination-texts="{
             total: '共',
@@ -63,9 +63,9 @@
           <template #index="{ $index }">
             {{ getIndex($index) }}
           </template>
-          <template #deviceName="{ row }">
-            <span class="health-score" @dblclick="openDialog(row.deviceName)">{{
-              row.deviceName
+          <template #dusterName="{ row }">
+            <span class="health-score" @dblclick="openDialog(row.dusterName)">{{
+              row.dusterName
             }}</span>
           </template>
           <!-- <template #operation="{ row }">
@@ -95,8 +95,8 @@
           <el-option
             v-for="i in dustList.list"
             :key="i"
-            :label="`${i.deviceName}`"
-            :value="i.deviceNo"
+            :label="`${i.dusterName}`"
+            :value="i.dusterNo"
           />
         </el-select>
       </div>
@@ -119,15 +119,16 @@
 import { ref, onMounted, onBeforeUnmount, computed, reactive } from "vue";
 import CommonTable from "@/components/commonTable/index.vue";
 import chartLine from "./components/chart-line.vue";
+import { getDataFun, postDataJSON } from "@/request/method.js";
 
 const formInline = ref({
   compart: "",
   dusterName: "",
-  date: "",
+  date: ["", ""],
 });
 
 const currentPage = ref(1);
-const pageSize = ref(10);
+const pageSize = ref(20);
 const dustLineisShow = ref(false);
 
 const tableColumns = ref([
@@ -137,7 +138,7 @@ const tableColumns = ref([
     width: "5%",
   },
   {
-    prop: "deviceName",
+    prop: "dusterName",
     label: "除尘器名称",
     width: "8%",
   },
@@ -147,37 +148,32 @@ const tableColumns = ref([
     width: "8%",
   },
   {
-    prop: "position",
+    prop: "bagLocation",
     label: "布袋位置（排/列）",
     width: "8%",
   },
   {
-    prop: "changeDateRemind",
+    prop: "bagChangeNextTime",
     label: "布袋更换提醒时间",
     width: "8%",
   },
   {
-    prop: "changeDate",
+    prop: "bagChangeTime",
     label: "更换时间",
     width: "8%",
   },
   {
-    prop: "changePeo",
+    prop: "bagChangeAuthor",
     label: "更换人",
     width: "8%",
   },
   {
-    prop: "ownerdeviceName",
+    prop: "dusterName",
     label: "所属除尘器",
     width: "8%",
   },
   {
-    prop: "lastAlarmTime",
-    label: "布袋更换提醒时间",
-    width: "10%",
-  },
-  {
-    prop: "changeRound",
+    prop: "bagChangePeriod",
     label: "更换周期(与上次更换比)",
     width: "6%",
   },
@@ -199,31 +195,36 @@ const tableData = reactive({
   ],
 });
 
+const getAllDustList = () => {
+  const url = "/bag/cycle/getReplaceListPage";
+  console.log(formInline.value.date);
+  const params = {
+    compart: formInline.value.compart,
+    dusterName: formInline.value.dusterName,
+    startTime: formInline.value.date[0] || "",
+    endTime: formInline.value.date[1] || "",
+    pageNo: currentPage.value,
+    pageSize: pageSize.value,
+  };
+  return getDataFun(url, params).then((res) => {
+    if (res && res.data) {
+      tableData.list = res.data.records;
+    } else {
+      return [];
+    }
+  });
+};
+
 const selectDustNo = ref("");
 
 const dustList = reactive({
   list: [],
 });
 
-const getHealthScoreColor = (score) => {
-  const value = parseInt(score);
-  if (value >= 90) return "#67C23A";
-  if (value >= 70) return "#E6A23C";
-  return "#F56C6C";
-};
-
 const getIndex = (index) => {
   return (currentPage.value - 1) * pageSize.value + index + 1;
 };
 
-const handleView = (row) => {
-  console.log("查看详情", row);
-};
-
-const handleEdit = (row) => {
-  console.log("编辑", row);
-};
-
 const handlePaginationChange = (pagination) => {
   currentPage.value = pagination.currentPage;
   pageSize.value = pagination.pageSize;
@@ -231,7 +232,18 @@ const handlePaginationChange = (pagination) => {
 };
 
 const onSubmit = () => {
-  console.log("submit!", formInline.value);
+  getAllDustList();
+};
+
+const onRest = () => {
+  formInline.value = {
+    compart: "",
+    dusterName: "",
+    date: ["", ""],
+  };
+  currentPage.value = 1;
+  pageSize.value = 20;
+  getAllDustList();
 };
 
 const dustLineInfo = reactive({ list: [{}] });
@@ -242,49 +254,48 @@ const openDialog = (deviceName) => {
 };
 
 const getDustList = () => {
-  return [
-    {
-      deviceName: "1#除尘器",
-      deviceNo: "11111",
-    },
-    {
-      deviceName: "2#除尘器",
-      deviceNo: "22222",
-    },
-    {
-      deviceName: "3#除尘器",
-      deviceNo: "333333",
-    },
-  ];
+  const url = "/bag/cycle/getDusterList";
+  return getDataFun(url, "").then((res) => {
+    if (res && res.data) {
+      return res.data;
+    } else {
+      return [];
+    }
+  });
 };
 
-const getDustListInfo = () => {
-  return [
-    { time: "1", value: "20" },
-    { time: "2", value: "30" },
-    { time: "4", value: "40" },
-    { time: "8", value: "45" },
-    { time: "10", value: "15" },
-    { time: "周期", value: "20" },
-  ];
+const getDustInfo = () => {
+  const url = "/bag/cycle/getReplaceAnalysis";
+  const params = {
+    dusterNo: selectDustNo.value,
+  };
+  return getDataFun(url, params).then((res) => {
+    if (res && res.data) {
+      return res.data;
+    } else {
+      return [];
+    }
+  });
 };
 
-const changeDust = (deviceName) => {
-  dustList.list = getDustList();
-  if (deviceName) {
+const changeDust = async (dusterName) => {
+  dustList.list = await getDustList();
+  if (dusterName) {
     dustList.list.forEach((i) => {
-      if (i.deviceName == deviceName) {
-        selectDustNo.value = i.deviceNo;
+      if (i.dusterName == dusterName) {
+        selectDustNo.value = i.dusterNo;
       }
     });
   } else {
-    selectDustNo.value = dustList.list[0].deviceNo || "";
+    selectDustNo.value = dustList.list[0].dusterNo || "";
   }
-  let list = getDustListInfo();
+  let list = await getDustInfo();
   dustLineInfo.list = list;
 };
 
-onMounted(async () => {});
+onMounted(async () => {
+  getAllDustList();
+});
 
 onBeforeUnmount(() => {});
 </script>

src/views/collectorList/components/chart-line.vue

@@ -25,8 +25,8 @@ const initChart = () => {
     let seriesData = [];
     if (props.dustLineInfo) {
       props.dustLineInfo.forEach((i) => {
-        xData.push(i.time);
-        seriesData.push(i.value);
+        xData.push(i.replaceTime);
+        seriesData.push(i.period);
       });
     }
     chartInstance = echarts.init(chartDustRef.value);
@@ -62,6 +62,7 @@ onBeforeUnmount(() => {
 
 <style lang="scss"  scoped>
 .chart-line {
+  margin-top: 20px;
   canvas {
     width: 100%;
     height: 100%;