vue2-client 1.2.47 → 1.2.48

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,236 +1,236 @@
1
- <template>
2
- <a-drawer
3
- title="设备详情"
4
- placement="right"
5
- :width="isMobile ? screenWidth : screenWidth * 0.85"
6
- :visible="visible"
7
- @close="onClose"
8
- >
9
- <a-spin :spinning="loadDeviceDetails">
10
- <a-page-header :title="'设备号:' + details.f_device_no">
11
- <div class="row">
12
- <div class="content">
13
- <a-descriptions size="small" :column="isMobile ? 1 : 2">
14
- <a-descriptions-item label="设备IOT标识">{{ details.deviceid }}</a-descriptions-item>
15
- <<a-descriptions-item/>
16
- <a-descriptions-item label="创建时间">{{ details.f_input_date }}</a-descriptions-item>
17
- <a-descriptions-item label="创建人">{{ details.f_inputtor }}</a-descriptions-item>
18
- </a-descriptions>
19
- </div>
20
- <div class="extra">
21
- <a-row class="status-list">
22
- <a-col :xs="12" :sm="24">
23
- <div class="text">设备状态</div>
24
- <div class="heading">
25
- <x-badge badge-key="deviceStateMap" :value="details.f_state" :is-external-text="true"/>
26
- </div>
27
- </a-col>
28
- </a-row>
29
- <p></p>
30
- </div>
31
- </div>
32
- <!-- actions -->
33
- <template v-slot:extra>
34
- <a-button-group style="margin-right: 4px;">
35
- <a-button type="dashed" @click="initView" :loading="loadDeviceDetails">刷新</a-button>
36
- </a-button-group>
37
- <a-button-group style="margin-right: 4px;">
38
- </a-button-group>
39
- </template>
40
- <template slot="footer">
41
- <a-tabs :default-active-key="tabActiveKey" :activeKey="tabActiveKey" @change="handleTabChange" style="margin-bottom: 23px;">
42
- <template v-for="value in tabList">
43
- <a-tab-pane :key="value.key" :tab="value.tab"/>
44
- </template>
45
- </a-tabs>
46
- <div v-if="!loadDeviceDetails">
47
- <device-details-main :details="details" v-if="tabActiveKey === '1'"/>
48
- <device-details-read :device-id="details.id" v-if="tabActiveKey === '2'"/>
49
- <device-details-instruct :device-no="details.f_device_no" v-if="tabActiveKey === '3'"/>
50
- <device-details-singular :device-id="details.id" v-if="tabActiveKey === '4'"/>
51
- <device-details-instruct-operate :device="details" v-if="tabActiveKey === '5'"/>
52
- <AmapPointRendering :markers="details" :describeList="describeList" v-if="tabActiveKey === '6'"/>
53
- </div>
54
- </template>
55
- </a-page-header>
56
- </a-spin>
57
- </a-drawer>
58
- </template>
59
-
60
- <script>
61
- import { DeviceDetailsMain, DeviceDetailsCount, DeviceDetailsInstruct, DeviceDetailsRead, DeviceDetailsSingular, DeviceDetailsInstructOperate } from '@vue2-client/base-client/components/iot/DeviceDetailsView/part'
62
- import { DeviceDetailsViewApi, post } from '@vue2-client/services/api'
63
- import { mapState } from 'vuex'
64
-
65
- export default {
66
- name: 'DeviceDetailsView',
67
- components: {
68
- DeviceDetailsMain,
69
- DeviceDetailsCount,
70
- DeviceDetailsInstruct,
71
- DeviceDetailsRead,
72
- DeviceDetailsSingular,
73
- DeviceDetailsInstructOperate
74
- },
75
- data () {
76
- return {
77
- // 页面宽度
78
- screenWidth: document.documentElement.clientWidth,
79
- // Tab页签
80
- tabActiveKey: '1',
81
- // 设备详情
82
- details: {
83
- f_device_no: '',
84
- f_imei: '',
85
- f_imsi: '',
86
- f_state: '正常',
87
- f_device_id: '',
88
- f_manufactor: '',
89
- f_brand: '',
90
- f_alias: '',
91
- f_model: '',
92
- f_input_date: '',
93
- f_inputtor: ''
94
- },
95
- tabList: [
96
- { key: '1', tab: '基本' },
97
- { key: '2', tab: '抄表' },
98
- { key: '3', tab: '指令' },
99
- { key: '4', tab: '异常' },
100
- { key: '5', tab: '指令操作' },
101
- { key: '6', tab: '设备位置' }
102
- ],
103
- // 设备详情加载
104
- loadDeviceDetails: true,
105
- describeList: [
106
- { describe: '设备号', field: 'f_device_no' },
107
- { describe: '设备型号', field: 'f_brand' }
108
- ]
109
- }
110
- },
111
- mounted () {
112
- this.initView()
113
- },
114
- computed: {
115
- ...mapState('account', { currUser: 'user' }),
116
- ...mapState('setting', ['isMobile'])
117
- },
118
- props: {
119
- deviceNo: {
120
- type: String,
121
- required: true
122
- },
123
- visible: {
124
- type: Boolean,
125
- default: false
126
- }
127
- },
128
- methods: {
129
- // 初始化组件
130
- initView () {
131
- this.tabActiveKey = '1'
132
- this.getIotDevice(this.deviceNo)
133
- },
134
- onClose () {
135
- this.$emit('update:visible', false)
136
- },
137
- // 获取设备详情信息
138
- getIotDevice (deviceNo) {
139
- this.loadDeviceDetails = true
140
- return post(DeviceDetailsViewApi.getDeviceDetails, {
141
- id: deviceNo
142
- }).then(res => {
143
- this.details = res
144
- this.loadDeviceDetails = false
145
- }, err => {
146
- this.loadDeviceDetails = false
147
- console.error(err)
148
- })
149
- },
150
- // Tab切换
151
- handleTabChange (key) {
152
- this.tabActiveKey = key
153
- }
154
- },
155
- watch: {
156
- 'visible' (val) {
157
- if (val) {
158
- this.initView()
159
- }
160
- }
161
- }
162
- }
163
- </script>
164
-
165
- <style lang="less" scoped>
166
- .business {
167
- color: #ffffff;
168
- }
169
- .business:enabled:hover {
170
- background-color: #85CE61 !important;
171
- border-color: #85CE61 !important;
172
- }
173
- .business:enabled {
174
- background-color: #67c23a;
175
- border-color: #67c23a;
176
- }
177
- .business:disabled {
178
- color: rgba(0, 0, 0, 0.25);
179
- }
180
- .detail-layout {
181
- margin-left: 44px;
182
- }
183
- .text {
184
- color: rgba(0, 0, 0, .45);
185
- }
186
-
187
- .heading {
188
- color: rgba(0, 0, 0, .85);
189
- font-size: 20px;
190
- }
191
-
192
- .no-data {
193
- color: rgba(0, 0, 0, .25);
194
- text-align: center;
195
- line-height: 64px;
196
- font-size: 16px;
197
-
198
- i {
199
- font-size: 24px;
200
- margin-right: 16px;
201
- position: relative;
202
- top: 3px;
203
- }
204
- }
205
-
206
- .mobile {
207
- .detail-layout {
208
- margin-left: unset;
209
- }
210
- .text {
211
-
212
- }
213
- .status-list {
214
- text-align: left;
215
- }
216
- }
217
-
218
- .row {
219
- display: flex;
220
-
221
- .content {
222
- -webkit-box-flex: 1;
223
- flex: auto;
224
- -ms-flex: auto;
225
- }
226
-
227
- .extra {
228
- flex: 0 1 auto;
229
- -webkit-box-flex: 0;
230
- -ms-flex: 0 1 auto;
231
- min-width: 242px;
232
- margin-left: 88px;
233
- text-align: right;
234
- }
235
- }
236
- </style>
1
+ <template>
2
+ <a-drawer
3
+ title="设备详情"
4
+ placement="right"
5
+ :width="isMobile ? screenWidth : screenWidth * 0.85"
6
+ :visible="visible"
7
+ @close="onClose"
8
+ >
9
+ <a-spin :spinning="loadDeviceDetails">
10
+ <a-page-header :title="'设备号:' + details.f_device_no">
11
+ <div class="row">
12
+ <div class="content">
13
+ <a-descriptions size="small" :column="isMobile ? 1 : 2">
14
+ <a-descriptions-item label="设备IOT标识">{{ details.deviceid }}</a-descriptions-item>
15
+ <<a-descriptions-item/>
16
+ <a-descriptions-item label="创建时间">{{ details.f_input_date }}</a-descriptions-item>
17
+ <a-descriptions-item label="创建人">{{ details.f_inputtor }}</a-descriptions-item>
18
+ </a-descriptions>
19
+ </div>
20
+ <div class="extra">
21
+ <a-row class="status-list">
22
+ <a-col :xs="12" :sm="24">
23
+ <div class="text">设备状态</div>
24
+ <div class="heading">
25
+ <x-badge badge-key="deviceStateMap" :value="details.f_state" :is-external-text="true"/>
26
+ </div>
27
+ </a-col>
28
+ </a-row>
29
+ <p></p>
30
+ </div>
31
+ </div>
32
+ <!-- actions -->
33
+ <template v-slot:extra>
34
+ <a-button-group style="margin-right: 4px;">
35
+ <a-button type="dashed" @click="initView" :loading="loadDeviceDetails">刷新</a-button>
36
+ </a-button-group>
37
+ <a-button-group style="margin-right: 4px;">
38
+ </a-button-group>
39
+ </template>
40
+ <template slot="footer">
41
+ <a-tabs :default-active-key="tabActiveKey" :activeKey="tabActiveKey" @change="handleTabChange" style="margin-bottom: 23px;">
42
+ <template v-for="value in tabList">
43
+ <a-tab-pane :key="value.key" :tab="value.tab"/>
44
+ </template>
45
+ </a-tabs>
46
+ <div v-if="!loadDeviceDetails">
47
+ <device-details-main :details="details" v-if="tabActiveKey === '1'"/>
48
+ <device-details-read :device-id="details.id" v-if="tabActiveKey === '2'"/>
49
+ <device-details-instruct :device-no="details.f_device_no" v-if="tabActiveKey === '3'"/>
50
+ <device-details-singular :device-id="details.id" v-if="tabActiveKey === '4'"/>
51
+ <device-details-instruct-operate :device="details" v-if="tabActiveKey === '5'"/>
52
+ <AmapPointRendering :markers="details" :describeList="describeList" v-if="tabActiveKey === '6'"/>
53
+ </div>
54
+ </template>
55
+ </a-page-header>
56
+ </a-spin>
57
+ </a-drawer>
58
+ </template>
59
+
60
+ <script>
61
+ import { DeviceDetailsMain, DeviceDetailsCount, DeviceDetailsInstruct, DeviceDetailsRead, DeviceDetailsSingular, DeviceDetailsInstructOperate } from '@vue2-client/base-client/components/iot/DeviceDetailsView/part'
62
+ import { DeviceDetailsViewApi, post } from '@vue2-client/services/api'
63
+ import { mapState } from 'vuex'
64
+
65
+ export default {
66
+ name: 'DeviceDetailsView',
67
+ components: {
68
+ DeviceDetailsMain,
69
+ DeviceDetailsCount,
70
+ DeviceDetailsInstruct,
71
+ DeviceDetailsRead,
72
+ DeviceDetailsSingular,
73
+ DeviceDetailsInstructOperate
74
+ },
75
+ data () {
76
+ return {
77
+ // 页面宽度
78
+ screenWidth: document.documentElement.clientWidth,
79
+ // Tab页签
80
+ tabActiveKey: '1',
81
+ // 设备详情
82
+ details: {
83
+ f_device_no: '',
84
+ f_imei: '',
85
+ f_imsi: '',
86
+ f_state: '正常',
87
+ f_device_id: '',
88
+ f_manufactor: '',
89
+ f_brand: '',
90
+ f_alias: '',
91
+ f_model: '',
92
+ f_input_date: '',
93
+ f_inputtor: ''
94
+ },
95
+ tabList: [
96
+ { key: '1', tab: '基本' },
97
+ { key: '2', tab: '抄表' },
98
+ { key: '3', tab: '指令' },
99
+ { key: '4', tab: '异常' },
100
+ { key: '5', tab: '指令操作' },
101
+ { key: '6', tab: '设备位置' }
102
+ ],
103
+ // 设备详情加载
104
+ loadDeviceDetails: true,
105
+ describeList: [
106
+ { describe: '设备号', field: 'f_device_no' },
107
+ { describe: '设备型号', field: 'f_brand' }
108
+ ]
109
+ }
110
+ },
111
+ mounted () {
112
+ this.initView()
113
+ },
114
+ computed: {
115
+ ...mapState('account', { currUser: 'user' }),
116
+ ...mapState('setting', ['isMobile'])
117
+ },
118
+ props: {
119
+ deviceNo: {
120
+ type: String,
121
+ required: true
122
+ },
123
+ visible: {
124
+ type: Boolean,
125
+ default: false
126
+ }
127
+ },
128
+ methods: {
129
+ // 初始化组件
130
+ initView () {
131
+ this.tabActiveKey = '1'
132
+ this.getIotDevice(this.deviceNo)
133
+ },
134
+ onClose () {
135
+ this.$emit('update:visible', false)
136
+ },
137
+ // 获取设备详情信息
138
+ getIotDevice (deviceNo) {
139
+ this.loadDeviceDetails = true
140
+ return post(DeviceDetailsViewApi.getDeviceDetails, {
141
+ id: deviceNo
142
+ }).then(res => {
143
+ this.details = res
144
+ this.loadDeviceDetails = false
145
+ }, err => {
146
+ this.loadDeviceDetails = false
147
+ console.error(err)
148
+ })
149
+ },
150
+ // Tab切换
151
+ handleTabChange (key) {
152
+ this.tabActiveKey = key
153
+ }
154
+ },
155
+ watch: {
156
+ 'visible' (val) {
157
+ if (val) {
158
+ this.initView()
159
+ }
160
+ }
161
+ }
162
+ }
163
+ </script>
164
+
165
+ <style lang="less" scoped>
166
+ .business {
167
+ color: #ffffff;
168
+ }
169
+ .business:enabled:hover {
170
+ background-color: #85CE61 !important;
171
+ border-color: #85CE61 !important;
172
+ }
173
+ .business:enabled {
174
+ background-color: #67c23a;
175
+ border-color: #67c23a;
176
+ }
177
+ .business:disabled {
178
+ color: rgba(0, 0, 0, 0.25);
179
+ }
180
+ .detail-layout {
181
+ margin-left: 44px;
182
+ }
183
+ .text {
184
+ color: rgba(0, 0, 0, .45);
185
+ }
186
+
187
+ .heading {
188
+ color: rgba(0, 0, 0, .85);
189
+ font-size: 20px;
190
+ }
191
+
192
+ .no-data {
193
+ color: rgba(0, 0, 0, .25);
194
+ text-align: center;
195
+ line-height: 64px;
196
+ font-size: 16px;
197
+
198
+ i {
199
+ font-size: 24px;
200
+ margin-right: 16px;
201
+ position: relative;
202
+ top: 3px;
203
+ }
204
+ }
205
+
206
+ .mobile {
207
+ .detail-layout {
208
+ margin-left: unset;
209
+ }
210
+ .text {
211
+
212
+ }
213
+ .status-list {
214
+ text-align: left;
215
+ }
216
+ }
217
+
218
+ .row {
219
+ display: flex;
220
+
221
+ .content {
222
+ -webkit-box-flex: 1;
223
+ flex: auto;
224
+ -ms-flex: auto;
225
+ }
226
+
227
+ .extra {
228
+ flex: 0 1 auto;
229
+ -webkit-box-flex: 0;
230
+ -ms-flex: 0 1 auto;
231
+ min-width: 242px;
232
+ margin-left: 88px;
233
+ text-align: right;
234
+ }
235
+ }
236
+ </style>
@@ -1,57 +1,57 @@
1
- <template>
2
- <a-card :bordered="false">
3
- <x-form-table
4
- v-if="tabActiveKey === '1'"
5
- :queryParamsName="queryParamsName"
6
- :fixedQueryForm="fixedQueryForm"
7
- @onSubmit="onSubmit"
8
- @action="toDetail">
9
- </x-form-table>
10
- </a-card>
11
- </template>
12
-
13
- <script>
14
- import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable'
15
-
16
- export default {
17
- name: 'DeviceDetailsException',
18
- components: {
19
- XFormTable
20
- },
21
- data () {
22
- return {
23
- // 选中的异常编号
24
- selectSingularId: undefined,
25
- tabActiveKey: undefined,
26
- fixedQueryForm: {},
27
- // 查询配置文件名
28
- queryParamsName: 'deviceToExceptionQueryParams',
29
- // 是否显示设置设备参数详情抽屉
30
- detailVisible: false
31
- }
32
- },
33
- props: {
34
- deviceId: {
35
- type: Number,
36
- required: true
37
- }
38
- },
39
- mounted () {
40
- this.initView()
41
- },
42
- methods: {
43
- initView () {
44
- this.tabActiveKey = '1'
45
- this.fixedQueryForm['e_f_device_id'] = this.deviceId
46
- },
47
- onSubmit (res) {
48
- res.form['e_f_device_id'] = this.deviceId
49
- this.$emit('onSubmit', res)
50
- },
51
- toDetail (record, id) {
52
- // this.selectSingularId = record.id + ''
53
- // this.detailVisible = true
54
- }
55
- }
56
- }
57
- </script>
1
+ <template>
2
+ <a-card :bordered="false">
3
+ <x-form-table
4
+ v-if="tabActiveKey === '1'"
5
+ :queryParamsName="queryParamsName"
6
+ :fixedQueryForm="fixedQueryForm"
7
+ @onSubmit="onSubmit"
8
+ @action="toDetail">
9
+ </x-form-table>
10
+ </a-card>
11
+ </template>
12
+
13
+ <script>
14
+ import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable'
15
+
16
+ export default {
17
+ name: 'DeviceDetailsException',
18
+ components: {
19
+ XFormTable
20
+ },
21
+ data () {
22
+ return {
23
+ // 选中的异常编号
24
+ selectSingularId: undefined,
25
+ tabActiveKey: undefined,
26
+ fixedQueryForm: {},
27
+ // 查询配置文件名
28
+ queryParamsName: 'deviceToExceptionQueryParams',
29
+ // 是否显示设置设备参数详情抽屉
30
+ detailVisible: false
31
+ }
32
+ },
33
+ props: {
34
+ deviceId: {
35
+ type: Number,
36
+ required: true
37
+ }
38
+ },
39
+ mounted () {
40
+ this.initView()
41
+ },
42
+ methods: {
43
+ initView () {
44
+ this.tabActiveKey = '1'
45
+ this.fixedQueryForm['e_f_device_id'] = this.deviceId
46
+ },
47
+ onSubmit (res) {
48
+ res.form['e_f_device_id'] = this.deviceId
49
+ this.$emit('onSubmit', res)
50
+ },
51
+ toDetail (record, id) {
52
+ // this.selectSingularId = record.id + ''
53
+ // this.detailVisible = true
54
+ }
55
+ }
56
+ }
57
+ </script>