| | |
| | | <div class="echart" id="echart1"></div> |
| | | </div> |
| | | <div class="list"> |
| | | <div class="item"> |
| | | <div class="icon"></div> |
| | | <div class="text">访客</div> |
| | | <div class="num">{{ headerData.inParkVisitUserNum }}</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div :style="{ background: colors[0] }" class="icon"></div> |
| | | <div class="text">内部员工</div> |
| | | <div class="num">{{ headerData.todayInParkUserNum - headerData.inParkLwUserNum - |
| | | headerData.inParkVisitUserNum }}</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div :style="{ background: colors[1] }" class="icon"></div> |
| | | <div class="text">长期相关方</div> |
| | | <div class="num">{{ headerData.inParkLwUserNum }}</div> |
| | | <div class="item" v-for="item, i in manningRatio" :key="i"> |
| | | <div :style="{ background: colors[i] }" class="icon"></div> |
| | | <div class="text">{{ item.name }}</div> |
| | | <div class="num">{{ item.value }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | nowWeek: '', |
| | | headerData: {}, |
| | | staticData: {}, |
| | | manningRatio: [], |
| | | taskList: [], |
| | | taskTotal: 0, |
| | | warningList: [], |
| | |
| | | getWorkHead() { |
| | | getWorkbenchData({ queryType: 1 }).then(res => { |
| | | this.headerData = res || {} |
| | | let 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.inParkLwUserNum }) |
| | | arr.sort((a, b) => b.value - a.value) |
| | | this.manningRatio = arr |
| | | this.initEchart1() |
| | | }) |
| | | }, |
| | |
| | | let that = this |
| | | |
| | | const option = { |
| | | tooltip: { |
| | | trigger: 'item' |
| | | }, |
| | | series: [ |
| | | { |
| | | type: 'pie', |
| | |
| | | labelLine: { |
| | | show: false |
| | | }, |
| | | data: [ |
| | | { value: that.headerData.inParkVisitUserNum, name: '访客' }, |
| | | { value: that.headerData.todayInParkUserNum - that.headerData.inParkVisitUserNum - that.headerData.inParkLwUserNum, name: '内部员工' }, |
| | | { value: that.headerData.inParkLwUserNum, name: '长期相关方' } |
| | | ] |
| | | data: that.manningRatio |
| | | // data: [ |
| | | // { value: that.headerData.inParkVisitUserNum, name: '访客' }, |
| | | // { value: that.headerData.todayInParkUserNum - that.headerData.inParkVisitUserNum - that.headerData.inParkLwUserNum, name: '内部员工' }, |
| | | // { value: that.headerData.inParkLwUserNum, name: '长期相关方' } |
| | | // ] |
| | | } |
| | | ] |
| | | } |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .more{ |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .empty { |
| | | height: 300px; |
| | | display: flex; |
| | |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | height: 100%; |
| | | |
| | | .echart_wrap { |
| | | position: relative; |