完成历史数据区域部分页

auto-imports.d.ts

@@ -4,9 +4,7 @@
 // Generated by unplugin-auto-import
 export {}
 declare global {
-
-}
-onst EffectScope: typeof import('vue')['EffectScope']
+  const EffectScope: typeof import('vue')['EffectScope']
   const computed: typeof import('vue')['computed']
   const createApp: typeof import('vue')['createApp']
   const customRef: typeof import('vue')['customRef']

components.d.ts

@@ -39,6 +39,8 @@ declare module '@vue/runtime-core' {
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
+    ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTree: typeof import('element-plus/es')['ElTree']
     Form: typeof import('./src/components/Forms/Form.vue')['default']
     FormItem: typeof import('./src/components/Forms/FormItem.vue')['default']

public/media/table/empty.svg

@@ -0,0 +1 @@
+<svg width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 1)" fill="none" fillRule="evenodd"><ellipse fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse><g fillRule="nonzero" stroke="#D9D9D9"><path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path><path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA"></path></g></g></svg>

src/components/Table/VbDataTable.vue

@@ -201,7 +201,7 @@ function search() {
 watch(
   () => itemsInTable.value,
   (val) => {
-    console.log("WATCH_I")
+    //console.log("WATCH_I")
     currentPage.value = 1
     emits("on-items-per-page-change", val)
     search()
@@ -211,7 +211,7 @@ watch(
 watch(
   () => props.queryParams,
   (val) => {
-    console.log("WATCH_Q")
+    //console.log("WATCH_Q")
 
     currentPage.value = 1
     queryParms.value = val

src/components/Table/table-partials/table-content/table-head/TableHeadRow.vue

@@ -24,7 +24,7 @@ const props = withDefaults(
     fixedNumber: 0,
     fixedRightNumber: 0,
     headerClass: "fixed",
-    thTrClass: "text-center text-gray-800 fw-bold fs-7 ",
+    thTrClass: "text-center text-gray-800 fw-bold fs-7",
   }
 )
 const emits = defineEmits<{
@@ -86,6 +86,8 @@ const thClass = (column: Header) => {
   }
   if (column.thClass) {
     classStr += column.thClass
+  } else {
+    classStr += " bg-light-primary"
   }
 
   return classStr

src/components/Tree/OrgCompany.vue

@@ -10,7 +10,7 @@ const emits = defineEmits<{
   (e: "update:value", v: string): void
   (e: "node-click", node: any): void
   (e: "clear"): void
-  (e: "selected", id: string, key: string): void
+  (e: "selected", type: string, key: string): void
 }>()
 const expandedKeys = ref<Array<string>>([])
 const selectedKeys = ref<Array<string>>([])
@@ -113,7 +113,8 @@ function getIconClass(node: any) {
 }
 function onNodeClick(nodeData: any) {
   //console.log(nodeData)
-  emits("selected", nodeData.key.split("_")[1], nodeData.key)
+  const arr = nodeData.key.split("_")
+  emits("selected", arr[0], nodeData.key)
   emits("node-click", nodeData)
 }
 function init() {

src/components/select/DateRangeSelect.vue

@@ -114,7 +114,7 @@ onMounted(() => {
   </el-form-item>
   <el-form-item v-if="customDateSelectVlaue == selectValue" label="自定义日期" :class="dateClass">
     <el-date-picker
-      v-model="dateStr"
+      v-model="dateValue"
       type="daterange"
       :unlink-panels="unlinkPanels"
       :range-separator="rangeSeparator"

src/core/charts/chartHelper.ts

@@ -393,7 +393,7 @@ const chart = (data: any, options: any, serieType?: string) => {
   const title = {
     show: true,
     text:
-      getOption(_chart, "title", "") || getOption(chartOptions, "titleText", "") || getOption(_chart, "yzTitle", ""),
+      getOption(chartOptions, "titleText", "") || getOption(_chart, "title", "") || getOption(_chart, "yzTitle", ""),
   }
   const grid = Object.assign({}, defaultOption.SIZE.grid)
 

src/views/goLineData/_ViewCompany.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { toRefs, withDefaults, onMounted } from "vue"
+import ViewCompanyGeneral from "./_ViewCompany_General.vue"
+import ViewCompanyAlarm from "./_ViewCompany_Alarm.vue"
+import ViewCompanyInfo from "./_ViewCompany_Info.vue"
+const props = withDefaults(defineProps<{ id: string; active: number }>(), { id: "", active: 0 })
+const { active } = toRefs(props)
+function init() {
+  //
+}
+
+onMounted(() => {
+  init()
+})
+</script>
+<template>
+  <el-tabs v-model="active">
+    <el-tab-pane label="商户概览" :name="0">
+      <ViewCompanyGeneral :id="id"></ViewCompanyGeneral>
+    </el-tab-pane>
+    <el-tab-pane label="报警信息" :name="1">
+      <ViewCompanyAlarm :id="id"></ViewCompanyAlarm>
+    </el-tab-pane>
+    <el-tab-pane label="商户档案" :name="2">
+      <ViewCompanyInfo :id="id"></ViewCompanyInfo>
+    </el-tab-pane>
+  </el-tabs>
+</template>

src/views/goLineData/_ViewCompany_Alarm.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { ref, withDefaults, onMounted } from "vue"
+
+const props = withDefaults(defineProps<{ value: string }>(), { value: "" })
+const emits = defineEmits<{ (e: "update:value", v: string): void }>()
+
+function init() {
+  //
+}
+
+onMounted(() => {
+  init()
+})
+</script>
+<template>
+  <div>44</div>
+</template>

src/views/goLineData/_ViewCompany_General.vue

@@ -0,0 +1,196 @@
+<script setup lang="ts">
+import { ref, withDefaults, onMounted, watch } from "vue"
+import moment from "moment"
+import Rs from "@/core/services/RequestService"
+
+const props = withDefaults(defineProps<{ id: string }>(), { id: "" })
+const date = ref<Array<any>>([
+  [moment(new Date()).add(-6, "d").toDate(), new Date()],
+  new Date(),
+  [moment(new Date()).add(-6, "d").toDate(), new Date()],
+  [moment(new Date()).add(-6, "d").toDate(), new Date()],
+])
+const titles = ref(["", "", "", ""])
+const chartData = ref<any>([{}, {}, {}, {}])
+const lineOptions = {
+  titleText: " ",
+}
+function onOverDateChange(type: number) {
+  queryChart(type)
+}
+function queryChart(type: number) {
+  let url = ""
+  let data: any = {}
+  switch (type) {
+    case 0:
+      url = "sys/onlineDataCompany/getOverWarnBar"
+      data = {
+        id: props.id,
+        start: moment(date.value[type][0]).format("YYYYMMDD"),
+        end: moment(date.value[type][1]).format("YYYYMMDD"),
+      }
+      break
+    case 1:
+      url = "sys/onlineData/line"
+      data = { id: props.id, getTime: moment(date.value[type]).format("YYYYMMDD"), type: "" }
+      break
+    case 2:
+      url = "sys/onlineDataCompany/getDeviceRuntimeBar"
+      data = {
+        id: props.id,
+        start: moment(date.value[type][0]).format("YYYYMMDD"),
+        end: moment(date.value[type][1]).format("YYYYMMDD"),
+      }
+      break
+    case 3:
+      url = "sys/onlineDataCompany/getCompanyEmissionsBar"
+      data = {
+        id: props.id,
+        start: moment(date.value[type][0]).format("YYYYMMDD"),
+        end: moment(date.value[type][1]).format("YYYYMMDD"),
+      }
+      break
+  }
+  Rs.post(url, { data: data, successAlert: false }).then((res) => {
+    chartData.value[type] = res.data
+    titles.value[type] = res.data.chartData[0].title
+  })
+}
+function init() {
+  queryChart(0)
+  queryChart(1)
+  queryChart(2)
+  queryChart(3)
+}
+watch(
+  () => props.id,
+  () => {
+    init()
+  }
+)
+onMounted(() => {
+  init()
+})
+</script>
+<template>
+  <el-row :gutter="20" class="mb-5">
+    <el-col :span="12">
+      <div class="card card-bordered border-primary">
+        <div class="card-header bg-light-primary min-h-50px">
+          <div class="card-title"><h2 class="text-primary">异常时间：</h2></div>
+          <div class="card-toolbar">
+            <el-date-picker
+              v-model="date[0]"
+              type="daterange"
+              range-separator="~"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              size="default"
+              @change="
+                () => {
+                  onOverDateChange(0)
+                }
+              "
+            />
+          </div>
+        </div>
+        <div class="card-body p-3">
+          <div class="text-primary">
+            <span class="fw-bolder">{{ titles[0] }}：</span>
+            {{ moment(date[0][0]).format("YYYY-MM-DD") }} 至 {{ moment(date[0][1]).format("YYYY-MM-DD") }}
+          </div>
+          <BaseChart :data="chartData[0]" type="line" :options="lineOptions" h="230px"></BaseChart>
+        </div>
+      </div>
+    </el-col>
+    <el-col :span="12">
+      <div class="card card-bordered border-primary">
+        <div class="card-header bg-light-primary min-h-50px">
+          <div class="card-title"><h2 class="text-primary">监测时间：</h2></div>
+          <div class="card-toolbar">
+            <el-date-picker
+              v-model="date[1]"
+              type="date"
+              range-separator="~"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              size="default"
+              @change="
+                () => {
+                  onOverDateChange(1)
+                }
+              "
+            />
+          </div>
+        </div>
+        <div class="card-body p-3">
+          <div class="text-primary">
+            <span class="fw-bolder">{{ titles[1] }}：</span>
+            {{ moment(date[1]).format("YYYY-MM-DD") }}
+          </div>
+          <BaseChart :data="chartData[1]" type="line" :options="lineOptions" h="230px"></BaseChart>
+        </div>
+      </div>
+    </el-col>
+  </el-row>
+  <el-row :gutter="20" class="mb-5">
+    <el-col :span="12">
+      <div class="card card-bordered border-primary">
+        <div class="card-header bg-light-primary min-h-50px">
+          <div class="card-title"><h2 class="text-primary">监测时间：</h2></div>
+          <div class="card-toolbar">
+            <el-date-picker
+              v-model="date[2]"
+              type="daterange"
+              range-separator="~"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              size="default"
+              @change="
+                () => {
+                  onOverDateChange(2)
+                }
+              "
+            />
+          </div>
+        </div>
+        <div class="card-body p-3">
+          <div class="text-primary">
+            <span class="fw-bolder">{{ titles[2] }}：</span>
+            {{ moment(date[2][0]).format("YYYY-MM-DD") }} 至 {{ moment(date[2][1]).format("YYYY-MM-DD") }}
+          </div>
+          <BaseChart :data="chartData[2]" type="line" :options="lineOptions" h="230px"></BaseChart>
+        </div>
+      </div>
+    </el-col>
+    <el-col :span="12">
+      <div class="card card-bordered border-primary">
+        <div class="card-header bg-light-primary min-h-50px">
+          <div class="card-title"><h2 class="text-primary">监测时间：</h2></div>
+          <div class="card-toolbar">
+            <el-date-picker
+              v-model="date[3]"
+              type="daterange"
+              range-separator="~"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              size="default"
+              @change="
+                () => {
+                  onOverDateChange(3)
+                }
+              "
+            />
+          </div>
+        </div>
+        <div class="card-body p-3">
+          <div class="text-primary">
+            <span class="fw-bolder">{{ titles[3] }}：</span>
+            {{ moment(date[3][0]).format("YYYY-MM-DD") }} 至 {{ moment(date[3][1]).format("YYYY-MM-DD") }}
+          </div>
+          <BaseChart :data="chartData[3]" type="line" :options="lineOptions" h="230px"></BaseChart>
+        </div>
+      </div>
+    </el-col>
+  </el-row>
+</template>

src/views/goLineData/_ViewCompany_Info.vue

@@ -0,0 +1,177 @@
+<script setup lang="ts">
+import { ref, withDefaults, onMounted } from "vue"
+import Rs from "@/core/services/RequestService"
+//import axios from "axios"
+
+const props = withDefaults(defineProps<{ id: string }>(), { id: "" })
+const companyInfo = ref({
+  name: "",
+  type_name: "",
+  property_name: "",
+  catering_scale_name: "",
+  catering_state: "",
+  catering_style_name: "",
+  xinyong_code: "",
+  org_name: "",
+  corporation_name: "",
+  longitude: "",
+  address: "",
+  latitude: "",
+  stove_num: "",
+  people: "",
+  outlet_num: "",
+  acreage: "",
+})
+const contactInfo = ref<Array<{ name: string; position: string; tel: string; phone: string }>>([])
+const monitorPointInfo = ref<Array<{ name: string; status: string; attr: string }>>([])
+function getCompanyInfo() {
+  Rs.post("sys/onlineData/record/" + props.id).then((res) => {
+    const company = res.data.company
+    if (company) {
+      companyInfo.value.name = company.name
+      companyInfo.value.property_name = company.property_name
+      companyInfo.value.catering_scale_name = company.catering_scale_name
+      companyInfo.value.xinyong_code = company.xinyong_code
+      companyInfo.value.corporation_name = company.corporation_name
+      companyInfo.value.org_name = company.org_name
+      companyInfo.value.catering_style_name = company.catering_style_name
+      companyInfo.value.acreage = company.acreage
+      companyInfo.value.people = company.people
+      companyInfo.value.longitude = company.longitude
+      companyInfo.value.latitude = company.latitude
+      companyInfo.value.address = company.address
+      companyInfo.value.catering_state = company.operate_status_name
+      companyInfo.value.outlet_num = company.outlet_num
+      companyInfo.value.stove_num = company.stove_num
+      companyInfo.value.type_name = company.type_name
+    }
+    if (res.data.contactList) {
+      res.data.contactList.forEach((v: any) => {
+        contactInfo.value.push({
+          name: v.name,
+          position: v.position,
+          tel: v.mobile_phone,
+          phone: v.phone,
+        })
+      })
+    }
+    if (res.data.monitors) {
+      res.data.monitors.forEach((v: any) => {
+        monitorPointInfo.value.push({
+          name: v.name,
+          status: v.online_name,
+          attr: v.volume,
+        })
+      })
+    }
+  })
+}
+function init() {
+  getCompanyInfo()
+}
+
+onMounted(() => {
+  init()
+})
+</script>
+<template>
+  <div class="px-10 py-5">
+    <h2 class="my-5">商户信息</h2>
+    <table class="table table-bordered table-flush table-layout-fixed">
+      <tr>
+        <th class="bg-light-primary">商户名称</th>
+        <td>{{ companyInfo.name }}</td>
+        <th class="bg-light-primary align-right">类型</th>
+        <td>{{ companyInfo.type_name }}</td>
+      </tr>
+      <tr>
+        <th class="bg-light-primary">商户性质</th>
+        <td>{{ companyInfo.property_name }}</td>
+        <th class="bg-light-primary">规模</th>
+        <td>{{ companyInfo.catering_scale_name }}</td>
+      </tr>
+      <tr>
+        <th class="bg-light-primary">营业状态</th>
+        <td>{{ companyInfo.catering_state }}</td>
+        <th class="bg-light-primary">菜系</th>
+        <td>{{ companyInfo.catering_style_name }}</td>
+      </tr>
+      <tr>
+        <th class="bg-light-primary">法人代码</th>
+        <td>{{ companyInfo.xinyong_code }}</td>
+        <th class="bg-light-primary">区域</th>
+        <td>{{ companyInfo.org_name }}</td>
+      </tr>
+      <tr>
+        <th class="bg-light-primary">法人代表</th>
+        <td>{{ companyInfo.corporation_name }}</td>
+        <th class="bg-light-primary">经度</th>
+        <td>{{ companyInfo.longitude }}</td>
+      </tr>
+      <tr>
+        <th class="bg-light-primary">商户地址</th>
+        <td>{{ companyInfo.address }}</td>
+        <th class="bg-light-primary">纬度</th>
+        <td>{{ companyInfo.latitude }}</td>
+      </tr>
+      <tr>
+        <th class="bg-light-primary">灶头数</th>
+        <td>{{ companyInfo.stove_num }}</td>
+        <th class="bg-light-primary">人数</th>
+        <td>{{ companyInfo.people }}</td>
+      </tr>
+      <tr>
+        <th class="bg-light-primary">排口数</th>
+        <td>{{ companyInfo.outlet_num }}</td>
+        <th class="bg-light-primary">面积</th>
+        <td>{{ companyInfo.acreage }}</td>
+      </tr>
+    </table>
+    <h2 class="my-5">联系信息</h2>
+    <table class="table table-bordered table-flush table-layout-fixed">
+      <thead>
+        <tr>
+          <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>
+      <tbody v-if="contactInfo.length">
+        <tr v-for="(v, i) in contactInfo" :key="i">
+          <td>{{ v.name }}</td>
+          <td>{{ v.position }}</td>
+          <td>{{ v.phone }}</td>
+          <td>{{ v.tel }}</td>
+        </tr>
+      </tbody>
+      <tbody v-else>
+        <tr>
+          <td>暂无数据</td>
+        </tr>
+      </tbody>
+    </table>
+    <h2 class="my-5">监测点信息</h2>
+    <table class="table table-bordered table-flush table-layout-fixed">
+      <thead>
+        <tr>
+          <th class="bg-light-primary">点位名称</th>
+          <th class="bg-light-primary">处理风量 m3/h</th>
+          <th class="bg-light-primary">当前状态</th>
+        </tr>
+      </thead>
+      <tbody v-if="monitorPointInfo.length">
+        <tr v-for="(v, i) in monitorPointInfo" :key="i">
+          <td>{{ v.name }}</td>
+          <td>{{ v.attr }}</td>
+          <td>{{ v.status }}</td>
+        </tr>
+      </tbody>
+      <tbody v-else>
+        <tr>
+          <td>暂无数据</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

src/views/goLineData/_ViewDevice.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { ref, withDefaults, onMounted } from "vue"
+
+const props = withDefaults(defineProps<{ value: string }>(), { value: "" })
+const emits = defineEmits<{ (e: "update:value", v: string): void }>()
+
+function init() {
+  //
+}
+
+onMounted(() => {
+  init()
+})
+</script>
+<template>
+  <div>DEVICE</div>
+</template>

src/views/goLineData/_ViewOrg.vue

@@ -0,0 +1,271 @@
+<script setup lang="ts">
+import { ref, withDefaults, onMounted, watch } from "vue"
+import Rs from "@/core/services/RequestService"
+import moment from "moment"
+
+const props = withDefaults(defineProps<{ id: string }>(), { id: "" })
+const headData = ref({
+  company: 0,
+  monitor: 0,
+})
+function getNum() {
+  Rs.post("sys/onlineData/getOrgTitle", { data: { id: props.id }, successAlert: false }).then((res) => {
+    headData.value = res.data
+  })
+}
+
+const ringOptions = {
+  legend: { top: "auto", bottom: 0, right: 30, orient: "vertical" },
+  pieCenter: ["40%", "50%"],
+  titleText: "",
+}
+const lineOptions = {
+  titleText: " ",
+}
+const date = ref<Array<any>>([
+  new Date(),
+  new Date(),
+  [moment(new Date()).add(-6, "d").toDate(), new Date()],
+  new Date(),
+])
+const chartData = ref<any>([{}, {}, {}, {}])
+function queryChart(type: number) {
+  let url = ""
+  let data: any = {}
+  switch (type) {
+    case 0:
+      url = "sys/onlineData/getCleanlinessPie"
+      data = { id: props.id, getTime: moment(date.value[type]).format("YYYYMMDD") }
+      break
+    case 1:
+      url = "sys/onlineData/getRunningStatePie"
+      data = { id: props.id, getTime: moment(date.value[type]).format("YYYYMMDD") }
+      break
+    case 2:
+      url = "sys/onlineData/org/overstandard"
+      data = {
+        id: props.id,
+        start: moment(date.value[type][0]).format("YYYYMMDD"),
+        end: moment(date.value[type][1]).format("YYYYMMDD"),
+      }
+      break
+    case 3:
+      url = "sys/onlineData/getScorePie"
+      data = { id: props.id, getTime: moment(date.value[type]).format("YYYYMMDD") }
+      break
+  }
+  Rs.post(url, { data: data, successAlert: false }).then((res) => {
+    if (type == 2) {
+      chartData.value[type] = res.data
+    } else {
+      chartData.value[type] = res.data.chartData
+      chartData.value[type].title = ""
+    }
+  })
+}
+function onOverDateChange() {
+  queryChart(2)
+}
+const cols = [
+  {
+    name: "商户名称",
+    field: "company_name",
+  },
+  {
+    name: "排放最大值",
+    field: "max",
+  },
+  {
+    name: "发生时间",
+    field: "warn_starttime",
+  },
+  {
+    name: "排放限值",
+    field: "smoke_density",
+  },
+  {
+    name: "排放占比（%）",
+    field: "ratio",
+  },
+]
+const dateRange = ref<[Date, Date]>([new Date(), new Date()])
+const queryParams = ref<any>({
+  id: props.id,
+  start: moment(dateRange.value[0]).format("YYYYMMDD"),
+  end: moment(dateRange.value[1]).format("YYYYMMDD"),
+})
+function queryTable() {
+  queryParams.value = {
+    id: props.id,
+    start: moment(dateRange.value[0]).format("YYYYMMDD"),
+    end: moment(dateRange.value[1]).format("YYYYMMDD"),
+  }
+}
+function init() {
+  dateRange.value = [new Date(), new Date()]
+  date.value = [new Date(), new Date(), [moment(new Date()).add(-6, "d").toDate(), new Date()], new Date()]
+  chartData.value = [{}, {}, {}, {}]
+  getNum()
+  queryChart(0)
+  queryChart(1)
+  queryChart(2)
+  queryChart(3)
+  queryTable()
+}
+watch(
+  () => props.id,
+  () => {
+    init()
+  }
+)
+onMounted(() => {
+  init()
+})
+</script>
+<template>
+  <el-row :gutter="20" class="mb-5">
+    <el-col :span="12">
+      <div class="card card-bordered border-primary">
+        <div class="card-header h-70px">
+          <div class="card-title d-flex w-100 justify-content-between">
+            <span class="text-primary pt-1 fw-bolder fs-1 d-flex align-items-center">
+              <i
+                class="fas fa-home me-8 fs-1 text-white bg-primary h-50px w-50px d-flex justify-content-center align-items-center"
+                style="border-radius: 50px"
+              ></i>
+              商户数量
+            </span>
+            <span class="fs-2hx fw-bold text-primary ms-5 lh-1 ls-n2">
+              {{ headData.company }}
+              <span class="fs-2 opacity-75 ms-3">家</span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </el-col>
+    <el-col :span="12">
+      <div class="card card-bordered border-primary">
+        <div class="card-header h-70px">
+          <div class="card-title d-flex w-100 justify-content-between">
+            <span class="text-primary pt-1 fw-bolder fs-1 d-flex align-items-center">
+              <i
+                class="fas fa-smog me-8 fs-1 text-white bg-primary h-50px w-50px d-flex justify-content-center align-items-center"
+                style="border-radius: 50px"
+              ></i>
+              监测点数量
+            </span>
+            <span class="fs-2hx fw-bold text-primary ms-5 lh-1 ls-n2">
+              {{ headData.monitor }}
+              <span class="fs-2 opacity-75 ms-3">家</span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </el-col>
+  </el-row>
+  <el-row :gutter="20" class="mb-5">
+    <el-col :span="12">
+      <div class="card card-bordered border-primary">
+        <div class="card-header bg-light-primary min-h-50px">
+          <div class="card-title"><h2 class="text-primary">清洁度统计图</h2></div>
+        </div>
+        <div class="card-body p-3 h-250px">
+          <BaseChart
+            v-if="headData.company > 0"
+            :data="chartData[0]"
+            type="ring"
+            :options="ringOptions"
+            h="100%"
+          ></BaseChart>
+        </div>
+      </div>
+    </el-col>
+    <el-col :span="12">
+      <div class="card card-bordered border-primary">
+        <div class="card-header bg-light-primary min-h-50px">
+          <div class="card-title"><h2 class="text-primary">商户运营状态统计图</h2></div>
+        </div>
+        <div class="card-body p-3 h-250px">
+          <BaseChart
+            v-if="headData.company > 0"
+            :data="chartData[1]"
+            type="ring"
+            :options="ringOptions"
+            h="100%"
+          ></BaseChart>
+        </div>
+      </div>
+    </el-col>
+  </el-row>
+  <el-row :gutter="20" class="mb-5">
+    <el-col :span="12">
+      <div class="card card-bordered border-primary">
+        <div class="card-header bg-light-primary min-h-50px">
+          <div class="card-title"><h2 class="text-primary">超标趋势图</h2></div>
+          <div class="card-toolbar">
+            <el-date-picker
+              v-model="date[2]"
+              type="daterange"
+              range-separator="~"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              size="default"
+              @change="onOverDateChange"
+            />
+          </div>
+        </div>
+        <div class="card-body p-3 h-250px">
+          <BaseChart
+            v-if="headData.company > 0"
+            :data="chartData[2]"
+            type="line"
+            :options="lineOptions"
+            h="100%"
+          ></BaseChart>
+        </div>
+      </div>
+    </el-col>
+    <el-col :span="12">
+      <div class="card card-bordered border-primary">
+        <div class="card-header bg-light-primary min-h-50px">
+          <div class="card-title"><h2 class="text-primary">商户评分统计图</h2></div>
+        </div>
+        <div class="card-body p-3 h-250px">
+          <BaseChart
+            v-if="headData.company > 0"
+            :data="chartData[3]"
+            type="ring"
+            :options="ringOptions"
+            h="100%"
+          ></BaseChart>
+        </div>
+      </div>
+    </el-col>
+  </el-row>
+  <VbDataTable
+    :header="cols"
+    url="sys/onlineData/warnOver"
+    method="post"
+    :query-params="queryParams"
+    :has-checkbox="false"
+  >
+    <template v-slot:table-tool="">
+      <el-form class="align-items-center" :inline="true">
+        <el-form-item class="mb-0 me-0 align-items-center" label="超标商户列表"></el-form-item>
+        <el-form-item class="mb-0 me-0 align-items-center">
+          <el-date-picker
+            v-model="dateRange"
+            type="daterange"
+            range-separator="~"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            size="default"
+          />
+        </el-form-item>
+        <el-form-item class="mb-0 me-0 align-items-center">
+          <el-button class="ms-3 mt-0 btn btn-sm btn-primary" @click="queryTable">查询</el-button>
+        </el-form-item>
+      </el-form>
+    </template>
+  </VbDataTable>
+</template>

src/views/goLineData/oilFumeConcentration.vue

@@ -1,23 +1,40 @@
 <script setup lang="ts">
-import { defineProps, reactive, ref, toRefs } from "vue"
-const id = ref("")
+import { ref, onMounted } from "vue"
+import ViewOrg from "./_ViewOrg.vue"
+import ViewCompany from "./_ViewCompany.vue"
+import ViewDevice from "./_ViewDevice.vue"
+import { useRoute } from "vue-router"
+const route = useRoute()
+const type = ref("")
 const key = ref("")
-function onSelected(selectedId: string, selectedKey: string) {
-  id.value = selectedId
+function onSelected(selectedType: string, selectedKey: string) {
+  type.value = selectedType
   key.value = selectedKey
 }
+const activeKey = ref(0)
+
+function init() {
+  activeKey.value = route.query.tabkey ? Number(route.query.tabkey) : 0
+}
+
+onMounted(() => {
+  init()
+})
 </script>
 
 <template>
   <el-row :gutter="20" class="h-100" style="max-height: calc(100vh - 170px)">
-    <el-col class="bg-white p-5 h-100 overflow-auto" :span="6">
+    <el-col :span="6" class="bg-white p-5 h-100 overflow-auto">
       <OrgCompany class="grid-content" @selected="onSelected"></OrgCompany>
     </el-col>
-    <el-col :span="18">
-      <div class="bg-white p-5 h-100 overflow-auto">
-        <span>{{ id }}</span>
+    <el-col :span="18" class="bg-white p-5 h-100 overflow-auto">
+      <div>
+        <!-- <span>{{ type }}</span>
         <br />
-        <span>{{ key }}</span>
+        <span>{{ id }}</span> -->
+        <ViewOrg v-if="type == '11'" :id="key"></ViewOrg>
+        <ViewCompany v-if="type == '10'" :id="key" :active="activeKey"></ViewCompany>
+        <ViewDevice v-if="type == '0' || type == '1' || type == '2'" :id="key" :active-key="activeKey"></ViewDevice>
       </div>
     </el-col>
   </el-row>

src/views/overAnalysis/oveParamDetail.vue

@@ -3,7 +3,6 @@ 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()