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" class="btn-control" @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 class="btn-control" type="primary" @click="handlerOperation">操作日志</a-button>
      <a-button type="primary" @click="handlerClock">同步PLC时钟</a-button>
      <a-button class="btn-control" type="primary" @click="handlerCameraDetail">视频墙详情</a-button>
      <a-button :class="index % 2 == 1 ? 'btn-control' : ''" v-for="(item, index) in dictCodes" :key="index"
        type="primary" @click="handlerFz(item)">{{ item.title }}</a-button>
      <a-button class="device-control-btn" type="primary" @click="handlerDeviceChoice">集控设备选择</a-button>
    </div>
    <div class="content-r-container">
      <div class="content-r-box" v-for="(item, index) in infoDatas" :key="index" @click="handlerAddorDel(item)">
        <div class="box-title">
          <SvgIcon v-show="item.iconControl" class="title-icon" size="16" name="select-control" />
          <SvgIcon v-show="!item.iconControl" class="title-icon" size="16" name="unselect-control" />
          <div class="title-text">{{ item.strinstallpos }}</div>
          <div class="title-detail" @click="handlerDetail(item.deviceID)">详情</div>
        </div>
        <div class="box-content">
          <!-- plc时钟显示 -->
          <div class="timePlcNow">{{ item.nowTime }}</div>
          <!-- 二三维信息 -->
          <gateSVG v-if="item.gateStyle == 'fmSp1' || item.gateStyle == 'fm_fc_ssl'"
            :ref="(el) => setChildRef(el, index)" :identify="index">
          </gateSVG>
          <gateDualSVG v-else :ref="(el) => setChildRef(el, index)" :identify="index">
          </gateDualSVG>
        </div>
        <img src="@/assets/images/camera.png" alt="" @click="handlerCamera(item, index)" />
        <div class="setting-time">
          <div>
            <span>定时开启时间:</span>
            <span class="set-time">{{ item.doorOpenTime }}</span>
          </div>
          <div>
            <span>启用状态:</span>
            <span class="set-time">{{ item.timerSwitch == '1' ? '启用' : '禁用' }}</span>
          </div>
          <div>
            <span>定时关闭时间:</span>
            <span class="set-time">{{ item.doorCloseTime }}</span>
          </div>
        </div>
      </div>

    </div>
    <!-- 同步开启/关闭弹窗 -->
    <syncModal :visible="visible" :tooltipText="tooltipText" @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 :deviceId="deviceId"></CameraModal>
    </Modal>
    <!-- 操作日志 -->
    <operationModal :visible="visibleOperation" @handleCancel="handleCancelOperation">
    </operationModal>
    <!-- 集控设备选择 -->
    <DeviceControl v-if="visibleDeviceControl" :deviceControlData="gateControlData" @confirmChoice="handlerChoice">
    </DeviceControl>
    <!-- 视屏墙详情 -->
    <Modal :title="cameraDetailTitle" :widthV="'1450px'" :footer="null" :visible="cameraDetailVisible" :centered="true"
      :destroyOnClose="true" @cancel="handleCancelCameraDetail">
      <CameraDetailModal :cameraData="cameraData"></CameraDetailModal>
    </Modal>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, inject, watch, nextTick, onMounted } from 'vue';
import syncModal from './syncModal.vue';
import timeSetModal from './timeSetModal.vue';
import CameraModal from './cameraModal.vue';
import CameraDetailModal from './cameraDetailModal.vue'
import Modal from './Modal.vue';
import tipModal from './tipModal.vue'
import gateDualSVG from './gateDualSVG.ssl.vue'
import gateSVG from './gateSVG.ssl.vue'
import operationModal from './operationModal.vue'
import DeviceControl from './deviceControl.vue'
import { useRouter } from 'vue-router';
import { devicecontrol, insertSyncRule, GetSyncRule, controlList, confirmChoice, manualTimeSync, isPasswordCurrect, editDoor } from '../airdoor.api'
import { doorStatus } from '../airdoor.data'
// import { getModelComponent } from '../airdoor.data'
import { useMessage } from '/@/hooks/web/useMessage';
import { SvgIcon } from '/@/components/Icon';
import { getDictItemsByCode } from '/@/utils/dict';

let props = defineProps({
  infoData: {
    type: Array,
    default: () => {
      return [];
    },
  },
});
const { createMessage } = useMessage();
const globalConfig = inject<any>('globalConfig');
let router = useRouter();
//判断当前开启的是同步/集控密码弹窗
let isTbOrJk = ref('')
let infoDatas = ref<any[]>([])
//同步开启/关闭弹窗-控制显示与隐藏
let visible = ref(false);
let visibleStatus = ref('')
//设置定时弹窗-控制显示与影藏
let visibleTime = ref(false);
let Ids = ref('')
//摄像头-控制显示与隐藏
let modalVisible = ref(false);

let deviceId = ref('')
//操作日志弹窗显示/关闭
let visibleOperation = ref(false)
const childRefs = ref<any[]>([])
//集控风门列表
let gateControlData = ref<any[]>([])
//集控设备弹窗显示
let visibleDeviceControl = ref(false)
let tooltipText = ref('')
//视屏墙详情
let cameraDetailVisible = ref(false)
let cameraDetailTitle = ref('视屏墙详情信息')
let cameraData = ref<any[]>([])
//风门集控类型-字典
const dictCodes = getDictItemsByCode('gateCentralizedControl');
//是否开启分组
let isOpenFz = ref('')
//分组选中
let choiceFzData = ref<any[]>([])

const setChildRef = (el, index) => {
  childRefs.value[index] = el
}
//同步开启/关闭--弹窗
function handlerOpenOrClose(data) {
  visible.value = true;
  visibleStatus.value = data
  isTbOrJk.value = 'Tb'
  tooltipText.value = '您正在执行 “开启/关闭” 全部风门的操作，请输入密码执行。'
}
//确定
async function handleOk(param) {
  if (isTbOrJk.value == 'Tb') {
    let deviceStr = isOpenFz ? choiceFzData.value.map(v => v.deviceID).join(',') : 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 = ''
      doorStatus.openOrclose = true
      doorStatus.statusCode = visibleStatus.value
      setTimeout(() => {
        doorStatus.openOrclose = false
        doorStatus.statusCode = ''
      }, 60000 * 5)
    }
  } else {
    let res = await isPasswordCurrect({ password: param.pass })
    if (res === true) {
      visible.value = param.visib
      visibleDeviceControl.value = true
    } else {
      visible.value = param.visib
    }
  }
}
//取消
function handleCancel(param) {
  visible.value = param;
  visibleStatus.value = ''
  isTbOrJk.value = ''
  tooltipText.value = ''
}

//定时设置
async function handlerTimeSet() {
  visibleTime.value = true;
  let res = await GetSyncRule({})
  Ids.value = res[0]['id'] || ''
  console.log(res, '读取规则')
}
//确定
async function handleOkTime(param) {
  let timerSwitch = param.formState.checked ? '1' : '0'
  let res = await insertSyncRule({ timerSwitch: timerSwitch, settimeOnHour: param.formState.hourS, settimeOnMin: param.formState.minuteS, settimeOffHour: param.formState.hourE, settimeOffMin: param.formState.minuteE, password: param.formState.passWord })
  if (res) {
    visibleTime.value = param.visib
    Ids.value = ''
    if (res.code == 500) {
      createMessage.error(res.message);
    } else {
      createMessage.success(res.message);
    }

  }

}
//取消
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;
  deviceId.value = item.deviceID
}
//摄像头弹窗关闭
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');
}
//获取集控风门列表
async function getControlList() {
  let res = await controlList({ devicekind: 'gate', pageNo: 1, pageSize: 100 })
  gateControlData.value = res.records || []
}
//集控设备选择点击
function handlerDeviceChoice() {
  isTbOrJk.value = 'Jk'
  visible.value = true;
  tooltipText.value = '您正在执行 “集控” 全部风门的操作，请输入密码执行。'
}
//集控设备确定选择
async function handlerChoice(param) {
  let data: any[] = []
  param.forEach(el => {
    let list = gateControlData.value.find(v => v.id == el)
    list.isAutosync = '1'
    data.push(list)
  })
  let res = await confirmChoice({ obj: data })
  if (res) {
    visibleDeviceControl.value = false
  }
}
//同步PLC时钟
async function handlerClock() {
  let res = await manualTimeSync()
  if (res) {
    createMessage.success('PLC时钟同步成功!');
  }
}
//视屏详情-点击
function handlerCameraDetail() {
  cameraData.value.length = 0
  infoDatas.value.forEach(el => {
    if (el.cameras.length) {
      cameraData.value.push(...el.cameras)
    }
  })
  cameraDetailVisible.value = true
}
//视屏墙详情关闭
function handleCancelCameraDetail(param) {
  cameraDetailVisible.value = param
}

//设备集控-分组控制
function handlerFz(item) {
  isOpenFz.value = item.value
  if (item.value == '0') {
    infoDatas.value.forEach(el => {
      el.iconControl = true
    })
    choiceFzData.value = [...infoDatas.value]
  } else {
    infoDatas.value.forEach(el => {
      if (el.gateCentralizedControl == item.value) {
        el.iconControl = true
      } else {
        el.iconControl = false
      }
    })
    choiceFzData.value = infoDatas.value.filter(v => v.gateCentralizedControl == item.value)
  }
}
//分组中添加或删除元素
async function handlerAddorDel(item) {
  if (isOpenFz.value) {
    item.iconControl = !item.iconControl
    if (item.iconControl) {
      choiceFzData.value.push(item)
    } else {
      choiceFzData.value.pop()
    }
    // // let res = await editDoor({ gateCentralizedControl: isOpenFz.value, id: item.deviceID })
    console.log(choiceFzData.value, '开启分组并且当前点击项已有分组')
  } else {
    isOpenFz.value = ''
  }
}


watch(() => props.infoData, (newV, oldV) => {
  infoDatas.value = newV
  isOpenFz.value = ''
  if (infoDatas.value.length) {
    infoDatas.value.forEach((el: any, index: number) => {
      el = Object.assign(el, el.readData)
      el.iconControl = false
      el.nowTime = el.PLCyear ? `20${el.PLCyear}-${el.PLCmonth}-${el.PLCday} ${el.PLChour}:${el.PLCminute}:${el.PLCsecond}` : ''
      el.doorOpenTime = el.time_on_hour ? `${el.time_on_hour.length != 1 ? el.time_on_hour : 0 + el.time_on_hour}:${el.time_on_min.length != 1 ? el.time_on_min : 0 + el.time_on_min}` : '--'
      el.doorCloseTime = el.time_off_hour ? `${el.time_off_hour.length != 1 ? el.time_off_hour : 0 + el.time_off_hour}:${el.time_off_hour.length != 1 ? el.time_off_hour : 0 + el.time_off_hour}` : '--'
      monitorAnimation(el, index);
    })

  }
})

onMounted(() => {
  getControlList()
})

</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;
    .device-control-btn {
      position: absolute;
      right: 35px;
      top: 30px;
    }
  }

  .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-icon {
        position: absolute;
        left: 10px;
        top: 7px;
      }

      .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);
      }

      .timePlcNow {
        position: absolute;
        right: 5px;
        top: 0px;
        color: #fff;
        font-size: 12px;

      }

      .setting-time {
        width: 100%;
        position: absolute;
        bottom: -25px;
        left: 0;
        display: flex;
        justify-content: space-around;
        color: #fff;
        font-size: 12px;
        padding: 0px 25px;
      }

      .set-time {
        color: rgba(60, 242, 255);
        margin: 0px 5px;
      }

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

  .btn-control {
    margin: 0px 10px;
  }
}

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