|
@@ -0,0 +1,273 @@
|
|
|
+<template>
|
|
|
+ <div class="table_item">
|
|
|
+ <s-table ref="tableRef" :columns="columns" :data="loadData" :row-key="(record) => record.code">
|
|
|
+ <template #operator>
|
|
|
+ <div class="table-head">
|
|
|
+ <div class="head-left">
|
|
|
+ <a-button type="primary">显示新设备</a-button>
|
|
|
+ <a-form
|
|
|
+ ref="searchFormRef"
|
|
|
+ name="advanced_search"
|
|
|
+ :model="searchFormState"
|
|
|
+ layout="inline"
|
|
|
+ class="ant-advanced-search-form"
|
|
|
+ >
|
|
|
+ <a-form-item label="冷链编号" name="code">
|
|
|
+ <a-input v-model:value="searchFormState.code" placeholder="请输入冷链编号" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-form>
|
|
|
+ <a-button type="primary" @click="tableRef.refresh(true)">查询</a-button>
|
|
|
+ <a-button class="xn-mg08" @click="reset">重置</a-button>
|
|
|
+ </div>
|
|
|
+ <div class="head-right">
|
|
|
+ <a-button>
|
|
|
+ <template #icon><download-outlined /></template>导出
|
|
|
+ </a-button>
|
|
|
+ <a-select ref="select" v-model:value="value1" style="width: 120px" @focus="focus" @change="handleChange">
|
|
|
+ <a-select-option value="1">搜索模式</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #bodyCell="{ column, record }">
|
|
|
+ <template v-if="column.dataIndex === 'state'">
|
|
|
+ <span>
|
|
|
+ <a-tag :color="record.state == '1' ? '#50cd7c' : record.state == '2' ? '#cd201f' : '#87d068'">
|
|
|
+ {{ record.stateValue }}
|
|
|
+ </a-tag>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <template v-if="column.dataIndex === 'action'">
|
|
|
+ <a-button type="link" size="small">编辑</a-button>
|
|
|
+ <a-button type="link" size="small">删除</a-button>
|
|
|
+ <a-button type="link" size="small">记录</a-button>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </s-table>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+ import tool from '@/utils/tool'
|
|
|
+ import jobApi from '@/api/dev/jobApi'
|
|
|
+ const searchFormRef = ref()
|
|
|
+ const searchFormState = ref({})
|
|
|
+ const tableRef = ref()
|
|
|
+ const value1 = ref('1')
|
|
|
+ const columns = [
|
|
|
+ {
|
|
|
+ title: '所属部门',
|
|
|
+ dataIndex: 'ssbm',
|
|
|
+ align: 'center',
|
|
|
+ ellipsis: true,
|
|
|
+
|
|
|
+ width: 200
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '采集器编号',
|
|
|
+ dataIndex: 'code',
|
|
|
+ align: 'center',
|
|
|
+ ellipsis: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '采集器名称',
|
|
|
+ dataIndex: 'name',
|
|
|
+ align: 'center',
|
|
|
+ ellipsis: true,
|
|
|
+
|
|
|
+ width: 200
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '型号',
|
|
|
+ dataIndex: 'xh',
|
|
|
+ align: 'center',
|
|
|
+ ellipsis: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '最后心跳时间',
|
|
|
+ dataIndex: 'date',
|
|
|
+ align: 'center',
|
|
|
+ ellipsis: true,
|
|
|
+
|
|
|
+ width: 200
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '设备状态',
|
|
|
+ dataIndex: 'state',
|
|
|
+ align: 'center',
|
|
|
+ ellipsis: true
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ title: '传感器路数',
|
|
|
+ dataIndex: 'bjsxx',
|
|
|
+ align: 'center',
|
|
|
+ ellipsis: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '对应监控对象',
|
|
|
+ dataIndex: 'dyjkdx',
|
|
|
+ align: 'center',
|
|
|
+ ellipsis: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '监控对象位置',
|
|
|
+ dataIndex: 'jkdxwz',
|
|
|
+ align: 'center',
|
|
|
+ ellipsis: true
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ dataIndex: 'action',
|
|
|
+ align: 'center',
|
|
|
+ width: 150
|
|
|
+ }
|
|
|
+ ]
|
|
|
+
|
|
|
+ const loadData = (parameter) => {
|
|
|
+ return jobApi.jobPage(Object.assign(parameter, searchFormState.value)).then((res) => {
|
|
|
+ // return res
|
|
|
+ const obj = {
|
|
|
+ current: 1,
|
|
|
+ pages: 1,
|
|
|
+ records: [
|
|
|
+ {
|
|
|
+ ssbm: '广州海关技术中心',
|
|
|
+ code: 'Y6578945621',
|
|
|
+ name: 'ABSL-3超低温冰箱123456',
|
|
|
+ xh: '三代GPRS采集-VH',
|
|
|
+ date: '2024-09-28 07:03:24',
|
|
|
+ state: '1',
|
|
|
+ stateValue: '正常',
|
|
|
+ bjsxx: '1',
|
|
|
+ dyjkdx: 'BSL-3超低温冰箱',
|
|
|
+ jkdxwz: 'ABCLSY冰箱三层',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ ssbm: '广州海关技术中心',
|
|
|
+ code: 'Y-01-6578945621',
|
|
|
+ name: 'ABSL-3超低温冰箱123456',
|
|
|
+ xh: '三代GPRS采集-VH',
|
|
|
+ date: '2024-09-28 07:03:24',
|
|
|
+ state: '2',
|
|
|
+ stateValue: '异常',
|
|
|
+ bjsxx: '1',
|
|
|
+ dyjkdx: 'BSL-3超低温冰箱',
|
|
|
+ jkdxwz: 'ABCLSY冰箱三层一格'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ ssbm: '广州海关技术中心',
|
|
|
+ code: 'Y6578945622',
|
|
|
+ name: 'ABSL-3超低温冰箱123456',
|
|
|
+ xh: '三代GPRS采集-VH',
|
|
|
+ date: '2024-11-05 07:12:42',
|
|
|
+ state: '1',
|
|
|
+ stateValue: '正常',
|
|
|
+ bjsxx: '1',
|
|
|
+ dyjkdx: 'BSL-3超低温冰箱',
|
|
|
+ jkdxwz: 'ABCLSY冰箱三层',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ ssbm: '广州海关技术中心',
|
|
|
+ code: 'Y-01-6578945622',
|
|
|
+ name: 'ABSL-3超低温冰箱123456',
|
|
|
+ xh: '三代GPRS采集-VH',
|
|
|
+ date: '2024-09-28 07:03:24',
|
|
|
+ state: '1',
|
|
|
+ stateValue: '正常',
|
|
|
+ bjsxx: '1',
|
|
|
+ dyjkdx: 'BSL-3超低温冰箱',
|
|
|
+ jkdxwz: 'ABCLSY冰箱三层'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ ssbm: '广州海关技术中心',
|
|
|
+ code: 'Y6578945623',
|
|
|
+ name: 'ABSL-3超低温冰箱123456',
|
|
|
+ xh: '三代GPRS采集-VH',
|
|
|
+ date: '2024-11-05 09:22:45',
|
|
|
+ state: '1',
|
|
|
+ stateValue: '正常',
|
|
|
+ bjsxx: '1',
|
|
|
+ dyjkdx: 'BSL-3超低温冰箱',
|
|
|
+ jkdxwz: 'ABCLSY冰箱三层'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ ssbm: '广州海关技术中心',
|
|
|
+ code: 'Y6578945624',
|
|
|
+ name: 'ABSL-3超低温冰箱123456',
|
|
|
+ xh: '三代GPRS采集-VH',
|
|
|
+ date: '2024-11-05 09:27:55',
|
|
|
+ state: '1',
|
|
|
+ stateValue: '正常',
|
|
|
+ bjsxx: '1',
|
|
|
+ dyjkdx: 'BSL-3超低温冰箱',
|
|
|
+ jkdxwz: 'ABCLSY冰箱三层'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ ssbm: '广州海关技术中心',
|
|
|
+ code: 'Y6578945625',
|
|
|
+ name: 'ABSL-3超低温冰箱123456',
|
|
|
+ xh: '三代GPRS采集-VH',
|
|
|
+ date: '2024-11-05 10:16:11',
|
|
|
+ state: '2',
|
|
|
+ stateValue: '异常',
|
|
|
+ bjsxx: '1',
|
|
|
+ dyjkdx: 'BSL-3超低温冰箱',
|
|
|
+ jkdxwz: 'ABCLSY冰箱三层'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ ssbm: '广州海关技术中心',
|
|
|
+ code: 'Y6578945626',
|
|
|
+ name: 'ABSL-3超低温冰箱123456',
|
|
|
+ xh: '三代GPRS采集-VH',
|
|
|
+ date: '2024-11-05 14:57:31',
|
|
|
+ state: '2',
|
|
|
+ stateValue: '异常',
|
|
|
+ bjsxx: '1',
|
|
|
+ dyjkdx: 'BSL-3超低温冰箱',
|
|
|
+ jkdxwz: 'ABCLSY冰箱三层'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ size: 10,
|
|
|
+ total: 6
|
|
|
+ }
|
|
|
+ return obj
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // 重置
|
|
|
+ const reset = () => {
|
|
|
+ searchFormRef.value.resetFields()
|
|
|
+ tableRef.value.refresh(true)
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+ .table_item {
|
|
|
+ padding: 15px 20px;
|
|
|
+
|
|
|
+ .table-head {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .head-left {
|
|
|
+ width: 60%;
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ant-btn {
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.ant-table-pagination-right) {
|
|
|
+ justify-content: center !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|