hldy_yunwei_vue/src/views/deviceSync/compoents/SxtList.vue

<template>
      <a-col v-for="(item,index) in tableData" :key="index" :xs="24" :sm="24" :md="12" :lg="12" :xl="8" :xxl="6" style="padding: 8px;">
        <a-card style="width: 100%;border-radius: 8px;" :headStyle="{ height: '60px', padding: '0 24px' }"  :bodyStyle="{ padding: '24px 24px 4px 24px' }">
          <template #title>
              <a-row style="font-weight: normal;">
                <a-col :span="18" style="font-size: 14px;">
                      <div style="font-size: 12px;">SN：<span style="font-weight: bold;">{{item.sn}}</span></div>
                      <div style="font-size: 12px;">设备类型：摄像头</div>
                </a-col>
                <a-col :span="6" style="text-align: center;padding-top: 4px;">
                  <div :class="item.deviceStatus=='1'?'zxClass':'lxClass'">{{item.deviceStatus =='1'?'在线':'离线'}}</div>
                </a-col>
              </a-row>
          </template>
          <a-row>
            <a-col :span="24" style="margin-top: -10px;">
              NUID: {{item.nuId?item.nuId:'未配置'}}
            </a-col>
            <a-col :span="12" style="text-align: left;margin-top: 10px;">
              同步状态：{{item.syncType =='1'?'已同步':'未同步'}}
            </a-col>
            <a-col :span="12" style="text-align: left;margin-top: 10px;">
              维修状态：
              <span v-if="item.maintainStatus=='0'">正常</span>
              <span v-if="item.maintainStatus=='1'" style="color: red;">维修中</span>
              <span v-if="item.maintainStatus=='2'">报废</span>
            </a-col>
            <a-col :span="24" style="text-align: center;margin-top: 20px;">
              <span style="display:inline-block;cursor: pointer;" @click="handlePreview(item)">
                <span class="tbClass"><img src="../../../assets/iot/a14.png" style="width:20px;" /></span><br/>
                <span class="antTitle">预览</span>
              </span>
              <span style="display:inline-block;cursor: pointer;margin-left:10px;" @click="handleDel(item)" v-if="item.syncType=='0'">
                <span class="tbClass"><img src="../../../assets/iot/a15.png" style="width:20px;" /></span><br/>
                <span class="antTitle">移除</span>
              </span>
              <span style="display:inline-block;cursor: pointer;margin-left:10px;" @click="handleWeixiu(item)" v-if="item.maintainStatus=='1'" >
                <span class="tbClass"><img src="../../../assets/iot/a6.png" style="width:20px;" /></span><br/>
                <span class="antTitle">维修</span>
              </span>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    
    <CameraPreviewModal ref="previewModal"></CameraPreviewModal>
    <a-modal v-model:visible="wxvisible" title="维修" @ok="handleWxOk">
      <div style="padding: 10px;text-align: center;">
        <div style="line-height: 60px;">
          维修状态：<a-radio-group v-model:value="maintainStatus" :options="plainOptions" />
        </div>
      </div>
    </a-modal>
</template>

<script lang="ts" name="iot-nuIotCameraInfo" setup>
import {ref} from 'vue';
import {Modal} from 'ant-design-vue';
import { useMessage } from '/@/hooks/web/useMessage';
import CameraPreviewModal from '/@/views/iot/tplink/camera/components/CameraPreviewModal.vue'
import { c } from 'node_modules/vite/dist/node/moduleRunnerTransport.d-DJ_mE5sf';
import { defHttp } from '/@/utils/http/axios';
  
 const wxvisible = ref<boolean>(false);
 const bxInfo = ref<any>({});
 const maintainStatus = ref<string>('');
const previewModal = ref();
const { createMessage } = useMessage();
  const emit = defineEmits(['register', 'ok']);
  const props = defineProps({
    tableData: { type: Object, default: () => ([]) },
  });
const plainOptions = [
  { label: '正常', value: '0' },
  { label: '报废', value: '2' },
];
  function handleWxOk() {
    if(!maintainStatus.value){
      createMessage.error('请选择报修状态！');
    }else{
      wxvisible.value = false;
      var params = {
        id: bxInfo.value.id,
        departServerUrl: bxInfo.value.departServerUrl,
        maintainStatus: maintainStatus.value,
      }
      defHttp.post({ url: '/iot/tplink/cameraInfo/weixiu', params }).then(() => {
        emit("ok");
      });
      
    }
  }
  /**
   * 维修
   */
  function handleWeixiu(record){
    bxInfo.value = record;
    wxvisible.value = true;
  }
  /**
   * 预览
   */
  function handlePreview(record) {
    previewModal.value.disableSubmit = true;
    previewModal.value.edit(record);
  }
  /**
   * 删除
   */
  function handleDel(record) {
    console.log("🚀 ~ handleDel ~ record:", record)
    const list = props.tableData;
    if(list.length==1){
      createMessage.error('请至少保留一个摄像头！');
    }else{
      Modal.confirm({
        title: '移除摄像头',
        content: '是否要移除此摄像头？',
        okText: '确认',
        cancelText: '取消',
        onOk: async () => {
          // todo 删除
          defHttp.post({ url: '/iot/tplink/cameraInfo/updateDepartById', params: { id: record.id } }).then(() => {
            emit("ok");
          });
        },
      });
    }
    
  }

</script>

<style lang="less" scoped>


.zxClass{
  font-size:14px;
  background: linear-gradient(to right, #1ea0fa, #017de9);
  border-radius: 8px;
  height: 35px;
  color: white;
  line-height: 35px;
}

.lxClass{
  font-size:14px;
  background: linear-gradient(to right, #cccccc, #cccccc);
  border-radius: 8px;
  height: 35px;
  color: white;
  line-height: 35px;
}
.tbClass{
  background: #f6f6f6;
  padding: 8px;
  border-radius: 5px;
}
.antTitle{
  margin-top: 10px;
  display: block;
  font-size: 12px;
}



.ytbClass{
  font-size:12px;
  background: linear-gradient(to right, #1ea0fa, #017de9);
  border-radius: 8px;
  height: 20px;
  color: white;
  line-height: 20px;
}

.wtbClass{
  font-size:12px;
  background: linear-gradient(to right, #cccccc, #cccccc);
  border-radius: 8px;
  height: 20px;
  color: white;
  line-height: 20px;
}

</style>