1. 问题审核界面新增场景信息编辑入口 2. 问题审核界面场景图片查询新增图片类型修改功能

riku

2025-05-19 d1ce79c837650689ab47bbf587d076743fcb3a5f

1. 问题审核界面新增场景信息编辑入口
2. 问题审核界面场景图片查询新增图片类型修改功能

 src/api/fysp/mediafileApi.js

@@ -11,5 +11,8 @@
    getRoutineByiGuid(iGuid) {
        const params = `?iGuid=${iGuid}`;
        return $fysp.get(`mediafile/routine${params}`).then((res) => res.data);
  },
  updateMediaFile(mediafile) {
    return $fysp.post('mediafile', mediafile).then((res) => res.data);
    }
}
};

 src/components/CompGenericWrapper.vue

@@ -1,14 +1,28 @@
<template>
  <!-- dialog包裹 -->
  <el-dialog v-if="currType == 'dialog'" :title="title" :model-value="visible" @opened="$emit('update:visible', true)"
    @closed="$emit('update:visible', false)" destroy-on-close>
  <el-dialog
    v-if="currType == 'dialog'"
    :title="title"
    :model-value="visible"
    @opened="$emit('update:visible', true)"
    @closed="$emit('update:visible', false)"
    destroy-on-close
  >
    <div v-if="visible">
      <slot name="content"></slot>
    </div>
  </el-dialog>
  <!-- drawer包裹 -->
  <el-drawer v-if="currType == 'drawer'" :title="title" size="45%" direction="ltr" :model-value="visible"
    @opened="$emit('update:visible', true)" @closed="$emit('update:visible', false)" destroy-on-close>
  <el-drawer
    v-if="currType == 'drawer'"
    :title="title"
    size="45%"
    direction="ltr"
    :model-value="visible"
    @opened="$emit('update:visible', true)"
    @closed="$emit('update:visible', false)"
    destroy-on-close
  >
    <slot name="content"></slot>
  </el-drawer>
  <!-- é»˜è®¤æ— åŒ…裹 -->

 src/components/FYImageSelectDialog.vue

@@ -8,8 +8,11 @@
    destroy-on-close
    :close-on-press-escape="false"
  >
    <!-- <div class="main"> -->
    <el-row justify="end" v-if="!readonly">
    <el-row justify="end">
      <el-text v-if="onContextMenu != undefined" size="small" type="info">{{
        `（${contextMenuStr}）`
      }}</el-text>
      <div v-if="!readonly">
      <el-text size="small" type="info" class="m-r-8"
        >最多选择{{ maxSelect }}张图片</el-text
      >
@@ -23,6 +26,7 @@
      <el-button size="small" type="primary" @click="handleCancel"
        >取消</el-button
      >
      </div>
    </el-row>

    <div class="center">
@@ -49,8 +53,11 @@
            :class="[img.isSelect ? 'selected' : 'noActive', 'image']"
            fit="cover"
            :src="img.url"
            :preview-src-list="readonly ? typeImgMap.get(activeId).map((v) => v.url) : []"
            :preview-src-list="
              readonly ? typeImgMap.get(activeId).map((v) => v.url) : []
            "
            :initial-index="i"
            @contextmenu="(e) => showContextMenu(e, i)"
            @click="onSelect(img, i)"
            @load="onOneImgLoadSuccess(img)"
            @error="onOneImgLoadError(img)"
@@ -61,7 +68,6 @@
        </el-row>
      </el-scrollbar>
    </div>
    <!-- </div> -->
  </el-dialog>
</template>
<script setup>
@@ -86,21 +92,25 @@
    type: Boolean,
    default: false
  },
  defaultFile: {
    type: Array,
    default: () => []
  },
  // å›¾ç‰‡å¯é€‰æ•°é‡ï¼Œå½“传入数字时，代表图片数量
  maxSelect: {
    type: Number,
    default: 3
  },
  // å›¾ç‰‡å³é”®ç‚¹å‡»äº‹ä»¶
  onContextMenu: {
    type: Function
  },
  contextMenuStr: {
    type: String,
    default: '右键点击图片触发额外操作'
  }
});

const emit = defineEmits(['submit', 'cancel', 'update:dialogVisible']);

const activeId = ref('');
// const typeImgMap = ref(new Map());

const selectedImgUrlList = ref([]);

let loadedImgCount = ref(0);
@@ -158,20 +168,6 @@
  }
}
function handleOpen() {
  // if (props.typeImgMap.get(activeId.value) == undefined) {
  //     return;
  //   }
  //   props.typeImgMap.get(activeId.value).forEach((i) => {
  //     if (i.isSelect == true) {
  //       return;
  //     }
  //     props.defaultFile.forEach((imgItem) => {
  //       if (imgItem.url == i.url) {
  //         i.isSelect = true;
  //         selectedImgUrlList.value.push(i);
  //       }
  //     });
  //   });
  emit('update:dialogVisible', true);
}
function handleClose() {
@@ -189,6 +185,14 @@
  emit('update:dialogVisible', false);
}

// å›¾ç‰‡å³é”®ç‚¹å‡»æ—¶é—´
function showContextMenu(event, index) {
  if (props.onContextMenu) {
    event.preventDefault();
    props.onContextMenu(event, activeId.value, index);
  }
}

watch(
  () => props.typeList,
  (nV, oV) => {
@@ -198,47 +202,6 @@
  },
  { immediate: true }
);
// watch(
//   () => props.defaultFile,
//   (nV, oV) => {
//     if (props.typeImgMap.get(activeId.value) == undefined) {
//       return;
//     }
//     props.typeImgMap.get(activeId.value).forEach((i) => {
//       if (i.isSelect == true) {
//         return;
//       }
//       nV.forEach((imgItem) => {
//         if (imgItem.url == i.url) {
//           i.isSelect = true;
//           selectedImgUrlList.value.push(i);
//         }
//       });
//     });
//   },
//   { deep: true, immediate: true }
// );

// watch(
//   () => props.typeImgMap,
//   (newMap, oldMap) => {
//     if (newMap.get(activeId.value) == undefined) {
//       return;
//     }
//     newMap.get(activeId.value).forEach((i) => {
//       if (i.isSelect == true) {
//         return;
//       }
//       props.defaultFile.forEach((imgItem) => {
//         if (imgItem.url == i.url) {
//           i.isSelect = true;
//           selectedImgUrlList.value.push(i);
//         }
//       });
//     });
//   },
//   { immediate: true }
// );
</script>
<style scoped>
.center {

 src/components/ToolBar.vue

@@ -18,9 +18,13 @@
    </el-row>
    <el-row class="tag-group" v-if="title">
      <el-space>
        <el-tag v-for="(d, i) in descriptions" :key="i" :type="d.type" size="small">{{
          d.name + ': ' + d.value
        }}</el-tag>
        <el-tag
          v-for="(d, i) in descriptions"
          :key="i"
          :type="d.type"
          size="small"
          >{{ d.name + ': ' + d.value }}</el-tag
        >
      </el-space>
    </el-row>
  </div>

 src/components/search-option/FYOptionScene.vue

@@ -41,7 +41,7 @@
    // åˆ‡æ¢ type åŽï¼Œå½“前选项是否清空
    sourceInit: {
      type: Boolean,
      default: true
      default: false
    }
  },
  emits: ['update:value'],

 src/enum/mediaFile.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,93 @@
// é£žç¾½ç›‘管系统
function enumMediaFile(sceneType, allOption = true) {
  let l;
  switch (parseInt(sceneType)) {
    case 5:
      l = _enumMediaFile_restaurant();
      break;
    default:
      l = _enumMediaFile_common();
      break;
  }
  if (!allOption) {
    l.shift();
  }

  return l;
}

function _enumMediaFile_common() {
  return [
    {
      label: '全部',
      value: null
    },
    {
      label: '常规记录',
      value: 5
    },
    {
      label: '监测设备',
      value: 3
    },
    {
      label: '铭牌',
      value: 7
    }
  ];
}

function _enumMediaFile_restaurant() {
  return [
    {
      label: '全部',
      value: null
    },
    {
      label: '常规记录',
      value: 5
    },
    {
      label: '扩展类一',
      value: 51
    },
    {
      label: '扩展类二',
      value: 52
    },
    {
      label: '扩展类三',
      value: 53
    },
    {
      label: '扩展类四',
      value: 54
    },
    {
      label: '扩展类五',
      value: 55
    },
    {
      label: '扩展类六',
      value: 56
    },
    {
      label: '扩展类七',
      value: 57
    },
    {
      label: '扩展类八',
      value: 58
    },
    {
      label: '扩展类九',
      value: 59
    },
    {
      label: '扩展类十',
      value: 60
    }
  ];
}

export { enumMediaFile };

 src/views/fysp/check/ProCheck.vue

@@ -72,6 +72,10 @@
    ref="deviceShowRef"
  >
  </CompDeviceShowTest>
  <SceneEditDialog
    v-model="sceneInfoDialog"
    :sceneId="curSubtask.data ? curSubtask.data.sceneId : undefined"
  ></SceneEditDialog>
</template>

<script>
@@ -82,22 +86,26 @@
import CompProblemCard from './components/CompProblemCard.vue';
import CompSubTaskStatistic from './components/CompSubTaskStatistic.vue';
import CompDeviceShowTest from './components/CompDeviceShowTest.vue';
import SceneEditDialog from '@/views/fysp/scene/SceneEditDialog.vue';
export default {
  components: {
    CompProblemCard,
    CompSubTaskStatistic,
    CompProblemAddOrUpd,
    ArbitraryPhoto,
    CompDeviceShowTest
    CompDeviceShowTest,
    SceneEditDialog
  },
  data() {
    return {
      // è®¾å¤‡å›¾
      // è®¾å¤‡å›¾å¯¹è¯æ¡†
      deviceShowDialog: false,
      // ä»»æ„å›¾
      // ä»»æ„å›¾å¯¹è¯æ¡†
      anyPhotoDialog: false,
      // æ–°å¢žé—®é¢˜
      // æ–°å¢žé—®é¢˜å¯¹è¯æ¡†
      proAddOrUpdDialogVisible: false,
      // åŸºæœ¬ä¿¡æ¯å¯¹è¯æ¡†
      sceneInfoDialog: false,
      //左侧菜单栏加载状态
      sideLoading: false,
      //右侧内容栏加载状态
@@ -116,6 +124,14 @@
      curProList: [],
      //操作按钮
      buttons: [
        {
          name: '场景信息',
          color: 'success',
          // color: 'primary',
          click: () => {
            this.sceneInfoDialog = true;
          }
        },
        {
          name: '新增问题',
          // color: 'success',
@@ -168,7 +184,7 @@
      this.mainLoading = true;
      this.curProList = [];
      this.curSubtask = {};
      this.sceneTypeId = formSearch.sceneTypeId
      this.sceneTypeId = formSearch.sceneTypeId;
      const param = {
        topTaskId: formSearch.topTask.tguid,
        sceneTypeId: formSearch.sceneTypeId

 src/views/fysp/check/components/ArbitraryPhoto.vue

@@ -1,48 +1,141 @@
<template>
  <FYImageSelectDialog
    v-bind="$attrs"
    v-loading="loading"
    title="场景图片"
    :typeList="typesList"
    :typeImgMap="typesMap"
    :onContextMenu="showContextMenu"
    contextMenuStr="右键点击图片修改分类"
  ></FYImageSelectDialog>
  <!-- <div
    
    @click="closeContextMenu"
    @contextmenu="closeContextMenu"
    class="container"
  > -->
  <div v-if="showMenu" ref="menu" :style="menuStyle" class="context-menu">
    <template v-for="(item, index) in menuItems" :key="index">
      <el-popover v-if="item.children" placement="right-start" trigger="hover">
        <template #reference>
          <el-row justify="space-between" class="menu-item">
            <span>{{ item.label }}</span>
            <el-icon><ArrowRight /></el-icon>
          </el-row>
        </template>
        <div
          v-for="(item1, index1) in item.children"
          :key="index1"
          class="menu-item"
          @click.stop="handleMenuItem(item1)"
        >
          {{ item1.label }}
        </div>
      </el-popover>

      <div class="menu-item" @click.stop="handleMenuItem(item)" v-else>
        {{ item.label }}
      </div>
    </template>
  </div>
  <!-- </div> -->
</template>
<script>
import mediafileApi from '@/api/fysp/mediafileApi.js';
import { $fysp } from '@/api/index.js';
import { enumMediaFile } from '@/enum/mediaFile.js';

export default {
  props: {
    subtask: {
      type: Object,
      efault: {}
      type: Object
    }
  },
  data() {
    return {
      // æ— æ•°æ®
      typesList: [],
      typesMap: new Map(),
      loading: true,
      // å³é”®å›¾ç‰‡å¼¹å‡ºèœå•æŽ§åˆ¶
      showMenu: false,
      menuStyle: undefined,
      // menuItems: [
      //   { label: '复制图片', action: 'copy' },
      //   {
      //     label: '移动到',
      //     children: [
      //       {
      //         action: 'move',
      //         label: v.typeName,
      //         value: v.typeId
      //       }
      //     ]
      //   }
      // ],
      closeContextMenuListenr: undefined,
      // å³é”®é€‰ä¸­çš„图片
      selectedFile: undefined,
      selectedIndex: undefined,
      selectedTypeId: undefined
    };
  },
  computed: {
    menuItems() {
      const sceneTypeId = this.subtask.sceneTypeId;
      const items = enumMediaFile(sceneTypeId, false)
        .filter((v) => {
          return v.value != this.selectedTypeId;
        })
        .map((v) => {
          return {
            action: 'move',
            label: v.label,
            value: v.value
          };
        });
      return [
        // { label: '复制图片', action: 'copy' },
        { label: '移动到', children: items }
      ];
    }
  },
  mounted() {
    this.getGroupImgs();
    this.closeContextMenuListenr = (event) => {
      if (
        this.$refs.menu &&
        !this.$refs.menu.contains(event.target) &&
        this.showMenu
      ) {
        // å¦‚果点击不是在菜单内部且菜单是可见的
        this.showMenu = false; // éšè—èœå•
      }
    };
    document.addEventListener('click', this.closeContextMenuListenr);
  },
  unmounted() {
    document.removeEventListener('click', this.closeContextMenuListenr);
  },
  methods: {
    // å›¾ç‰‡åˆ†ç±»
    getGroupImgs() {
      mediafileApi.getRoutineByStGuid(this.subtask.stGuid).then((res) => {
        this.loading = true
      mediafileApi
        .getRoutineByStGuid(this.subtask.stGuid)
        .then((res) => {
          this.loading = true;
        let typeList = [];
        let typeMap = new Map();
        const data = res.data;
        for (const e of data) {
          let img = {
            url: $fysp.imgUrl + e.extension1 + e.guid + '.jpg'
              url: $fysp.imgUrl + e.extension1 + e.guid + '.jpg',
              data: e
          };
          const businesstype = e.businesstype;
          const businesstypeid = e.businesstypeid;
          if (
            typeList.find((item) => item.typeName == businesstype) != undefined
              typeList.find((item) => item.typeId == businesstypeid) !=
              undefined
          ) {
            typeMap.get(businesstypeid).push(img);
          } else {
@@ -55,10 +148,105 @@
        }
        this.typesList = typeList;
        this.typesMap = typeMap;
      }).finally(() => (this.loading = false));
        })
        .finally(() => (this.loading = false));
    },
    // å›¾ç‰‡å³é”®ç‚¹å‡»äº‹ä»¶
    showContextMenu(event, typeId, index) {
      this.showMenu = true;
      this.menuStyle = {
        left: `${event.clientX}px`,
        top: `${event.clientY}px`
      };
      this.selectedTypeId = typeId;
      this.selectedIndex = index;
      this.selectedFile = this.typesMap.get(typeId)[index];
    },
    closeContextMenu() {
      this.showMenu = false;
    },
    handleMenuItem(item) {
      switch (item.action) {
        case 'copy':
          break;
        case 'move':
          this.selectedFile.data.businesstypeid = item.value;
          this.selectedFile.data.businesstype = item.label;
          this.changeMediaFileType(this.selectedFile);
          break;
        default:
          break;
      }
      this.closeContextMenu();
    },
    changeMediaFileType() {
      this.selectedFile.loading = true;
      const file = this.selectedFile.data;
      return mediafileApi
        .updateMediaFile(file)
        .then((res) => {
          if (res == 1) {
            const m = this.typesMap
              .get(this.selectedTypeId)
              .splice(this.selectedIndex, 1);
            if (!this.typesMap.has(file.businesstypeid)) {
              this.typesList.push({
                typeId: file.businesstypeid,
                typeName: file.businesstype
              });
              this.typesMap.set(file.businesstypeid, m);
            } else {
              this.typesMap.get(file.businesstypeid).push(m[0]);
            }
          }
        })
        .finally(() => (this.selectedFile.loading = false));

      // setTimeout(() => {
      //   const m = this.typesMap
      //     .get(this.selectedTypeId)
      //     .splice(this.selectedIndex, 1);
      //   if (!this.typesMap.has(file.businesstypeid)) {
      //     this.typesList.push({
      //       typeId: file.businesstypeid,
      //       typeName: file.businesstype
      //     });
      //     this.typesMap.set(file.businesstypeid, m);
      //   } else {
      //     this.typesMap.get(file.businesstypeid).push(m[0]);
      //   }
      //   this.selectedFile.loading = false;
      // }, 2000);
    }
  }
};
</script>
<style scoped></style>
<style scoped>
.container {
  /* background-color: rgba(19, 211, 67, 0.514); */
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100vw;
  z-index: 10000;
}
.context-menu {
  position: fixed;
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  min-width: 200px;
  z-index: 10001;
}
 
.menu-item {
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.2s;
}

.menu-item:hover {
  background-color: #f0f0f0;
}
</style>

 src/views/fysp/check/components/CompProblemAddOrUpd.vue

@@ -163,13 +163,13 @@
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item>
        </el-form>
        <el-row justify="end">
            <el-button type="primary" @click="onSubmit" v-show="!readonly"
              >保存</el-button
            >
            <el-button @click="onCancel" v-show="!readonly">取消</el-button>
          </el-form-item>
        </el-form>
        </el-row>
        <ArbitraryPhoto
          :max-select="maxSelectImgCount - fileList.length"
          v-model:dialog-visible="anyPhotoDialog"

 src/views/fysp/scene/CompSceneBaseInfo.vue

@@ -1,19 +1,26 @@
<!-- åœºæ™¯åŸºæœ¬ä¿¡æ¯ç¼–辑 -->
<template>
  <FYForm :form-info="formInfo" :rules="rules" :useReset="true" @submit="submit" @cancel="cancel">
  <FYForm
    :form-info="formInfo"
    :rules="rules"
    :useReset="true"
    @submit="submit"
    @cancel="cancel"
  >
    <template #form-item="{ formObj }">
      <el-form-item label="场景名称" prop="name">
        <el-input clearable show-word-limit v-model="formObj.name" placeholder="场景名称" />
        <el-input
          clearable
          show-word-limit
          v-model="formObj.name"
          placeholder="场景名称"
        />
      </el-form-item>
      <!-- <el-form-item label="场景类型" prop="_scenetype">
        <el-select v-model="formObj._scenetype" placeholder="场景类型">
          <el-option v-for="s in sceneTypes" :key="s.value" :label="s.label" :value="s" />
        </el-select>
      </el-form-item> -->
      <!-- åœºæ™¯ç±»åž‹ -->
      <FYOptionScene
        :allOption="false"
        :type="2"
        :initValue="false"
        v-model:value="formObj._scenetype"
      ></FYOptionScene>
      <!-- åŒºåŽ¿ -->
@@ -25,10 +32,14 @@
        v-model:value="formObj._locations"
      ></FYOptionLocation>
      <el-form-item label="地址" prop="location">
        <el-input show-word-limit clearable v-model="formObj.location" placeholder="地址" />
        <el-input
          show-word-limit
          clearable
          v-model="formObj.location"
          placeholder="地址"
        />
      </el-form-item>
      <el-form-item label="经度" prop="longitude">
        <!-- <el-input type="number" v-model="formObj.longitude" placeholder="经度" /> -->
        <el-input-number
          v-model="formObj.longitude"
          :precision="6"
@@ -37,7 +48,6 @@
        />
      </el-form-item>
      <el-form-item label="纬度" prop="latitude">
        <!-- <el-input type="number" v-model="formObj.latitude" placeholder="纬度" /> -->
        <el-input-number
          v-model="formObj.latitude"
          :precision="6"
@@ -46,7 +56,12 @@
        />
      </el-form-item>
      <el-form-item label="联系人" prop="contacts">
        <el-input show-word-limit clearable v-model="formObj.contacts" placeholder="联系人" />
        <el-input
          show-word-limit
          clearable
          v-model="formObj.contacts"
          placeholder="联系人"
        />
      </el-form-item>
      <el-form-item label="联系电话" prop="contactst">
        <el-input type="tel" v-model="formObj.contactst" placeholder="联系电话">
@@ -59,7 +74,9 @@
      </el-form-item>
      <el-form-item label="状态" prop="online">
        <el-switch v-model="formObj.online" />
        <span style="margin-left: 16px">{{ formObj.online ? '在线' : '下线' }}</span>
        <span style="margin-left: 16px">{{
          formObj.online ? '在线' : '下线'
        }}</span>
      </el-form-item>
      <el-form-item label="编号" prop="index">
        <el-input-number readonly v-model="formObj.index" :step="1" :min="0" />
@@ -69,21 +86,31 @@
</template>

<script setup>
import { defineProps, defineEmits, reactive, ref, unref, watch, computed } from 'vue';
import {
  defineProps,
  defineEmits,
  reactive,
  ref,
  unref,
  watch,
  computed
} from 'vue';
import { enumScene } from '@/enum/scene';
import sceneApi from '@/api/fysp/sceneApi';

const props = defineProps({
  //场景基本信息
  model: {
    type: Object,
    default: () => {
      return {};
    }
    type: Object
    // default: () => {
    //   return {};
    // }
  },
  //是创建或者更新场景
  create: Boolean
});

// const formInfo = ref();

// åœºæ™¯åŸºæœ¬ä¿¡æ¯ï¼Œåšç›¸åº”的数据格式化
const formInfo = computed(() => {
@@ -92,7 +119,16 @@

const emit = defineEmits(['onSubmit', 'onCancel']);

const sceneTypes = ref(enumScene(2, false));
// watch(
//   () => props.model,
//   (nV, oV) => {
//     if (nV != oV && nV) {
//       formInfo.value = parseSceneBaseInfo(nV);
      
//     }
//   }
// );

const rules = reactive({
  name: [
    {
@@ -138,6 +174,7 @@
 */
function parseSceneBaseInfo(param) {
  const s = unref(param);
  if (s) {
  s._scenetype = {
    label: s.type,
    value: s.typeid + ''
@@ -155,6 +192,7 @@
  };

  s.online = s.extension1 != '0';
  }

  return s;
}
@@ -204,7 +242,9 @@

  v.value.updatedate = new Date().toISOString();

  return props.create ? createScene(v.value, success, fail) : updateScene(v.value, success, fail);
  return props.create
    ? createScene(v.value, success, fail)
    : updateScene(v.value, success, fail);
}
function cancel() {
  emit('onCancel');

 src/views/fysp/scene/SceneEditDialog.vue

@@ -1,20 +1,18 @@
<template>
  <el-dialog>
    <div class="sub-title">账户信息</div>
    <el-row>
      <FormCol>
        <CompUserInfo :form-info="formUser" />
      </FormCol>
    </el-row>
    <el-divider />
    <div class="sub-title">基本信息</div>
    <el-row>
      <FormCol>
        <CompSceneBaseInfo :model="formScene" />
      </FormCol>
    </el-row>
    <template v-if="formScene.typeid == 1">
      <el-divider />
  <el-dialog
    :model-value="modelValue"
    @update:model-value="handleDialogChange"
    top="2vh"
    class="dialog-wrapper"
    v-loading="loading"
  >
    <el-scrollbar
      ref="scrollbarRef"
      height="86vh"
      v-loading="loading"
      :always="true"
    >
      <template v-if="formScene && formScene.typeid == 1">
      <div class="sub-title">工地信息</div>
      <el-row>
        <FormCol>
@@ -24,8 +22,8 @@
          />
        </FormCol>
      </el-row>
      <el-divider />
      <div class="sub-title">设备信息</div>
        <!-- <el-divider /> -->
        <!-- <div class="sub-title">设备信息</div>
      <el-row>
        <FormCol>
          <CompSceneDeviceInfo
@@ -33,12 +31,27 @@
            :scene-type="formScene.typeid"
          />
        </FormCol>
      </el-row>
      </el-row> -->
        <el-divider />
    </template>
      <div class="sub-title">基本信息</div>
      <el-row>
        <FormCol>
          <CompSceneBaseInfo :model="formScene" />
        </FormCol>
      </el-row>
      <el-divider />
      <div class="sub-title">账户信息</div>
      <el-row>
        <FormCol>
          <CompUserInfo :form-info="formUser" />
        </FormCol>
      </el-row>
    </el-scrollbar>
  </el-dialog>
</template>
<script setup>
import { ref } from 'vue';
import { ref, watch } from 'vue';

import sceneApi from '@/api/fysp/sceneApi';
import userApi from '@/api/fysp/userApi';
@@ -48,11 +61,77 @@
import CompUserInfo from '../user/CompUserInfo.vue';

const props = defineProps({
  modelValue: Boolean,
  sceneId: String
});

const emits = defineEmits(['update:modelValue']);

const formUser = ref({});
const formScene = ref({});
const formScene = ref();
const formSubScene = ref({});
const formSceneDevice = ref({});
const loading = ref(false);
const scrollbarRef = ref();

watch(
  () => [props.modelValue, props.sceneId],
  (nV, oV) => {
    if (nV[0] && nV[1]) {
      fetchSceneInfo();
    }
  }
);

function handleDialogChange(value) {
  formUser.value = {};
  formScene.value = undefined;
  formSubScene.value = {};
  formSceneDevice.value = {};

  emits('update:modelValue', value);
}

function fetchSceneInfo() {
  const sid = props.sceneId;
  loading.value = true;
  sceneApi
    .getSceneDetail(sid)
    .then((res) => {
      userApi
        .getUserByScene(sid)
        .then((user) => {
          //场景
          if (res.data.scense) formScene.value = res.data.scense;
          if (res.data.subScene) {
            formSubScene.value = res.data.subScene;
          } else {
            formSubScene.value = {
              sGuid: formScene.value.guid
            };
          }
          if (res.data.sceneDevice) {
            formSceneDevice.value = res.data.sceneDevice;
          } else {
            formSceneDevice.value = {
              sGuid: formScene.value.guid
            };
          }
          //账户
          if (user) {
            formUser.value = user;
          } else {
            formUser.value = {
              dguid: sid
            };
          }
        })
        .finally(() => {
          loading.value = false;
          scrollbarRef.value.setScrollTop(0);
        });
    })
    .catch(() => (loading.value = false));
}
</script>
<style scoped></style>