逾期清洗报警详情

src/core/charts/chartHelper.ts

@@ -137,8 +137,8 @@ const lineBarSeriesOption = (chart: any, serieData: Array<any>, serieType: strin
     const type = has(v, "type") ? v.type : serieType
     let seriesOption: any = {
       type: type,
-      name: v.name,
-      data: v.data,
+      //name: v.name,
+      //data: v.data,
       stack: has(v, "stack") ? v.stack : null,
       itemStyle: getOption(v, "itemStyle", {}),
       markPoint,
@@ -169,12 +169,19 @@ const lineBarSeriesOption = (chart: any, serieData: Array<any>, serieType: strin
             areaStyle: {
               color: areaStyleColors[i],
             },
-          }
+          },
+      v
     )
     if (v.data && v.data.length) {
       v.data.forEach((vv: any) => {
-        if (vv > maxData) {
-          maxData = vv
+        if (typeof vv == "object") {
+          if (vv.value > maxData) {
+            maxData = vv.value
+          }
+        } else {
+          if (vv > maxData) {
+            maxData = vv
+          }
         }
       })
       yAxisMax = Math.floor(maxData * 1.2)

src/router/statictRouter.ts

@@ -66,6 +66,14 @@ export const staticRotuer: Array<RouteRecordRaw> = [
           breadcrumbs: ["综合分析", "清洗分析", "逾期报警"],
         },
       },
+      {
+        path: "/analysisInfo/overdue/warn",
+        component: () => import("@/views/analysisInfo/overdueWarn.vue"),
+        meta: {
+          pageTitle: "清洗报警详情",
+          breadcrumbs: ["综合分析", "清洗分析", "逾期报警", "清洗报警详情"],
+        },
+      },
     ],
   },
 ]

src/views/analysisInfo/overdueCompany.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import configs from "@/core/config/Index"
-import { ref, computed, onMounted } from "vue"
+import { ref } from "vue"
+import router from "@/router"
 import { useRoute } from "vue-router"
 const route = useRoute()
 const companyName = ref(route.query.name)
@@ -37,7 +38,14 @@ const cols = ref([
 ])
 
 function detail(row: any) {
-  //
+  router.push({
+    path: "/analysisInfo/overdue/warn",
+    query: {
+      back: 1,
+      id: row.id,
+      type: row.warn_type,
+    },
+  })
 }
 </script>
 

src/views/analysisInfo/overdueWarn.vue

@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from "vue"
+import Rs from "@/core/services/RequestService"
+import { useRoute } from "vue-router"
+import configs from "@/core/config/Index"
+const route = useRoute()
+const title = ref("")
+const type = ref(0)
+const tableData = ref([])
+const chartData = computed(() => {
+  const data: any = Object.assign({}, tableData.value[0])
+  if (!data) {
+    return {}
+  }
+  const period = type.value == 0 ? data.day_condition : data.hour_condition
+  const overdue =
+    type.value == 0
+      ? data.run_day - data.day_condition > 0
+        ? data.run_day - data.day_condition
+        : 0
+      : data.run_hour - data.hour_condition > 0
+      ? data.run_hour - data.hour_condition
+      : 0
+
+  return {
+    chartData: [
+      {
+        categories: ["逾期时间", "周期时间"],
+        series: [
+          {
+            name: "辅助",
+            type: "bar",
+            stack: "总量",
+            barWidth: 80,
+            barMaxWidth: 80,
+            itemStyle: {
+              barBorderColor: "rgba(0,0,0,0)",
+              color: "rgba(0,0,0,0)",
+            },
+            data: [period, 0],
+          },
+          {
+            name: "时间",
+            type: "bar",
+            stack: "总量",
+            barWidth: 80,
+            barMaxWidth: 80,
+            label: {
+              show: true,
+              position: "right",
+            },
+            data: [
+              {
+                value: overdue,
+                itemStyle: {
+                  color: "rgba(242,99,123,0.75)",
+                },
+              },
+              {
+                value: period,
+                itemStyle: {
+                  color: "rgba(24,144,255,0.75)",
+                },
+              },
+            ],
+          },
+        ],
+        yzTitle: `${type.value == 0 ? "天" : "小时"}`,
+      },
+    ],
+  }
+})
+
+function getTitle() {
+  const options = {
+    warn_id: route.query.id,
+    warn_type: route.query.type,
+  }
+  Rs.post("sys/warn/getWarnTitle", { data: options, successAlert: false }).then((res) => {
+    title.value = res.data
+  })
+}
+const barOption = {
+  grid: { top: 10, right: 40 },
+  legend: { show: false },
+  titleText: " ",
+  direction: "y",
+  tooltip: {
+    formatter: "{b1}: {c1}",
+  },
+}
+function getData() {
+  const options = {
+    warn_id: route.query.id,
+    warn_type: route.query.type,
+  }
+  Rs.post("sys/warn/getCleanWarntableById", { data: options, successAlert: false }).then((res) => {
+    tableData.value = res.data
+  })
+}
+
+const cols = ref([
+  {
+    name: "序号",
+    field: configs.TABLE_INDEX_FIELD,
+  },
+  {
+    name: "净化器名称",
+    field: "monitor_name",
+  },
+  {
+    name: "天数",
+    field: "day_condition",
+  },
+  {
+    name: "开机小时",
+    field: "hour_condition",
+  },
+  {
+    name: "最后清洗时间",
+    field: "last_clean_time",
+  },
+  {
+    name: "经过天数",
+    field: "run_day",
+  },
+  {
+    name: "开机小时数",
+    field: "run_hour",
+  },
+  {
+    name: "剩余天数",
+    field: "surplus_day",
+  },
+  {
+    name: "剩余小时数",
+    field: "surplus_hour",
+  },
+])
+
+onMounted(() => {
+  getTitle()
+  getData()
+})
+</script>
+
+<template>
+  <div class="card mb-8">
+    <div class="card-header">
+      <div class="card-title text-info fw-bolder">{{ title }}</div>
+      <div class="card-toolbar">
+        <el-radio-group v-model="type">
+          <el-radio-button :label="0">按天数</el-radio-button>
+          <el-radio-button :label="1">按小时数</el-radio-button>
+        </el-radio-group>
+      </div>
+    </div>
+    <div class="card-body p-5">
+      <div class="w-100">
+        <BaseChart :h="350" :data="chartData" type="bar" :options="barOption"></BaseChart>
+      </div>
+    </div>
+  </div>
+  <VbDataTable :data="tableData" :header="cols" :has-checkbox="false" :pagination="false">
+    <template #tableHeader>
+      <thead>
+        <tr class="text-center">
+          <th class="bg-light-primary" rowspan="2" style="vertical-align: middle">序号</th>
+          <th class="bg-light-primary" rowspan="2" style="vertical-align: middle">净化器名称</th>
+          <th class="bg-light-primary" colspan="2">清洗周期</th>
+          <th class="bg-light-primary" rowspan="2" style="vertical-align: middle">最后清洗时间</th>
+          <th class="bg-light-primary" colspan="2">上次清洗至今</th>
+          <th class="bg-light-primary" colspan="2">距下次清洗</th>
+        </tr>
+        <tr class="text-center">
+          <th class="bg-light-primary">天数</th>
+          <th class="bg-light-primary">开机小时</th>
+          <th class="bg-light-primary">经过天数</th>
+          <th class="bg-light-primary">开机小时数</th>
+          <th class="bg-light-primary">剩余天数</th>
+          <th class="bg-light-primary">剩余小时数</th>
+        </tr>
+      </thead>
+    </template>
+  </VbDataTable>
+</template>

src/views/goLineData/_ViewDevice_General.vue

@@ -2,6 +2,7 @@
 import { ref, withDefaults, onMounted, watch } from "vue"
 import { getAssetPath } from "@/core/helpers/assets"
 import Rs from "@/core/services/RequestService"
+import configs from "@/core/config/Index"
 
 const props = withDefaults(defineProps<{ id: string }>(), { id: "" })
 const emptyTableText = "未查询到数据"
@@ -20,10 +21,10 @@ function getDeviceInfo() {
   })
 }
 const cols = ref([
-  // {
-  //   name: "序号",
-  //   field: "index",
-  // },
+  {
+    name: "序号",
+    field: configs.TABLE_INDEX_FIELD,
+  },
   {
     name: "净化器名称",
     field: "monitor_name",
@@ -107,7 +108,7 @@ onMounted(() => {
       <template #tableHeader>
         <thead>
           <tr class="text-center">
-            <!-- <th class="bg-light-primary" rowspan="2" style="vertical-align: middle">序号</th> -->
+            <th class="bg-light-primary" rowspan="2" style="vertical-align: middle">序号</th>
             <th class="bg-light-primary" rowspan="2" style="vertical-align: middle">净化器名称</th>
             <th class="bg-light-primary" colspan="2">清洗周期</th>
             <th class="bg-light-primary" rowspan="2" style="vertical-align: middle">最后清洗时间</th>