system-clients 3.0.41 → 3.0.42-fanxian

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,534 +1,615 @@
1
- <template>
2
- <div @click="hindsetting1()">
3
- <!-- <div class="system-main" id="box" v-el:box v-if="!isManger">-->
4
- <!-- <div class="system-logo" style="height: auto">-->
5
- <!-- <img :src="imgs.logoimg" alt=""/>-->
6
- <!-- <label>{{systemname}}</label>-->
7
- <!-- <div class="system-logo-chi" >-->
8
- <!-- <div v-if="userpane" class="auto system-logo-prompt" style="float: right">-->
9
- <!-- <span>{{orgpathnames}}</span>-->
10
- <!-- </div>-->
11
- <!-- &lt;!&ndash;<div class="system-logo-chi-img1" style="float: right" @mouseenter="mouseenteruser()" @mouseleave="mouseleaveuser()"></div>&ndash;&gt;-->
12
- <!-- <span style="float: right; padding-top: 2px" @mouseenter="mouseenteruser()" @mouseleave="mouseleaveuser()" class="system-logo-chi-span-1">{{$login.f.name}}</span>-->
13
- <!-- <span style="border-left: 1px solid;float: right;padding-top: 2px" class="system-logo-chi-span-1"> <img src="../../static/newStyle/login-f.png" height="20" width="20"> </span>-->
14
- <!-- <a href="index.html" onclick="return confirm('您确定要退出系统吗?');" style="float: right;padding-top: 2px">-->
15
- <!-- <img src="../../static/newStyle/system-off.png" alt="" >-->
16
- <!-- <span class="system-logo-chi-span-1">退出系统</span>-->
17
- <!-- </a>-->
18
- <!-- <div style="float: right" :class="{'dropstyle':setting,'dropstyle-1':!setting}">-->
19
- <!-- <dropdown class="auto" >-->
20
- <!-- <span data-toggle="dropdown" @click="hindsetting()" >-->
21
- <!-- <img :src="srcsetting" alt=""><span>系统设置</span>-->
22
- <!-- </span>-->
23
- <!-- <ul slot="dropdown-menu" class="dropdown-menu dropdown-menu-up dropstyle-chi" >-->
24
- <!-- &lt;!&ndash; <li>系统信息及设置</li>&ndash;&gt;-->
25
- <!-- <li style="color: #ffffff;white-space: nowrap" @click="show=true">修改密码</li>-->
26
- <!-- <li style="color: #ffffff;white-space: nowrap" @click="AddChangeMsgShow=true">系统版本</li>-->
27
- <!-- </ul>-->
28
- <!-- </dropdown>-->
29
- <!-- </div>-->
30
-
31
- <!-- </div>-->
32
- <!-- </div>-->
33
- <!-- <div class="system-left tree-flex" :class="{'system-left-1': !treeOrIcon}" id="top" v-el:top >-->
34
- <!-- <div class="system-left-chi" :class="{'system-left-icon': !treeOrIcon}" >-->
35
- <!-- <div class="span system-left-tree" >-->
36
- <!-- <left-tree :functions='functions.functions' :userid='userid' @isnodo="isnodo" :treeOrIcon="treeOrIcon" :tabs="tabs" v-ref:tree></left-tree>-->
37
- <!-- &lt;!&ndash; <icon-tree :functions='functions.functions' :userid='userid' v-show="!treeOrIcon"></icon-tree>&ndash;&gt;-->
38
- <!-- </div>-->
39
- <!-- </div>-->
40
- <!-- <div class="system-foot-stretch" >-->
41
- <!-- <a @click="changeShow()"><img src="../../static/images/lefticon/菜单伸缩.png" alt=""></a>-->
42
- <!-- </div>-->
43
- <!-- </div>-->
44
-
45
-
46
- <!-- <div class="system-right" :class="{'system-right-1': !treeOrIcon}" id="bottom" v-el:bottom>-->
47
- <!-- <div class="span">-->
48
- <!-- <echarts-box v-if="$refs.mic.tabs.length === 0"></echarts-box>-->
49
- <!-- <dynamic :comps='[]' :showup="true" :showhide="false" name='main' :selecttab.sync="selecttab" @tab-changed="tabChange" @tabscg="tabcg" v-ref:mic v-show="!($refs.mic.tabs.length === 0)"></dynamic>-->
50
- <!-- </div>-->
51
- <!-- </div>-->
52
- <!-- <div class="system-foot" v-el:bottom>-->
53
-
54
- <!-- <div class="system-foot-box">-->
55
-
56
- <!-- </div>-->
57
- <!-- </div>-->
58
- <!-- </div>-->
59
-
60
- <div class='flex-row aaa system-main' id="box" v-el:box v-if="!isManger">
61
- <div class="auto" style="position: fixed;right: 30px;top: 20px;color: #333">
62
- <span>
63
- <img
64
- src="../assets/people.png" height="15" width="15">
65
- 登录人:</span>
66
- <label>{{orgpathnames}}</label>
67
- </div>
68
- <div class="system-left tree-flex" :class="{'tree-flex-icon': !treeOrIcon}" id="top" v-el:top >
69
- <div class="system-left-chi" :class="{'system-left-icon': !treeOrIcon}" >
70
- <div class="span system-left-tree " style="height:85%">
71
- <h3>{{systemname}}</h3>
72
- <!-- <div class="span" style="margin-bottom:10px;padding-bottom:5px;padding-top:5px;flex: 1;border-top: 1px solid #e5e5e5;border-bottom: 1px solid #e5e5e5;">-->
73
- <left-tree :functions='functions.functions' :userid='userid' @isnodo="isnodo" v-show="treeOrIcon" :tabs="tabs" v-ref:tree></left-tree>
74
- <!--&lt;!&ndash; <icon-tree :functions='functions.functions' :userid='userid' v-show="!treeOrIcon"></icon-tree>&ndash;&gt;-->
75
- </div>
76
-
77
- <div class="tree-flex-footer">
78
- <!-- <a @click="changeShow()"><img :src="imgs.open" alt=""><span v-if="treeOrIcon">菜单伸缩</span></a>-->
79
- <!-- <a><img src="../../../static/treeset.png" alt="">系统设置</a> -->
80
- <dropdown class="auto">
81
- <button type="button" data-toggle="dropdown">
82
- <img :src="imgs.set" alt=""><span v-if="treeOrIcon">系统设置</span>
83
- </button>
84
- <ul slot="dropdown-menu" class="dropdown-menu dropdown-menu-up">
85
- <li>系统信息及设置</li>
86
- <!-- <li>{{name}}</li> -->
87
- <li>{{date}}</li>
88
- <li @click="show=true">修改密码</li>
89
- <li @click="AddChangeMsgShow=true">系统版本:1.0.0</li>
90
- </ul>
91
-
92
- </dropdown>
93
- <a href="index.html" onclick="return confirm('您确定要退出系统吗?');">
94
- <img :src="imgs.out" alt="" ><span v-if="treeOrIcon">退出系统</span>
95
- </a>
96
- </div>
97
- </div>
98
- </div>
99
- <!-- <div class="line" id="line" v-show="treeOrIcon" v-el:line></div> -->
100
-
101
- <div class="flex right-bg system-right" id="bottom" v-el:bottom>
102
- <!-- <operator-badge></operator-badge> -->
103
- <div class="span">
104
- <echarts-box v-if="$refs.mic.tabs.length === 0"></echarts-box>
105
- <dynamic :comps='[]' name='main' :selecttab.sync="selecttab" @tab-changed="tabChange" @tabscg="tabcg" v-ref:mic v-show="!($refs.mic.tabs.length === 0)"></dynamic>
106
- </div>
107
- </div>
108
- </div>
109
- <div v-show="isManger">
110
- <route v-ref:route></route>
111
- </div>
112
-
113
- <!-- 变更录入 模态框 -->
114
- <add-changemsg :show="AddChangeMsgShow" v-on:toggle = "AddChangeMsgShow = false"></add-changemsg>
115
- <!-- 修改密码组件 -->
116
- <modify-pw :show.sync="show" v-if="show"></modify-pw>
117
- <!-- 修改密码模态框 -->
118
- </div>
119
- </template>
120
-
121
- <script>
122
- import vue from 'vue'
123
- import co from 'co'
124
-
125
- window.onunload = () => {
126
- vue.http({url: `rs/user/update/${this.$login.f.ename}`, method: 'GET'})
127
- }
128
- window.onbeforeunload = () => {
129
- vue.http({url: `rs/user/update/${this.$login.f.ename}`, method: 'GET'})
130
- }
131
- export default {
132
- title: '主界面',
133
- props: ['functions', 'userid'],
134
- data () {
135
- return {
136
- // 左侧树下部三个小图标
137
- imgs: {
138
- open: '/images/lefticon/菜单伸缩.png',
139
- set: '/images/lefticon/系统设置.png',
140
- out: '/images/lefticon/退出系统.png',
141
- img1: '/images/newStyle/login-user.png',
142
- logoimg: '/static/newStyle/fife.png'
143
- // img2: '/images/lefticon/退出系统.png',
144
- },
145
- treeOrIcon: false,
146
- isManger: false,
147
- show: false,
148
- orgpathnames: `${this.$login.f.orgs}-${this.$login.f.deps}-${this.$login.f.name}`,
149
- systemname: '客服系统',
150
- date: this.$login.toStandardDateString(),
151
- tabs:[], //已初始化页签数组
152
- selecttab:'',
153
- setting:true,
154
- srcsetting:'../../static/newStyle/setting.png'
155
-
156
- // headerHint: true, // 右侧顶部提示信息
157
- // value: 25645.26,
158
- // AddChangeMsgShow: false,
159
- // showsum: false
160
- }
161
- },
162
- ready () {
163
- let component = this.$login.getUrlCompileParames('component')
164
- if (component) {
165
- this.isManger = true
166
- this.$refs.route.init(component, {data: this.functions.functions})
167
- }
168
- if(this.$login.f.password == '1'){
169
- this.$showMessage('本地登录系统为此账户的初始密码,请确认修改密码!!!', ['confirm', 'cancel']).then((res) => {
170
- if(res == 'confirm')
171
- this.show = true
172
- })
173
- }
174
- console.log("系统名称",this.$appdata.getSingleValue("系统名称"))
175
- this.systemname = this.$appdata.getSingleValue("系统名称")? this.$appdata.getSingleValue("系统名称"):'客服系统'
176
- // let oBox = this.getElement("box")
177
- // let oTop = this.getElement("top")
178
- // let oBottom = this.getElement("bottom")
179
- // let oLine = this.getElement("line")
180
- // let that = this
181
- // oLine.onmousedown = function(e) {
182
- // let disX = (e || event).clientX
183
- // oLine.left = oLine.offsetLeft
184
- // document.onmousemove = function(e) {
185
- // let iT = oLine.left + ((e || event).clientX - disX)
186
- // var e = e || window.event
187
- // let tarnameb = e.target || e.srcElement
188
- // let maxT = oBox.clientWight - oLine.offsetWidth
189
- // oLine.style.margin = 0
190
- // iT < 0 && (iT = 0)
191
- // iT > maxT && (iT = maxT)
192
- // oLine.style.left = oTop.style.width = iT + "px"
193
- // oBottom.style.width = oBox.clientWidth - iT + "px"
194
- // that.$set('treeWidth', iT)
195
- // return false
196
- // }
197
- // document.onmouseup = function() {
198
- // document.onmousemove = null
199
- // document.onmouseup = null
200
- // oLine.releaseCapture && oLine.releaseCapture()
201
- // }
202
- // oLine.setCapture && oLine.setCapture()
203
- // return false
204
- // }
205
- this.changeShow()
206
- },
207
- methods: {
208
- hindsetting(){
209
-
210
- this.setting=!this.setting
211
- if(this.setting){
212
- this.srcsetting='../../static/newStyle/setting.png'
213
- }else {
214
- this.srcsetting='../../static/newStyle/setting1.png'
215
- }
216
-
217
- },
218
- hindsetting1(){
219
-
220
- if(!this.setting){
221
- this.srcsetting='../../static/newStyle/setting.png'
222
- this.setting=true
223
- }
224
-
225
- },
226
- isnodo(val){
227
- console.log(val,'ss')
228
- this.selecttab = val
229
- },
230
- unfurl () {
231
- if(this.showsum){
232
- this.showsum = false
233
- } else {
234
- this.showsum = true
235
- }
236
- },
237
- // getElement(id) {
238
- // return document.getElementById(id)
239
- // },
240
- changeShow () {
241
- // this.treeOrIcon = !this.treeOrIcon
242
- // let oBox = this.getElement("box")
243
- // let oTop = this.getElement("top")
244
- // let oBottom = this.getElement("bottom")
245
- // let oLine = this.getElement("line")
246
- // if (this.treeOrIcon) {
247
- // // oLine.style.left = oTop.style.width = 300 + "px"
248
- // oTop.style.width = 150 + "px"
249
- // oBottom.style.width = oBox.clientWidth - 150 + "px"
250
- // }else {
251
- // oLine.style.left = oTop.style.width = 50 + "px"
252
- // oBottom.style.width = oBox.clientWidth - 50 + "px"
253
- // }
254
- // }
255
- this.treeOrIcon = !this.treeOrIcon
256
- // if (this.treeOrIcon) {
257
- // this.$els.top.style.width = 14 + "%"
258
- // this.$els.bottom.style.width = this.$els.box.clientWidth - 14 + "%"
259
- // }else {
260
- // this.$els.top.style.width = 8 + "%"
261
- // this.$els.bottom.style.width = this.$els.box.clientWidth - 8 + "%"
262
- // }
263
- },
264
- changeMain(userid) {
265
- this.$goto('res-main', {userid: this.userid}, 'self')
266
- },
267
- tabChange (name) {
268
- console.log(name,'tabchanage')
269
- this.selecttab = name
270
- this.$refs.tree.changeSelect(name)
271
- },
272
- tabcg(val){
273
- console.log(val)
274
- this.tabs = val
275
- }
276
- },
277
- computed: {
278
- nowDate () {
279
- return this.$login.getNowDate()
280
- }
281
- }
282
- }
283
- </script>
284
- <style lang="less">
285
- /* 组件内通用样式 */
286
- .select-error {
287
- button {
288
- border-bottom: 1px solid #a94442!important;
289
- }
290
- }
291
- // input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
292
- // -webkit-appearance:textfield;
293
- // }
294
- /* 表单输入框组 */
295
- .form-input-group {
296
- display: flex;
297
-
298
- label {
299
- width: 100px;
300
- text-align: right;
301
- + * {
302
- flex: 1;
303
- }
304
- }
305
- }
306
- // 日期组件在表单中沾满
307
- .form-horizontal .datepicker {
308
- width: 100%;
309
- }
310
- // 下拉选择框占据剩余全部空间
311
- .select-overspread {
312
- .form-group {
313
- // margin: 0px 5px 10px 0px;
314
- .form-control {
315
- margin-right: 0px;
316
- }
317
- }
318
- .btn-group, .btn-group-vertical {
319
- width: 100%;
320
- // padding-right: 5px;
321
- button {
322
- width: 100%;
323
- display: flex;
324
- justify-content: space-between;
325
- align-items: center;
326
- }
327
- }
328
- .dropdown-menu {
329
- width: 100%
330
- }
331
- }
332
- // 需要特定宽度的的样式
333
- .width-60 {
334
- width: 60px;
335
- }
336
- .userpanel {
337
- font-weight: 300;
338
- color: #333;
339
- position: fixed;
340
- right: 30px;
341
- top: 45px;
342
- background-color: white;
343
- box-shadow: darkgrey 0.5px 0.5px 0.5px 0.5px ;
344
- padding: 4px 10px 4px 10px;
345
- border-radius:2px;
346
- }
347
- .width-80 {
348
- width: 80px;
349
- }
350
- .width-100 {
351
- width: 100px;
352
- }
353
-
354
-
355
-
356
- /*右侧区域的背景*/
357
- .right-bg {
358
- width: 100%;
359
- flex: 1;
360
- color: #304A66;
361
- }
362
- .tree-flex {
363
- height: 100%;
364
- // width: 150px;
365
- /*width: 60px;*/
366
- background: #4a7cae;
367
- color: #fff;
368
-
369
- }
370
- .tree-flex-icon {
371
- width: 50px;
372
- /*transition: 0.5s;*/
373
- > .span {
374
- overflow-x: visible;
375
- }
376
- }
377
- .tree-flex h3 {
378
- text-align: center;
379
- margin: 1em 0;
380
- }
381
-
382
- .tree-flex-footer {
383
- height: 50px;
384
- display: flex;
385
- flex-direction:column;
386
- color: #fff;
387
- }
388
- .tree-flex-footer a,.tree-flex-footer button{
389
- flex: 1;
390
- padding: 8px 5px;
391
- font-size: 1.2em;
392
- // border-top: 1px solid #697D93;
393
- border-top: 1px solid #4a7cae;
394
- text-decoration: none;
395
- color: #fff;
396
- cursor: pointer;
397
- }
398
- .tree-flex-footer button {
399
- height: auto;
400
- width: 100%;
401
- border-radius: 0px;
402
- background-color: rgba(255,255,255,0);
403
- border: none;
404
- border-top: 1px solid #4a7cae;
405
- // border-top: 1px solid #697D93;
406
- text-align: left;
407
- }
408
- .tree-flex-footer button:hover{
409
- outline: none;
410
- background-color: rgba(255,255,255,0.2);
411
- }
412
- .tree-flex-footer button:focus {
413
- outline: none;
414
- background-color: rgba(255,255,255,0.5);
415
- }
416
- .tree-flex-footer a:hover {
417
- color: #FFF;
418
- background-color: rgba(255,255,255,0.2);
419
- }
420
- .tree-flex .btn-group {
421
- height: 50px!important;
422
- }
423
-
424
- .tree-flex .dropdown-menu {
425
- /* 控制显示列表的样式 */
426
- background: #4a7cae;
427
- border-radius: 0px;
428
- color: #fff;
429
- width: auto;
430
- margin: 0px;
431
- padding: 0px;
432
- }
433
- .tree-flex .dropdown-menu-up {
434
- /* bottom,top控制上下,left和right控制左右*/
435
- left: 100%!important;
436
- top: auto!important;
437
- bottom: 0;
438
- }
439
- .tree-flex .dropdown-menu-down {
440
- /* bottom,top控制上下,left和right控制左右*/
441
- left: 100%!important;
442
- top: 0!important;
443
- }
444
- .tree-flex .dropdown-menu li{
445
- text-align: center;
446
- line-height: 50px;
447
- border-bottom: 1px solid #697D93;
448
- font-size: 1.2em;
449
- width: auto;
450
- white-space: nowrap;
451
- cursor: default;
452
-
453
- }
454
- .tree-flex .dropdown-menu li + li {
455
- text-align: left;
456
- border: 0;
457
- line-height: 40px;
458
- padding-left: 15px;
459
- padding-right: 15px;
460
- font-size: 1em;
461
- cursor: pointer;
462
- }
463
- .tree-flex .dropdown-menu li + li:hover {
464
- background-color: rgba(255,255,255,0.2);
465
- }
466
- .tree-flex .dropdown-menu li a {
467
- border: none;
468
- color: #fff;
469
- height: 40px;
470
- line-height: 40px;
471
- font-size: 1em;
472
- padding: 0px;
473
- }
474
- .tree-flex .dropdown-menu li a:hover {
475
- color: #fff;
476
- background-color: rgba(255,255,255,0);
477
- }
478
- .tree-flex img{
479
- height: 1.2em;
480
- width: 1.2em;
481
- margin-right: 15px;
482
- margin-left: 5px;
483
- }
484
- .line {
485
- height: 100%;
486
- width: 5px;
487
- background: #4C637B;
488
- cursor: e-resize;
489
- }
490
- /*为树(tree)组件写的样式*/
491
- .tree-img {
492
- font-size: 1.2em;
493
- }
494
-
495
- /*将较长信息截断显示,鼠标悬停显示全部信息*/
496
- .cutout50 {
497
- max-width: 50px;
498
- overflow:hidden;
499
- text-overflow: ellipsis;
500
- white-space: nowrap;
501
- }
502
-
503
- /* 滚动条样式 */
504
- /*---滚动条默认显示样式--*/
505
- ::-webkit-scrollbar-thumb{
506
- // display: none;
507
- background-color:rgba(0,0,0,0.4);
508
- /*background-color:red;*/
509
- height:50px;
510
- outline-offset:-2px;
511
- /*outline:2px solid #fff;*/
512
- -webkit-border-radius:4px;
513
- /*border: 2px solid #fff;*/
514
- }
515
-
516
- /*---鼠标点击滚动条显示样式--*/
517
- ::-webkit-scrollbar-thumb:hover{
518
- // display: inherit;
519
- background-color:rgba(0,0,0,0.4);
520
- height:50px;
521
- -webkit-border-radius:4px;
522
- }
523
- /*---滚动条大小--*/
524
- ::-webkit-scrollbar{
525
- width:8px;
526
- height:8px;
527
- }
528
- /*---滚动框背景样式--*/
529
- ::-webkit-scrollbar-track-piece{
530
- /* 全透明,不显示 */
531
- background-color:rgba(255,255,255,0);
532
- -webkit-border-radius:0;
533
- }
534
- </style>
1
+ <template>
2
+ <div @click="hindsetting1()">
3
+ <!-- <div class="system-main" id="box" v-el:box v-if="!isManger">-->
4
+ <!-- <div class="system-logo" style="height: auto">-->
5
+ <!-- <img :src="imgs.logoimg" alt=""/>-->
6
+ <!-- <label>{{systemname}}</label>-->
7
+ <!-- <div class="system-logo-chi" >-->
8
+ <!-- <div v-if="userpane" class="auto system-logo-prompt" style="float: right">-->
9
+ <!-- <span>{{orgpathnames}}</span>-->
10
+ <!-- </div>-->
11
+ <!-- &lt;!&ndash;<div class="system-logo-chi-img1" style="float: right" @mouseenter="mouseenteruser()" @mouseleave="mouseleaveuser()"></div>&ndash;&gt;-->
12
+ <!-- <span style="float: right; padding-top: 2px" @mouseenter="mouseenteruser()" @mouseleave="mouseleaveuser()" class="system-logo-chi-span-1">{{$login.f.name}}</span>-->
13
+ <!-- <span style="border-left: 1px solid;float: right;padding-top: 2px" class="system-logo-chi-span-1"> <img src="../../static/newStyle/login-f.png" height="20" width="20"> </span>-->
14
+ <!-- <a href="index.html" onclick="return confirm('您确定要退出系统吗?');" style="float: right;padding-top: 2px">-->
15
+ <!-- <img src="../../static/newStyle/system-off.png" alt="" >-->
16
+ <!-- <span class="system-logo-chi-span-1">退出系统</span>-->
17
+ <!-- </a>-->
18
+ <!-- <div style="float: right" :class="{'dropstyle':setting,'dropstyle-1':!setting}">-->
19
+ <!-- <dropdown class="auto" >-->
20
+ <!-- <span data-toggle="dropdown" @click="hindsetting()" >-->
21
+ <!-- <img :src="srcsetting" alt=""><span>系统设置</span>-->
22
+ <!-- </span>-->
23
+ <!-- <ul slot="dropdown-menu" class="dropdown-menu dropdown-menu-up dropstyle-chi" >-->
24
+ <!-- &lt;!&ndash; <li>系统信息及设置</li>&ndash;&gt;-->
25
+ <!-- <li style="color: #ffffff;white-space: nowrap" @click="show=true">修改密码</li>-->
26
+ <!-- <li style="color: #ffffff;white-space: nowrap" @click="AddChangeMsgShow=true">系统版本</li>-->
27
+ <!-- </ul>-->
28
+ <!-- </dropdown>-->
29
+ <!-- </div>-->
30
+
31
+ <!-- </div>-->
32
+ <!-- </div>-->
33
+ <!-- <div class="system-left tree-flex" :class="{'system-left-1': !treeOrIcon}" id="top" v-el:top >-->
34
+ <!-- <div class="system-left-chi" :class="{'system-left-icon': !treeOrIcon}" >-->
35
+ <!-- <div class="span system-left-tree" >-->
36
+ <!-- <left-tree :functions='functions.functions' :userid='userid' @isnodo="isnodo" :treeOrIcon="treeOrIcon" :tabs="tabs" v-ref:tree></left-tree>-->
37
+ <!-- &lt;!&ndash; <icon-tree :functions='functions.functions' :userid='userid' v-show="!treeOrIcon"></icon-tree>&ndash;&gt;-->
38
+ <!-- </div>-->
39
+ <!-- </div>-->
40
+ <!-- <div class="system-foot-stretch" >-->
41
+ <!-- <a @click="changeShow()"><img src="../../static/images/lefticon/菜单伸缩.png" alt=""></a>-->
42
+ <!-- </div>-->
43
+ <!-- </div>-->
44
+
45
+
46
+ <!-- <div class="system-right" :class="{'system-right-1': !treeOrIcon}" id="bottom" v-el:bottom>-->
47
+ <!-- <div class="span">-->
48
+ <!-- <echarts-box v-if="$refs.mic.tabs.length === 0"></echarts-box>-->
49
+ <!-- <dynamic :comps='[]' :showup="true" :showhide="false" name='main' :selecttab.sync="selecttab" @tab-changed="tabChange" @tabscg="tabcg" v-ref:mic v-show="!($refs.mic.tabs.length === 0)"></dynamic>-->
50
+ <!-- </div>-->
51
+ <!-- </div>-->
52
+ <!-- <div class="system-foot" v-el:bottom>-->
53
+
54
+ <!-- <div class="system-foot-box">-->
55
+
56
+ <!-- </div>-->
57
+ <!-- </div>-->
58
+ <!-- </div>-->
59
+
60
+ <div class='flex-row aaa system-main' id="box" v-el:box v-if="!isManger">
61
+ <div class="auto" style="position: fixed;right: 370px;top: 15px;color: #333">
62
+ <button class="btn" @click="showAbnormity = true" style="background: none;">
63
+ <img
64
+ src="../assets/shezhi-hover.png" height="15" width="15">
65
+ 异常警报<label style="display: inline-block;width: 8px;height: 8px;border-radius: 50%;background-color: red;text-align: center;line-height: 30px;" v-show="showaData"></label>
66
+ </button>
67
+ <button class="btn" @click="stopSound" style="background: none;">
68
+ 关闭警报
69
+ </button>
70
+ </div>
71
+ <div class="auto" style="position: fixed;right: 30px;top: 20px;color: #333">
72
+ <span>
73
+ <img
74
+ src="../assets/people.png" height="15" width="15">
75
+ 登录人:</span>
76
+ <label>{{orgpathnames}}</label>
77
+ </div>
78
+ <div class="system-left tree-flex" :class="{'tree-flex-icon': !treeOrIcon}" id="top" v-el:top >
79
+ <div class="system-left-chi" :class="{'system-left-icon': !treeOrIcon}" >
80
+ <div class="span system-left-tree " style="height:85%">
81
+ <h3>{{systemname}}</h3>
82
+ <!-- <div class="span" style="margin-bottom:10px;padding-bottom:5px;padding-top:5px;flex: 1;border-top: 1px solid #e5e5e5;border-bottom: 1px solid #e5e5e5;">-->
83
+ <left-tree :functions='functions.functions' :userid='userid' @isnodo="isnodo" v-show="treeOrIcon" :tabs="tabs" v-ref:tree></left-tree>
84
+ <!--&lt;!&ndash; <icon-tree :functions='functions.functions' :userid='userid' v-show="!treeOrIcon"></icon-tree>&ndash;&gt;-->
85
+ </div>
86
+
87
+ <div class="tree-flex-footer">
88
+ <!-- <a @click="changeShow()"><img :src="imgs.open" alt=""><span v-if="treeOrIcon">菜单伸缩</span></a>-->
89
+ <!-- <a><img src="../../../static/treeset.png" alt="">系统设置</a> -->
90
+ <dropdown class="auto">
91
+ <button type="button" data-toggle="dropdown">
92
+ <img :src="imgs.set" alt=""><span v-if="treeOrIcon">系统设置</span>
93
+ </button>
94
+ <ul slot="dropdown-menu" class="dropdown-menu dropdown-menu-up">
95
+ <li>系统信息及设置</li>
96
+ <!-- <li>{{name}}</li> -->
97
+ <li>{{date}}</li>
98
+ <li @click="show=true">修改密码</li>
99
+ <li @click="AddChangeMsgShow=true">系统版本:1.0.0</li>
100
+ </ul>
101
+
102
+ </dropdown>
103
+ <a href="index.html" onclick="return confirm('您确定要退出系统吗?');">
104
+ <img :src="imgs.out" alt="" ><span v-if="treeOrIcon">退出系统</span>
105
+ </a>
106
+ </div>
107
+ </div>
108
+ </div>
109
+ <!-- <div class="line" id="line" v-show="treeOrIcon" v-el:line></div> -->
110
+
111
+ <div class="flex right-bg system-right" id="bottom" v-el:bottom>
112
+ <!-- <operator-badge></operator-badge> -->
113
+ <div class="span">
114
+ <echarts-box v-if="$refs.mic.tabs.length === 0"></echarts-box>
115
+ <dynamic :comps='[]' name='main' :selecttab.sync="selecttab" @tab-changed="tabChange" @tabscg="tabcg" v-ref:mic v-show="!($refs.mic.tabs.length === 0)"></dynamic>
116
+ </div>
117
+ </div>
118
+ </div>
119
+ <div v-show="isManger">
120
+ <route v-ref:route></route>
121
+ </div>
122
+
123
+ <!-- 变更录入 模态框 -->
124
+ <add-changemsg :show="AddChangeMsgShow" v-on:toggle = "AddChangeMsgShow = false"></add-changemsg>
125
+ <!-- 修改密码组件 -->
126
+ <modify-pw :show.sync="show" v-if="show"></modify-pw>
127
+ <!-- 修改密码模态框 -->
128
+ <!-- 异常查看 -->
129
+ <modal v-if="showAbnormity" :show.sync="showAbnormity" :width="1000" v-ref:modal backdrop="false">
130
+ <header slot="modal-header" class="modal-header">
131
+ <button type="button" class="close" @click="showAbnormity = false"><span>&times;</span></button>
132
+ <h4 class="modal-title">异常报警</h4>
133
+ </header>
134
+ <article slot="modal-body" class="modal-body modifystyle auto form-horizontal">
135
+ <alarm-information :mergeinfo=abnormityWarningData></alarm-information>
136
+ </article>
137
+ <footer slot="modal-footer" class="modal-footer">
138
+ <button type="button" class="btn btn-success" @click='showAbnormity = false'>确认</button>
139
+ </footer>
140
+ </modal>
141
+ </div>
142
+ </template>
143
+
144
+ <script>
145
+ import vue from 'vue'
146
+ import co from 'co'
147
+
148
+ window.onunload = () => {
149
+ vue.http({url: `rs/user/update/${this.$login.f.ename}`, method: 'GET'})
150
+ }
151
+ window.onbeforeunload = () => {
152
+ vue.http({url: `rs/user/update/${this.$login.f.ename}`, method: 'GET'})
153
+ }
154
+ export default {
155
+ title: '主界面',
156
+ props: ['functions', 'userid'],
157
+ data () {
158
+ return {
159
+ // 左侧树下部三个小图标
160
+ imgs: {
161
+ open: '/images/lefticon/菜单伸缩.png',
162
+ set: '/images/lefticon/系统设置.png',
163
+ out: '/images/lefticon/退出系统.png',
164
+ img1: '/images/newStyle/login-user.png',
165
+ logoimg: '/static/newStyle/fife.png'
166
+ // img2: '/images/lefticon/退出系统.png',
167
+ },
168
+ treeOrIcon: false,
169
+ isManger: false,
170
+ show: false,
171
+ orgpathnames: `${this.$login.f.orgs}-${this.$login.f.deps}-${this.$login.f.name}`,
172
+ systemname: '客服系统',
173
+ date: this.$login.toStandardDateString(),
174
+ tabs:[], //已初始化页签数组
175
+ selecttab:'',
176
+ setting:true,
177
+ srcsetting:'../../static/newStyle/setting.png',
178
+ abnormityWarningData: {
179
+ data: []
180
+ },
181
+ showAbnormity: false,
182
+ showaData: false,
183
+ audio: null,
184
+ isTimeAb: parseInt(this.$appdata.getSingleValue('异常报警查询时间')),
185
+ isBell: this.$appdata.getSingleValue('是否响铃')
186
+
187
+
188
+ // headerHint: true, // 右侧顶部提示信息
189
+ // value: 25645.26,
190
+ // AddChangeMsgShow: false,
191
+ // showsum: false
192
+ }
193
+ },
194
+ ready () {
195
+ let component = this.$login.getUrlCompileParames('component')
196
+ if (component) {
197
+ this.isManger = true
198
+ this.$refs.route.init(component, {data: this.functions.functions})
199
+ }
200
+ if(this.$login.f.password == '1'){
201
+ this.$showMessage('本地登录系统为此账户的初始密码,请确认修改密码!!!', ['confirm', 'cancel']).then((res) => {
202
+ if(res == 'confirm')
203
+ this.show = true
204
+ })
205
+ }
206
+ console.log("系统名称",this.$appdata.getSingleValue("系统名称"))
207
+ this.systemname = this.$appdata.getSingleValue("系统名称")? this.$appdata.getSingleValue("系统名称"):'客服系统'
208
+ // let oBox = this.getElement("box")
209
+ // let oTop = this.getElement("top")
210
+ // let oBottom = this.getElement("bottom")
211
+ // let oLine = this.getElement("line")
212
+ // let that = this
213
+ // oLine.onmousedown = function(e) {
214
+ // let disX = (e || event).clientX
215
+ // oLine.left = oLine.offsetLeft
216
+ // document.onmousemove = function(e) {
217
+ // let iT = oLine.left + ((e || event).clientX - disX)
218
+ // var e = e || window.event
219
+ // let tarnameb = e.target || e.srcElement
220
+ // let maxT = oBox.clientWight - oLine.offsetWidth
221
+ // oLine.style.margin = 0
222
+ // iT < 0 && (iT = 0)
223
+ // iT > maxT && (iT = maxT)
224
+ // oLine.style.left = oTop.style.width = iT + "px"
225
+ // oBottom.style.width = oBox.clientWidth - iT + "px"
226
+ // that.$set('treeWidth', iT)
227
+ // return false
228
+ // }
229
+ // document.onmouseup = function() {
230
+ // document.onmousemove = null
231
+ // document.onmouseup = null
232
+ // oLine.releaseCapture && oLine.releaseCapture()
233
+ // }
234
+ // oLine.setCapture && oLine.setCapture()
235
+ // return false
236
+ // }
237
+ this.changeShow()
238
+ // 在组件挂载后立即开始定时任务
239
+ this.abnormityWarning()
240
+ this.abnormityWarData()
241
+ },
242
+ methods: {
243
+ abnormityWarning () {
244
+ setInterval(() => {
245
+ this.abnormityWarningData = []
246
+ this.$resetpost('rs/sql/getAbnormityWarning', {data: {}}, {resolveMsg: '', rejectMsg: ''}).then(item => {
247
+ this.abnormityWarningData = item
248
+ if (this.abnormityWarningData.data.length > 0) {
249
+ this.playSound()
250
+ this.showaData = true
251
+ } else {
252
+ this.showaData = false
253
+ }
254
+ })
255
+ }, this.isTimeAb)
256
+ },
257
+ abnormityWarData () {
258
+ this.$resetpost('rs/sql/getAbnormityWarning', {data: {}}, {resolveMsg: '', rejectMsg: ''}).then(item => {
259
+ console.log('--------数据----------')
260
+ console.log(item)
261
+ console.log('------------------')
262
+ this.abnormityWarningData = item
263
+ if (this.isBell === '是') {
264
+ if (this.abnormityWarningData.data.length > 0) {
265
+ this.playSound()
266
+ this.showaData = true
267
+ } else {
268
+ this.showaData = false
269
+ }
270
+ }
271
+ })
272
+ },
273
+ hindsetting(){
274
+
275
+ this.setting=!this.setting
276
+ if(this.setting){
277
+ this.srcsetting='../../static/newStyle/setting.png'
278
+ }else {
279
+ this.srcsetting='../../static/newStyle/setting1.png'
280
+ }
281
+
282
+ },
283
+ hindsetting1(){
284
+
285
+ if(!this.setting){
286
+ this.srcsetting='../../static/newStyle/setting.png'
287
+ this.setting=true
288
+ }
289
+
290
+ },
291
+ isnodo(val){
292
+ console.log(val,'ss')
293
+ this.selecttab = val
294
+ },
295
+ unfurl () {
296
+ if(this.showsum){
297
+ this.showsum = false
298
+ } else {
299
+ this.showsum = true
300
+ }
301
+ },
302
+ // getElement(id) {
303
+ // return document.getElementById(id)
304
+ // },
305
+ changeShow () {
306
+ // this.treeOrIcon = !this.treeOrIcon
307
+ // let oBox = this.getElement("box")
308
+ // let oTop = this.getElement("top")
309
+ // let oBottom = this.getElement("bottom")
310
+ // let oLine = this.getElement("line")
311
+ // if (this.treeOrIcon) {
312
+ // // oLine.style.left = oTop.style.width = 300 + "px"
313
+ // oTop.style.width = 150 + "px"
314
+ // oBottom.style.width = oBox.clientWidth - 150 + "px"
315
+ // }else {
316
+ // oLine.style.left = oTop.style.width = 50 + "px"
317
+ // oBottom.style.width = oBox.clientWidth - 50 + "px"
318
+ // }
319
+ // }
320
+ this.treeOrIcon = !this.treeOrIcon
321
+ // if (this.treeOrIcon) {
322
+ // this.$els.top.style.width = 14 + "%"
323
+ // this.$els.bottom.style.width = this.$els.box.clientWidth - 14 + "%"
324
+ // }else {
325
+ // this.$els.top.style.width = 8 + "%"
326
+ // this.$els.bottom.style.width = this.$els.box.clientWidth - 8 + "%"
327
+ // }
328
+ },
329
+ changeMain(userid) {
330
+ this.$goto('res-main', {userid: this.userid}, 'self')
331
+ },
332
+ tabChange (name) {
333
+ console.log(name,'tabchanage')
334
+ this.selecttab = name
335
+ this.$refs.tree.changeSelect(name)
336
+ },
337
+ tabcg(val){
338
+ console.log(val)
339
+ this.tabs = val
340
+ },
341
+ playSound () {
342
+ if (this.audio) {
343
+ this.audio.pause()
344
+ this.audio = null
345
+ }
346
+ this.audio = new Audio()
347
+ this.audio.src = 'static/newStyle/alarm.mp3' // 替换为实际的音频文件路径
348
+ this.audio.loop = true // 设置循环播放
349
+ this.audio.play()
350
+ },
351
+ stopSound () {
352
+ if (this.audio) {
353
+ this.audio.pause()
354
+ this.audio = null
355
+ }
356
+ }
357
+ },
358
+ computed: {
359
+ nowDate () {
360
+ return this.$login.getNowDate()
361
+ }
362
+ }
363
+ }
364
+ </script>
365
+ <style lang="less">
366
+ /* 组件内通用样式 */
367
+ .select-error {
368
+ button {
369
+ border-bottom: 1px solid #a94442!important;
370
+ }
371
+ }
372
+ // input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
373
+ // -webkit-appearance:textfield;
374
+ // }
375
+ /* 表单输入框组 */
376
+ .form-input-group {
377
+ display: flex;
378
+
379
+ label {
380
+ width: 100px;
381
+ text-align: right;
382
+ + * {
383
+ flex: 1;
384
+ }
385
+ }
386
+ }
387
+ // 日期组件在表单中沾满
388
+ .form-horizontal .datepicker {
389
+ width: 100%;
390
+ }
391
+ // 下拉选择框占据剩余全部空间
392
+ .select-overspread {
393
+ .form-group {
394
+ // margin: 0px 5px 10px 0px;
395
+ .form-control {
396
+ margin-right: 0px;
397
+ }
398
+ }
399
+ .btn-group, .btn-group-vertical {
400
+ width: 100%;
401
+ // padding-right: 5px;
402
+ button {
403
+ width: 100%;
404
+ display: flex;
405
+ justify-content: space-between;
406
+ align-items: center;
407
+ }
408
+ }
409
+ .dropdown-menu {
410
+ width: 100%
411
+ }
412
+ }
413
+ // 需要特定宽度的的样式
414
+ .width-60 {
415
+ width: 60px;
416
+ }
417
+ .userpanel {
418
+ font-weight: 300;
419
+ color: #333;
420
+ position: fixed;
421
+ right: 30px;
422
+ top: 45px;
423
+ background-color: white;
424
+ box-shadow: darkgrey 0.5px 0.5px 0.5px 0.5px ;
425
+ padding: 4px 10px 4px 10px;
426
+ border-radius:2px;
427
+ }
428
+ .width-80 {
429
+ width: 80px;
430
+ }
431
+ .width-100 {
432
+ width: 100px;
433
+ }
434
+
435
+
436
+
437
+ /*右侧区域的背景*/
438
+ .right-bg {
439
+ width: 100%;
440
+ flex: 1;
441
+ color: #304A66;
442
+ }
443
+ .tree-flex {
444
+ height: 100%;
445
+ // width: 150px;
446
+ /*width: 60px;*/
447
+ background: #4a7cae;
448
+ color: #fff;
449
+
450
+ }
451
+ .tree-flex-icon {
452
+ width: 50px;
453
+ /*transition: 0.5s;*/
454
+ > .span {
455
+ overflow-x: visible;
456
+ }
457
+ }
458
+ .tree-flex h3 {
459
+ text-align: center;
460
+ margin: 1em 0;
461
+ }
462
+
463
+ .tree-flex-footer {
464
+ height: 50px;
465
+ display: flex;
466
+ flex-direction:column;
467
+ color: #fff;
468
+ }
469
+ .tree-flex-footer a,.tree-flex-footer button{
470
+ flex: 1;
471
+ padding: 8px 5px;
472
+ font-size: 1.2em;
473
+ // border-top: 1px solid #697D93;
474
+ border-top: 1px solid #4a7cae;
475
+ text-decoration: none;
476
+ color: #fff;
477
+ cursor: pointer;
478
+ }
479
+ .tree-flex-footer button {
480
+ height: auto;
481
+ width: 100%;
482
+ border-radius: 0px;
483
+ background-color: rgba(255,255,255,0);
484
+ border: none;
485
+ border-top: 1px solid #4a7cae;
486
+ // border-top: 1px solid #697D93;
487
+ text-align: left;
488
+ }
489
+ .tree-flex-footer button:hover{
490
+ outline: none;
491
+ background-color: rgba(255,255,255,0.2);
492
+ }
493
+ .tree-flex-footer button:focus {
494
+ outline: none;
495
+ background-color: rgba(255,255,255,0.5);
496
+ }
497
+ .tree-flex-footer a:hover {
498
+ color: #FFF;
499
+ background-color: rgba(255,255,255,0.2);
500
+ }
501
+ .tree-flex .btn-group {
502
+ height: 50px!important;
503
+ }
504
+
505
+ .tree-flex .dropdown-menu {
506
+ /* 控制显示列表的样式 */
507
+ background: #4a7cae;
508
+ border-radius: 0px;
509
+ color: #fff;
510
+ width: auto;
511
+ margin: 0px;
512
+ padding: 0px;
513
+ }
514
+ .tree-flex .dropdown-menu-up {
515
+ /* bottom,top控制上下,left和right控制左右*/
516
+ left: 100%!important;
517
+ top: auto!important;
518
+ bottom: 0;
519
+ }
520
+ .tree-flex .dropdown-menu-down {
521
+ /* bottom,top控制上下,left和right控制左右*/
522
+ left: 100%!important;
523
+ top: 0!important;
524
+ }
525
+ .tree-flex .dropdown-menu li{
526
+ text-align: center;
527
+ line-height: 50px;
528
+ border-bottom: 1px solid #697D93;
529
+ font-size: 1.2em;
530
+ width: auto;
531
+ white-space: nowrap;
532
+ cursor: default;
533
+
534
+ }
535
+ .tree-flex .dropdown-menu li + li {
536
+ text-align: left;
537
+ border: 0;
538
+ line-height: 40px;
539
+ padding-left: 15px;
540
+ padding-right: 15px;
541
+ font-size: 1em;
542
+ cursor: pointer;
543
+ }
544
+ .tree-flex .dropdown-menu li + li:hover {
545
+ background-color: rgba(255,255,255,0.2);
546
+ }
547
+ .tree-flex .dropdown-menu li a {
548
+ border: none;
549
+ color: #fff;
550
+ height: 40px;
551
+ line-height: 40px;
552
+ font-size: 1em;
553
+ padding: 0px;
554
+ }
555
+ .tree-flex .dropdown-menu li a:hover {
556
+ color: #fff;
557
+ background-color: rgba(255,255,255,0);
558
+ }
559
+ .tree-flex img{
560
+ height: 1.2em;
561
+ width: 1.2em;
562
+ margin-right: 15px;
563
+ margin-left: 5px;
564
+ }
565
+ .line {
566
+ height: 100%;
567
+ width: 5px;
568
+ background: #4C637B;
569
+ cursor: e-resize;
570
+ }
571
+ /*为树(tree)组件写的样式*/
572
+ .tree-img {
573
+ font-size: 1.2em;
574
+ }
575
+
576
+ /*将较长信息截断显示,鼠标悬停显示全部信息*/
577
+ .cutout50 {
578
+ max-width: 50px;
579
+ overflow:hidden;
580
+ text-overflow: ellipsis;
581
+ white-space: nowrap;
582
+ }
583
+
584
+ /* 滚动条样式 */
585
+ /*---滚动条默认显示样式--*/
586
+ ::-webkit-scrollbar-thumb{
587
+ // display: none;
588
+ background-color:rgba(0,0,0,0.4);
589
+ /*background-color:red;*/
590
+ height:50px;
591
+ outline-offset:-2px;
592
+ /*outline:2px solid #fff;*/
593
+ -webkit-border-radius:4px;
594
+ /*border: 2px solid #fff;*/
595
+ }
596
+
597
+ /*---鼠标点击滚动条显示样式--*/
598
+ ::-webkit-scrollbar-thumb:hover{
599
+ // display: inherit;
600
+ background-color:rgba(0,0,0,0.4);
601
+ height:50px;
602
+ -webkit-border-radius:4px;
603
+ }
604
+ /*---滚动条大小--*/
605
+ ::-webkit-scrollbar{
606
+ width:8px;
607
+ height:8px;
608
+ }
609
+ /*---滚动框背景样式--*/
610
+ ::-webkit-scrollbar-track-piece{
611
+ /* 全透明,不显示 */
612
+ background-color:rgba(255,255,255,0);
613
+ -webkit-border-radius:0;
614
+ }
615
+ </style>