|
|
@@ -0,0 +1,124 @@
|
|
|
+<template>
|
|
|
+ <div class="advanced-linkage h-full flex flex-col gap-2 p-[15px]">
|
|
|
+ <el-table class="flex-1" :border="true" :data="tableData" height="100%" style="width: 100%">
|
|
|
+ <el-table-column type="index" width="50" />
|
|
|
+ <el-table-column prop="gmt_created" label="创建时间" width="180" />
|
|
|
+ <el-table-column prop="name" label="设备名称" />
|
|
|
+ <el-table-column prop="state" label="设备状态">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-tag v-if="scope.row.state === 1" type="success">在线</el-tag>
|
|
|
+ <el-tag v-else type="danger">离线</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="version" label="设备版本" />
|
|
|
+ <el-table-column prop="ip_address" label="IP地址" />
|
|
|
+ <el-table-column prop="port" label="设备端口" />
|
|
|
+ <el-table-column width="180" align="center" v-if="$auth(['devicegetDevPlatConfigs'])">
|
|
|
+ <template #header>
|
|
|
+ <el-button @click="addCamera">
|
|
|
+ <i-material-symbols:add />
|
|
|
+ {{ $t('tjsb') }}
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button size="small" @click="handleEdit(scope.$index, scope.row)">{{
|
|
|
+ $t('xg')
|
|
|
+ }}</el-button>
|
|
|
+ <el-popconfirm
|
|
|
+ :confirm-button-text="$t('qd')"
|
|
|
+ :cancel-button-text="$t('qx')"
|
|
|
+ :title="$t('msg7')"
|
|
|
+ @confirm="() => handleDelete(scope.$index, scope.row)"
|
|
|
+ >
|
|
|
+ <template #reference>
|
|
|
+ <el-button size="small" type="primary">{{ $t('sc') }}</el-button>
|
|
|
+ </template>
|
|
|
+ </el-popconfirm>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div class="flex justify-end">
|
|
|
+ <el-pagination
|
|
|
+ v-model:current-page="pagination.page"
|
|
|
+ v-model:page-size="pagination.pageSize"
|
|
|
+ :page-sizes="pagination.pageSizes"
|
|
|
+ :background="true"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="pagination.total"
|
|
|
+ @size-change="pagination.onUpdatePageSize"
|
|
|
+ @current-change="pagination.onChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <el-dialog
|
|
|
+ v-model="dialogVisible"
|
|
|
+ width="500"
|
|
|
+ :title="dialogTitle"
|
|
|
+ :destroy-on-close="true"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ >
|
|
|
+ <DetailCamera
|
|
|
+ :cameras-info="activeCameras"
|
|
|
+ :sign="sign"
|
|
|
+ v-model="dialogVisible"
|
|
|
+ @update="init"
|
|
|
+ />
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script setup>
|
|
|
+ import { ElMessage } from 'element-plus'
|
|
|
+ import DetailCamera from './components/detailCamera.vue'
|
|
|
+
|
|
|
+ const { t: $t } = useI18n({ useScope: 'global' })
|
|
|
+ const { API_DEVICES_GET, API_TP_CAMERAS_DEL } = useRequest()
|
|
|
+ const tableData = ref([])
|
|
|
+ const dialogVisible = ref(false)
|
|
|
+ const dialogTitle = ref($t('tjsb'))
|
|
|
+ const sign = ref('add')
|
|
|
+ const activeCameras = ref({})
|
|
|
+
|
|
|
+ const pagination = reactive({
|
|
|
+ page: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ total: 0,
|
|
|
+ showSizePicker: true,
|
|
|
+ pageSizes: [10, 50, 100, 500],
|
|
|
+ onChange: (page) => {
|
|
|
+ pagination.page = page
|
|
|
+ },
|
|
|
+ onUpdatePageSize: (pageSize) => {
|
|
|
+ pagination.pageSize = pageSize
|
|
|
+ pagination.page = 1
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ const init = async () => {
|
|
|
+ const res = await API_DEVICES_GET()
|
|
|
+ tableData.value = res.items
|
|
|
+ pagination.total = res.total_items
|
|
|
+ pagination.page = res.current
|
|
|
+ pagination.pageSize = res.limit
|
|
|
+
|
|
|
+ // tableData.value = res
|
|
|
+ }
|
|
|
+ const handleEdit = (index, row) => {
|
|
|
+ sign.value = 'edit'
|
|
|
+ dialogTitle.value = $t('xgsb')
|
|
|
+ dialogVisible.value = true
|
|
|
+ activeCameras.value = row
|
|
|
+ }
|
|
|
+ const handleDelete = async (index, row) => {
|
|
|
+ await API_TP_CAMERAS_DEL({ Id: row.Id })
|
|
|
+ ElMessage.success($t('sccg'))
|
|
|
+ init()
|
|
|
+ }
|
|
|
+ const addCamera = () => {
|
|
|
+ sign.value = 'add'
|
|
|
+ dialogTitle.value = $t('tjsb')
|
|
|
+ dialogVisible.value = true
|
|
|
+ }
|
|
|
+ onMounted(() => {
|
|
|
+ init()
|
|
|
+ })
|
|
|
+</script>
|
|
|
+<style scoped lang="scss"></style>
|