mky-vent-base/src/views/vent/monitorManager/airDoor/components/door-content-r.vue

<template>
  <div class="door-content-r">
    <div class="content-r-btn">
      <a-button type="primary" @click="handlerOpenOrClose('open')">
        <SvgIcon class="icon-style" size="14" color="#30b3fc" name="open-door" />
        同步开启
      </a-button>
      <a-button type="primary" style="margin: 0px 10px" @click="handlerOpenOrClose('close')">
        <SvgIcon class="icon-style" size="14" color="#30b3fc" name="close-door" />
        同步关闭
      </a-button>
      <a-button type="primary" @click="handlerTimeSet">
        <SvgIcon class="icon-style" size="14" color="#30b3fc" name="time-setting-door" />
        定时设置
      </a-button>
      <a-button style="margin: 0px 10px" type="primary" @click="handlerOperation">操作日志</a-button>
    </div>
    <div class="content-r-container">
      <div class="content-r-box" v-for="(item, index) in infoDatas" :key="index">
        <div class="box-title">
          <div class="title-text">{{ item.strinstallpos }}</div>
          <div class="title-detail" @click="handlerDetail(item.deviceID)">详情</div>
        </div>
        <div class="box-content">
          <!-- 二三维信息 -->
          <!-- <gateDualSVG v-if="item.ndoorcount == '2'" :ref="`modelRef${index}`" :indexCode="index"></gateDualSVG>
          <gateSVG v-if="item.ndoorcount == '1'" :ref="`modelRef${index}`" :indexCode="index"></gateSVG> -->
          <!-- <component :ref="`modelRef${index}`" :indexCode="index"
            :is="getModelComponent(globalConfig.is2DModel, item.deviceType)" /> -->
          <gateDualSVG v-if="item.ndoorcount == '2'" :ref="(el) => setChildRef(el, index)" :indexCode="index">
          </gateDualSVG>
          <gateSVG v-if="item.ndoorcount == '1'" :ref="(el) => setChildRef(el, index)" :indexCode="index"></gateSVG>
        </div>
        <img src="@/assets/images/camera.png" alt="" @click="handlerCamera(item, index)" />
      </div>
    </div>
    <!-- 同步开启/关闭弹窗 -->
    <syncModal :visible="visible" @handleCancel="handleCancel" @handleOk="handleOk"></syncModal>
    <!-- 定时设置弹窗 -->
    <timeSetModal :visibleTime="visibleTime" @handleCancelTime="handleCancelTime" @handleOk="handleOkTime">
    </timeSetModal>
    <!--30s延时提示弹窗-->
    <tipModal></tipModal>
    <!-- 摄像头信息 -->
    <Modal :visible="modalVisible" :centered="true" :destroyOnClose="true" @cancel="handleCancelCamera">
      <CameraModal :cameraData="cameraData"></CameraModal>
    </Modal>
    <!-- 操作日志 -->
    <operationModal :visible="visibleOperation" @handleCancel="handleCancelOperation">
    </operationModal>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, inject, watch, nextTick } from 'vue';
import syncModal from './syncModal.vue';
import timeSetModal from './timeSetModal.vue';
import CameraModal from './cameraModal.vue';
import Modal from './Modal.vue';
import tipModal from './tipModal.vue'
import gateDualSVG from './gateDualSVG.vue'
import gateSVG from './gateSVG.vue'
import operationModal from './operationModal.vue'
import { useRouter } from 'vue-router';
import { devicecontrol, insertSyncRule, GetSyncRule } from '../airdoor.api'
// import { getModelComponent } from '../airdoor.data'
import { useMessage } from '/@/hooks/web/useMessage';
import { SvgIcon } from '/@/components/Icon';

let props = defineProps({
  infoData: {
    type: Array,
    default: () => {
      return [];
    },
  },
});
const { createMessage } = useMessage();
const globalConfig = inject<any>('globalConfig');
let router = useRouter();
let infoDatas = ref<any[]>([])
//同步开启/关闭弹窗-控制显示与隐藏
let visible = ref(false);
let visibleStatus = ref('')
//设置定时弹窗-控制显示与影藏
let visibleTime = ref(false);
let Ids = ref('')
//摄像头-控制显示与隐藏
let modalVisible = ref(false);
let cameraData = reactive({})
//操作日志弹窗显示/关闭
let visibleOperation = ref(false)
const childRefs = ref<any[]>([])
const setChildRef = (el, index) => {
  childRefs.value[index] = el
}



//同步开启/关闭--弹窗
function handlerOpenOrClose(data) {
  visible.value = true;
  visibleStatus.value = data
}
//确定
async function handleOk(param) {
  let deviceStr = infoDatas.value.map(v => v.deviceID).join(',')
  let paramcode = visibleStatus.value == 'open' ? 'sameTimeOpen' : 'sameTimeClose'
  let res = await devicecontrol({ deviceids: deviceStr, paramcode: paramcode, password: param.pass || globalConfig?.simulatedPassword })
  if (res) {
    visible.value = param.visib
    visibleStatus.value = ''
  }
}
//取消
function handleCancel(param) {
  visible.value = param;
  visibleStatus.value = ''
}

//定时设置
async function handlerTimeSet() {
  visibleTime.value = true;
  let res = await GetSyncRule({})
  Ids.value = res[0]['id'] || ''
  console.log(res, '读取规则')
}
//确定
async function handleOkTime(param) {
  console.log(param, '定时参数---')
  let start_time = `${param.formState.hourS}:${param.formState.minuteS}:${param.formState.secondS}`
  let end_time = `${param.formState.hourE}:${param.formState.minuteE}:${param.formState.secondE}`
  let enabled = param.formState.checked ? '1' : '0'
  let res = await insertSyncRule({ startTime: start_time, endTime: end_time, enabled: enabled, id: Ids.value, password: param.formState.passWord })
  console.log(res, '设置定时---')
  if (res) {
    visibleTime.value = param.visib
    Ids.value = ''
    createMessage.success('设置定时成功!');
  }

}
//取消
function handleCancelTime(param) {
  visibleTime.value = param;
}
//详情跳转
function handlerDetail(id) {
  router.push(`/monitorChannel/monitor-gate?id=${id}&deviceType=gate`);
}
//摄像头切换
function handlerCamera(item, index) {
  modalVisible.value = true;
  cameraData = Object.assign({}, item)
}
//摄像头弹窗关闭
function handleCancelCamera(param) {
  modalVisible.value = param;
}
//操作日志弹窗-打开
function handlerOperation() {
  visibleOperation.value = true
}

//操作日志弹窗-关闭
function handleCancelOperation(param) {
  visibleOperation.value = param
}
//模型动画
function monitorAnimation(selectData, index) {
  childRefs.value[index]?.animate?.(selectData.frontGateOpen == '1', selectData.midGateOpen == '1', selectData.rearGateOpen == '1');
}


watch(() => props.infoData, (newV, oldV) => {
  console.log(newV, 'new---')
  infoDatas.value = newV
  if (newV.length) {
    nextTick(() => {
      newV.forEach((el: any, index: number) => {
        el = Object.assign(el, el.readData)
        monitorAnimation(el, index);
      })
    })
  }
})


</script>

<style lang="less" scoped>
@import '/@/design/theme.less';

@{theme-deepblue} {
  .door-content-r {
    --image-camera_bg: url('/@/assets/images/themify/deepblue/vent/camera_bg.png');
    --image-btn: url(/@/assets/images/themify/deepblue/files/details/btn.png);
  }
}

.door-content-r {
  --image-camera_bg: url('/@/assets/images/vent/camera_bg.png');
  --image-btn: url(/@/assets/images/files/details/btn.png);
  width: 100%;
  height: 100%;

  .icon-style {
    margin-right: 5px;
  }

  .content-r-btn {
    width: 100%;
    height: 40px;
    padding: 0px 10px;
    display: flex;
    // align-items: center;
  }

  .content-r-container {
    width: 100%;
    height: calc(100% - 40px);
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

    .content-r-box {
      position: relative;
      width: 376px;
      height: 270px;
      margin: 10px 5px;
      background: var(--image-camera_bg);
      background-size: 100% 100%;

      .box-title {
        position: absolute;
        left: 50%;
        top: 12px;
        transform: translate(-50%, 0);
        width: 95%;
        height: 28px;
        line-height: 28px;
        text-align: center;
        color: #fff;
        background-color: rgba(51, 211, 255, 0.2);
      }

      .title-detail {
        position: absolute;
        right: 12px;
        top: 0px;
        color: rgba(60, 242, 255);
        font-size: 12px;
        cursor: pointer;
      }

      .box-content {
        position: absolute;
        left: 50%;
        top: 40px;
        transform: translate(-50%, 0);
        width: 95%;
        height: calc(100% - 40px);
      }

      img {
        position: absolute;
        right: 20px;
        bottom: 15px;
        width: 20px;
        height: 20px;
        cursor: pointer;
      }
    }
  }
}

::v-deep .zxm-btn-primary {
  background-color: transparent;
  border: none;
  background: var(--image-btn) no-repeat !important;
  background-size: 100% 100% !important;
}
</style>