198 lines
6.7 KiB
Vue
198 lines
6.7 KiB
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',border:'0px' }" :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;">设备类型：<a-tag color="purple">摄像头</a-tag></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-col :span="24">
|
||
<a-divider style="margin: 10px 0 0 0" />
|
||
</a-col>
|
||
</a-row>
|
||
</template>
|
||
<a-row>
|
||
<a-col :span="24" style="margin-top: -10px;">
|
||
<span style="text-align: right;background:#f6f6f6;padding: 2px 10px;border-radius:10px;">NUID: {{item.nuId?item.nuId:'未配置'}}</span>
|
||
</a-col>
|
||
<a-col :span="24" style="text-align: center;">
|
||
<img src="../../../assets/iot/sxt.png" style="width: 84px;margin-top: 10px;">
|
||
</a-col>
|
||
<a-col :span="12" style="text-align: left;margin-top: -20px;">
|
||
<div style="font-weight: 700;font-size:16px;">{{item.syncType =='1'?'已同步':'未同步'}}</div>
|
||
<div style="font-size: 12px;">同步状态</div>
|
||
</a-col>
|
||
<a-col :span="12" style="text-align: right;margin-top: -20px;">
|
||
<div style="font-weight: 700;font-size:16px;">
|
||
<span v-if="item.maintainStatus=='0'">正常</span>
|
||
<span v-if="item.maintainStatus=='1'" style="color: red;">维修中</span>
|
||
<span v-if="item.maintainStatus=='2'">报废</span>
|
||
</div>
|
||
<div style="font-size: 12px;">维修状态</div>
|
||
</a-col>
|
||
<a-col>
|
||
<a-divider style="margin: 12px 0 16px 0px;" />
|
||
</a-col>
|
||
<a-col :span="24" style="text-align: center;">
|
||
<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>
|