|  |  | 
 |  |  | <template> | 
 |  |  |   <div class="main_home"> | 
 |  |  |     <!-- <div style="position: fixed;z-index: 99999"><video  style="height: 100px;width: 500px" src="rtsp://10.50.250.253:554/openUrl/K2y2vE4" controls></video></div> --> | 
 |  |  |     <div class="home_header"> | 
 |  |  |       <div class="mb10 fs17">下午好,{{ userInfo.realname }}</div> | 
 |  |  |       <div class="fs13"> | 
 |  |  | 
 |  |  |               <img src="@/assets/icons/home_icon2.png" alt="" /> | 
 |  |  |             </div> | 
 |  |  |             <div class="content"> | 
 |  |  |               <div>访客人次(人):{{ headerData.visitUserNum }}</div> | 
 |  |  |               <div>签离人次(人):{{ headerData.signLevelNum }}</div> | 
 |  |  |               <div>入园人次(人):{{ headerData.visitUserNum }}</div> | 
 |  |  |               <div>出园人次(人):{{ headerData.signLevelNum }}</div> | 
 |  |  |             </div> | 
 |  |  |           </div> | 
 |  |  |           <div class="card"> | 
 |  |  | 
 |  |  |             </div> | 
 |  |  |             <div class="wrap static2"> | 
 |  |  |               <div class="header"> | 
 |  |  |                 <div class="home_title">长期相关方分布</div> | 
 |  |  | <!--                <div class="home_title">长期相关方分布</div>--> | 
 |  |  |                 <el-radio-group v-model="tabPosition" @change="changeType"> | 
 |  |  |                   <el-radio-button label="right">内部人员分布</el-radio-button> | 
 |  |  |                   <el-radio-button label="top">长期相关方分布</el-radio-button> | 
 |  |  |                 </el-radio-group> | 
 |  |  |                 <!-- <div class="df_ac more"> | 
 |  |  |                   更多<i class="el-icon-arrow-right"></i> | 
 |  |  |                 </div> --> | 
 |  |  |               </div> | 
 |  |  |               <div class="echart" id="echart2"></div> | 
 |  |  |               <template  v-if="tabPosition==='right'" >  <div class="echart" id="echart2"></div></template> | 
 |  |  |               <template  v-if="tabPosition==='top'" >  <div class="echart"  id="echart21"></div></template> | 
 |  |  |             </div> | 
 |  |  |           </div> | 
 |  |  |           <div class="df"> | 
 |  |  | 
 |  |  |         <div class="task"> | 
 |  |  |           <div class="header df_sb"> | 
 |  |  |             <div class="home_title df"> | 
 |  |  |               <span @click="handleTest">待办事项</span> | 
 |  |  |               <span >待办事项</span> | 
 |  |  |               <span class="num" v-if="taskTotal">{{ taskTotal }}</span> | 
 |  |  |             </div> | 
 |  |  |             <div class="df_ac more" @click="jumpPage('/task/index')"> | 
 |  |  | 
 |  |  | import { weeks } from '@/utils/config' | 
 |  |  | import { | 
 |  |  |   getWorkbenchData, | 
 |  |  |   getAppHeaderNav | 
 |  |  |   getAppHeaderNav, syncHkNotice | 
 |  |  | } from '@/api' | 
 |  |  | import { level } from '@/api/business/visits' | 
 |  |  | import TaskDetail from '@/views/task/visSubDetail.vue' | 
 |  |  | 
 |  |  |     OperaHiddenDangerWindow, | 
 |  |  |     OperaVisitsDesWindow | 
 |  |  |   }, | 
 |  |  |   data() { | 
 |  |  |   data () { | 
 |  |  |     return { | 
 |  |  |       tabPosition: 'right', | 
 |  |  |       colors, | 
 |  |  |       nowDate: '', | 
 |  |  |       nowWeek: '', | 
 |  |  | 
 |  |  |         { name: '访客报备', path: '', url: require('@/assets/icons/home_func1.png'), path: '/business/reportRecord' }, | 
 |  |  |         { name: '隐患随手拍', path: '', url: require('@/assets/icons/home_func2.png'), path: '/operation/danger/record' }, | 
 |  |  |         { name: '预约会议室', path: '', url: require('@/assets/icons/home_func3.png'), path: '/meeting/bookings' }, | 
 |  |  |         { name: '考勤工作台', path: '', url: require('@/assets/icons/home_func4.png') } | 
 |  |  |         { name: '公务车预约', path: '', url: require('@/assets/icons/home_func5.png'), path: '/operation/serviceCar/apprRecord' }, | 
 |  |  |         { name: '考勤工作台', path: '', url: require('@/assets/icons/home_func4.png') }, | 
 |  |  |         { name: '食堂消费', path: '', url: require('@/assets/icons/8.png') } | 
 |  |  |       ], | 
 |  |  |       isShowDetail: false, | 
 |  |  |       isShowReport: false, | 
 |  |  |       isShowDanger: false, | 
 |  |  |       isShowDriver: false, | 
 |  |  |       isShowDriver: false | 
 |  |  |     } | 
 |  |  |   }, | 
 |  |  |   computed: { | 
 |  |  |     userInfo() { | 
 |  |  |     userInfo () { | 
 |  |  |       return this.$store.state.userInfo | 
 |  |  |     } | 
 |  |  |   }, | 
 |  |  |   created() { | 
 |  |  |   created () { | 
 |  |  |     this.updateDate() | 
 |  |  |     setInterval(() => { | 
 |  |  |       this.updateDate() | 
 |  |  |     }, 1000 * 60 * 60) | 
 |  |  |  | 
 |  |  |   }, | 
 |  |  |   mounted() { | 
 |  |  |   mounted () { | 
 |  |  |     this.initData() | 
 |  |  |   }, | 
 |  |  |   methods: { | 
 |  |  |     handleTest() { | 
 |  |  |       const myWindow = window.open('https://10.50.250.253/portal/ui/index?componentId=dfe&componentMenuId=process_apply') | 
 |  |  |       setTimeout(() => { | 
 |  |  |         const params = { | 
 |  |  |           componentId: 'dfe', | 
 |  |  |           componentMenuId: 'process_apply', | 
 |  |  |           callback: { | 
 |  |  |             method: 'dealTlncMsg', argument: { | 
 |  |  |               "msgId": "98c256b9-aaff-11ef-8347-fa163ee2c57c", | 
 |  |  |               "moduleId": "dfeFlowTodoModuleId", | 
 |  |  |               "msgTitle": "请及时处理13856591439发起的请假申请", | 
 |  |  |               "msgStatus": "0", | 
 |  |  |               "msgCreateTime": "今天 15:33", | 
 |  |  |               "msgCreateTimeIso": "2024-11-25T15:33:42.000+08:00", | 
 |  |  |               "serverTime": 1732531014591, | 
 |  |  |               "menuCode": "process_apply", | 
 |  |  |               "msgStatusStr": "待处理", | 
 |  |  |               "comId": "dfe", | 
 |  |  |               "userId": "13856591439", | 
 |  |  |               "extendNoShow": "{\"processInstanceId\":\"98a57fe0-aaff-11ef-8347-fa163ee2c57c\",\"processId\":\"process_dabcfdd39f1b6f46d36a9f4ff6ce1080\",\"param\":{\"sourceType\":\"todo\",\"modelCode\":\"tb_leave_dfe_for_dfe_runtime\",\"processNodeId\":\"UserTask_dde7d83377343a2d5fa1f60c23b023ef\",\"taskId\":\"98c256b9-aaff-11ef-8347-fa163ee2c57c\"},\"process.param.appId\":\"32ca8770-6f85-11ec-b5a3-991864da52a6\",\"appId\":\"32ca8770-6f85-11ec-b5a3-991864da52a6\",\"name\":\"请假申请\",\"taskId\":\"98c256b9-aaff-11ef-8347-fa163ee2c57c\",\"taskNodeId\":\"UserTask_dde7d83377343a2d5fa1f60c23b023ef\",\"url\":\"/dfe-form/process/tlnc/apply\"}", | 
 |  |  |               "targetComId": "dfe", | 
 |  |  |               "moduleName": "流程待办", | 
 |  |  |               "tid": "99cad778-aaff-11ef-9dbf-ff08ba71965c", | 
 |  |  |               "msgEndTime": null, | 
 |  |  |               "msgEndTimeIso": "", | 
 |  |  |               "picUrl": "", | 
 |  |  |               "extendJson": "{\"key1\":\"请及时处理陈鸿飞发起的请假申请\"}", | 
 |  |  |               "extendParam": null, | 
 |  |  |               "extendCascade": null, | 
 |  |  |               "createUser": "13856591439", | 
 |  |  |               "webCascadeUrl": null, | 
 |  |  |               "h5CascadeUrl": null, | 
 |  |  |               "cascadeTodoOpenType": null, | 
 |  |  |               "cascadeSourceConfigId": null, | 
 |  |  |               "h5Url": "/h5/pages/form-page/form-page?returnPath=-1&appId=32ca8770-6f85-11ec-b5a3-991864da52a6&taskId=98c256b9-aaff-11ef-8347-fa163ee2c57c&processNodeId=UserTask_dde7d83377343a2d5fa1f60c23b023ef&modelCode=tb_leave_dfe_for_dfe_runtime&type=flowHandle&component=form-apply&_sn=true", | 
 |  |  |               "segmentId": "dfe-form", | 
 |  |  |               "lastUsers": "陈鸿飞", | 
 |  |  |               "currentUsers": "陈鸿飞", | 
 |  |  |               "todoTypeCode": "dfe@@tlnc_placeholder_tlnc@@dfeFlowTodoModuleId", | 
 |  |  |               "currentUserIds": "13856591439", | 
 |  |  |               "lastUserIds": "13856591439", | 
 |  |  |               "msgDesc": null, | 
 |  |  |               "widgetUrl": null, | 
 |  |  |               "detailType": null, | 
 |  |  |               "widgetWidth": null, | 
 |  |  |               "widgetHeight": null, | 
 |  |  |               "userIdList": null, | 
 |  |  |               "statusName": null, | 
 |  |  |               "arriveTime": null, | 
 |  |  |               "stayTime": null, | 
 |  |  |               "todoType": null, | 
 |  |  |               "cascadePort": null, | 
 |  |  |               "openMode": null | 
 |  |  |             } | 
 |  |  |           }, | 
 |  |  |           msgType: 'tlnc' | 
 |  |  |         } | 
 |  |  |         let argus = JSON.stringify(params) | 
 |  |  |         myWindow.postMessage('{"method":"goToApp","argument":' + argus + '}', '*') | 
 |  |  |       }, 3000) | 
 |  |  |     changeType (e) { | 
 |  |  |       console.log(e) | 
 |  |  |       this.initEchart2() | 
 |  |  |       this.initEchart21() | 
 |  |  |     }, | 
 |  |  |     SubSuccess(str) { | 
 |  |  |     getNoticeList () { | 
 |  |  |       syncHkNotice().then(res => { | 
 |  |  |  | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     handleTest (row) { | 
 |  |  |       getAppHeaderNav(5).then(res => { | 
 |  |  |         if (res == undefined || res == null) { | 
 |  |  |           return | 
 |  |  |         } | 
 |  |  |         console.log('单点登录地址------', res) | 
 |  |  |  | 
 |  |  |         const myWindow = top.window.open(res) | 
 |  |  |         console.log('myWindow---', myWindow) | 
 |  |  |         setTimeout(() => { | 
 |  |  |           const params = { | 
 |  |  |             componentId: 'dfe', | 
 |  |  |             componentMenuId: 'process_apply', | 
 |  |  |             callback: { | 
 |  |  |               method: 'dealTlncMsg', | 
 |  |  |               argument: { | 
 |  |  |                 msgId: '98c256b9-aaff-11ef-8347-fa163ee2c57c', | 
 |  |  |                 moduleId: 'dfeFlowTodoModuleId', | 
 |  |  |                 msgTitle: '请及时处理13856591439发起的请假申请', | 
 |  |  |                 msgStatus: '0', | 
 |  |  |                 msgCreateTime: '今天 15:33', | 
 |  |  |                 msgCreateTimeIso: '2024-11-25T15:33:42.000+08:00', | 
 |  |  |                 serverTime: 1732531014591, | 
 |  |  |                 menuCode: 'process_apply', | 
 |  |  |                 msgStatusStr: '待处理', | 
 |  |  |                 comId: 'dfe', | 
 |  |  |                 userId: '13856591439', | 
 |  |  |                 extendNoShow: '{"processInstanceId":"98a57fe0-aaff-11ef-8347-fa163ee2c57c","processId":"process_dabcfdd39f1b6f46d36a9f4ff6ce1080","param":{"sourceType":"todo","modelCode":"tb_leave_dfe_for_dfe_runtime","processNodeId":"UserTask_dde7d83377343a2d5fa1f60c23b023ef","taskId":"98c256b9-aaff-11ef-8347-fa163ee2c57c"},"process.param.appId":"32ca8770-6f85-11ec-b5a3-991864da52a6","appId":"32ca8770-6f85-11ec-b5a3-991864da52a6","name":"请假申请","taskId":"98c256b9-aaff-11ef-8347-fa163ee2c57c","taskNodeId":"UserTask_dde7d83377343a2d5fa1f60c23b023ef","url":"/dfe-form/process/tlnc/apply"}', | 
 |  |  |                 targetComId: 'dfe', | 
 |  |  |                 moduleName: '流程待办', | 
 |  |  |                 tid: '99cad778-aaff-11ef-9dbf-ff08ba71965c', | 
 |  |  |                 msgEndTime: null, | 
 |  |  |                 msgEndTimeIso: '', | 
 |  |  |                 picUrl: '', | 
 |  |  |                 extendJson: '{"key1":"请及时处理陈鸿飞发起的请假申请"}', | 
 |  |  |                 extendParam: null, | 
 |  |  |                 extendCascade: null, | 
 |  |  |                 createUser: '13856591439', | 
 |  |  |                 webCascadeUrl: null, | 
 |  |  |                 h5CascadeUrl: null, | 
 |  |  |                 cascadeTodoOpenType: null, | 
 |  |  |                 cascadeSourceConfigId: null, | 
 |  |  |                 h5Url: '/h5/pages/form-page/form-page?returnPath=-1&appId=32ca8770-6f85-11ec-b5a3-991864da52a6&taskId=98c256b9-aaff-11ef-8347-fa163ee2c57c&processNodeId=UserTask_dde7d83377343a2d5fa1f60c23b023ef&modelCode=tb_leave_dfe_for_dfe_runtime&type=flowHandle&component=form-apply&_sn=true', | 
 |  |  |                 segmentId: 'dfe-form', | 
 |  |  |                 lastUsers: '陈鸿飞', | 
 |  |  |                 currentUsers: '陈鸿飞', | 
 |  |  |                 todoTypeCode: 'dfe@@tlnc_placeholder_tlnc@@dfeFlowTodoModuleId', | 
 |  |  |                 currentUserIds: '13856591439', | 
 |  |  |                 lastUserIds: '13856591439', | 
 |  |  |                 msgDesc: null, | 
 |  |  |                 widgetUrl: null, | 
 |  |  |                 detailType: null, | 
 |  |  |                 widgetWidth: null, | 
 |  |  |                 widgetHeight: null, | 
 |  |  |                 userIdList: null, | 
 |  |  |                 statusName: null, | 
 |  |  |                 arriveTime: null, | 
 |  |  |                 stayTime: null, | 
 |  |  |                 todoType: null, | 
 |  |  |                 cascadePort: null, | 
 |  |  |                 openMode: null | 
 |  |  |               } | 
 |  |  |             }, | 
 |  |  |             msgType: 'tlnc' | 
 |  |  |           } | 
 |  |  |           const argus = JSON.parse(row.param5) | 
 |  |  |           console.log('row.param5 Obj---', argus) | 
 |  |  |           // const argus = JSON.stringify(params) | 
 |  |  |           myWindow.postMessage('{"method":"goToApp","argument":' + row.param5 + '}', '*') | 
 |  |  |         }, 8000) | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     SubSuccess (str) { | 
 |  |  |       this[str] = false | 
 |  |  |       this.getTaskList() | 
 |  |  |     }, | 
 |  |  |     funcClick(item) { | 
 |  |  |     funcClick (item) { | 
 |  |  |       if (item.name == '考勤工作台') { | 
 |  |  |         getAppHeaderNav(4).then(res => { | 
 |  |  |           window.open(res, "_blank") | 
 |  |  |           return | 
 |  |  |           window.open(res, '_blank') | 
 |  |  |         }) | 
 |  |  |         return | 
 |  |  |       } | 
 |  |  |       if (item.name == '食堂消费') { | 
 |  |  |         getAppHeaderNav(6).then(res => { | 
 |  |  |           window.open(res, '_blank') | 
 |  |  |         }) | 
 |  |  |         return | 
 |  |  |       } | 
 |  |  |       this.$router.push(item.path) | 
 |  |  |     }, | 
 |  |  |     updateDate() { | 
 |  |  |     updateDate () { | 
 |  |  |       this.nowDate = dayjs().format('YYYY年M月D日') | 
 |  |  |       this.nowWeek = weeks[new Date().getDay()] | 
 |  |  |     }, | 
 |  |  |     initData() { | 
 |  |  |     initData () { | 
 |  |  |       this.getWorkHead() | 
 |  |  |       this.getWorkBody() | 
 |  |  |       this.getTaskList() | 
 |  |  |       this.getWarningList() | 
 |  |  |     }, | 
 |  |  |     getWarningList() { | 
 |  |  |     getWarningList () { | 
 |  |  |       getWorkbenchData({ queryType: 4 }).then(res => { | 
 |  |  |         this.warningList = res.timeOutVisitList || [] | 
 |  |  |         this.warningTotal = res.timeOutVisitNum || 0 | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     getTaskList() { | 
 |  |  |     getTaskList () { | 
 |  |  |       getWorkbenchData({ queryType: 3 }).then(res => { | 
 |  |  |         this.taskList = res.noticesList || [] | 
 |  |  |         this.taskTotal = res.noticesNum || 0 | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     getWorkBody() { | 
 |  |  |     getWorkBody () { | 
 |  |  |       getWorkbenchData({ queryType: 2 }).then(res => { | 
 |  |  |         console.log(res) | 
 |  |  |         this.staticData = res || {} | 
 |  |  |         this.initEchart2() | 
 |  |  |         this.initEchart21() | 
 |  |  |         this.initEchart3() | 
 |  |  |         this.initEchart4() | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     getWorkHead() { | 
 |  |  |     getWorkHead () { | 
 |  |  |       getWorkbenchData({ queryType: 1 }).then(res => { | 
 |  |  |         this.headerData = res || {} | 
 |  |  |         let arr = [] | 
 |  |  |         const arr = [] | 
 |  |  |         arr.push({ name: '访客', value: this.headerData.inParkVisitUserNum }) | 
 |  |  |         arr.push({ name: '内部员工', value: this.headerData.todayInParkUserNum - this.headerData.inParkLwUserNum - this.headerData.inParkVisitUserNum }) | 
 |  |  |         arr.push({ name: '内部员工', value: this.headerData.todayInParkUserNum - this.headerData.inParkLwUserNum - this.headerData.inParkVisitUserNum - this.headerData.inParkDriverUserNum }) | 
 |  |  |         arr.push({ name: '长期相关方', value: this.headerData.inParkLwUserNum }) | 
 |  |  |         arr.push({ name: '货运司机', value: this.headerData.inParkDriverUserNum }) | 
 |  |  |         arr.sort((a, b) => b.value - a.value) | 
 |  |  |         this.manningRatio = arr | 
 |  |  |         this.initEchart1() | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     jumpPage(page) { | 
 |  |  |     jumpPage (page) { | 
 |  |  |       this.$router.push(page) | 
 |  |  |     }, | 
 |  |  |     departure(id) { | 
 |  |  |     departure (id) { | 
 |  |  |       this.$confirm('确定离厂吗, 是否继续?', '提示', { | 
 |  |  |         confirmButtonText: '确定', | 
 |  |  |         cancelButtonText: '取消', | 
 |  |  | 
 |  |  |  | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     handleDetail(row) { | 
 |  |  |     handleDetail (row) { | 
 |  |  |       if (row.type === 7) { | 
 |  |  |         this.handleTest(row) | 
 |  |  |         return | 
 |  |  |       } | 
 |  |  |       if (row.objType === 2) { | 
 |  |  |         this.$refs.OperaDetailsWindow.open('公务车申请详情', { ...row, id: row.objId }) | 
 |  |  |         return | 
 |  |  | 
 |  |  |         }) | 
 |  |  |       } | 
 |  |  |     }, | 
 |  |  |     initEchart1() { | 
 |  |  |     initEchart1 () { | 
 |  |  |       const myChart = echarts.init(document.getElementById('echart1')) | 
 |  |  |       let that = this | 
 |  |  |       const that = this | 
 |  |  |  | 
 |  |  |       const option = { | 
 |  |  |         tooltip: { | 
 |  |  | 
 |  |  |         myChart.resize() | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     initEchart2() { | 
 |  |  |     initEchart2 () { | 
 |  |  |       console.log('initEchart2') | 
 |  |  |       if (!document.getElementById('echart2')) { | 
 |  |  |         return | 
 |  |  |       } | 
 |  |  |       echarts.dispose(document.getElementById('echart2')) | 
 |  |  |       const myChart = echarts.init(document.getElementById('echart2')) | 
 |  |  |       let that = this | 
 |  |  |       const that = this | 
 |  |  |       var ydata = that.staticData.internalList.map(i => i.num) | 
 |  |  |       let maxNum = 1 | 
 |  |  |       ydata.forEach((item, index) => { | 
 |  |  |         maxNum = item > maxNum ? item : maxNum | 
 |  |  |       }) | 
 |  |  |       myChart.setOption({ | 
 |  |  |         dataZoom: [ | 
 |  |  |           { | 
 |  |  |             type: 'slider', // 滑动条类型 | 
 |  |  |             orient: 'vertical', | 
 |  |  |             left: 'left', | 
 |  |  |             showDetail: false, | 
 |  |  |             start: 0, // 起始位置(百分比) | 
 |  |  |             end: 40, // 结束位置(百分比),控制初始显示范围 | 
 |  |  |             width: 4, | 
 |  |  |             dataBackground: { | 
 |  |  |               areaStyle: { opacity: 0 }, // 设置背景透明 | 
 |  |  |               lineStyle: { opacity: 0 } // 设置背景透明 | 
 |  |  |             } | 
 |  |  |             // moveOnMouseWheel: true, | 
 |  |  |           }, | 
 |  |  |           { | 
 |  |  |             type: 'inside', // 用于监听滚轮事件 | 
 |  |  |             orient: 'vertical', | 
 |  |  |             start: 0, | 
 |  |  |             end: 40, | 
 |  |  |             showDetail: false, | 
 |  |  |             minSpan: 40, | 
 |  |  |             dataBackground: { | 
 |  |  |               areaStyle: { opacity: 0 } // 设置背景透明 | 
 |  |  |             }, | 
 |  |  |             maxSpan: 40, | 
 |  |  |             zoomLock: true // 锁定缩放(仅允许平移) | 
 |  |  |             // moveOnMouseWheel: true, // 启用滚轮平移 | 
 |  |  |           } | 
 |  |  |         ], | 
 |  |  |         grid: { | 
 |  |  |           top: '4%', | 
 |  |  |           left: '2%', | 
 |  |  | 
 |  |  |         }, | 
 |  |  |         xAxis: { | 
 |  |  |           type: 'value', | 
 |  |  |           position: 'bottom', | 
 |  |  |           position: 'top', | 
 |  |  |           splitLine: { | 
 |  |  |             show: true, | 
 |  |  |             lineStyle: { | 
 |  |  |               // 这里输入线条的样式 | 
 |  |  |               color: 'rgba(255,255,255,0.14)' | 
 |  |  |             } | 
 |  |  |           } | 
 |  |  |           }, | 
 |  |  |           axisLabel: { | 
 |  |  |             formatter: function (value) { | 
 |  |  |               const intValue = Math.round(value) | 
 |  |  |               return intValue > 0 ? intValue : '' | 
 |  |  |             } | 
 |  |  |           }, | 
 |  |  |           minInterval: 1, | 
 |  |  |           min: 1 | 
 |  |  |           // max: maxNum | 
 |  |  |         }, | 
 |  |  |         yAxis: { | 
 |  |  |           type: 'category', | 
 |  |  |           data: that.staticData.lwList.map(i => i.name) | 
 |  |  |           inverse: true, | 
 |  |  |           data: that.staticData.internalList.map(i => i.name), | 
 |  |  |           axisLabel: { | 
 |  |  |             interval: 0 | 
 |  |  |           } | 
 |  |  |         }, | 
 |  |  |         series: [ | 
 |  |  |           { | 
 |  |  |             data: ydata, | 
 |  |  |             type: 'bar', | 
 |  |  |             barWidth: 10, | 
 |  |  |             itemStyle: { | 
 |  |  |               normal: { | 
 |  |  |                 color: new echarts.graphic.LinearGradient( | 
 |  |  |                   1, 0, 0, 0, | 
 |  |  |                   [ | 
 |  |  |                     { offset: 0, color: '#56abf8' }, | 
 |  |  |                     { offset: 1, color: '#407ff0' } | 
 |  |  |                   ] | 
 |  |  |                 ) | 
 |  |  |                 // barBorderRadius: [0, 10, 10, 0] | 
 |  |  |               } | 
 |  |  |             } | 
 |  |  |           } | 
 |  |  |         ] | 
 |  |  |       }) | 
 |  |  |       window.addEventListener('resize', function () { // 执行 | 
 |  |  |         myChart.resize() | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     initEchart21 () { | 
 |  |  |       console.log('initEchart21',this.staticData.lwList) | 
 |  |  |       if (!document.getElementById('echart21')) { | 
 |  |  |         return | 
 |  |  |       } | 
 |  |  |       echarts.dispose(document.getElementById('echart21')) | 
 |  |  |       const myChart = echarts.init(document.getElementById('echart21')) | 
 |  |  |       const that = this | 
 |  |  |       var le1 = that.staticData.internalList.length | 
 |  |  |       var le2 = that.staticData.lwList.length | 
 |  |  |       const end = Math.round(40 * ((le1>0&& le2>0?le1:1) / (le1>0&& le2>0?le2:1)))+10 | 
 |  |  |       myChart.setOption({ | 
 |  |  |         dataZoom: [ | 
 |  |  |           { | 
 |  |  |             type: 'slider', // 滑动条类型 | 
 |  |  |             orient: 'vertical', | 
 |  |  |             left: 'left', | 
 |  |  |             showDetail: false, | 
 |  |  |             start: 0, // 起始位置(百分比) | 
 |  |  |             end: end, // 结束位置(百分比),控制初始显示范围 | 
 |  |  |             width: 4, | 
 |  |  |             dataBackground: { | 
 |  |  |               areaStyle: { opacity: 0 }, // 设置背景透明 | 
 |  |  |               lineStyle: { opacity: 0 } // 设置背景透明 | 
 |  |  |             }, | 
 |  |  |             zoomLock: true, // 锁定缩放(仅允许平移) | 
 |  |  |             moveOnMouseWheel: true | 
 |  |  |           }, | 
 |  |  |           { | 
 |  |  |             type: 'inside', // 用于监听滚轮事件 | 
 |  |  |             orient: 'vertical', | 
 |  |  |             start: 0, | 
 |  |  |             end: end, | 
 |  |  |             showDetail: false, | 
 |  |  |             minSpan: end, | 
 |  |  |             dataBackground: { | 
 |  |  |               areaStyle: { opacity: 0 } // 设置背景透明 | 
 |  |  |             }, | 
 |  |  |             maxSpan: end, | 
 |  |  |             zoomLock: true, // 锁定缩放(仅允许平移) | 
 |  |  |             moveOnMouseWheel: true // 启用滚轮平移 | 
 |  |  |           } | 
 |  |  |         ], | 
 |  |  |         grid: { | 
 |  |  |           top: '4%', | 
 |  |  |           left: '2%', | 
 |  |  |           right: '6%', | 
 |  |  |           bottom: '2%', | 
 |  |  |           containLabel: true | 
 |  |  |         }, | 
 |  |  |         tooltip: { | 
 |  |  |           trigger: 'axis', | 
 |  |  |           axisPointer: { | 
 |  |  |             type: 'line' | 
 |  |  |           } | 
 |  |  |         }, | 
 |  |  |         xAxis: { | 
 |  |  |           type: 'value', | 
 |  |  |           position: 'top', | 
 |  |  |           splitLine: { | 
 |  |  |             show: true, | 
 |  |  |             lineStyle: { | 
 |  |  |               // 这里输入线条的样式 | 
 |  |  |               color: 'rgba(255,255,255,0.14)' | 
 |  |  |             } | 
 |  |  |           }, | 
 |  |  |           axisLabel: { | 
 |  |  |             formatter: function (value) { | 
 |  |  |               const intValue = Math.round(value) | 
 |  |  |               return intValue > 0 ? intValue : '' | 
 |  |  |             } | 
 |  |  |           }, | 
 |  |  |           minInterval: 1, | 
 |  |  |           min: 1 | 
 |  |  |         }, | 
 |  |  |         yAxis: { | 
 |  |  |           type: 'category', | 
 |  |  |           inverse: true, | 
 |  |  |           data:  that.staticData.lwList.map(i => i.name), | 
 |  |  |           axisLabel: { | 
 |  |  |             interval: 0 | 
 |  |  |           } | 
 |  |  |         }, | 
 |  |  |         series: [ | 
 |  |  |           { | 
 |  |  | 
 |  |  |                     { offset: 0, color: '#56abf8' }, | 
 |  |  |                     { offset: 1, color: '#407ff0' } | 
 |  |  |                   ] | 
 |  |  |                 ), | 
 |  |  |                 ) | 
 |  |  |                 // barBorderRadius: [0, 10, 10, 0] | 
 |  |  |               } | 
 |  |  |             } | 
 |  |  | 
 |  |  |         myChart.resize() | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     initEchart3() { | 
 |  |  |     initEchart3 () { | 
 |  |  |       const myChart = echarts.init(document.getElementById('echart3')) | 
 |  |  |       let that = this | 
 |  |  |       const that = this | 
 |  |  |       myChart.setOption({ | 
 |  |  |         tooltip: { | 
 |  |  |           trigger: 'axis', | 
 |  |  | 
 |  |  |           nameTextStyle: { | 
 |  |  |             padding: [0, 0, 4, -30] // 四个数字分别为上右下左与原位置距离 | 
 |  |  |           }, | 
 |  |  |           axisLabel: { | 
 |  |  |             formatter: function (value) { | 
 |  |  |               const intValue = Math.round(value) | 
 |  |  |               return intValue > 0 ? intValue : '' | 
 |  |  |             } | 
 |  |  |           }, | 
 |  |  |           minInterval: 1, | 
 |  |  |           min: 1, | 
 |  |  |           splitLine: { | 
 |  |  |             show: true, | 
 |  |  |             lineStyle: { | 
 |  |  | 
 |  |  |         myChart.resize() | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     initEchart4() { | 
 |  |  |     initEchart4 () { | 
 |  |  |       const myChart = echarts.init(document.getElementById('echart4')) | 
 |  |  |       let that = this | 
 |  |  |       const that = this | 
 |  |  |       myChart.setOption({ | 
 |  |  |         tooltip: { | 
 |  |  |           trigger: 'axis', | 
 |  |  | 
 |  |  |             <div>${params[0].name}</div> | 
 |  |  |             <div style="display: flex;align-items: center;"> | 
 |  |  |               <div style="width: 10px;height: 10px;border-radius: 50%;background-color: #6feef0;"></div> | 
 |  |  |               <span style="margin-left: 6px;">${params[0].value}</span> | 
 |  |  |               <span style="margin-left: 6px;">${params[0].value || 0}</span> | 
 |  |  |               <div>辆</div> | 
 |  |  |             </div> | 
 |  |  |           </div> | 
 |  |  | 
 |  |  |               // 这里输入线条的样式 | 
 |  |  |               color: 'rgba(255,255,255,0.14)' | 
 |  |  |             } | 
 |  |  |           } | 
 |  |  |           }, | 
 |  |  |           axisLabel: { | 
 |  |  |             formatter: function (value) { | 
 |  |  |               const intValue = Math.round(value) | 
 |  |  |               return intValue > 0 ? intValue : '' | 
 |  |  |             } | 
 |  |  |           }, | 
 |  |  |           minInterval: 1, | 
 |  |  |           min: 1 | 
 |  |  |         }, | 
 |  |  |         grid: { | 
 |  |  |           top: '16%', | 
 |  |  | 
 |  |  |   width: 100%; | 
 |  |  |   height: 100%; | 
 |  |  |   overflow: auto; | 
 |  |  |   padding: 20px; | 
 |  |  |   padding: 20px 20px 40px 20px; | 
 |  |  |   padding-top: 92px; | 
 |  |  |  | 
 |  |  |   .home_header { |