完成overParam页面

src/core/charts/chartHelper.ts

@@ -266,7 +266,7 @@ const lineBarSeriesOption = (chart: any, serieData: Array<any>, serieType: strin
       alignWithLabel: true,
     },
   }
-  console.log("CHART_title", yAxis.name)
+  //console.log("CHART_title", yAxis.name)
 
   const direction = getOption(chartOptions, "direction", false)
 
@@ -328,7 +328,7 @@ const pieSeriesOption = (chart: any, serieData: Array<any>, serieType: string, c
     },
   }
   const total = getTotal(serieData, has(serieData[0], "value") ? "value" : "data")
-  const titleText = getOption(chartOptions, "titleText", getOption(chart, "yzTitle", ""))
+  const titleText = getOption(chartOptions, "titleText", getOption(chart, "yzTitle", "") ?? "")
   const titleUnit = getOption(chartOptions, "titleUnit", "")
   if (titleText) {
     if (titleUnit) {
@@ -343,10 +343,12 @@ const pieSeriesOption = (chart: any, serieData: Array<any>, serieType: string, c
     legend.data.push({
       name,
     })
-    const item = {
+    const item: any = {
       name,
       value: v.value,
-      itemStyle,
+    }
+    if (itemStyle) {
+      item.itemStyle = itemStyle
     }
     data.push(item)
   })
@@ -383,14 +385,15 @@ const chart = (data: any, options: any, serieType?: string) => {
   }
   const _chart = compatibleData(data)
   const _series = compatibleSeries(_chart)
-  const chartOptions = extendDeep({}, options)
+  const chartOptions = extend({}, options)
   serieType = getOption(chartOptions, "serieType", serieType)
   //const _xAxisData = has(_chart, "categories") ? _chart.categories : []
 
   //标题默认在图表下居中 ,使用远程数据 yzTitle 字段
   const title = {
     show: true,
-    text: getOption(_chart, "title", "") || getOption(_chart, "yzTitle", ""),
+    text:
+      getOption(_chart, "title", "") || getOption(chartOptions, "titleText", "") || getOption(_chart, "yzTitle", ""),
   }
   const grid = Object.assign({}, defaultOption.SIZE.grid)
 

src/core/charts/chartOption.ts

@@ -41,8 +41,8 @@ export default {
     hbarWidth: "40%",
     roseItemGap: 16,
     symbolSize: 4,
-    pieCenter: "['50%', '50%']",
-    pieRadius: "['0%', '75%']",
-    ringRadius: "['45%', '75%']",
+    pieCenter: ["50%", "50%"],
+    pieRadius: ["0%", "75%"],
+    ringRadius: ["45%", "75%"],
   },
 }

src/core/charts/theme/_light01.ts

@@ -1,6 +1,7 @@
 export default {
   //color: ["rgb(56,164,90)", "rgb(76,136,207)", "rgb(255,185,126)", "#ef4864", "#9760e5", "#50e3c2"],
-  color: ["#48A966", "#26A9A9", "#DEA26E", "#DEA26E"],
+  //color: ["#48A966", "#26A9A9", "#DEA26E", "#DEA26E"],
+  color: ["#4c88cf", "#5facd0", "#76bfa3", "#DEA26E"],
   backgroundColor: "rgba(252,252,252,0)",
   textStyle: {},
   title: {

src/core/config/rules.ts

@@ -40,6 +40,7 @@ export const RULE_KEYS = {
   N_MIN: "VB_N_MIN",
   N_MAX: "VB_N_MAX",
   N_MIN_MAX: "VB_N_MIN_MAX",
+  PATTERN: "VB_PATTERN",
 }
 export const rules = {
   VB_REQUIRED: { required: true, message: "必填", trigger: "blur" },
@@ -74,4 +75,5 @@ export const rulesFormat = {
   VB_N_MIN: '{"type": "number","min": {0}, "message": "最小{0}", "trigger": ["blur"] }',
   VB_N_MAX: '{"type": "number","max": {0}, "message": "最大{0}", "trigger": ["blur" ]}',
   VB_N_MIN_MAX: '{"type": "number","min": {0}, "max": {1}, "message": "请输入 {0} 到 {1} 的数字", "trigger": ["blur"]}',
+  VB_PATTERN: '{"pattern": {0}, "message": "{1}", "trigger": ["blur"]}',
 }

src/router/statictRouter.ts

@@ -44,6 +44,14 @@ export const staticRotuer: Array<RouteRecordRaw> = [
           breadcrumbs: ["告警分析", "告警综合分析", "超标商户列表", "商户超标分析", "超标详情"],
         },
       },
+      {
+        path: "/overAnalysis/overParam/oveParamDetail",
+        component: () => import("@/views/overAnalysis/oveParamDetail.vue"),
+        meta: {
+          pageTitle: "超标详情",
+          breadcrumbs: ["告警分析", "告警综合分析", "超标商户分析"],
+        },
+      },
     ],
   },
 ]

src/views/overAnalysis/oveParamDetail.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue"
+import moment from "moment"
+import type { Header } from "@/components/Table/table-partials/models"
+import { useRouter, useRoute } from "vue-router"
+import Rs from "@/core/services/RequestService"
+const router = useRouter()
+const route = useRoute()
+
+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: "exceed_total",
+  },
+])
+
+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 companyId = ref("")
+const orderType = ref(2)
+const queryParams = ref<any>({
+  order_type: orderType.value,
+  time_type: timeType.value,
+  query_start_time: moment().format("YYYYMMDD"),
+  query_end_time: moment().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,
+    },
+  })
+}
+function init() {
+  timeType.value = Number(route.query.time_type) ?? 0
+  orderType.value = Number(route.query.order_type) ?? 2
+  companyId.value = route.query.company_id as string
+  startDate.value = moment(route.query.query_start_time as string, "YYYYMMDD").toDate()
+  endDate.value = moment(route.query.query_end_time as string, "YYYYMMDD").toDate()
+  query()
+}
+function query() {
+  const params = {
+    time_type: timeType.value,
+    query_start_time: moment(startDate.value).format("YYYYMMDD"),
+    query_end_time: moment(endDate.value).format("YYYYMMDD"),
+    company_id: companyId.value,
+    order_type: orderType.value,
+  }
+  const keys = Object.keys(params)
+  keys.forEach((key) => {
+    if (params[key] == "" && params[key] !== 0) {
+      delete params[key]
+    }
+  })
+  queryParams.value = params
+}
+function reset() {
+  timeType.value = 0
+  orderType.value = 2
+  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/overParamController/exportCompanyExceedTime?" + str)
+}
+
+onMounted(() => {
+  init()
+})
+</script>
+
+<template>
+  <VbDataTable
+    ref="table"
+    :header="cols"
+    url="sys/overParamController/selectCompanyExceedTime"
+    method="post"
+    :query-params="queryParams"
+    :has-checkbox="false"
+  >
+    <template v-slot:table-tool="">
+      <el-form class="align-items-center" :inline="true">
+        <el-form-item label="超标类型" class="mb-0 me-5 align-items-center">
+          <el-select v-model="orderType">
+            <el-option :value="2" label="油烟超标"></el-option>
+            <el-option :value="4" label="非甲烷超标"></el-option>
+            <el-option :value="6" label="颗粒物超标"></el-option>
+          </el-select>
+        </el-form-item>
+        <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>
+  </VbDataTable>
+</template>

src/views/overAnalysis/overParam.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from "vue"
+import { ref, onMounted } from "vue"
 import moment from "moment"
 import { useRouter } from "vue-router"
 import Rs from "@/core/services/RequestService"
-import { end } from "@popperjs/core"
 const router = useRouter()
 const startDate = ref(new Date())
 const endDate = ref(new Date())
@@ -19,19 +18,39 @@ const headData = ref({
   exceedVocNum: 0,
   exceedPm25Num: 0,
 })
-function changeHead(v: number) {
-  //
+function jump(v: number) {
+  console.log("JUMP", v)
+  router.push({
+    path: "/overAnalysis/overParam/oveParamDetail",
+    query: {
+      backNeed: 1,
+      time_type: timeType.value,
+      order_type: v,
+      query_start_time: moment(startDate.value).format("YYYYMMDD"),
+      query_end_time: moment(endDate.value).format("YYYYMMDD"),
+    },
+  })
+}
+const ringOptions = {
+  legend: { top: "auto", bottom: 0 },
+  titleText: "",
+}
+const barOptions = {
+  grid: { top: 30, left: 15 },
+  legend: { show: false },
+  titleText: " ",
 }
 
 const orderTypes = ref(["2", "2", "2", "2"])
-const chartDatas = ref<Array<any>>([[], [], [], []])
+const chartDatas = ref<Array<any>>([{}, {}, {}, {}])
+//function change(type: number) {}
 const query = (type: number) => {
   const params = {
     time_type: timeType.value,
     query_start_time: moment(startDate.value).format("YYYYMMDD"),
     query_end_time: moment(endDate.value).format("YYYYMMDD"),
     type: type,
-    order_type: orderTypes[type],
+    order_type: orderTypes.value[type],
   }
   let str = type == 0 || type == 1 ? "?" : "Cir?"
   for (const key in params) {
@@ -39,7 +58,12 @@ const query = (type: number) => {
   }
 
   Rs.get("sys/overParamController/selectCompanyTime" + str).then((res) => {
-    chartDatas[type] = res.data.chartData
+    if (type == 2 || type == 3) {
+      chartDatas.value[type] = res.data.chartData
+      chartDatas.value[type].title = ""
+    } else {
+      chartDatas.value[type] = res.data
+    }
   })
 }
 const getTitle = () => {
@@ -88,14 +112,14 @@ onMounted(search)
         <div class="card-body px-5 py-3 h-100 d-flex flex-column justify-content-center">
           <div
             class="card card-flush bgi-no-repeat bgi-size-contain bgi-position-x-center border-0 h-md-50 my-3"
-            style="min-width: 250px"
-            :style="`background: #4c88cf`"
+            style="min-width: 250px; background: #4c88cf; cursor: pointer"
+            @click="jump(2)"
           >
             <div class="card-header py-5">
               <div class="card-title d-flex">
                 <span class="text-white pt-1 fw-semibold fs-3">
                   <i class="fas fa-smog me-3 fs-2 text-white"></i>
-                  油烟排放超标总次数
+                  油烟超标总次数
                 </span>
                 <span class="fs-2hx fw-bold text-white ms-3 lh-1 ls-n2">
                   {{ headData.exceedSmokeNum }}
@@ -106,14 +130,14 @@ onMounted(search)
           </div>
           <div
             class="card card-flush bgi-no-repeat bgi-size-contain bgi-position-x-center border-0 h-md-50 my-3"
-            style="min-width: 250px"
-            :style="`background: #5facd0`"
+            style="min-width: 250px; background: #5facd0; cursor: pointer"
+            @click="jump(4)"
           >
             <div class="card-header py-5">
               <div class="card-title d-flex">
                 <span class="text-white pt-1 fw-semibold fs-3">
                   <i class="fas fa-wind me-3 fs-2 text-white"></i>
-                  非甲烷排放超标总次数
+                  非甲烷超标总次数
                 </span>
                 <span class="fs-2hx fw-bold text-white ms-3 lh-1 ls-n2">
                   {{ headData.exceedVocNum }}
@@ -124,14 +148,14 @@ onMounted(search)
           </div>
           <div
             class="card card-flush bgi-no-repeat bgi-size-contain bgi-position-x-center border-0 h-md-50 my-3"
-            style="min-width: 250px"
-            :style="`background: #76bfa3`"
+            style="min-width: 250px; background: #76bfa3; cursor: pointer"
+            @click="jump(6)"
           >
             <div class="card-header py-5">
               <div class="card-title d-flex">
                 <span class="text-white pt-1 fw-semibold fs-3">
                   <i class="fas fa-chess-board me-3 fs-2 text-white"></i>
-                  颗粒物排放超标总次数
+                  颗粒物超标总次数
                 </span>
                 <span class="fs-2hx fw-bold text-white ms-3 lh-1 ls-n2">
                   {{ headData.exceedPm25Num }}
@@ -150,15 +174,15 @@ onMounted(search)
             <h3 class="text-primary">类型超标次数统计</h3>
           </div>
           <div class="card-toolbar">
-            <el-radio-group v-model="orderTypes[3]">
+            <el-radio-group v-model="orderTypes[3]" @change="query(3)">
               <el-radio-button label="2">油烟超标</el-radio-button>
               <el-radio-button label="4">非甲烷超标</el-radio-button>
               <el-radio-button label="6">颗粒物超标</el-radio-button>
             </el-radio-group>
           </div>
         </div>
-        <div class="card-body p-0">
-          <BaseChart :data="chartDatas[3]" type="ring" h="100%"></BaseChart>
+        <div class="card-body p-2">
+          <BaseChart :data="chartDatas[3]" type="ring" h="100%" :options="ringOptions"></BaseChart>
         </div>
       </div>
     </el-col>
@@ -169,14 +193,16 @@ onMounted(search)
             <h3 class="text-primary">规模超标次数统计</h3>
           </div>
           <div class="card-toolbar">
-            <el-radio-group v-model="orderTypes[2]">
+            <el-radio-group v-model="orderTypes[2]" @change="query(2)">
               <el-radio-button label="2">油烟超标</el-radio-button>
               <el-radio-button label="4">非甲烷超标</el-radio-button>
               <el-radio-button label="6">颗粒物超标</el-radio-button>
             </el-radio-group>
           </div>
         </div>
-        <div class="card-body p-0"></div>
+        <div class="card-body p-2">
+          <BaseChart :data="chartDatas[2]" type="ring" h="100%" :options="ringOptions"></BaseChart>
+        </div>
       </div>
     </el-col>
   </el-row>
@@ -189,14 +215,16 @@ onMounted(search)
             <h3 class="text-primary">区域超标次数统计</h3>
           </div>
           <div class="card-toolbar">
-            <el-radio-group v-model="orderTypes[0]">
+            <el-radio-group v-model="orderTypes[0]" @change="query(0)">
               <el-radio-button label="2">油烟超标</el-radio-button>
               <el-radio-button label="4">非甲烷超标</el-radio-button>
               <el-radio-button label="6">颗粒物超标</el-radio-button>
             </el-radio-group>
           </div>
         </div>
-        <div class="card-body p-0"></div>
+        <div class="card-body p-2">
+          <BaseChart :data="chartDatas[0]" type="bar" h="100%" :options="barOptions"></BaseChart>
+        </div>
       </div>
     </el-col>
     <el-col :span="12">
@@ -206,14 +234,16 @@ onMounted(search)
             <h3 class="text-primary">菜系超标次数统计</h3>
           </div>
           <div class="card-toolbar">
-            <el-radio-group v-model="orderTypes[1]">
+            <el-radio-group v-model="orderTypes[1]" @change="query(1)">
               <el-radio-button label="2">油烟超标</el-radio-button>
               <el-radio-button label="4">非甲烷超标</el-radio-button>
               <el-radio-button label="6">颗粒物超标</el-radio-button>
             </el-radio-group>
           </div>
         </div>
-        <div class="card-body p-0"></div>
+        <div class="card-body p-2">
+          <BaseChart :data="chartDatas[1]" type="bar" h="100%" :options="barOptions"></BaseChart>
+        </div>
       </div>
     </el-col>
   </el-row>