|
|
@@ -52,90 +52,32 @@
|
|
|
<div class="item-right">
|
|
|
<!-- 单位 -->
|
|
|
<div class="unit">
|
|
|
- <a-input-search
|
|
|
- v-model:value="searchValue"
|
|
|
- style="margin-bottom: 8px"
|
|
|
- placeholder="请输入单位名称"
|
|
|
- @search="treeSelect"
|
|
|
- />
|
|
|
- <a-tree
|
|
|
- v-if="treeData"
|
|
|
- show-icon
|
|
|
- v-model:expandedKeys="defaultExpandedKeys"
|
|
|
- :tree-data="treeData"
|
|
|
- :field-names="treeFieldNames"
|
|
|
- >
|
|
|
- <template #icon="{ parentId }">
|
|
|
- <template v-if="parentId == '0'">
|
|
|
- <home-outlined />
|
|
|
- </template>
|
|
|
-
|
|
|
- <template v-else>
|
|
|
- <cluster-outlined />
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- </a-tree>
|
|
|
+ <unitSearch ref="unitSearchRef" />
|
|
|
</div>
|
|
|
<!-- 监控点 -->
|
|
|
<div class="monitor">
|
|
|
- <div class="monitor-search">
|
|
|
- <a-input-search
|
|
|
- v-model:value="searchValue"
|
|
|
- style="margin-bottom: 8px"
|
|
|
- placeholder="请输入对象-监控点名称"
|
|
|
- /><a-button type="link">全选</a-button>
|
|
|
- </div>
|
|
|
- <a-checkbox-group v-model:value="checkboxValue" style="width: 100%">
|
|
|
- <a-checkbox v-for="(item, index) in checkboxList" :key="index" :value="item.id" style="width: 100%">{{
|
|
|
- item.name
|
|
|
- }}</a-checkbox>
|
|
|
- </a-checkbox-group>
|
|
|
+ <monitorSearch ref="monitorSearchRef" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
- import tool from '@/utils/tool'
|
|
|
import jobApi from '@/api/dev/jobApi'
|
|
|
+ import unitSearch from './unitSearch.vue'
|
|
|
+ import monitorSearch from './monitorSearch.vue'
|
|
|
|
|
|
- const searchValue = ref('') //单位名称搜索字段
|
|
|
- const treeData = ref([
|
|
|
- {
|
|
|
- id: '1',
|
|
|
- parentId: '0',
|
|
|
- name: '广州海关技术中心',
|
|
|
- children: [
|
|
|
- { id: '1-1', parentId: '1', name: '广州海关技术中心(生物岛)' },
|
|
|
- { id: '1-2', parentId: '1', name: '广州海关技术中心(机场路)' },
|
|
|
- { id: '1-3', parentId: '1', name: '广州海关技术中心(花都基地)' },
|
|
|
- { id: '1-4', parentId: '1', name: '广州海关技术中心(国家新能源汽车重点实验室科学城基地)' }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- id: '2',
|
|
|
- parentId: '0',
|
|
|
- name: '海南海关技术中心'
|
|
|
- }
|
|
|
- ]) //单位树形结构
|
|
|
- const defaultExpandedKeys = ref([]) // 默认展开二级树的节点id
|
|
|
- // 替换treeNode 中 title,key,children
|
|
|
- const treeFieldNames = { children: 'children', title: 'name', key: 'id' }
|
|
|
-
|
|
|
- const checkboxValue = ref([]) //监控点搜索字段
|
|
|
-
|
|
|
- const checkboxList = ref([
|
|
|
- { name: '-89度超低温冷冻储存箱-监控点1', id: '1' },
|
|
|
- { name: '医用冰箱-监控点1', id: '2' },
|
|
|
- { name: '超低温冰箱-监控点1', id: '3' },
|
|
|
- { name: '-100度超低温冷冻储存箱-监控点2', id: '4' },
|
|
|
- { name: '医用冰箱-监控点2', id: '5' },
|
|
|
- { name: '超低温冰箱-监控点2', id: '6' }
|
|
|
- ]) //监控点数据
|
|
|
-
|
|
|
+ const unitSearchRef = ref(null)
|
|
|
+ const monitorSearchRef = ref(null)
|
|
|
const searchFormState = ref({
|
|
|
type: 'wd'
|
|
|
})
|
|
|
+
|
|
|
+ onMounted(() => {
|
|
|
+ unitSearchRef.value.onOpen() //获取单位数据
|
|
|
+ monitorSearchRef.value.onOpen() //获取监控点数据
|
|
|
+ })
|
|
|
+
|
|
|
const tableRef = ref()
|
|
|
const columns = [
|
|
|
{
|
|
|
@@ -233,11 +175,6 @@
|
|
|
return obj
|
|
|
})
|
|
|
}
|
|
|
-
|
|
|
- // 点击树查询
|
|
|
- const treeSelect = (selectedKeys) => {
|
|
|
- console.log(selectedKeys, 'x')
|
|
|
- }
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
@@ -246,18 +183,24 @@
|
|
|
display: flex;
|
|
|
padding: 15px 20px;
|
|
|
|
|
|
- .table-head {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
+ // 表格区域
|
|
|
+ .table-wrapper {
|
|
|
+ width: 75%;
|
|
|
|
|
|
- .head-left {
|
|
|
+ // 搜索及操作按钮区域
|
|
|
+ .table-head {
|
|
|
+ width: 100%;
|
|
|
display: flex;
|
|
|
- }
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
|
|
|
- .ant-btn {
|
|
|
- margin-left: 10px;
|
|
|
+ .head-left {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ant-btn {
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -276,20 +219,20 @@
|
|
|
border: 1px solid #eaeaea;
|
|
|
overflow-y: auto;
|
|
|
}
|
|
|
-
|
|
|
- .unit-head,
|
|
|
- .monitor-search {
|
|
|
- display: flex;
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
- :deep(.ant-table-pagination-right) {
|
|
|
- justify-content: center !important;
|
|
|
- }
|
|
|
+
|
|
|
+ // 树形结构的样式
|
|
|
:deep(.ant-tree-treenode) {
|
|
|
width: 100%;
|
|
|
margin-bottom: 5px;
|
|
|
border-radius: 5px;
|
|
|
+ padding: 5px 0;
|
|
|
border: 1px solid #eaeaea;
|
|
|
}
|
|
|
+
|
|
|
+ // 分页居中显示
|
|
|
+ :deep(.ant-table-pagination-right) {
|
|
|
+ justify-content: center !important;
|
|
|
+ }
|
|
|
</style>
|
like