完成清洗台账及其详情页面

components.d.ts

@@ -31,6 +31,7 @@ declare module '@vue/runtime-core' {
     ElElFormItem: typeof import('element-plus/es')['ElElFormItem']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']

src/assets/sass/_common.scss

@@ -1,4 +1,5 @@
 dl{
+  display: flex;
   margin-bottom: 8px;
   dt{
     white-space: nowrap;

src/router/statictRouter.ts

@@ -76,4 +76,18 @@ export const staticRotuer: Array<RouteRecordRaw> = [
       },
     ],
   },
+  {
+    path: "/",
+    component: () => import("@/layouts/main-layout/MainLayout.vue"),
+    children: [
+      {
+        path: "/purify/washInfo/details",
+        component: () => import("@/views/purify/washInfo_details.vue"),
+        meta: {
+          pageTitle: "净化器清洗情况",
+          breadcrumbs: ["清洗管理", "清洗台账", "净化器清洗情况"],
+        },
+      },
+    ],
+  },
 ]

src/views/analysisInfo/_WeekClean.vue

@@ -3,6 +3,7 @@ import { ref, onMounted } from "vue"
 import moment from "moment"
 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" },
@@ -47,7 +48,7 @@ const queryParams = ref<any>({
 const cols = ref([
   {
     name: "序号",
-    field: "index",
+    field: configs.TABLE_INDEX_FIELD,
   },
   {
     name: "区域",
@@ -227,7 +228,7 @@ onMounted(init)
       </el-form>
     </template>
     <template #name="{ row }">
-      <span class="text-primary" @click="jump(row)" style="cursor: pointer">{{ row["company_name"] }}</span>
+      <span class="text-primary" @click="jump(row)" style="cursor: pointer">{{ row["name"] }}</span>
     </template>
 
     <template #action="{ row }">

src/views/analysisInfo/overdueWarn.vue

@@ -3,6 +3,7 @@ import { ref, computed, onMounted } from "vue"
 import Rs from "@/core/services/RequestService"
 import { useRoute } from "vue-router"
 import configs from "@/core/config/Index"
+import moment from "moment"
 const route = useRoute()
 const title = ref("")
 const type = ref(0)
@@ -182,5 +183,8 @@ onMounted(() => {
         </tr>
       </thead>
     </template>
+    <template #last_clean_time="{ row }">
+      {{ moment(row.last_clean_time, "YYYYMMDDHHmmss").format("YYYY-MM-DD") }}
+    </template>
   </VbDataTable>
 </template>

src/views/goLineData/_ViewDevice_General.vue

@@ -1,13 +1,11 @@
 <script setup lang="ts">
 import { ref, withDefaults, onMounted, watch } from "vue"
-import { getAssetPath } from "@/core/helpers/assets"
 import Rs from "@/core/services/RequestService"
 import configs from "@/core/config/Index"
+import moment from "moment"
 
 const props = withDefaults(defineProps<{ id: string }>(), { id: "" })
-const emptyTableText = "未查询到数据"
 const deviceInfo = ref<any>({})
-const cleanInfo = ref<Array<any>>([])
 function getDeviceInfo() {
   Rs.post("sys/onlineData/getMonitorData", { data: { id: props.id } }).then((res) => {
     if (res.data) {
@@ -125,6 +123,9 @@ onMounted(() => {
           </tr>
         </thead>
       </template>
+      <template #last_clean_time="{ row }">
+        {{ moment(row.last_clean_time, "YYYYMMDDHHmmss").format("YYYY-MM-DD") }}
+      </template>
     </VbDataTable>
   </div>
 </template>

src/views/purify/washInfo.vue

@@ -1,7 +1,225 @@
 <script setup lang="ts">
-import { defineProps, reactive, ref, toRefs } from "vue"
+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>
-  <div>wash</div>
+  <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>

src/views/purify/washInfo_details.vue

@@ -0,0 +1,250 @@
+<script setup lang="ts">
+import { ref } from "vue"
+import configs from "@/core/config/Index"
+import { useRoute } from "vue-router"
+import moment from "moment"
+import Rs from "@/core/services/RequestService"
+const route = useRoute()
+const active = ref(0)
+const cols = ref<Array<any>>([
+  {
+    name: "设备名称",
+    field: "device_name",
+  },
+  {
+    name: "清洗时间",
+    field: "clean_start",
+  },
+  {
+    name: "清洗照片",
+    field: "pictures",
+  },
+])
+const dateRange = ref<[Date, Date]>([moment(new Date()).add(-1, "M").toDate(), new Date()])
+const queryParams = ref<any>({
+  company_id: route.query.company_id,
+})
+
+function query() {
+  queryParams.value = {
+    company_id: route.query.company_id,
+    clean_end: moment(dateRange.value[0]).format("YYYYMMDD"),
+    clean_start: moment(dateRange.value[1]).format("YYYYMMDD"),
+  }
+}
+
+function reset() {
+  dateRange.value = [moment(new Date()).add(-1, "M").toDate(), new Date()]
+  query()
+}
+
+const col2s = ref([
+  {
+    name: "序号",
+    field: configs.TABLE_INDEX_FIELD,
+  },
+  {
+    name: "净化器名称",
+    field: "monitor_name",
+  },
+  {
+    name: "净化效能",
+    field: "clean_name",
+  },
+  {
+    name: "天数",
+    field: "day_condition",
+  },
+  {
+    name: "开机小时",
+    field: "hour_condition",
+  },
+  {
+    name: "最后清洗时间",
+    field: "last_clean_time",
+  },
+  {
+    name: "经过天数",
+    field: "run_day",
+  },
+  {
+    name: "开机小时数",
+    field: "run_hour",
+  },
+  {
+    name: "剩余天数",
+    field: "surplus_day",
+  },
+  {
+    name: "剩余小时数",
+    field: "surplus_hour",
+  },
+  {
+    name: "操作",
+    field: "action",
+  },
+])
+const queryParam2s = ref({
+  company_id: route.query.company_id,
+})
+const colorMapping = (d: string) => {
+  let ret = ""
+  if (d == "清洁") {
+    ret = "#4DCB73"
+  } else if (d == "较脏") {
+    ret = "#FAD337"
+  } else if (d == "过脏") {
+    ret = "#F2637B"
+  }
+  return ret
+}
+const modal = ref()
+const notifier = ref("")
+const noticeDetails = ref<any>({})
+function notice(row: any) {
+  modal.value.show()
+  noticeDetails.value = Object.assign({}, row)
+}
+function onSaveNotice() {
+  const params = {
+    clean_cycle_day: noticeDetails.value.day_condition,
+    clean_cycle_hour: noticeDetails.value.hour_condition,
+    content: "您有新的清洗通知",
+    name: "000100004",
+    notifier: notifier.value,
+    type: 1,
+    company_id: route.query.company_id,
+    device_id: noticeDetails.value.device_id,
+  }
+  Rs.post("sys/notice/sendNotice", { data: params })
+}
+</script>
+
+<template>
+  <div class="mb-3">
+    <el-radio-group v-model="active" size="large">
+      <el-radio-button label="0">清洗记录</el-radio-button>
+      <el-radio-button label="1">清洗周期</el-radio-button>
+    </el-radio-group>
+  </div>
+  <VbDataTable
+    v-if="active == 0"
+    :header="cols"
+    url="sys/purifierCondition/selectCompanyCleanLog"
+    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-0 align-items-center" label="日期">
+          <el-date-picker
+            v-model="dateRange"
+            type="daterange"
+            range-separator="~"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            size="default"
+          />
+        </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 #pictures="{ row }">
+      <div class="d-flex h-100 justify-content-center align-items-center p-3">
+        <el-image
+          :src="`/api/file/upload/res/${row.pictures}`"
+          :preview-src-list="[`/api/file/upload/res/${row.pictures}`]"
+          :hide-on-click-modal="true"
+          fit="cover"
+          style="height: 50px; width: 75px; max-width: none; border-radius: 0.475rem"
+          alt=""
+        />
+      </div>
+    </template>
+  </VbDataTable>
+  <VbDataTable
+    v-if="active == 1"
+    url="sys/purifierCondition/selectCleanPage"
+    :header="col2s"
+    :query-params="queryParam2s"
+    method="post"
+    :has-checkbox="false"
+    :pagination="false"
+  >
+    <template #tableHeader>
+      <thead>
+        <tr class="text-center">
+          <th class="bg-light-primary" rowspan="2" style="vertical-align: middle">序号</th>
+          <th class="bg-light-primary" rowspan="2" style="vertical-align: middle">净化器名称</th>
+          <th class="bg-light-primary" rowspan="2" style="vertical-align: middle">净化效能</th>
+          <th class="bg-light-primary" colspan="2">清洗周期</th>
+          <th class="bg-light-primary" rowspan="2" style="vertical-align: middle">最后清洗时间</th>
+          <th class="bg-light-primary" colspan="2">上次清洗至今</th>
+          <th class="bg-light-primary" colspan="2">距下次清洗</th>
+          <th class="bg-light-primary" rowspan="2" style="vertical-align: middle">操作</th>
+        </tr>
+        <tr class="text-center">
+          <th class="bg-light-primary">天数</th>
+          <th class="bg-light-primary">开机小时</th>
+          <th class="bg-light-primary">经过天数</th>
+          <th class="bg-light-primary">开机小时数</th>
+          <th class="bg-light-primary">剩余天数</th>
+          <th class="bg-light-primary">剩余小时数</th>
+        </tr>
+      </thead>
+    </template>
+    <template #clean_name="{ row }">
+      <span :style="`color:${colorMapping(row.clean_name)}`">{{ row.clean_name }}</span>
+    </template>
+    <template #last_clean_time="{ row }">
+      {{ moment(row.last_clean_time, "YYYYMMDDHHmmss").format("YYYY-MM-DD") }}
+    </template>
+    <template #action="{ row }">
+      <div class="text-danger text-center">
+        <span class="table-action" @click="notice(row)">下发通知</span>
+      </div>
+    </template>
+  </VbDataTable>
+  <VbModal v-model:modal="modal" title="清洗通知" @confirm="onSaveNotice">
+    <template #body>
+      <el-row>
+        <el-col :span="24">
+          <dl>
+            <dt>设施名称：</dt>
+            <dd>{{ noticeDetails.monitor_name }}</dd>
+          </dl>
+        </el-col>
+        <el-col :span="12">
+          <dl>
+            <dt>清洗周期（天）：</dt>
+            <dd>{{ noticeDetails.day_condition }}</dd>
+          </dl>
+        </el-col>
+        <el-col :span="12">
+          <dl>
+            <dt>清洗周期（小时）：</dt>
+            <dd>{{ noticeDetails.hour_condition }}</dd>
+          </dl>
+        </el-col>
+        <el-col :span="12">
+          <dl>
+            <dt>通知单位：</dt>
+            <dd>{{ noticeDetails.notice_org }}环保局</dd>
+          </dl>
+        </el-col>
+        <el-col :span="12">
+          <dl>
+            <dt>通知人：</dt>
+            <dd>
+              <el-input v-modal="notifier" placeholder="请输入通知人"></el-input>
+            </dd>
+          </dl>
+        </el-col>
+      </el-row>
+    </template>
+  </VbModal>
+</template>