UI3/src/views/overAnalysis/overMerchants.vue

<script setup lang="ts">
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,
      back: 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: {
      back: 1,
      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 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>