UI3/src/views/goLineData/timeData.vue

<script setup lang="ts">
import { ref, onMounted } from "vue"
import { getAssetPath } from "@/core/helpers/assets"
import type { Header } from "@/components/Table/table-partials/models"
import Rs from "@/core/services/RequestService"
import { useRouter } from "vue-router"

const router = useRouter()

const cols = ref<Array<Header>>([
  {
    name: "区域",
    field: "org_name",
  },
  {
    name: "商户",
    field: "company_name",
  },
  {
    name: "营业规模",
    field: "catering_scale_name",
  },
  {
    name: "类型",
    field: "type_name",
  },
  {
    name: "营业状态",
    field: "business_state",
  },
  {
    name: "灶头数",
    field: "stove_num",
  },
  {
    name: "排口数",
    field: "outlet_num",
  },
  {
    name: "净化设施",
    field: "device_name",
  },
  {
    name: "净化器",
    field: "purifier_online_state",
  },
  {
    name: "风机",
    field: "fan_online_state",
  },
  {
    name: "监控仪状态",
    field: "device_online_state",
  },
  {
    name: "净化效能",
    field: "clean_efficiency",
  },
  {
    name: "油烟浓度mg/m3",
    field: "smoke_density",
  },
  {
    name: "监测时间",
    width: 250,
    field: "last_online_time",
  },
  {
    name: "操作",
    width: 150,
    field: "action",
  },
])
const size = ref<any>("default")
const headData = ref<any>({
  exceed_company_num: 0,
  clean_low_num: 0,
})
const dySearchSelectStyle = { width: "120px" }
const headType = ref(0)
const exceedCompanyFlag = ref(false)
const cleanFlag = ref(false)
const companyName = ref("")
const orgId = ref<string | null>(null)
const operateStatus = ref("")
const type = ref("")
const cateringScale = ref("")
const cateringStyle = ref("")
//const monitoringType = ref("")
//const levelType = ref("")
//const warnType = ref([])
//const abnormalState = ref([])
//const current_date_range = ref(new Date())

const queryParams = ref<any>({ exceed_company_flag: false, clean_flag: false })
function query() {
  const params = {
    //monitoring_type: monitoringType.value,
    company_name: companyName.value,
    org_id: orgId.value,
    operate_status: operateStatus.value,
    type: type.value,
    catering_scale: cateringScale.value,
    catering_style: cateringStyle.value,
    //warn_type: warnType.value,
    //abnormal_state: abnormalState.value,
    exceed_company_flag: exceedCompanyFlag.value,
    clean_flag: cleanFlag.value,
  }

  const keys = Object.keys(params)
  keys.forEach((key) => {
    //console.log("----", key, "=", params[key])

    if (params[key] == "" && key != "clean_flag" && key != "exceed_company_flag") {
      //console.log("DELETE PAAMS ===>", params)
      delete params[key]
    }
  })

  queryParams.value = Object.assign({}, params)
}
function reset() {
  //monitoringType.value = ""
  type.value = ""
  companyName.value = ""
  //levelType.value = ""
  orgId.value = ""
  operateStatus.value = ""
  type.value = ""
  cateringScale.value = ""
  cateringStyle.value = ""
  //warnType.value = []
  //abnormalState.value = []
  //current_date_range.value = moment().toDate()
  exceedCompanyFlag.value = false
  cleanFlag.value = false
  queryParams.value = {
    exceed_company_flag: false,
    clean_flag: false,
  }
}
function exported() {
  let str = ""
  for (const key in queryParams.value) {
    str += `${key}=${queryParams.value[key]}&`
  }
  //console.log("/api/sys/overStandardAnalysis/exportAnalysis?" + str)
  window.open("/api/sys/overStandardAnalysis/exportAnalysis?" + str)
}
function initHead() {
  Rs.get("sys/realTimeData/getRealTimeTitle", {}).then((res) => {
    if (res.data) {
      headData.value = res.data
    }
  })
}
const changeHead = (type: number) => {
  if (type == 0) {
    exceedCompanyFlag.value = true
    cleanFlag.value = false
  } else if (type == 1) {
    exceedCompanyFlag.value = false
    cleanFlag.value = true
  } else {
    return
  }
  headType.value = type

  query()
}
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 chartTheme = {
  grid: {
    top: 40,
    left: 10,
    right: 20,
    bottom: 35,
  },
  legend: {
    right: 10,
    top: 5,
  },
  title: {
    left: "center",
    top: "auto",
    bottom: 0,
  },
}
const modal = ref<any>()
const detailInfo = ref<any>({})
const detailDeviceInfo = ref<any>({})
const chartData1 = ref<any>({})
const chartData2 = ref<any>({})
const detail = function (row: any) {
  detailInfo.value = row
  console.log("DETAIL", row, detailInfo.value)
  Rs.post("sys/realTimeData/getRealTimeDetailInfo", {
    data: {
      device_id: row.device_id,
    },
  }).then((res) => {
    detailDeviceInfo.value = res.data
  })
  setTimeout(() => {
    Rs.post("sys/realTimeData/getRealTimeDetailDensityline", {
      data: {
        device_id: detailInfo.value.device_id,
      },
    }).then((res) => {
      chartData1.value = res.data
    })
  }, 100)
  setTimeout(() => {
    Rs.post("sys/realTimeData/getRealTimeDetailPowerline", {
      data: {
        device_id: detailInfo.value.device_id,
      },
    }).then((res) => {
      chartData2.value = res.data
    })
  }, 100)
  modal.value.show()
}

onMounted(() => {
  initHead()
})
</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="`${headType == 0 ? `background: #4c88cf` : `background: #5facd0`}`"
      @click="changeHead(0)"
    >
      <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.exceed_company_num }}
            <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="`${headType == 1 ? `background: #4c88cf` : `background: #5facd0`}`"
      @click="changeHead(1)"
    >
      <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-shower me-8 fs-1 text-white"></i>
            净化效能低
          </span>
          <span class="fs-2hx fw-bold text-white ms-5 lh-1 ls-n2">
            {{ headData.clean_low_num }}
            <span class="fs-6 opacity-75 ms-3">台</span>
          </span>
        </div>
      </div>
    </div>
  </div>

  <VbDataTable
    ref="table"
    :header="cols"
    url="sys/realTimeData/getRealTimeDataForPage"
    method="post"
    :query-params="queryParams"
    :has-checkbox="false"
    :fixed-column="true"
    :fixed-number="2"
    :fixed-right-number="1"
    :scroll="{ x: 2000 }"
  >
    <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="区域">
          <!-- <DySelectTree
            v-model:value="orgId"
            style="width: 180px"
            class="full-input"
            :url="'sys/dict/getOrgList?type=1'"
            :defaultExpandLevel="1"
            :option-map="{ id: 'value', label: 'label', children: 'children' }"
            placeholder="请选择区域..."
          /> -->
          <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-5 align-items-center" label="营业状态">
          <el-select v-model="operateStatus" style="width: 150px" placeholder="请选择营业状态" :clearable="true">
            <el-option value="0" label="营业"></el-option>
            <el-option value="1" label="间休"></el-option>
            <el-option value="2" label="停业"></el-option>
          </el-select>
        </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-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 #purifier_online_state="{ row }">
      <div v-if="row['purifier_online_state'] == 1">
        <img style="width: 34px; height: 34px" :src="getAssetPath(`media/table/01.gif`)" />
        运行
      </div>
      <div v-if="row['purifier_online_state'] == 2 || row['purifier_online_state'] == 3">
        <img style="width: 34px; height: 34px" :src="getAssetPath(`media/table/01.png`)" />
        未运行
      </div>
      <div v-if="row['purifier_online_state'] == 4">-</div>
    </template>
    <template #fan_online_state="{ row }">
      <div v-if="row['fan_online_state'] == 1">
        <img style="width: 34px; height: 34px" :src="getAssetPath(`media/table/02.gif`)" />
        运行
      </div>
      <div v-if="row['fan_online_state'] == 2 || row['purifier_online_state'] == 3">
        <img style="width: 34px; height: 34px" :src="getAssetPath(`media/table/02.png`)" />
        未运行
      </div>
      <div v-if="row['fan_online_state'] == 4">-</div>
    </template>
    <template #action="{ row }">
      <span class="table-action" @click="detail(row)">查看详情</span>
    </template>
  </VbDataTable>

  <VbModal v-model:modal="modal" :confirm-btn="false" close-btn-class="btn btn-primary" :close-need-confrim="false">
    <template #title>
      <h5 class="modal-title">
        <span class="text-info fs-2 me-5">{{ detailInfo?.company_name }}</span>
        <span class="badge badge-light-primary">{{ detailDeviceInfo.business_state }}</span>
      </h5>
    </template>
    <template #body>
      <div class="fs-3 fw-bolder mb-3">商户信息</div>
      <el-row :gutter="20">
        <el-col :span="12">
          <dl class="d-flex">
            <dt class="text">商户名称：</dt>
            <dd class="text">{{ detailInfo.company_name }}</dd>
          </dl>
        </el-col>
        <el-col :span="12">
          <dl class="d-flex">
            <dt class="text">负责人：</dt>
            <dd class="text">{{ detailDeviceInfo.company_contact }}</dd>
          </dl>
        </el-col>
        <el-col :span="12">
          <dl class="d-flex">
            <dt class="text">详细地址：</dt>
            <dd class="text">{{ detailDeviceInfo.company_address }}</dd>
          </dl>
        </el-col>
        <el-col :span="12">
          <dl class="d-flex">
            <dt class="text">联系电话：</dt>
            <dd class="text">{{ detailDeviceInfo.company_contact_tel }}</dd>
          </dl>
        </el-col>
      </el-row>
      <div class="separator border-2 my-5"></div>
      <div class="fs-3 fw-bolder mb-3">设备信息</div>
      <el-row :gutter="20">
        <el-col :span="6">
          <dl class="d-flex">
            <dt class="text">净化设施：</dt>
            <dd class="text">{{ detailDeviceInfo.device_name }}</dd>
          </dl>
        </el-col>
        <el-col :span="6">
          <dl class="d-flex">
            <dt class="text">处理风量：</dt>
            <dd class="text">{{ detailDeviceInfo.device_air_volume }}</dd>
          </dl>
        </el-col>
        <el-col :span="6">
          <dl class="d-flex">
            <dt class="text">风机状态：</dt>
            <dd class="text">{{ detailDeviceInfo.fan_online_state }}</dd>
          </dl>
        </el-col>
        <el-col :span="6">
          <dl class="d-flex">
            <dt class="text">风机电流：</dt>
            <dd class="text">{{ detailDeviceInfo.fan_ia }}</dd>
          </dl>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <dl class="d-flex">
            <dt class="text">监控仪状态：</dt>
            <dd class="text">{{ detailDeviceInfo.device_online_state }}</dd>
          </dl>
        </el-col>
        <el-col :span="6">
          <dl class="d-flex">
            <dt class="text">净化器状态：</dt>
            <dd class="text">{{ detailDeviceInfo.purifier_online_state }}</dd>
          </dl>
        </el-col>
        <el-col :span="6">
          <dl class="d-flex">
            <dt class="text">净化器电流：</dt>
            <dd class="text">{{ detailDeviceInfo.purifier_ia }}</dd>
          </dl>
        </el-col>
        <el-col :span="6">
          <dl class="d-flex">
            <dt class="text">净化效能：</dt>
            <dd class="text">{{ detailDeviceInfo.clean_efficiency }}</dd>
          </dl>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <dl class="d-flex">
            <dt class="text">油烟浓度：</dt>
            <dd class="text">{{ detailDeviceInfo.smoke_density }}</dd>
          </dl>
        </el-col>
        <el-col :span="6">
          <dl class="d-flex">
            <dt class="text">非甲烷总烃：</dt>
            <dd class="text">{{ detailDeviceInfo.pm25 }}</dd>
          </dl>
        </el-col>
        <el-col :span="6">
          <dl class="d-flex">
            <dt class="text">颗粒物：</dt>
            <dd class="text">{{ detailDeviceInfo.voc_density }}</dd>
          </dl>
        </el-col>
      </el-row>
      <div class="separator border-2 my-5"></div>
      <div class="d-flex">
        <div class="w-50">
          <BaseChart :data="chartData1" :options="chartTheme" type="line" h="280"></BaseChart>
        </div>
        <div class="w-50">
          <BaseChart :data="chartData2" :options="chartTheme" type="line" h="280"></BaseChart>
        </div>
      </div>
    </template>
  </VbModal>
</template>