|  |  |  | 
|---|
|  |  |  | <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="getNoticeList">待办事项</span> | 
|---|
|  |  |  | <span >待办事项</span> | 
|---|
|  |  |  | <span class="num" v-if="taskTotal">{{ taskTotal }}</span> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="df_ac more" @click="jumpPage('/task/index')"> | 
|---|
|  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | 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, | 
|---|
|  |  |  | 
|---|
|  |  |  | this.initData() | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | methods: { | 
|---|
|  |  |  | getNoticeList(){ | 
|---|
|  |  |  | changeType (e) { | 
|---|
|  |  |  | console.log(e) | 
|---|
|  |  |  | this.initEchart2() | 
|---|
|  |  |  | this.initEchart21() | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | getNoticeList () { | 
|---|
|  |  |  | syncHkNotice().then(res => { | 
|---|
|  |  |  |  | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | 
|---|
|  |  |  | if (res == undefined || res == null) { | 
|---|
|  |  |  | return | 
|---|
|  |  |  | } | 
|---|
|  |  |  | const myWindow = window.open(res) | 
|---|
|  |  |  | console.log('单点登录地址------', res) | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const myWindow = top.window.open(res) | 
|---|
|  |  |  | console.log('myWindow---', myWindow) | 
|---|
|  |  |  | setTimeout(() => { | 
|---|
|  |  |  | const params = { | 
|---|
|  |  |  | componentId: 'dfe', | 
|---|
|  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | 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 + '}', '*') | 
|---|
|  |  |  | }, 3000) | 
|---|
|  |  |  | }, 8000) | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | SubSuccess (str) { | 
|---|
|  |  |  | 
|---|
|  |  |  | getAppHeaderNav(4).then(res => { | 
|---|
|  |  |  | window.open(res, '_blank') | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | return | 
|---|
|  |  |  | } | 
|---|
|  |  |  | if (item.name == '食堂消费') { | 
|---|
|  |  |  | getAppHeaderNav(6).then(res => { | 
|---|
|  |  |  | window.open(res, '_blank') | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | return | 
|---|
|  |  |  | } | 
|---|
|  |  |  | this.$router.push(item.path) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | getWorkBody () { | 
|---|
|  |  |  | getWorkbenchData({ queryType: 2 }).then(res => { | 
|---|
|  |  |  | console.log(res) | 
|---|
|  |  |  | this.staticData = res || {} | 
|---|
|  |  |  | this.initEchart2() | 
|---|
|  |  |  | this.initEchart21() | 
|---|
|  |  |  | this.initEchart3() | 
|---|
|  |  |  | this.initEchart4() | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | 
|---|
|  |  |  | this.headerData = res || {} | 
|---|
|  |  |  | 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() | 
|---|
|  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | handleDetail (row) { | 
|---|
|  |  |  | if (row.type === 7) { | 
|---|
|  |  |  | this.handleTest(row); | 
|---|
|  |  |  | this.handleTest(row) | 
|---|
|  |  |  | return | 
|---|
|  |  |  | } | 
|---|
|  |  |  | if (row.objType === 2) { | 
|---|
|  |  |  | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | initEchart2 () { | 
|---|
|  |  |  | console.log('initEchart2') | 
|---|
|  |  |  | if (!document.getElementById('echart2')) { | 
|---|
|  |  |  | return | 
|---|
|  |  |  | } | 
|---|
|  |  |  | echarts.dispose(document.getElementById('echart2')) | 
|---|
|  |  |  | const myChart = echarts.init(document.getElementById('echart2')) | 
|---|
|  |  |  | 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: [ | 
|---|
|  |  |  | { | 
|---|
|  |  |  | 
|---|
|  |  |  | 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: { | 
|---|
|  |  |  | 
|---|
|  |  |  | <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 { | 
|---|