1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
| <template>
| <div class="app-container">
| <el-row :gutter="20">
| <el-col :span="showMap ? 12 : 24" :xs="24">
| <AppTable ref="AppTable" selection :showDeptSearch="false" :url="'tower/device/list'" :tableColumns="tableColumns"
| :tableFilter="tableFilter" @clickRow="clickRow">
| <template #operatorBox="{ row }">
| <el-button type="primary" plain icon="el-icon-plus" size="mini"
| @click="handleAdd">新增设备</el-button>
| <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport">导入</el-button>
| </template>
| <template #operator="{ row }">
| <el-button size="mini" type="text" icon="el-icon-edit"
| @click.stop="handleUpdate(row)">修改</el-button>
| <el-button size="mini" type="text" icon="el-icon-delete"
| @click.stop="handleDelete(row)">删除</el-button>
| </template>
| </AppTable>
| </el-col>
| <el-col :span="12" :xs="24" v-if="showMap">
| <CesiumMap ></CesiumMap>
| </el-col>
| </el-row>
|
| <deviceDialog ref="deviceDialog" @on-submit="$refs.AppTable.getData()" :model_type="dict.type.model_type" ></deviceDialog>
| <deviceImportDialog ref="deviceImportDialog" @on-submit="$refs.AppTable.getData()" ></deviceImportDialog>
| </div>
| </template>
|
| <script>
| import deviceDialog from './components/deviceDialog.vue';
| import deviceImportDialog from './components/deviceImportDialog.vue';
| import CesiumMap from "../../../utils/components/cesium-map.vue";
| export default {
| name: "towers",
| dicts: ['model_type'],
| components: {
| deviceDialog,
| CesiumMap,
| deviceImportDialog
| },
| data() {
| return {
| // 选中数组
| ids: [],
| // 非单个禁用
| single: true,
| // 非多个禁用
| multiple: true,
| tableColumns: [
| {
| label: '设备名称',
| prop: 'deviceName'
| },
| {
| label: '所属线路',
| prop: 'belongingRoute'
| },
| {
| label: '朝向',
| prop: 'face'
| },
| {
| label: '操作',
| type: 'slot',
| slotName: 'operator',
| width: '330px'
| },
| ],
| tableFilter: [
| {
| title: '设备名称',
| placeholder: '请输入设备名称',
| fieldName: 'name',
| clearable: true,
| type: 'search',
| }
| ],
| showMap:false
| };
| },
| watch: {
| },
| created() {
| },
| mounted() {
| },
| methods: {
| // 添加数据
| handleAdd() {
| this.showMap = false
| this.$refs.deviceDialog.show()
| },
| // 更新数据
| handleUpdate(row) {
| const ids = row.id || this.ids
| this.$refs.deviceDialog.show(ids)
| },
| // 删除数据
| handleDelete(row) {
| console.log(row)
| const ids = row.id || this.ids
| const name = row.name || ''
| this.$api.deleteByName('/tower/device', ids,name).then(res => {
| this.$refs.AppTable.getData()
| })
| },
| // 导入井excel表格
| handleImport () {
| this.$refs.deviceImportDialog.show()
| },
| // clickRow(row){
| // console.log(row)
| // this.showMap =true
| // },
| },
| };
| </script>
|
| <style scoped>
| .left-card {
| height: calc(100vh - 105px);
| overflow: auto;
| }
|
| .right-card {
| height: calc(100vh - 105px);
| }
| </style>
|
|
