|
|
@@ -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>
|
