1. 场景报告模块编写（暂存）

riku

2024-10-30 d4e7c11e06b643c9353444c839cec40c25945219

 src/views/fysp/data-product/ProdSceneReport.vue

@@ -0,0 +1,271 @@
<template>
  <BaseContentLayout>
    <template #header>
      <SearchBar @on-submit="search"> </SearchBar>
    </template>
    <template #aside>
      <SideList
        :items="subtasks"
        :loading="sideLoading"
        @item-click="chooseSubtask"
      ></SideList>
    </template>
    <template #main>
      <el-scrollbar class="el-scrollbar" v-loading="mainLoading">
        <CompSceneConstructionInfo
          title="A、工地基本信息"
          :form-info="formSubScene"
        />
        <div><el-text type="">附图片：</el-text></div>
        <CompImgInfo
          title="施工铭牌"
          :img-src="sceneImg.url"
          @change="anyPhotoDialog = true"
        ></CompImgInfo>
        <el-divider />
        <el-text tag="h1">B、主要污染防治设施</el-text>
        <el-space wrap>
          <CompImgInfo
            v-for="(item, i) in deviceList"
            :key="i"
            down-title
            :title="item._deviceTypeName"
            :img-src="item._showStatusPic"
            @change="showDevicePhotoDialog(item)"
          ></CompImgInfo>
        </el-space>
        <el-divider />
        <el-text tag="h1">C、现场污染问题与整改情况</el-text>
      </el-scrollbar>
    </template>
  </BaseContentLayout>
  <el-dialog
    v-model="anyPhotoDialog"
    width="66%"
    title="任意图片"
    destroy-on-close
  >
    <ArbitraryPhoto
      :max-select="1"
      :readonly="false"
      :subtask="curSubtask.data"
      @selectByAnyPhonoEvent="handleSelectAnyPhoto"
      :defaultFile="[sceneImg]"
    >
    </ArbitraryPhoto>
  </el-dialog>
  <el-dialog
    title="设备图片"
    width="66%"
    v-model="deiveceImgDialog"
    destroy-on-close
  >
    <CompDevicePhono
      @selectPhonoEvent="handleSelectDevicePhoto"
      :imgPathsDataSource="showDeviceImgList"
    >
    </CompDevicePhono>
  </el-dialog>
</template>
<script setup>
import { ref, computed } from 'vue';

import { $fysp } from '@/api/index';
import taskApi from '@/api/fysp/taskApi';
import sceneApi from '@/api/fysp/sceneApi';
import deviceApi from '@/api/fysp/deviceApi';
import { formatDeviceList } from '@/model/fysp/device';
import { enumDevice, toLabel } from '@/enum/device/device';

import CompSceneConstructionInfo from '@/views/fysp/scene/CompSceneConstructionInfo.vue';
import ArbitraryPhoto from '@/views/fysp/check/components/ArbitraryPhoto.vue';
import CompDevicePhono from '@/views/fysp/check/components/CompDevicePhono.vue';
import CompImgInfo from '@/views/fysp/data-product/components/CompImgInfo.vue';

/************************* 左侧巡查任务选单 **********************************/
const curSubtask = ref({});
const subtasks = ref([]);
const sideLoading = ref(false);
const mainLoading = ref(false);
//获取任务问题的审核情况
function getSubtaskType(s) {
  let type = 0;
  if (s.proNum == 0) {
    type = 2;
  } else if (s.proCheckedNum == 0) {
    type = 0;
  } else if (s.proCheckedNum < s.proNum) {
    type = 1;
  } else {
    type = 2;
  }
  return type;
}
//查询子任务统计信息
function search(formSearch) {
  // this.topTask = formSearch.topTask;
  sideLoading.value = true;
  mainLoading.value = true;
  // this.curProList = [];
  curSubtask.value = {};
  const param = {
    topTaskId: formSearch.topTask.tguid,
    sceneTypeId: formSearch.sceneTypeId
  };
  taskApi.getSubtaskSummary(param).then((res) => {
    const list = [];
    res.forEach((s) => {
      const t = getSubtaskType(s);
      list.push({
        type: t,
        title: s.stName,
        categoly: s.stPlanTime.split('T')[0],
        data: s
      });
    });
    subtasks.value = list;
    if (list.length == 0) {
      sideLoading.value = false;
      mainLoading.value = false;
    }
  });
}
//点击左侧菜单任务事件
function chooseSubtask(s) {
  sideLoading.value = false;
  mainLoading.value = true;
  curSubtask.value = s;

  fetchSceneInfo(s.data.sceneId).finally(() => {
    mainLoading.value = false;
  });
  fetchDeviceList(s);
  fetchProblems(s)
}

/************************* 场景基本信息 **********************************/
const formSubScene = ref({});
function fetchSceneInfo(sceneId) {
  return sceneApi.getSceneDetail(sceneId).then((res) => {
    //场景
    // if (res.data.scense) formScene = res.data.scense;
    formSubScene.value = res.data.subScene ? res.data.subScene : {};
    // if (res.data.sceneDevice) {
    //   formSceneDevice = res.data.sceneDevice;
    // } else {
    //   formSceneDevice = {
    //     sGuid: formScene.guid,
    //   };
    // }
  });
}

// 任意拍图片选择对话框
const anyPhotoDialog = ref(false);
const sceneImg = ref({});
function handleSelectAnyPhoto(data) {
  anyPhotoDialog.value = false;
  if (data.length > 0) {
    sceneImg.value = { url: data[0].url };
  }
}
/************************* 场景设备信息 **********************************/

// 设备图片选择对话框
const deiveceImgDialog = ref(false);
const showDeviceImg = ref({});
const showDeviceImgList = ref([]);
// 设备图片列表
const deviceList = ref([]);

function showDevicePhotoDialog(device) {
  deiveceImgDialog.value = true;
  showDeviceImgList.value = [];
  let imgList = [];
  device._status
    .map((s) => s._picUrls)
    .forEach((pics) => {
      imgList = imgList.concat(
        pics.map((p) => {
          return {
            topTypeId: device.topTypeId,
            _picUrl: p
          };
        })
      );
    });
  console.log(imgList);

  showDeviceImgList.value = imgList;
}

function handleSelectDevicePhoto(data) {
  deiveceImgDialog.value = false;
  if (data.length > 0) {
    showDeviceImg.value = { url: data[0].url };
  }
}

const deviceTopTypes = [
  { id: 0, label: '监控设备' },
  { id: 1, label: '治理设备' }
  // { id: 2, label: '生产设备' }
];

function fetchDeviceList(s) {
  deviceList.value = [];
  for (const deviceTopTypeElement of deviceTopTypes) {
    const topTypeId = deviceTopTypeElement.id;
    deviceApi
      .fetchDevices(s.data.sceneId, topTypeId)
      .then((res) => {
        return formatDeviceList(res.data);
      })
      .then((result) => {
        result.forEach((r) => {
          const param = {
            deviceId: r.id,
            sceneId: r.sceneGuid,
            deviceTypeId: topTypeId
          };
          deviceApi
            .fetchDeviceStatus(param)
            .then((res) => {
              res.data.forEach((e) => {
                if (e.dlPicUrl && e.dlPicUrl.trim() != '') {
                  e._picUrls = e.dlPicUrl
                    .split(';')
                    .map((v) => $fysp.imgUrl + v);
                } else {
                  e._picUrls = [];
                }
              });
              return res;
            })
            .then((res) => {
              if (res.data.length > 0 && res.data[0]._picUrls.length > 0) {
                r._showStatusPic = res.data[0]._picUrls[0];
              }
              r._status = res.data;
              r.topTypeId = topTypeId;
              r._deviceTypeName = toLabel(r.sceneTypeId, topTypeId, [
                r.typeId,
                r.subtypeId
              ]).join('-');
              deviceList.value.push(r);
            });
        });
      });
  }
}
/************************* 现场巡查情况（问题与整改） **********************************/
//当前任务的问题列表
const curProList = ref([]);

function fetchProblems(s) {
  taskApi.getProBySubtask(s.data.stGuid).then((res) => {
    curProList.value = res;
  });
}
/************************* 扬尘防治建议 **********************************/
</script>