UI3/src/views/purify/washInfo.vue

<script setup lang="ts">
import { ref, onMounted } from "vue"
import Rs from "@/core/services/RequestService"
import { useRouter } from "vue-router"
import configs from "@/core/config/Index"
const router = useRouter()
const ringOptions = {
  legend: { top: "center", bottom: "auto", right: "20%", orient: "vertical" },
  pieCenter: ["40%", "50%"],
  titleText: "",
}
const titles = ref<Array<string>>(["", ""])
const chartDatas = ref<Array<any>>([{}, {}])
function queryChart(_type: number) {
  let url = ""
  const params = {
    org_id: orgId.value,
    name: companyName.value,
    type: type.value,
    catering_scale: cateringScale.value,
    catering_style: cateringStyle.value,
  }
  switch (_type) {
    case 0:
      url = "sys/purifierCondition/getPie"

      break
    case 1:
      url = "sys/purifierCondition/getStatePie"
      break
  }
  Rs.post(url, { data: params, successAlert: false }).then((res) => {
    chartDatas.value[_type] = res.data
    titles.value[_type] = res.data.chartData.title
    chartDatas.value[_type].chartData.title = ""
  })
}

const size = ref<any>("default")
const dySearchSelectStyle = { width: "120px" }
const companyName = ref("")
const orgId = ref<string | null>(null)
const type = ref("")
const cateringScale = ref("")
const cateringStyle = ref("")
const queryParams = ref<any>({})
const cols = ref([
  {
    name: "序号",
    field: configs.TABLE_INDEX_FIELD,
  },
  {
    name: "区域",
    field: "org_name",
  },
  {
    name: "商户名称",
    field: "name",
  },
  {
    name: "菜系",
    field: "catering_style_name",
  },
  {
    name: "规模",
    field: "catering_scale_name",
  },
  {
    name: "净化器数量",
    field: "purifier_num",
  },
  {
    name: "清洗次数",
    field: "clean_num",
  },
  {
    name: "操作",
    width: 150,
    field: "action",
  },
])
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,
    },
  })
}

function query() {
  const params = {
    org_id: orgId.value,
    name: companyName.value,
    type: type.value,
    catering_scale: cateringScale.value,
    catering_style: cateringStyle.value,
  }
  const keys = Object.keys(params)
  keys.forEach((key) => {
    if (params[key] == "" && key != "clean_flag" && key != "exceed_company_flag") {
      delete params[key]
    }
  })
  queryParams.value = params
}
function reset() {
  companyName.value = ""
  orgId.value = "0"
  type.value = ""
  cateringScale.value = ""
  cateringStyle.value = ""
  query()
}
const detail = function (row: any) {
  router.push({
    path: "/purify/washInfo/details",
    query: {
      back: 1,
      company_id: row.company_id,
    },
  })
}

function init() {
  queryChart(0)
  queryChart(1)
}
onMounted(init)
</script>

<template>
  <el-row :gutter="0" class="mb-8">
    <el-col :span="12">
      <div
        class="card card-bordered border-primary h-325px"
        style="border-top-right-radius: 0; border-bottom-right-radius: 0"
      >
        <div class="card-header bg-light-primary min-h-50px">
          <div class="card-title">
            <h3 class="text-primary">{{ titles[0] }}</h3>
          </div>
        </div>
        <div class="card-body p-7 h-100">
          <BaseChart :data="chartDatas[0]" type="pie" h="100%" :options="ringOptions"></BaseChart>
        </div>
      </div>
    </el-col>
    <el-col :span="12">
      <div
        class="card card-bordered border-primary h-325px"
        style="border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0"
      >
        <div class="card-header bg-light-primary min-h-50px">
          <div class="card-title">
            <h3 class="text-primary">{{ titles[1] }}</h3>
          </div>
        </div>
        <div class="card-body p-7 h-100">
          <BaseChart :data="chartDatas[1]" type="pie" h="100%" :options="ringOptions"></BaseChart>
        </div>
      </div>
    </el-col>
  </el-row>
  <VbDataTable
    ref="table"
    :header="cols"
    url="sys/purifierCondition/getComCleanInfo"
    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-5 align-items-center" label="商户名称">
          <el-input class="" style="width: 180px" v-model="companyName" placeholder="请输入商户名称" :size="size" />
        </el-form-item>
        <el-form-item class="mb-0 me-5 align-items-center" label="区域">
          <OrgSelectTree v-model:value="orgId" style="width: 180px"></OrgSelectTree>
        </el-form-item>
        <el-form-item class="mb-0 me-5 align-items-center" label="菜系">
          <DySelect
            v-model="cateringStyle"
            :formatRemoteData="(v:any)=>{return v?.list}"
            :url="'sys/dict/getList?code=000010001&key=temp'"
            :style="dySearchSelectStyle"
            placeholder="请选择菜系"
          ></DySelect>
        </el-form-item>
        <el-form-item class="mb-0 me-5 align-items-center" label="规模">
          <DySelect
            v-model="cateringScale"
            :formatRemoteData="(v:any)=>{return v?.list}"
            :url="'sys/dict/getList?code=000090001&key=temp'"
            :style="dySearchSelectStyle"
            placeholder="请选择规模"
          ></DySelect>
        </el-form-item>
        <el-form-item class="mb-0 me-5 align-items-center" label="类型">
          <DySelect
            v-model="type"
            :formatRemoteData="(v:any)=>{return v?.list}"
            :url="'sys/dict/getList?code=000200000&key=temp'"
            :style="dySearchSelectStyle"
            placeholder="请选择类型"
          ></DySelect>
        </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="query">查询</el-button>
          <el-button class="ms-3 mt-0 btn btn-sm btn-light-primary btn-outline" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </template>
    <template #name="{ row }">
      <span class="text-primary" @click="jump(row)" style="cursor: pointer">{{ row["name"] }}</span>
    </template>

    <template #action="{ row }">
      <span class="table-action" @click="detail(row)">查看详情</span>
    </template>
  </VbDataTable>
</template>