|
|
@@ -1,298 +1,220 @@
|
|
|
<script setup lang="ts">
|
|
|
-import { ref, computed } from "vue"
|
|
|
-import type { Header } from "@/components/Table/table-partials/models"
|
|
|
-import { maper } from "@/core/utils/utils"
|
|
|
+import { ref, computed, onMounted } from "vue"
|
|
|
+import moment from "moment"
|
|
|
+import { useRouter } from "vue-router"
|
|
|
import Rs from "@/core/services/RequestService"
|
|
|
-import type { VbFormItem } from "@/components/Forms/models"
|
|
|
-import OrgSelectTree from "@/components/Tree/OrgSelectTree.vue"
|
|
|
-import AreaCascade from "@/components/select/AreaCascade.vue"
|
|
|
-import { ElInput } from "element-plus"
|
|
|
-import { RULE_KEYS } from "@/core/config/rules"
|
|
|
-import { ElSelect, ElRadioGroup, ElCheckboxGroup } from "element-plus"
|
|
|
-const table = ref<any>()
|
|
|
-const cols = ref<Array<Header>>([
|
|
|
- { name: "名称", field: "name", align: "left", width: "200px" },
|
|
|
- { name: "简称", field: "simple_name" },
|
|
|
- //{ name: "父级", field: "parent_id" },
|
|
|
- { name: "code", field: "code" },
|
|
|
- { name: "省/市/区", field: "province_city_district" },
|
|
|
- { name: "描述", field: "description" },
|
|
|
- {
|
|
|
- name: "操作",
|
|
|
- field: "action",
|
|
|
- width: "150px",
|
|
|
- },
|
|
|
-])
|
|
|
-const modal = ref<any>()
|
|
|
-//定义需要操作的类型
|
|
|
-const opreationType = ref<"A" | "U" | "D">("A")
|
|
|
-const modalTitlePrefix = computed(() => {
|
|
|
- return opreationType.value == "A" ? "新增" : opreationType.value == "U" ? "编辑" : ""
|
|
|
-})
|
|
|
-//后期api完善了这里可以改成 返回Promise的function
|
|
|
-const saveUrl = computed(() => {
|
|
|
- return opreationType.value == "A"
|
|
|
- ? "sys/organizational/insert"
|
|
|
- : opreationType.value == "U"
|
|
|
- ? "sys/organizational/update"
|
|
|
- : opreationType.value == "D"
|
|
|
- ? "sys/organizational/delById"
|
|
|
- : ""
|
|
|
-})
|
|
|
+import { end } from "@popperjs/core"
|
|
|
+const router = useRouter()
|
|
|
+const startDate = ref(new Date())
|
|
|
+const endDate = ref(new Date())
|
|
|
+const dateValue = ref<[Date, Date]>([startDate.value, endDate.value])
|
|
|
+const timeType = ref(0)
|
|
|
|
|
|
-//只放增改传到后台的共用参数,其余需要modal显示的参数另外定义
|
|
|
-const emptyData = {
|
|
|
- org_id: "",
|
|
|
- parent_id: "0",
|
|
|
- name: "",
|
|
|
- simple_name: "",
|
|
|
- code: "",
|
|
|
- description: "",
|
|
|
- province: "",
|
|
|
- city: "",
|
|
|
- district: "",
|
|
|
-}
|
|
|
-const formData = ref<any>(
|
|
|
- Object.assign({}, emptyData, { province_city_district: ["", "", ""], simple_name2: [], simple_name3: false })
|
|
|
-)
|
|
|
-
|
|
|
-const items: Array<VbFormItem> = [
|
|
|
- {
|
|
|
- field: "parent_id",
|
|
|
- label: "父组织",
|
|
|
- required: false,
|
|
|
- component: OrgSelectTree,
|
|
|
- span: 12,
|
|
|
- },
|
|
|
- {
|
|
|
- field: "code",
|
|
|
- label: "CODE",
|
|
|
- required: true,
|
|
|
- component: ElInput,
|
|
|
- rules: [RULE_KEYS.REQUIRED, RULE_KEYS.MIN, RULE_KEYS.MAX],
|
|
|
- ruleFormat: [["CODE"], [2], [4]],
|
|
|
- span: 12,
|
|
|
- },
|
|
|
- {
|
|
|
- field: "name",
|
|
|
- label: "名称",
|
|
|
- required: true,
|
|
|
- component: ElInput,
|
|
|
- span: 12,
|
|
|
- },
|
|
|
- {
|
|
|
- field: "simple_name",
|
|
|
- label: "简称",
|
|
|
- component: ElInput,
|
|
|
- span: 12,
|
|
|
- },
|
|
|
- {
|
|
|
- field: "province_city_district",
|
|
|
- label: "省/市/区",
|
|
|
- class: "w-100",
|
|
|
- component: AreaCascade,
|
|
|
- listeners: { change: pcdChange },
|
|
|
- },
|
|
|
- {
|
|
|
- field: "description",
|
|
|
- label: "描述",
|
|
|
- component: ElInput,
|
|
|
- type: "textarea",
|
|
|
- },
|
|
|
- {
|
|
|
- field: "simple_name",
|
|
|
- label: "简称",
|
|
|
- component: ElSelect,
|
|
|
- span: 12,
|
|
|
- data: [
|
|
|
- { label: "Q", value: "Q" },
|
|
|
- { label: "W", value: "W" },
|
|
|
- { label: "E", value: "E", disabled: true },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- field: "simple_name",
|
|
|
- label: "简称",
|
|
|
- component: ElRadioGroup,
|
|
|
- span: 12,
|
|
|
- data: [
|
|
|
- { label: "Q", value: "Q" },
|
|
|
- { label: "W", value: "W" },
|
|
|
- { label: "E", value: "E", disabled: true },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- field: "simple_name2", //多选时 对象属性应该是 []
|
|
|
- label: "简称2",
|
|
|
- component: ElCheckboxGroup,
|
|
|
- span: 12,
|
|
|
- data: [
|
|
|
- { label: "Q1", value: "Q" },
|
|
|
- { label: "W1", value: "W" },
|
|
|
- { label: "E1", value: "E", disabled: true },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- field: "simple_name3", //单选时 对象属性应该是 bool
|
|
|
- label: "简称3",
|
|
|
- component: ElCheckboxGroup,
|
|
|
- span: 12,
|
|
|
- data: [{ label: "Q1", value: "1" }],
|
|
|
- },
|
|
|
- {
|
|
|
- field: "test",
|
|
|
- label: "slot测试",
|
|
|
- component: "slot",
|
|
|
- span: 24,
|
|
|
- },
|
|
|
- {
|
|
|
- field: "simple_name",
|
|
|
- label: "text测试",
|
|
|
- component: "innerText",
|
|
|
- innerText: "text测试",
|
|
|
- class: "text-success",
|
|
|
- span: 24,
|
|
|
- },
|
|
|
-]
|
|
|
-function pcdChange(v: Array<string>) {
|
|
|
- console.log("PCD", v)
|
|
|
- formData.value.province = v[0]
|
|
|
- formData.value.city = v[1]
|
|
|
- formData.value.district = v[2]
|
|
|
-}
|
|
|
-function add() {
|
|
|
- opreationType.value = "A"
|
|
|
- formData.value = Object.assign({ province_city_district: ["", "", ""] }, emptyData)
|
|
|
- modal.value.show()
|
|
|
+function changeDate(v: Date[]) {
|
|
|
+ startDate.value = v[0]
|
|
|
+ endDate.value = v[1]
|
|
|
}
|
|
|
-function edit(row: any) {
|
|
|
- opreationType.value = "U"
|
|
|
- formData.value = Object.assign({}, row)
|
|
|
- modal.value.show()
|
|
|
+const headData = ref({
|
|
|
+ exceedSmokeNum: 0,
|
|
|
+ exceedVocNum: 0,
|
|
|
+ exceedPm25Num: 0,
|
|
|
+})
|
|
|
+function changeHead(v: number) {
|
|
|
+ //
|
|
|
}
|
|
|
-function deleteRow(row: any) {
|
|
|
- //console.log("DELETE_ROW", row)
|
|
|
- opreationType.value = "D"
|
|
|
- Rs.post(saveUrl.value, { data: [row.org_id] }).then(() => {
|
|
|
- table.value.search()
|
|
|
+
|
|
|
+const orderTypes = ref(["2", "2", "2", "2"])
|
|
|
+const chartDatas = ref<Array<any>>([[], [], [], []])
|
|
|
+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],
|
|
|
+ }
|
|
|
+ let str = type == 0 || type == 1 ? "?" : "Cir?"
|
|
|
+ for (const key in params) {
|
|
|
+ str += `${key}=${params[key]}&`
|
|
|
+ }
|
|
|
+
|
|
|
+ Rs.get("sys/overParamController/selectCompanyTime" + str).then((res) => {
|
|
|
+ chartDatas[type] = res.data.chartData
|
|
|
})
|
|
|
}
|
|
|
-function onCancel() {
|
|
|
- //console.log("CANCEL", form)
|
|
|
-}
|
|
|
-function onSave() {
|
|
|
- if (saveUrl.value) {
|
|
|
- const data = Object.assign({}, emptyData)
|
|
|
- maper(data, formData.value)
|
|
|
- Rs.post(saveUrl.value, { data: data }).then(() => {
|
|
|
- table.value.search()
|
|
|
- })
|
|
|
+const getTitle = () => {
|
|
|
+ const params = {
|
|
|
+ time_type: timeType.value,
|
|
|
+ query_start_time: moment(startDate.value).format("YYYYMMDD"),
|
|
|
+ query_end_time: moment(endDate.value).format("YYYYMMDD"),
|
|
|
+ }
|
|
|
+ let str = ""
|
|
|
+ for (const key in params) {
|
|
|
+ str += `${key}=${params[key]}&`
|
|
|
}
|
|
|
+ Rs.get("/sys/overParamController/selectCompanyTitle?" + str).then((res) => {
|
|
|
+ headData.value.exceedSmokeNum = res.data.exceed_smoke_num
|
|
|
+ headData.value.exceedVocNum = res.data.exceed_voc_num
|
|
|
+ headData.value.exceedPm25Num = res.data.exceed_pm25_num
|
|
|
+ })
|
|
|
}
|
|
|
-/**
|
|
|
- *
|
|
|
- <template #form>
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item
|
|
|
- label="父组织"
|
|
|
- prop="parent_id"
|
|
|
- required
|
|
|
- :rules="[{ required: true, message: '必填', trigger: 'blur' }]"
|
|
|
+function search() {
|
|
|
+ query(0)
|
|
|
+ query(1)
|
|
|
+ query(2)
|
|
|
+ query(3)
|
|
|
+ getTitle()
|
|
|
+}
|
|
|
+onMounted(search)
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <el-form class="align-items-center mb-8" :inline="true" label-width="90px">
|
|
|
+ <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 align-items-center">
|
|
|
+ <el-button class="ms-3 mt-0 btn btn-sm btn-primary" @click="search">查询</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <el-row :gutter="25" class="h-325px mb-8">
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="card card-bordered border-primary h-100">
|
|
|
+ <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`"
|
|
|
>
|
|
|
- <OrgSelectTree v-model:value="formData.parent_id"></OrgSelectTree>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item
|
|
|
- label="CODE"
|
|
|
- prop="code"
|
|
|
- required
|
|
|
- :rules="[
|
|
|
- { required: true, message: '必填', trigger: ['blur'] },
|
|
|
- { min: 2, max: 4, message: '2至4个字符', trigger: ['blur'] },
|
|
|
- ]"
|
|
|
+ <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 }}
|
|
|
+ <span class="fs-6 opacity-75 ms-2">次</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 my-3"
|
|
|
+ style="min-width: 250px"
|
|
|
+ :style="`background: #5facd0`"
|
|
|
>
|
|
|
- <el-input v-model="formData.code"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item
|
|
|
- label="名称"
|
|
|
- prop="name"
|
|
|
- required
|
|
|
- :rules="[{ required: true, message: '必填', trigger: ['blur'] }]"
|
|
|
+ <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 }}
|
|
|
+ <span class="fs-6 opacity-75 ms-2">次</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 my-3"
|
|
|
+ style="min-width: 250px"
|
|
|
+ :style="`background: #76bfa3`"
|
|
|
>
|
|
|
- <el-input v-model="formData.name"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="简称" prop="simple_name">
|
|
|
- <el-input v-model="formData.simple_name"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="24">
|
|
|
- <el-form-item label="省/市/区" prop="province_city_district">
|
|
|
- <AreaCascadeSelect v-model:value="province_city_district" @change="pcdChange"></AreaCascadeSelect>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="24">
|
|
|
- <el-form-item label="描述" prop="description">
|
|
|
- <el-input type="textarea" v-model="formData.description"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </template>
|
|
|
- <template #body>
|
|
|
- <VbForm :items="items" v-model:data="formData"></VbForm>
|
|
|
- </template>
|
|
|
- */
|
|
|
-</script>
|
|
|
+ <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 }}
|
|
|
+ <span class="fs-6 opacity-75 ms-2">次</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="9">
|
|
|
+ <div class="card card-bordered border-primary h-100">
|
|
|
+ <div class="card-header bg-light-primary min-h-50px">
|
|
|
+ <div class="card-title">
|
|
|
+ <h3 class="text-primary">类型超标次数统计</h3>
|
|
|
+ </div>
|
|
|
+ <div class="card-toolbar">
|
|
|
+ <el-radio-group v-model="orderTypes[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>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="9">
|
|
|
+ <div class="card card-bordered border-primary h-100">
|
|
|
+ <div class="card-header bg-light-primary min-h-50px">
|
|
|
+ <div class="card-title">
|
|
|
+ <h3 class="text-primary">规模超标次数统计</h3>
|
|
|
+ </div>
|
|
|
+ <div class="card-toolbar">
|
|
|
+ <el-radio-group v-model="orderTypes[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>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
|
|
|
-<template>
|
|
|
- <VbTreeTable
|
|
|
- ref="table"
|
|
|
- url="sys/organizational/selectForPage"
|
|
|
- method="post"
|
|
|
- :header="cols"
|
|
|
- key-field="org_id"
|
|
|
- children-field="children"
|
|
|
- :expand-depth="1"
|
|
|
- :interval-left="10"
|
|
|
- :fixed-column="true"
|
|
|
- :fixed-number="1"
|
|
|
- :fixed-right-number="1"
|
|
|
- >
|
|
|
- <template #table-tool="">
|
|
|
- <el-button class="ms-3 mt-0 btn btn-sm btn-primary" @click="add">新增</el-button>
|
|
|
- </template>
|
|
|
- <template #province_city_district="{ row }">
|
|
|
- {{
|
|
|
- `${row.province_name ?? ""}${row.city_name ? `/${row.city_name}` : ``}${
|
|
|
- row.district_name ? `/${row.district_name}` : ``
|
|
|
- }`
|
|
|
- }}
|
|
|
- </template>
|
|
|
- <template #action="{ row }">
|
|
|
- <span class="text-primary table-action" @click="edit(row)">编辑</span>
|
|
|
- <span class="text-danger table-action" @click="deleteRow(row)">删除</span>
|
|
|
- </template>
|
|
|
- </VbTreeTable>
|
|
|
- <VbModal
|
|
|
- v-model:modal="modal"
|
|
|
- v-model:form-data="formData"
|
|
|
- :form-items="items"
|
|
|
- backdrop="static"
|
|
|
- :keyboard="false"
|
|
|
- :title-prefix="modalTitlePrefix"
|
|
|
- title="组织机构"
|
|
|
- form-label-width="70"
|
|
|
- modal-body-class="px-10"
|
|
|
- @cancel="onCancel"
|
|
|
- @confirm="onSave"
|
|
|
- >
|
|
|
- <template #test_form>
|
|
|
- <span class="bg-danger text-white px-5">SIMPLE:{{ formData.simple_name }}</span>
|
|
|
- </template>
|
|
|
- </VbModal>
|
|
|
+ <el-row :gutter="25" class="h-325px">
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="card card-bordered border-primary h-100">
|
|
|
+ <div class="card-header bg-light-primary min-h-50px">
|
|
|
+ <div class="card-title">
|
|
|
+ <h3 class="text-primary">区域超标次数统计</h3>
|
|
|
+ </div>
|
|
|
+ <div class="card-toolbar">
|
|
|
+ <el-radio-group v-model="orderTypes[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>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="card card-bordered border-primary h-100">
|
|
|
+ <div class="card-header bg-light-primary min-h-50px">
|
|
|
+ <div class="card-title">
|
|
|
+ <h3 class="text-primary">菜系超标次数统计</h3>
|
|
|
+ </div>
|
|
|
+ <div class="card-toolbar">
|
|
|
+ <el-radio-group v-model="orderTypes[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>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</template>
|
