| | |
| | | 更多<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"> |
| | |
| | | { 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_func5.png'), path: '/operation/serviceCar/apprRecord' }, |
| | | { name: '考勤工作台', path: '', url: require('@/assets/icons/home_func4.png') }, |
| | | { name: '食堂消费', path: '', url: require('@/assets/icons/8.png') } |
| | | ], |
| | |
| | | this.initData() |
| | | }, |
| | | methods: { |
| | | changeType(e) { |
| | | changeType (e) { |
| | | console.log(e) |
| | | this.initEchart2() |
| | | this.initEchart21() |
| | | }, |
| | | getNoticeList(){ |
| | | getNoticeList () { |
| | | syncHkNotice().then(res => { |
| | | |
| | | }) |
| | |
| | | }, |
| | | getWorkBody () { |
| | | getWorkbenchData({ queryType: 2 }).then(res => { |
| | | console.log(res) |
| | | this.staticData = res || {} |
| | | this.initEchart2() |
| | | this.initEchart21() |
| | | this.initEchart3() |
| | | this.initEchart4() |
| | | }) |
| | |
| | | }, |
| | | 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', |
| | | start: 0, // 起始位置(百分比) |
| | | end: 40, // 结束位置(百分比),控制初始显示范围 |
| | | showDetail: false, |
| | | start: 0, // 起始位置(百分比) |
| | | end: 40, // 结束位置(百分比),控制初始显示范围 |
| | | width: 4, |
| | | dataBackground: { |
| | | areaStyle: { opacity: 0 }, // 设置背景透明 |
| | | lineStyle: { opacity: 0 } // 设置背景透明 |
| | | }, |
| | | moveOnMouseWheel: true, |
| | | } |
| | | // moveOnMouseWheel: true, |
| | | }, |
| | | { |
| | | type: 'inside', // 用于监听滚轮事件 |
| | | type: 'inside', // 用于监听滚轮事件 |
| | | orient: 'vertical', |
| | | start: 0, |
| | | end: 40, |
| | | showDetail: false, |
| | | minSpan: 40, |
| | | dataBackground: { |
| | | areaStyle: { opacity: 0 } // 设置背景透明 |
| | | }, |
| | | maxSpan: 40, |
| | | zoomLock: true, // 锁定缩放(仅允许平移) |
| | | moveOnMouseWheel: true, // 启用滚轮平移 |
| | | zoomLock: true // 锁定缩放(仅允许平移) |
| | | // moveOnMouseWheel: true, // 启用滚轮平移 |
| | | } |
| | | ], |
| | | grid: { |
| | |
| | | }, |
| | | xAxis: { |
| | | type: 'value', |
| | | position: 'bottom', |
| | | position: 'top', |
| | | splitLine: { |
| | | show: true, |
| | | lineStyle: { |
| | |
| | | } |
| | | }, |
| | | axisLabel: { |
| | | formatter: function(value) { |
| | | const intValue = Math.round(value); |
| | | return intValue > 0 ? intValue : ''; |
| | | formatter: function (value) { |
| | | const intValue = Math.round(value) |
| | | return intValue > 0 ? intValue : '' |
| | | } |
| | | }, |
| | | minInterval: 1, |
| | | min: 1 |
| | | // max: maxNum |
| | | }, |
| | | yAxis: { |
| | | type: 'category', |
| | | 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, |
| | |
| | | }, |
| | | yAxis: { |
| | | type: 'category', |
| | | data: that.tabPosition === 'top' ? that.staticData.lwList.map(i => i.name) : that.staticData.internalList.map(i => i.name) |
| | | inverse: true, |
| | | data: that.staticData.lwList.map(i => i.name), |
| | | axisLabel: { |
| | | interval: 0 |
| | | } |
| | | }, |
| | | series: [ |
| | | { |
| | | data: that.tabPosition === 'top' ? that.staticData.lwList.map(i => i.num) : that.staticData.internalList.map(i => i.num), |
| | | data: that.staticData.lwList.map(i => i.num), |
| | | type: 'bar', |
| | | barWidth: 10, |
| | | itemStyle: { |
| | |
| | | padding: [0, 0, 4, -30] // 四个数字分别为上右下左与原位置距离 |
| | | }, |
| | | axisLabel: { |
| | | formatter: function(value) { |
| | | const intValue = Math.round(value); |
| | | return intValue > 0 ? intValue : ''; |
| | | formatter: function (value) { |
| | | const intValue = Math.round(value) |
| | | return intValue > 0 ? intValue : '' |
| | | } |
| | | }, |
| | | minInterval: 1, |
| | |
| | | } |
| | | }, |
| | | axisLabel: { |
| | | formatter: function(value) { |
| | | const intValue = Math.round(value); |
| | | return intValue > 0 ? intValue : ''; |
| | | formatter: function (value) { |
| | | const intValue = Math.round(value) |
| | | return intValue > 0 ? intValue : '' |
| | | } |
| | | }, |
| | | }, |
| | | minInterval: 1, |
| | | min: 1 |
| | | }, |