system-clients 3.2.1-24 → 3.2.1-25

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,645 +1,650 @@
1
- <template>
2
- <div @click="hindsetting1()" :class="{'with-watermark':showwatermakeflag}">
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
- <div class='flex-row system-main' id="box" v-el:box v-if="!isManger">
60
- <div class="auto login-operator1" v-if="$refs.mic.tabs.length === 0">
61
- <span>
62
- <img
63
- src="../assets/people.png" height="15" width="15">
64
- 登录人:</span>
65
- <label>{{ orgpathnames }}</label>
66
- </div>
67
- <div class="system-left tree-flex" :class="{'tree-flex-icon': !treeOrIcon}" id="top" v-el:top>
68
- <div class="system-left-chi" :class="{'system-left-icon': !treeOrIcon}">
69
- <div class="span system-left-tree " style="height:85%">
70
- <h3>{{ systemname }}</h3>
71
- <!-- <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;">-->
72
- <left-tree :functions='functions.functions' :userid='userid' @isnodo="isnodo" v-show="treeOrIcon"
73
- :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" @click.prevent="logOut">
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" :orgpathnames="orgpathnames"
106
- @tab-changed="tabChange" @tabscg="tabcg" v-ref:mic v-show="!($refs.mic.tabs.length === 0)"></dynamic>
107
- </div>
108
- </div>
109
- </div>
110
- <div v-show="isManger">
111
- <route v-ref:route></route>
112
- </div>
113
-
114
- <!-- 变更录入 模态框 -->
115
- <add-changemsg :show="AddChangeMsgShow" v-on:toggle="AddChangeMsgShow = false"></add-changemsg>
116
- <!-- 修改密码组件 -->
117
- <modify-pw :show.sync="show" v-if="show"></modify-pw>
118
- <!-- 修改密码模态框 -->
119
- </div>
120
- </template>
121
-
122
- <script>
123
- import vue from 'vue'
124
- import co from 'co'
125
- import {HttpResetClass} from "vue-client";
126
-
127
- let getwartermakr = async function (self) {
128
- let param = {
129
- tablename: 't_singlevalue',
130
- condition: " 1=1 and name=\'水印内容\'"
131
- };
132
- let result = await self.$resetpost('rs/sql/saleSingleTable', {data: param}, {resolveMsg: null, rejectMsg: null});
133
- if (result && result.data.length > 0) {
134
- self.showwatermakeflag = true;
135
- createWaterMark(result.data[0].value);
136
- } else {
137
- self.showwatermakeflag = false;
138
- }
139
- }
140
-
141
- let createWaterMark = function (userName) {
142
- let style;
143
- if (style) style.remove();
144
- let width = window.parseInt(document.body.clientWidth);
145
- let canvasWidth = width / window.parseInt(width / 320);
146
- let fontFamily = window.getComputedStyle(document.body)["font-family"];
147
- let canvas = document.createElement("canvas");
148
- canvas.width = canvasWidth;
149
- canvas.height = 200;
150
- let ctx = canvas.getContext("2d");
151
- ctx.rotate((-20 * Math.PI) / 180);
152
- ctx.font = `20px ${fontFamily}`;
153
- ctx.fillStyle = "rgba(8,8,8,.1)";
154
- ctx.fillText(userName, 50, 200);
155
- let imgSrc = canvas.toDataURL("image/png");
156
- style = document.createElement("style");
157
- style.innerHTML = `.with-watermark:before{
158
- content: "";
159
- width: 100%;
160
- height: 100%;
161
- display: block;
162
- position: absolute;
163
- background-image: url("${imgSrc}");
164
- }`;
165
- (document.head.append || document.head.appendChild).apply(document.head, [style]);
166
- }
167
-
168
- window.onunload = () => {
169
- vue.http({url: `rs/user/update/${this.$login.f.ename}`, method: 'GET'})
170
- }
171
- window.onbeforeunload = () => {
172
- vue.http({url: `rs/user/update/${this.$login.f.ename}`, method: 'GET'})
173
- }
174
- export default {
175
- title: '主界面',
176
- props: ['functions', 'userid'],
177
- data() {
178
- return {
179
- // 左侧树下部三个小图标
180
- imgs: {
181
- open: '/images/lefticon/菜单伸缩.png',
182
- set: '/images/lefticon/系统设置.png',
183
- out: '/images/lefticon/退出系统.png',
184
- img1: '/images/newStyle/login-user.png',
185
- logoimg: '/static/newStyle/fife.png'
186
- // img2: '/images/lefticon/退出系统.png',
187
- },
188
- treeOrIcon: false,
189
- isManger: false,
190
- show: false,
191
- orgpathnames: `${this.$login.f.orgs}-${this.$login.f.deps}-${this.$login.f.name}`,
192
- systemname: '客服系统',
193
- date: this.$login.toStandardDateString(),
194
- tabs: [], //已初始化页签数组
195
- selecttab: '',
196
- setting: true,
197
- srcsetting: '../../static/newStyle/setting.png',
198
- showwatermakeflag: false,
199
- // headerHint: true, // 右侧顶部提示信息
200
- // value: 25645.26,
201
- // AddChangeMsgShow: false,
202
- // showsum: false
203
- }
204
- },
205
- ready() {
206
- getwartermakr(this);
207
- let component = this.$login.getUrlCompileParames('component')
208
- if (component) {
209
- this.isManger = true
210
- this.$refs.route.init(component, {data: this.functions.functions})
211
- }
212
- if (this.$login.f.password == '1') {
213
- this.$showMessage('本地登录系统为此账户的初始密码,请确认修改密码!!!', ['confirm', 'cancel']).then((res) => {
214
- if (res == 'confirm')
215
- this.show = true
216
- })
217
- }
218
- console.log("系统名称", this.$appdata.getSingleValue("系统名称"))
219
- this.systemname = this.$appdata.getSingleValue("系统名称") ? this.$appdata.getSingleValue("系统名称") : '客服系统'
220
- // let oBox = this.getElement("box")
221
- // let oTop = this.getElement("top")
222
- // let oBottom = this.getElement("bottom")
223
- // let oLine = this.getElement("line")
224
- // let that = this
225
- // oLine.onmousedown = function(e) {
226
- // let disX = (e || event).clientX
227
- // oLine.left = oLine.offsetLeft
228
- // document.onmousemove = function(e) {
229
- // let iT = oLine.left + ((e || event).clientX - disX)
230
- // var e = e || window.event
231
- // let tarnameb = e.target || e.srcElement
232
- // let maxT = oBox.clientWight - oLine.offsetWidth
233
- // oLine.style.margin = 0
234
- // iT < 0 && (iT = 0)
235
- // iT > maxT && (iT = maxT)
236
- // oLine.style.left = oTop.style.width = iT + "px"
237
- // oBottom.style.width = oBox.clientWidth - iT + "px"
238
- // that.$set('treeWidth', iT)
239
- // return false
240
- // }
241
- // document.onmouseup = function() {
242
- // document.onmousemove = null
243
- // document.onmouseup = null
244
- // oLine.releaseCapture && oLine.releaseCapture()
245
- // }
246
- // oLine.setCapture && oLine.setCapture()
247
- // return false
248
- // }
249
- this.changeShow()
250
- this.gotoWorkOrderSite()
251
- },
252
- methods: {
253
- gotoWorkOrderSite(){
254
- const isRemind =this.$appdata.getSingleValue("站点工单提醒")
255
- console.log('站点工单是否提醒',isRemind)
256
- if(isRemind && isRemind !== ''){
257
- return
258
- }
259
- if(this.functions && this.functions.f_role_name && this.functions.f_role_name.indexOf('派单员') !== -1){
260
- const data = {
261
- "condition":
262
- {
263
- "condition":" 1=1 ",
264
- "sign":"1=1"
265
- },
266
- "userid":this.functions.name
267
- }
268
- new HttpResetClass().load('POST','rs/path/operatorService/n', {data}, {resolveMsg: null, rejectMsg: null}).then(res=>{
269
- if(res.data && res.data.n !== 0){
270
- this.$showMessage('你有'+res.data.n+'个工单待处理,请尽快前往站点工单页面进行处理')
271
- }
272
- })
273
- }
274
- },
275
- hindsetting() {
276
- this.setting = !this.setting
277
- if (this.setting) {
278
- this.srcsetting = '../../static/newStyle/setting.png'
279
- } else {
280
- this.srcsetting = '../../static/newStyle/setting1.png'
281
- }
282
-
283
- },
284
- hindsetting1() {
285
-
286
- if (!this.setting) {
287
- this.srcsetting = '../../static/newStyle/setting.png'
288
- this.setting = true
289
- }
290
-
291
- },
292
- isnodo(val) {
293
- console.log(val, 'ss')
294
- this.selecttab = val
295
- },
296
- unfurl() {
297
- if (this.showsum) {
298
- this.showsum = false
299
- } else {
300
- this.showsum = true
301
- }
302
- },
303
- // getElement(id) {
304
- // return document.getElementById(id)
305
- // },
306
- changeShow() {
307
- // this.treeOrIcon = !this.treeOrIcon
308
- // let oBox = this.getElement("box")
309
- // let oTop = this.getElement("top")
310
- // let oBottom = this.getElement("bottom")
311
- // let oLine = this.getElement("line")
312
- // if (this.treeOrIcon) {
313
- // // oLine.style.left = oTop.style.width = 300 + "px"
314
- // oTop.style.width = 150 + "px"
315
- // oBottom.style.width = oBox.clientWidth - 150 + "px"
316
- // }else {
317
- // oLine.style.left = oTop.style.width = 50 + "px"
318
- // oBottom.style.width = oBox.clientWidth - 50 + "px"
319
- // }
320
- // }
321
- this.treeOrIcon = !this.treeOrIcon
322
- // if (this.treeOrIcon) {
323
- // this.$els.top.style.width = 14 + "%"
324
- // this.$els.bottom.style.width = this.$els.box.clientWidth - 14 + "%"
325
- // }else {
326
- // this.$els.top.style.width = 8 + "%"
327
- // this.$els.bottom.style.width = this.$els.box.clientWidth - 8 + "%"
328
- // }
329
- },
330
- changeMain(userid) {
331
- this.$goto('res-main', {userid: this.userid}, 'self')
332
- },
333
- tabChange(name) {
334
- console.log(name, 'tabchanage')
335
- this.selecttab = name
336
- this.$refs.tree.changeSelect(name)
337
- },
338
- tabcg(val) {
339
- console.log(val)
340
- this.tabs = val
341
- },
342
- logOut() {
343
- console.log(this.$login.f)
344
- this.$showMessage('您确定要退出系统吗?', ['confirm', 'cancel']).then(async (res) => {
345
- if (res == 'confirm') {
346
- let data = {
347
- userid: this.$login.f.id,
348
- username: this.$login.f.name,
349
- usertelephone: this.$login.f.f_user_telephone
350
- }
351
- await this.$resetpost('rs/logic/logOut', data, {resolveMsg: '退出成功', rejectMsg: null})
352
- window.location.reload()
353
- }
354
- })
355
- }
356
- },
357
- computed: {
358
- nowDate() {
359
- return this.$login.getNowDate()
360
- }
361
- }
362
- }
363
- </script>
364
- <style lang="less">
365
- /* 组件内通用样式 */
366
- .select-error {
367
- button {
368
- border-bottom: 1px solid #a94442 !important;
369
- }
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
- + * {
384
- flex: 1;
385
- }
386
- }
387
- }
388
-
389
- // 日期组件在表单中沾满
390
- .form-horizontal .datepicker {
391
- width: 100%;
392
- }
393
-
394
- // 下拉选择框占据剩余全部空间
395
- .select-overspread {
396
- .form-group {
397
- // margin: 0px 5px 10px 0px;
398
- .form-control {
399
- margin-right: 0px;
400
- }
401
- }
402
-
403
- .btn-group, .btn-group-vertical {
404
- width: 100%;
405
- // padding-right: 5px;
406
- button {
407
- width: 100%;
408
- display: flex;
409
- justify-content: space-between;
410
- align-items: center;
411
- }
412
- }
413
-
414
- .dropdown-menu {
415
- width: 100%
416
- }
417
- }
418
-
419
- // 需要特定宽度的的样式
420
- .width-60 {
421
- width: 60px;
422
- }
423
-
424
- .userpanel {
425
- font-weight: 300;
426
- color: #333;
427
- position: fixed;
428
- right: 30px;
429
- top: 45px;
430
- background-color: white;
431
- box-shadow: darkgrey 0.5px 0.5px 0.5px 0.5px;
432
- padding: 4px 10px 4px 10px;
433
- border-radius: 2px;
434
- }
435
-
436
- .width-80 {
437
- width: 80px;
438
- }
439
-
440
- .width-100 {
441
- width: 100px;
442
- }
443
-
444
-
445
- /*右侧区域的背景*/
446
- .right-bg {
447
- width: 100%;
448
- flex: 1;
449
- color: #304A66;
450
- }
451
-
452
- .tree-flex {
453
- height: 100%;
454
- // width: 150px;
455
- /*width: 60px;*/
456
- background: #4a7cae;
457
- color: #fff;
458
-
459
- }
460
-
461
- .tree-flex-icon {
462
- width: 50px;
463
- /*transition: 0.5s;*/
464
-
465
- > .span {
466
- overflow-x: visible;
467
- }
468
- }
469
-
470
- .tree-flex h3 {
471
- text-align: center;
472
- margin: 1em 0;
473
- }
474
-
475
- .tree-flex-footer {
476
- height: 50px;
477
- display: flex;
478
- flex-direction: column;
479
- color: #fff;
480
- }
481
-
482
- .tree-flex-footer a, .tree-flex-footer button {
483
- flex: 1;
484
- padding: 8px 5px;
485
- font-size: 1.2em;
486
- // border-top: 1px solid #697D93;
487
- border-top: 1px solid #4a7cae;
488
- text-decoration: none;
489
- color: #fff;
490
- cursor: pointer;
491
- }
492
-
493
- .tree-flex-footer button {
494
- height: auto;
495
- width: 100%;
496
- border-radius: 0px;
497
- background-color: rgba(255, 255, 255, 0);
498
- border: none;
499
- border-top: 1px solid #4a7cae;
500
- // border-top: 1px solid #697D93;
501
- text-align: left;
502
- }
503
-
504
- .tree-flex-footer button:hover {
505
- outline: none;
506
- background-color: rgba(255, 255, 255, 0.2);
507
- }
508
-
509
- .tree-flex-footer button:focus {
510
- outline: none;
511
- background-color: rgba(255, 255, 255, 0.5);
512
- }
513
-
514
- .tree-flex-footer a:hover {
515
- color: #FFF;
516
- background-color: rgba(255, 255, 255, 0.2);
517
- }
518
-
519
- .tree-flex .btn-group {
520
- height: 50px !important;
521
- }
522
-
523
- .tree-flex .dropdown-menu {
524
- /* 控制显示列表的样式 */
525
- background: #4a7cae;
526
- border-radius: 0px;
527
- color: #fff;
528
- width: auto;
529
- margin: 0px;
530
- padding: 0px;
531
- }
532
-
533
- .tree-flex .dropdown-menu-up {
534
- /* bottom,top控制上下,left和right控制左右*/
535
- left: 100% !important;
536
- top: auto !important;
537
- bottom: 0;
538
- }
539
-
540
- .tree-flex .dropdown-menu-down {
541
- /* bottom,top控制上下,left和right控制左右*/
542
- left: 100% !important;
543
- top: 0 !important;
544
- }
545
-
546
- .tree-flex .dropdown-menu li {
547
- text-align: center;
548
- line-height: 50px;
549
- border-bottom: 1px solid #697D93;
550
- font-size: 1.2em;
551
- width: auto;
552
- white-space: nowrap;
553
- cursor: default;
554
-
555
- }
556
-
557
- .tree-flex .dropdown-menu li + li {
558
- text-align: left;
559
- border: 0;
560
- line-height: 40px;
561
- padding-left: 15px;
562
- padding-right: 15px;
563
- font-size: 1em;
564
- cursor: pointer;
565
- }
566
-
567
- .tree-flex .dropdown-menu li + li:hover {
568
- background-color: rgba(255, 255, 255, 0.2);
569
- }
570
-
571
- .tree-flex .dropdown-menu li a {
572
- border: none;
573
- color: #fff;
574
- height: 40px;
575
- line-height: 40px;
576
- font-size: 1em;
577
- padding: 0px;
578
- }
579
-
580
- .tree-flex .dropdown-menu li a:hover {
581
- color: #fff;
582
- background-color: rgba(255, 255, 255, 0);
583
- }
584
-
585
- .tree-flex img {
586
- height: 1.2em;
587
- width: 1.2em;
588
- margin-right: 15px;
589
- margin-left: 5px;
590
- }
591
-
592
- .line {
593
- height: 100%;
594
- width: 5px;
595
- background: #4C637B;
596
- cursor: e-resize;
597
- }
598
-
599
- /*为树(tree)组件写的样式*/
600
- .tree-img {
601
- font-size: 1.2em;
602
- }
603
-
604
- /*将较长信息截断显示,鼠标悬停显示全部信息*/
605
- .cutout50 {
606
- max-width: 50px;
607
- overflow: hidden;
608
- text-overflow: ellipsis;
609
- white-space: nowrap;
610
- }
611
-
612
- /* 滚动条样式 */
613
- /*---滚动条默认显示样式--*/
614
- ::-webkit-scrollbar-thumb {
615
- // display: none;
616
- background-color: rgba(0, 0, 0, 0.4);
617
- /*background-color:red;*/
618
- height: 50px;
619
- outline-offset: -2px;
620
- /*outline:2px solid #fff;*/
621
- -webkit-border-radius: 4px;
622
- /*border: 2px solid #fff;*/
623
- }
624
-
625
- /*---鼠标点击滚动条显示样式--*/
626
- ::-webkit-scrollbar-thumb:hover {
627
- // display: inherit;
628
- background-color: rgba(0, 0, 0, 0.4);
629
- height: 50px;
630
- -webkit-border-radius: 4px;
631
- }
632
-
633
- /*---滚动条大小--*/
634
- ::-webkit-scrollbar {
635
- width: 8px;
636
- height: 8px;
637
- }
638
-
639
- /*---滚动框背景样式--*/
640
- ::-webkit-scrollbar-track-piece {
641
- /* 全透明,不显示 */
642
- background-color: rgba(255, 255, 255, 0);
643
- -webkit-border-radius: 0;
644
- }
645
- </style>
1
+ <template>
2
+ <div @click="hindsetting1()" :class="{'with-watermark':showwatermakeflag}">
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
+ <div class='flex-row system-main' id="box" v-el:box v-if="!isManger">
60
+ <div class="auto login-operator1" v-if="$refs.mic.tabs.length === 0">
61
+ <span>
62
+ <img
63
+ src="../assets/people.png" height="15" width="15">
64
+ 登录人:</span>
65
+ <label>{{ orgpathnames }}</label>
66
+ </div>
67
+ <div class="system-left tree-flex" :class="{'tree-flex-icon': !treeOrIcon}" id="top" v-el:top>
68
+ <div class="system-left-chi" :class="{'system-left-icon': !treeOrIcon}">
69
+ <div class="span system-left-tree " style="height:85%">
70
+ <h3>{{ systemname }}</h3>
71
+ <!-- <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;">-->
72
+ <left-tree :functions='functions.functions' :userid='userid' @isnodo="isnodo" v-show="treeOrIcon"
73
+ :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="openUrl()">售后服务</li>
89
+ <li @click="show=true">修改密码</li>
90
+ <li @click="AddChangeMsgShow=true">系统版本:V3.0</li>
91
+ </ul>
92
+
93
+ </dropdown>
94
+ <a href="index.html" @click.prevent="logOut">
95
+ <img :src="imgs.out" alt=""><span v-if="treeOrIcon">退出系统</span>
96
+ </a>
97
+ </div>
98
+ </div>
99
+ </div>
100
+ <!-- <div class="line" id="line" v-show="treeOrIcon" v-el:line></div> -->
101
+
102
+ <div class="flex right-bg system-right" id="bottom" v-el:bottom>
103
+ <!-- <operator-badge></operator-badge> -->
104
+ <div class="span">
105
+ <echarts-box v-if="$refs.mic.tabs.length === 0"></echarts-box>
106
+ <dynamic :comps='[]' name='main' :selecttab.sync="selecttab" :orgpathnames="orgpathnames"
107
+ @tab-changed="tabChange" @tabscg="tabcg" v-ref:mic v-show="!($refs.mic.tabs.length === 0)"></dynamic>
108
+ </div>
109
+ </div>
110
+ </div>
111
+ <div v-show="isManger">
112
+ <route v-ref:route></route>
113
+ </div>
114
+
115
+ <!-- 变更录入 模态框 -->
116
+ <add-changemsg :show="AddChangeMsgShow" v-on:toggle="AddChangeMsgShow = false"></add-changemsg>
117
+ <!-- 修改密码组件 -->
118
+ <modify-pw :show.sync="show" v-if="show"></modify-pw>
119
+ <!-- 修改密码模态框 -->
120
+ </div>
121
+ </template>
122
+
123
+ <script>
124
+ import vue from 'vue'
125
+ import co from 'co'
126
+ import {HttpResetClass} from "vue-client";
127
+
128
+ let getwartermakr = async function (self) {
129
+ let param = {
130
+ tablename: 't_singlevalue',
131
+ condition: " 1=1 and name=\'水印内容\'"
132
+ };
133
+ let result = await self.$resetpost('rs/sql/saleSingleTable', {data: param}, {resolveMsg: null, rejectMsg: null});
134
+ if (result && result.data.length > 0) {
135
+ self.showwatermakeflag = true;
136
+ createWaterMark(result.data[0].value);
137
+ } else {
138
+ self.showwatermakeflag = false;
139
+ }
140
+ }
141
+
142
+ let createWaterMark = function (userName) {
143
+ let style;
144
+ if (style) style.remove();
145
+ let width = window.parseInt(document.body.clientWidth);
146
+ let canvasWidth = width / window.parseInt(width / 320);
147
+ let fontFamily = window.getComputedStyle(document.body)["font-family"];
148
+ let canvas = document.createElement("canvas");
149
+ canvas.width = canvasWidth;
150
+ canvas.height = 200;
151
+ let ctx = canvas.getContext("2d");
152
+ ctx.rotate((-20 * Math.PI) / 180);
153
+ ctx.font = `20px ${fontFamily}`;
154
+ ctx.fillStyle = "rgba(8,8,8,.1)";
155
+ ctx.fillText(userName, 50, 200);
156
+ let imgSrc = canvas.toDataURL("image/png");
157
+ style = document.createElement("style");
158
+ style.innerHTML = `.with-watermark:before{
159
+ content: "";
160
+ width: 100%;
161
+ height: 100%;
162
+ display: block;
163
+ position: absolute;
164
+ background-image: url("${imgSrc}");
165
+ }`;
166
+ (document.head.append || document.head.appendChild).apply(document.head, [style]);
167
+ }
168
+
169
+ window.onunload = () => {
170
+ vue.http({url: `rs/user/update/${this.$login.f.ename}`, method: 'GET'})
171
+ }
172
+ window.onbeforeunload = () => {
173
+ vue.http({url: `rs/user/update/${this.$login.f.ename}`, method: 'GET'})
174
+ }
175
+ export default {
176
+ title: '主界面',
177
+ props: ['functions', 'userid'],
178
+ data() {
179
+ return {
180
+ // 左侧树下部三个小图标
181
+ imgs: {
182
+ open: '/images/lefticon/菜单伸缩.png',
183
+ set: '/images/lefticon/系统设置.png',
184
+ out: '/images/lefticon/退出系统.png',
185
+ img1: '/images/newStyle/login-user.png',
186
+ logoimg: '/static/newStyle/fife.png'
187
+ // img2: '/images/lefticon/退出系统.png',
188
+ },
189
+ treeOrIcon: false,
190
+ isManger: false,
191
+ show: false,
192
+ orgpathnames: `${this.$login.f.orgs}-${this.$login.f.deps}-${this.$login.f.name}`,
193
+ systemname: '客服系统',
194
+ date: this.$login.toStandardDateString(),
195
+ tabs: [], //已初始化页签数组
196
+ selecttab: '',
197
+ setting: true,
198
+ srcsetting: '../../static/newStyle/setting.png',
199
+ showwatermakeflag: false,
200
+ // headerHint: true, // 右侧顶部提示信息
201
+ // value: 25645.26,
202
+ // AddChangeMsgShow: false,
203
+ // showsum: false
204
+ }
205
+ },
206
+ ready() {
207
+ getwartermakr(this);
208
+ let component = this.$login.getUrlCompileParames('component')
209
+ if (component) {
210
+ this.isManger = true
211
+ this.$refs.route.init(component, {data: this.functions.functions})
212
+ }
213
+ if (this.$login.f.password == '1') {
214
+ this.$showMessage('本地登录系统为此账户的初始密码,请确认修改密码!!!', ['confirm', 'cancel']).then((res) => {
215
+ if (res == 'confirm')
216
+ this.show = true
217
+ })
218
+ }
219
+ console.log("系统名称", this.$appdata.getSingleValue("系统名称"))
220
+ this.systemname = this.$appdata.getSingleValue("系统名称") ? this.$appdata.getSingleValue("系统名称") : '客服系统'
221
+ // let oBox = this.getElement("box")
222
+ // let oTop = this.getElement("top")
223
+ // let oBottom = this.getElement("bottom")
224
+ // let oLine = this.getElement("line")
225
+ // let that = this
226
+ // oLine.onmousedown = function(e) {
227
+ // let disX = (e || event).clientX
228
+ // oLine.left = oLine.offsetLeft
229
+ // document.onmousemove = function(e) {
230
+ // let iT = oLine.left + ((e || event).clientX - disX)
231
+ // var e = e || window.event
232
+ // let tarnameb = e.target || e.srcElement
233
+ // let maxT = oBox.clientWight - oLine.offsetWidth
234
+ // oLine.style.margin = 0
235
+ // iT < 0 && (iT = 0)
236
+ // iT > maxT && (iT = maxT)
237
+ // oLine.style.left = oTop.style.width = iT + "px"
238
+ // oBottom.style.width = oBox.clientWidth - iT + "px"
239
+ // that.$set('treeWidth', iT)
240
+ // return false
241
+ // }
242
+ // document.onmouseup = function() {
243
+ // document.onmousemove = null
244
+ // document.onmouseup = null
245
+ // oLine.releaseCapture && oLine.releaseCapture()
246
+ // }
247
+ // oLine.setCapture && oLine.setCapture()
248
+ // return false
249
+ // }
250
+ this.changeShow()
251
+ this.gotoWorkOrderSite()
252
+ },
253
+ methods: {
254
+ gotoWorkOrderSite(){
255
+ const isRemind =this.$appdata.getSingleValue("站点工单提醒")
256
+ console.log('站点工单是否提醒',isRemind)
257
+ if(isRemind && isRemind !== '是'){
258
+ return
259
+ }
260
+ if(this.functions && this.functions.f_role_name && this.functions.f_role_name.indexOf('派单员') !== -1){
261
+ const data = {
262
+ "condition":
263
+ {
264
+ "condition":" 1=1 ",
265
+ "sign":"1=1"
266
+ },
267
+ "userid":this.functions.name
268
+ }
269
+ new HttpResetClass().load('POST','rs/path/operatorService/n', {data}, {resolveMsg: null, rejectMsg: null}).then(res=>{
270
+ if(res.data && res.data.n !== 0){
271
+ this.$showMessage('你有'+res.data.n+'个工单待处理,请尽快前往站点工单页面进行处理')
272
+ }
273
+ })
274
+ }
275
+ },
276
+ openUrl() {
277
+ var url = `http://123.60.214.109:8406/submitTicket?personName=${this.$login.f.name}&orgName=${this.$login.f.orgs}`
278
+ window.open(url, '_blank')
279
+ },
280
+ hindsetting() {
281
+ this.setting = !this.setting
282
+ if (this.setting) {
283
+ this.srcsetting = '../../static/newStyle/setting.png'
284
+ } else {
285
+ this.srcsetting = '../../static/newStyle/setting1.png'
286
+ }
287
+
288
+ },
289
+ hindsetting1() {
290
+
291
+ if (!this.setting) {
292
+ this.srcsetting = '../../static/newStyle/setting.png'
293
+ this.setting = true
294
+ }
295
+
296
+ },
297
+ isnodo(val) {
298
+ console.log(val, 'ss')
299
+ this.selecttab = val
300
+ },
301
+ unfurl() {
302
+ if (this.showsum) {
303
+ this.showsum = false
304
+ } else {
305
+ this.showsum = true
306
+ }
307
+ },
308
+ // getElement(id) {
309
+ // return document.getElementById(id)
310
+ // },
311
+ changeShow() {
312
+ // this.treeOrIcon = !this.treeOrIcon
313
+ // let oBox = this.getElement("box")
314
+ // let oTop = this.getElement("top")
315
+ // let oBottom = this.getElement("bottom")
316
+ // let oLine = this.getElement("line")
317
+ // if (this.treeOrIcon) {
318
+ // // oLine.style.left = oTop.style.width = 300 + "px"
319
+ // oTop.style.width = 150 + "px"
320
+ // oBottom.style.width = oBox.clientWidth - 150 + "px"
321
+ // }else {
322
+ // oLine.style.left = oTop.style.width = 50 + "px"
323
+ // oBottom.style.width = oBox.clientWidth - 50 + "px"
324
+ // }
325
+ // }
326
+ this.treeOrIcon = !this.treeOrIcon
327
+ // if (this.treeOrIcon) {
328
+ // this.$els.top.style.width = 14 + "%"
329
+ // this.$els.bottom.style.width = this.$els.box.clientWidth - 14 + "%"
330
+ // }else {
331
+ // this.$els.top.style.width = 8 + "%"
332
+ // this.$els.bottom.style.width = this.$els.box.clientWidth - 8 + "%"
333
+ // }
334
+ },
335
+ changeMain(userid) {
336
+ this.$goto('res-main', {userid: this.userid}, 'self')
337
+ },
338
+ tabChange(name) {
339
+ console.log(name, 'tabchanage')
340
+ this.selecttab = name
341
+ this.$refs.tree.changeSelect(name)
342
+ },
343
+ tabcg(val) {
344
+ console.log(val)
345
+ this.tabs = val
346
+ },
347
+ logOut() {
348
+ console.log(this.$login.f)
349
+ this.$showMessage('您确定要退出系统吗?', ['confirm', 'cancel']).then(async (res) => {
350
+ if (res == 'confirm') {
351
+ let data = {
352
+ userid: this.$login.f.id,
353
+ username: this.$login.f.name,
354
+ usertelephone: this.$login.f.f_user_telephone
355
+ }
356
+ await this.$resetpost('rs/logic/logOut', data, {resolveMsg: '退出成功', rejectMsg: null})
357
+ window.location.reload()
358
+ }
359
+ })
360
+ }
361
+ },
362
+ computed: {
363
+ nowDate() {
364
+ return this.$login.getNowDate()
365
+ }
366
+ }
367
+ }
368
+ </script>
369
+ <style lang="less">
370
+ /* 组件内通用样式 */
371
+ .select-error {
372
+ button {
373
+ border-bottom: 1px solid #a94442 !important;
374
+ }
375
+ }
376
+
377
+ // input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
378
+ // -webkit-appearance:textfield;
379
+ // }
380
+ /* 表单输入框组 */
381
+ .form-input-group {
382
+ display: flex;
383
+
384
+ label {
385
+ width: 100px;
386
+ text-align: right;
387
+
388
+ + * {
389
+ flex: 1;
390
+ }
391
+ }
392
+ }
393
+
394
+ // 日期组件在表单中沾满
395
+ .form-horizontal .datepicker {
396
+ width: 100%;
397
+ }
398
+
399
+ // 下拉选择框占据剩余全部空间
400
+ .select-overspread {
401
+ .form-group {
402
+ // margin: 0px 5px 10px 0px;
403
+ .form-control {
404
+ margin-right: 0px;
405
+ }
406
+ }
407
+
408
+ .btn-group, .btn-group-vertical {
409
+ width: 100%;
410
+ // padding-right: 5px;
411
+ button {
412
+ width: 100%;
413
+ display: flex;
414
+ justify-content: space-between;
415
+ align-items: center;
416
+ }
417
+ }
418
+
419
+ .dropdown-menu {
420
+ width: 100%
421
+ }
422
+ }
423
+
424
+ // 需要特定宽度的的样式
425
+ .width-60 {
426
+ width: 60px;
427
+ }
428
+
429
+ .userpanel {
430
+ font-weight: 300;
431
+ color: #333;
432
+ position: fixed;
433
+ right: 30px;
434
+ top: 45px;
435
+ background-color: white;
436
+ box-shadow: darkgrey 0.5px 0.5px 0.5px 0.5px;
437
+ padding: 4px 10px 4px 10px;
438
+ border-radius: 2px;
439
+ }
440
+
441
+ .width-80 {
442
+ width: 80px;
443
+ }
444
+
445
+ .width-100 {
446
+ width: 100px;
447
+ }
448
+
449
+
450
+ /*右侧区域的背景*/
451
+ .right-bg {
452
+ width: 100%;
453
+ flex: 1;
454
+ color: #304A66;
455
+ }
456
+
457
+ .tree-flex {
458
+ height: 100%;
459
+ // width: 150px;
460
+ /*width: 60px;*/
461
+ background: #4a7cae;
462
+ color: #fff;
463
+
464
+ }
465
+
466
+ .tree-flex-icon {
467
+ width: 50px;
468
+ /*transition: 0.5s;*/
469
+
470
+ > .span {
471
+ overflow-x: visible;
472
+ }
473
+ }
474
+
475
+ .tree-flex h3 {
476
+ text-align: center;
477
+ margin: 1em 0;
478
+ }
479
+
480
+ .tree-flex-footer {
481
+ height: 50px;
482
+ display: flex;
483
+ flex-direction: column;
484
+ color: #fff;
485
+ }
486
+
487
+ .tree-flex-footer a, .tree-flex-footer button {
488
+ flex: 1;
489
+ padding: 8px 5px;
490
+ font-size: 1.2em;
491
+ // border-top: 1px solid #697D93;
492
+ border-top: 1px solid #4a7cae;
493
+ text-decoration: none;
494
+ color: #fff;
495
+ cursor: pointer;
496
+ }
497
+
498
+ .tree-flex-footer button {
499
+ height: auto;
500
+ width: 100%;
501
+ border-radius: 0px;
502
+ background-color: rgba(255, 255, 255, 0);
503
+ border: none;
504
+ border-top: 1px solid #4a7cae;
505
+ // border-top: 1px solid #697D93;
506
+ text-align: left;
507
+ }
508
+
509
+ .tree-flex-footer button:hover {
510
+ outline: none;
511
+ background-color: rgba(255, 255, 255, 0.2);
512
+ }
513
+
514
+ .tree-flex-footer button:focus {
515
+ outline: none;
516
+ background-color: rgba(255, 255, 255, 0.5);
517
+ }
518
+
519
+ .tree-flex-footer a:hover {
520
+ color: #FFF;
521
+ background-color: rgba(255, 255, 255, 0.2);
522
+ }
523
+
524
+ .tree-flex .btn-group {
525
+ height: 50px !important;
526
+ }
527
+
528
+ .tree-flex .dropdown-menu {
529
+ /* 控制显示列表的样式 */
530
+ background: #4a7cae;
531
+ border-radius: 0px;
532
+ color: #fff;
533
+ width: auto;
534
+ margin: 0px;
535
+ padding: 0px;
536
+ }
537
+
538
+ .tree-flex .dropdown-menu-up {
539
+ /* bottom,top控制上下,left和right控制左右*/
540
+ left: 100% !important;
541
+ top: auto !important;
542
+ bottom: 0;
543
+ }
544
+
545
+ .tree-flex .dropdown-menu-down {
546
+ /* bottom,top控制上下,left和right控制左右*/
547
+ left: 100% !important;
548
+ top: 0 !important;
549
+ }
550
+
551
+ .tree-flex .dropdown-menu li {
552
+ text-align: center;
553
+ line-height: 50px;
554
+ border-bottom: 1px solid #697D93;
555
+ font-size: 1.2em;
556
+ width: auto;
557
+ white-space: nowrap;
558
+ cursor: default;
559
+
560
+ }
561
+
562
+ .tree-flex .dropdown-menu li + li {
563
+ text-align: left;
564
+ border: 0;
565
+ line-height: 40px;
566
+ padding-left: 15px;
567
+ padding-right: 15px;
568
+ font-size: 1em;
569
+ cursor: pointer;
570
+ }
571
+
572
+ .tree-flex .dropdown-menu li + li:hover {
573
+ background-color: rgba(255, 255, 255, 0.2);
574
+ }
575
+
576
+ .tree-flex .dropdown-menu li a {
577
+ border: none;
578
+ color: #fff;
579
+ height: 40px;
580
+ line-height: 40px;
581
+ font-size: 1em;
582
+ padding: 0px;
583
+ }
584
+
585
+ .tree-flex .dropdown-menu li a:hover {
586
+ color: #fff;
587
+ background-color: rgba(255, 255, 255, 0);
588
+ }
589
+
590
+ .tree-flex img {
591
+ height: 1.2em;
592
+ width: 1.2em;
593
+ margin-right: 15px;
594
+ margin-left: 5px;
595
+ }
596
+
597
+ .line {
598
+ height: 100%;
599
+ width: 5px;
600
+ background: #4C637B;
601
+ cursor: e-resize;
602
+ }
603
+
604
+ /*为树(tree)组件写的样式*/
605
+ .tree-img {
606
+ font-size: 1.2em;
607
+ }
608
+
609
+ /*将较长信息截断显示,鼠标悬停显示全部信息*/
610
+ .cutout50 {
611
+ max-width: 50px;
612
+ overflow: hidden;
613
+ text-overflow: ellipsis;
614
+ white-space: nowrap;
615
+ }
616
+
617
+ /* 滚动条样式 */
618
+ /*---滚动条默认显示样式--*/
619
+ ::-webkit-scrollbar-thumb {
620
+ // display: none;
621
+ background-color: rgba(0, 0, 0, 0.4);
622
+ /*background-color:red;*/
623
+ height: 50px;
624
+ outline-offset: -2px;
625
+ /*outline:2px solid #fff;*/
626
+ -webkit-border-radius: 4px;
627
+ /*border: 2px solid #fff;*/
628
+ }
629
+
630
+ /*---鼠标点击滚动条显示样式--*/
631
+ ::-webkit-scrollbar-thumb:hover {
632
+ // display: inherit;
633
+ background-color: rgba(0, 0, 0, 0.4);
634
+ height: 50px;
635
+ -webkit-border-radius: 4px;
636
+ }
637
+
638
+ /*---滚动条大小--*/
639
+ ::-webkit-scrollbar {
640
+ width: 8px;
641
+ height: 8px;
642
+ }
643
+
644
+ /*---滚动框背景样式--*/
645
+ ::-webkit-scrollbar-track-piece {
646
+ /* 全透明,不显示 */
647
+ background-color: rgba(255, 255, 255, 0);
648
+ -webkit-border-radius: 0;
649
+ }
650
+ </style>