完成告警商户分析页面

src/router/statictRouter.ts

@@ -4,6 +4,22 @@ export const staticRotuer: Array<RouteRecordRaw> = [
     path: "/",
     component: () => import("@/layouts/main-layout/MainLayout.vue"),
     children: [
+      {
+        path: "/overAnalysis/overTime/over_company",
+        component: () => import("@/views/overAnalysis/overTimeDetail_Company.vue"),
+        meta: {
+          pageTitle: "商户超标分析",
+          breadcrumbs: ["告警分析", "超标商户分析", "商户超标分析"],
+        },
+      },
+      {
+        path: "/overAnalysis/overTime/concentrationWarn",
+        component: () => import("@/views/overAnalysis/concentrationWarn.vue"),
+        meta: {
+          pageTitle: "超标详情",
+          breadcrumbs: ["告警分析", "超标商户分析", "商户超标分析", "超标详情"],
+        },
+      },
       {
         path: "/overAnalysis/overTime/detail",
         component: () => import("@/views/overAnalysis/overTimeDetail.vue"),
@@ -16,12 +32,12 @@ export const staticRotuer: Array<RouteRecordRaw> = [
         path: "/overAnalysis/overTime/detail_company",
         component: () => import("@/views/overAnalysis/overTimeDetail_Company.vue"),
         meta: {
-          pageTitle: "超标商户列表",
+          pageTitle: "商户超标分析",
           breadcrumbs: ["告警分析", "告警综合分析", "超标商户列表", "商户超标分析"],
         },
       },
       {
-        path: "/overAnalysis/overTime/concentrationWarn",
+        path: "/overAnalysis/overTime/list_concentrationWarn",
         component: () => import("@/views/overAnalysis/concentrationWarn.vue"),
         meta: {
           pageTitle: "超标详情",

src/views/overAnalysis/overMerchants.vue

@@ -1,7 +1,238 @@
 <script setup lang="ts">
-import { defineProps, reactive, ref, toRefs } from "vue"
+import { ref, onMounted } from "vue"
+import moment from "moment"
+import type { Header } from "@/components/Table/table-partials/models"
+import { useRouter } from "vue-router"
+import Rs from "@/core/services/RequestService"
+const router = useRouter()
+
+const cols = ref<Array<Header>>([
+  {
+    name: "区域",
+    field: "org_name",
+    width: 120,
+  },
+  {
+    name: "商户",
+    field: "company_name",
+  },
+  {
+    name: "菜系",
+    field: "catering_style_name",
+  },
+  {
+    name: "规模",
+    field: "catering_scale_name",
+  },
+  {
+    name: "类型",
+    field: "type_name",
+  },
+  {
+    name: "排口数",
+    field: "outlet_nums",
+  },
+  {
+    name: "超标设备数",
+    field: "exceed_device",
+  },
+  {
+    name: "超标次数",
+    field: "exceed_total",
+  },
+  {
+    name: "操作",
+    field: "action",
+    width: 150,
+  },
+])
+const headData = ref({
+  exceedCompanyNum: 0,
+  exceedDeviceNum: 0,
+  outletNum: 0,
+})
+const startDate = ref(new Date())
+const endDate = ref(new Date())
+const dateStr = ref(``)
+const dateValue = ref<[Date, Date]>([startDate.value, endDate.value])
+const timeType = ref(0)
+
+const queryParams = ref({
+  time_type: timeType.value,
+  query_start_time: [moment(), moment()][0].format("YYYYMMDD"),
+  query_end_time: [moment(), moment()][1].format("YYYYMMDD"),
+})
+const table = ref()
+
+function changeDate(v: Date[]) {
+  startDate.value = v[0]
+  endDate.value = v[1]
+}
+const jump = function (v: any) {
+  console.log("jump", v)
+  router.push({
+    path: "/goLineData/oilFumeConcentration",
+    query: {
+      comName: v.company_name,
+      company_id: v.company_id,
+      backNeed: 1,
+    },
+  })
+}
+const getTitle = () => {
+  Rs.post("/sys/overMerchants/selectOverTitle", {
+    successAlert: false,
+    data: {
+      pageIndex: 1,
+      pageSize: 10,
+      params: queryParams.value,
+    },
+  }).then((res) => {
+    headData.value.exceedCompanyNum = res.data.exceed_company
+    headData.value.exceedDeviceNum = res.data.exceed_device_num
+    headData.value.outletNum = res.data.outlet_num
+  })
+}
+
+function query() {
+  queryParams.value = {
+    time_type: timeType.value,
+    query_start_time: moment(startDate.value).format("YYYYMMDD"),
+    query_end_time: moment(endDate.value).format("YYYYMMDD"),
+  }
+}
+function reset() {
+  timeType.value = 0
+  startDate.value = new Date()
+  endDate.value = new Date()
+  dateValue.value = [startDate.value, endDate.value]
+  dateStr.value = `${moment(startDate.value).format("YYYY-MM-DD")}至${moment(endDate.value).format("YYYY-MM-DD")}`
+  query()
+}
+function exported() {
+  const params = {
+    time_type: timeType.value,
+    query_start_time: moment(startDate.value).format("YYYYMMDD"),
+    query_end_time: moment(endDate.value).format("YYYYMMDD"),
+  }
+  const keys = Object.keys(params)
+  keys.forEach((key) => {
+    if (params[key] == "" && params[key] !== 0) {
+      delete params[key]
+    }
+  })
+  let str = ""
+  for (const key in params) {
+    str += `${key}=${params[key]}&`
+  }
+  window.open("/api/sys/overMerchants/exportOverMerchants?" + str)
+}
+const detail = function (row: any) {
+  router.push({
+    path: "/overAnalysis/overTime/over_company",
+    query: {
+      type: 0,
+      time_type: timeType.value,
+      company_id: row.company_id || "",
+      query_start_time: moment(startDate.value).format("YYYYMMDD"),
+      query_end_time: moment(endDate.value).format("YYYYMMDD"),
+      parentBreadcrumb: "over_company",
+    },
+  })
+}
+onMounted(() => {
+  getTitle()
+})
 </script>
 
 <template>
-  <div>overMerchants</div>
+  <div class="d-flex">
+    <div
+      class="card card-flush bgi-no-repeat bgi-size-contain bgi-position-x-center border-0 h-md-50 me-5"
+      style="min-width: 250px"
+      :style="`background: #4c88cf`"
+    >
+      <div class="card-header py-5">
+        <div class="card-title d-flex">
+          <span class="text-white pt-1 fw-semibold fs-2">
+            <i class="fas fa-home me-8 fs-1 text-white"></i>
+            超标商户数
+          </span>
+          <span class="fs-2hx fw-bold text-white ms-5 lh-1 ls-n2">
+            {{ headData.exceedCompanyNum }}
+            <span class="fs-6 opacity-75 ms-3">家</span>
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="card card-flush bgi-no-repeat bgi-size-contain bgi-position-x-center border-0 h-md-50 me-5"
+      style="min-width: 250px"
+      :style="`background: #5facd0`"
+    >
+      <div class="card-header py-5">
+        <div class="card-title d-flex">
+          <span class="text-white pt-1 fw-semibold fs-2">
+            <i class="fas fa-desktop me-8 fs-1 text-white"></i>
+            超标设备数
+          </span>
+          <span class="fs-2hx fw-bold text-white ms-5 lh-1 ls-n2">
+            {{ headData.exceedDeviceNum }}
+            <span class="fs-6 opacity-75 ms-3">台</span>
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="card card-flush bgi-no-repeat bgi-size-contain bgi-position-x-center border-0 h-md-50 me-5"
+      style="min-width: 250px"
+      :style="`background:#76bfa3`"
+    >
+      <div class="card-header py-5">
+        <div class="card-title d-flex">
+          <span class="text-white pt-1 fw-semibold fs-2">
+            <i class="fas fa-smog me-8 fs-1 text-white"></i>
+            超标涉及排口数
+          </span>
+          <span class="fs-2hx fw-bold text-white ms-5 lh-1 ls-n2">
+            {{ headData.outletNum }}
+            <span class="fs-6 opacity-75 ms-3">台</span>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <VbDataTable
+    ref="table"
+    :header="cols"
+    url="sys/overMerchants/selectOverMerchants"
+    method="post"
+    :query-params="queryParams"
+    :has-checkbox="false"
+  >
+    <template v-slot:table-tool="">
+      <el-form class="align-items-center" :inline="true">
+        <DateRangeSelect
+          v-model:date-value="dateValue"
+          v-model:select-value="timeType"
+          :select-class="'mb-0 align-items-center'"
+          :date-class="'mb-0 align-items-center'"
+          @change="changeDate"
+        />
+        <el-form-item class="mb-0 me-0 align-items-center">
+          <el-button class="ms-3 mt-0 btn btn-sm btn-primary" @click="query">查询</el-button>
+          <el-button class="ms-3 mt-0 btn btn-sm btn-light-primary btn-outline" @click="reset">重置</el-button>
+          <el-button class="ms-3 mt-0 btn btn-sm btn-light-info btn-outline" @click="exported">导出</el-button>
+        </el-form-item>
+      </el-form>
+    </template>
+    <template #company_name="{ row }">
+      <span class="text-primary" @click="jump(row)" style="cursor: pointer">{{ row["company_name"] }}</span>
+    </template>
+
+    <template #action="{ row }">
+      <span class="table-action" @click="detail(row)">查看详情</span>
+    </template>
+  </VbDataTable>
 </template>

src/views/overAnalysis/overTimeDetail.vue

@@ -80,7 +80,6 @@ const orderType = ref(0)
 const startDate = ref(new Date())
 const endDate = ref(new Date())
 const dateValue = ref<[Date, Date]>([startDate.value, endDate.value])
-//const selectValue = ref(0)
 function changeDate(v: Date[]) {
   startDate.value = v[0]
   endDate.value = v[1]
@@ -195,6 +194,7 @@ function detail(row: any) {
       warn_type: "000100004",
       query_start_time: moment(startDate.value).format("YYYYMMDD"),
       query_end_time: moment(endDate.value).format("YYYYMMDD"),
+      parentBreadcrumb: "detail_company",
     },
   })
 }

src/views/overAnalysis/overTimeDetail_Company.vue

@@ -146,7 +146,9 @@ function exported() {
 function detail(row: any) {
   const path =
     row.warn_type == "000100003" || row.warn_type == "000100005" || row.warn_type == "000100007"
-      ? "/overAnalysis/overTime/concentrationWarn"
+      ? route.query.parentBreadcrumb == "detail_company"
+        ? "/overAnalysis/overTime/list_concentrationWarn"
+        : "/overAnalysis/overTime/concentrationWarn"
       : row.warn_type == "000100006"
       ? "/overAnalysis/overTime/offlineWarn"
       : "/overAnalysis/overTime/overdueWarn"