|
@@ -1,130 +1,170 @@
|
|
|
<template>
|
|
|
<div class="table_item">
|
|
|
- <div class="table_left">
|
|
|
- <a-input-search v-model:value="searchValue" style="margin-bottom: 8px" placeholder="请输入采集名称" />
|
|
|
- <a-tree
|
|
|
- :expanded-keys="expandedKeys"
|
|
|
- :auto-expand-parent="autoExpandParent"
|
|
|
- :tree-data="gData"
|
|
|
- @expand="onExpand"
|
|
|
- >
|
|
|
- <template #title="{ title }">
|
|
|
- <span v-if="title.indexOf(searchValue) > -1">
|
|
|
- {{ title.substring(0, title.indexOf(searchValue)) }}
|
|
|
- <span style="color: #f50">{{ searchValue }}</span>
|
|
|
- {{ title.substring(title.indexOf(searchValue) + searchValue.length) }}
|
|
|
- </span>
|
|
|
- <span v-else>{{ title }}</span>
|
|
|
+ <s-table ref="tableRef" :columns="columns" :data="loadData" :row-key="(record) => record.code">
|
|
|
+ <template #operator>
|
|
|
+ <!-- 搜索区域 -->
|
|
|
+ <div class="table-search">
|
|
|
+ <div class="table-search-form">
|
|
|
+ <a-row :gutter="10">
|
|
|
+ <a-form
|
|
|
+ ref="searchFormRef"
|
|
|
+ name="advanced_search"
|
|
|
+ layout="inline"
|
|
|
+ :label-col="{ style: { width: '70px', justifyContent: 'end' } }"
|
|
|
+ :model="searchFormState"
|
|
|
+ class="ant-advanced-search-form"
|
|
|
+ >
|
|
|
+ <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8"
|
|
|
+ ><a-form-item label="区域名称" name="name">
|
|
|
+ <a-input v-model:value="searchFormState.name" placeholder="请输入区域名称" /> </a-form-item
|
|
|
+ ></a-col>
|
|
|
+ </a-form>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+ <div class="table-search-buttons">
|
|
|
+ <a-button type="primary" @click="tableRef.refresh(true)">查询</a-button>
|
|
|
+ <a-button class="xn-mg08" @click="reset">重置</a-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 其他操作区域 -->
|
|
|
+ <div class="table-head-btn">
|
|
|
+ <div class="btn-left">
|
|
|
+ <a-button type="primary" @click="formRef.onOpen()">
|
|
|
+ <template #icon><plus-outlined /></template>新增
|
|
|
+ </a-button>
|
|
|
+ </div>
|
|
|
+ <div class="btn-right">
|
|
|
+ <a-button>
|
|
|
+ <template #icon><download-outlined /></template>导出
|
|
|
+ </a-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #bodyCell="{ column, record }">
|
|
|
+ <template v-if="column.dataIndex === 'action'">
|
|
|
+ <a-button type="link" size="small" @click="formRef.onOpen(record)">编辑</a-button>
|
|
|
+ <a-popconfirm title="确定要删除吗?" @confirm="deleteData(record)">
|
|
|
+ <a-button type="link" danger size="small">删除</a-button>
|
|
|
+ </a-popconfirm>
|
|
|
+ <a-button type="link" size="small">记录</a-button>
|
|
|
</template>
|
|
|
- </a-tree>
|
|
|
- </div>
|
|
|
- <div class="table_right">地图</div>
|
|
|
+ </template>
|
|
|
+ </s-table>
|
|
|
+ <Form ref="formRef" @successful="tableRef.refresh(true)" />
|
|
|
</div>
|
|
|
</template>
|
|
|
-<script lang="ts" setup>
|
|
|
- import type { TreeProps } from 'ant-design-vue'
|
|
|
|
|
|
- const x = 3
|
|
|
- const y = 2
|
|
|
- const z = 1
|
|
|
- const genData: TreeProps['treeData'] = []
|
|
|
+<script setup>
|
|
|
+ import tool from '@/utils/tool'
|
|
|
+ import locationApi from '@/api/basicset/locationApi.js'
|
|
|
+ import Form from './form.vue'
|
|
|
+ const formRef = ref()
|
|
|
+ const searchFormRef = ref()
|
|
|
+ const searchFormState = ref({})
|
|
|
+ const tableRef = ref()
|
|
|
+ const columns = [
|
|
|
+ {
|
|
|
+ title: '区域名称',
|
|
|
+ dataIndex: 'name',
|
|
|
+ align: 'center',
|
|
|
+ ellipsis: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '上级区域',
|
|
|
+ dataIndex: 'parentId',
|
|
|
+ align: 'center',
|
|
|
+ ellipsis: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '监控对象',
|
|
|
+ dataIndex: 'monitorTargetId',
|
|
|
+ align: 'center',
|
|
|
+ ellipsis: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '传感器编号',
|
|
|
+ dataIndex: 'sensorCode',
|
|
|
+ align: 'center',
|
|
|
+ ellipsis: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '传感器类型',
|
|
|
+ dataIndex: 'sensorType',
|
|
|
+ align: 'center',
|
|
|
+ ellipsis: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '传感器路数',
|
|
|
+ dataIndex: 'sensorRoute',
|
|
|
+ align: 'center',
|
|
|
+ ellipsis: true
|
|
|
+ },
|
|
|
|
|
|
- const generateData = (_level: number, _preKey?: string, _tns?: TreeProps['treeData']) => {
|
|
|
- const preKey = _preKey || '0'
|
|
|
- const tns = _tns || genData
|
|
|
+ {
|
|
|
+ title: '监控设备型号',
|
|
|
+ dataIndex: 'modelName',
|
|
|
+ align: 'center',
|
|
|
+ ellipsis: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '监控设备编号',
|
|
|
+ dataIndex: 'monitorDeviceId',
|
|
|
+ align: 'center',
|
|
|
+ ellipsis: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '冷链编号',
|
|
|
+ dataIndex: 'code',
|
|
|
+ align: 'center',
|
|
|
+ ellipsis: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '报警上限',
|
|
|
+ dataIndex: 'limitUp',
|
|
|
+ align: 'center',
|
|
|
+ ellipsis: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '报警下限',
|
|
|
+ dataIndex: 'limitDown',
|
|
|
+ align: 'center',
|
|
|
+ ellipsis: true
|
|
|
+ },
|
|
|
|
|
|
- const children = []
|
|
|
- for (let i = 0; i < x; i++) {
|
|
|
- const key = `${preKey}-${i}`
|
|
|
- tns.push({ title: key, key })
|
|
|
- if (i < y) {
|
|
|
- children.push(key)
|
|
|
- }
|
|
|
- }
|
|
|
- if (_level < 0) {
|
|
|
- return tns
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ dataIndex: 'action',
|
|
|
+ align: 'center',
|
|
|
+ width: 150
|
|
|
}
|
|
|
- const level = _level - 1
|
|
|
- children.forEach((key, index) => {
|
|
|
- tns[index].children = []
|
|
|
- return generateData(level, key, tns[index].children)
|
|
|
- })
|
|
|
- }
|
|
|
- generateData(z)
|
|
|
+ ]
|
|
|
|
|
|
- const dataList: TreeProps['treeData'] = []
|
|
|
- const generateList = (data: TreeProps['treeData']) => {
|
|
|
- for (let i = 0; i < data.length; i++) {
|
|
|
- const node = data[i]
|
|
|
- const key = node.key
|
|
|
- dataList.push({ key, title: key })
|
|
|
- if (node.children) {
|
|
|
- generateList(node.children)
|
|
|
+ const loadData = (parameter) => {
|
|
|
+ return locationApi.locationTree(Object.assign(searchFormState.value)).then((data) => {
|
|
|
+ if (data) {
|
|
|
+ return data
|
|
|
}
|
|
|
- }
|
|
|
+ return []
|
|
|
+ })
|
|
|
}
|
|
|
- generateList(genData)
|
|
|
-
|
|
|
- const getParentKey = (key: string | number, tree: TreeProps['treeData']): string | number | undefined => {
|
|
|
- let parentKey
|
|
|
- for (let i = 0; i < tree.length; i++) {
|
|
|
- const node = tree[i]
|
|
|
- if (node.children) {
|
|
|
- if (node.children.some((item) => item.key === key)) {
|
|
|
- parentKey = node.key
|
|
|
- } else if (getParentKey(key, node.children)) {
|
|
|
- parentKey = getParentKey(key, node.children)
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- return parentKey
|
|
|
+ // 重置
|
|
|
+ const reset = () => {
|
|
|
+ searchFormRef.value.resetFields()
|
|
|
+ tableRef.value.refresh(true)
|
|
|
}
|
|
|
- const expandedKeys = ref<(string | number)[]>([])
|
|
|
- const searchValue = ref<string>('')
|
|
|
- const autoExpandParent = ref<boolean>(true)
|
|
|
- const gData = ref<TreeProps['treeData']>(genData)
|
|
|
-
|
|
|
- const onExpand = (keys: string[]) => {
|
|
|
- expandedKeys.value = keys
|
|
|
- autoExpandParent.value = false
|
|
|
+ // 删除
|
|
|
+ const deleteData = (record) => {
|
|
|
+ console.log(record, '删除')
|
|
|
}
|
|
|
-
|
|
|
- watch(searchValue, (value) => {
|
|
|
- const expanded = dataList
|
|
|
- .map((item: TreeProps['treeData'][number]) => {
|
|
|
- if (item.title.indexOf(value) > -1) {
|
|
|
- return getParentKey(item.key, gData.value)
|
|
|
- }
|
|
|
- return null
|
|
|
- })
|
|
|
- .filter((item, i, self) => item && self.indexOf(item) === i)
|
|
|
- expandedKeys.value = expanded
|
|
|
-
|
|
|
- searchValue.value = value
|
|
|
- autoExpandParent.value = true
|
|
|
- })
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
.table_item {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
padding: 15px 20px;
|
|
|
-
|
|
|
- .table_left {
|
|
|
- width: 25%;
|
|
|
- padding: 10px;
|
|
|
- margin-right: 10px;
|
|
|
- background-color: #ffffff;
|
|
|
- }
|
|
|
- .table_right {
|
|
|
- width: 70%;
|
|
|
+ background-color: #ffffff;
|
|
|
+ :deep(.ant-table-pagination-right) {
|
|
|
+ justify-content: center !important;
|
|
|
}
|
|
|
}
|
|
|
- :deep(.ant-card-body) {
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- :deep(.ant-card-head) {
|
|
|
- border-bottom: 1px solid #f0f0f0 !important;
|
|
|
- }
|
|
|
</style>
|