| | |
| | | <div class="header"> |
| | | <div class="left"> |
| | | <div class="fs15">今日在园人数(人)</div> |
| | | <div class="num">300</div> |
| | | <div class="num">{{ headerData.todayInParkUserNum }}</div> |
| | | </div> |
| | | <img src="@/assets/icons/home_icon1.png" alt="" /> |
| | | </div> |
| | | <div class="content"> |
| | | <div>入园人次(人):600</div> |
| | | <div>出园人次(人):300</div> |
| | | <div>入园人次(人):{{ headerData.todayInUserNum }}</div> |
| | | <div>出园人次(人):{{ headerData.todayOutUserNum }}</div> |
| | | </div> |
| | | </div> |
| | | <div class="card"> |
| | | <div class="header"> |
| | | <div class="left"> |
| | | <div class="fs15">在园访客数(人)</div> |
| | | <div class="num">300</div> |
| | | <div class="num">{{ headerData.inParkVisitUserNum }}</div> |
| | | </div> |
| | | <img src="@/assets/icons/home_icon2.png" alt="" /> |
| | | </div> |
| | | <div class="content"> |
| | | <div>访客人次(人):200</div> |
| | | <div>签离人次(人):300</div> |
| | | <div>访客人次(人):{{ headerData.visitUserNum }}</div> |
| | | <div>签离人次(人):{{ headerData.signLevelNum }}</div> |
| | | </div> |
| | | </div> |
| | | <div class="card"> |
| | | <div class="header"> |
| | | <div class="left"> |
| | | <div class="fs15">在园长期相关方数(人)</div> |
| | | <div class="num">300</div> |
| | | <div class="num">{{ headerData.inParkLwUserNum }}</div> |
| | | </div> |
| | | <img src="@/assets/icons/home_icon3.png" alt="" /> |
| | | </div> |
| | | <div class="content"> |
| | | <div>入园人次(人):600</div> |
| | | <div>出园人次(人):300</div> |
| | | <div>入园人次(人):{{ headerData.lwUserInNum }}</div> |
| | | <div>出园人次(人):{{ headerData.lwUserOutNum }}</div> |
| | | </div> |
| | | </div> |
| | | <div class="card"> |
| | | <div class="header"> |
| | | <div class="left"> |
| | | <div class="fs15">在园长期相关方数(人)</div> |
| | | <div class="num">300</div> |
| | | <div class="fs15">今日在园车辆(辆)</div> |
| | | <div class="num">{{ headerData.todayInParkCarNum }}</div> |
| | | </div> |
| | | <img src="@/assets/icons/home_icon4.png" alt="" /> |
| | | </div> |
| | | <div class="content"> |
| | | <div>入园车次(辆):600</div> |
| | | <div>出园车次(辆):300</div> |
| | | <div>入园车次(辆):{{ headerData.todayInCarNum }}</div> |
| | | <div>出园车次(辆):{{ headerData.todayOutCarNum }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <div class="wrap static1"> |
| | | <div class="header"> |
| | | <div class="home_title">在场人员占比</div> |
| | | <div class="df_ac more"> |
| | | <!-- <div class="df_ac more"> |
| | | 更多<i class="el-icon-arrow-right"></i> |
| | | </div> |
| | | </div> --> |
| | | </div> |
| | | <div class="content"> |
| | | <div class="echart_wrap"> |
| | | <div class="pie_text"> |
| | | <div class="fs13">总数</div> |
| | | <div class="fs15"><strong>300</strong></div> |
| | | <div class="fs15"><strong>{{ headerData.todayInParkUserNum }}</strong></div> |
| | | </div> |
| | | <div class="echart" id="echart1"></div> |
| | | </div> |
| | |
| | | <div class="item"> |
| | | <div class="icon"></div> |
| | | <div class="text">访客</div> |
| | | <div class="num">100</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">100</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">100</div> |
| | | <div class="text">长期相关方</div> |
| | | <div class="num">{{ headerData.inParkLwUserNum }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <div class="wrap static2"> |
| | | <div class="header"> |
| | | <div class="home_title">长期相关方分布</div> |
| | | <div class="df_ac more"> |
| | | <!-- <div class="df_ac more"> |
| | | 更多<i class="el-icon-arrow-right"></i> |
| | | </div> |
| | | </div> --> |
| | | </div> |
| | | <div class="echart" id="echart2"></div> |
| | | </div> |
| | |
| | | <div class="wrap static3"> |
| | | <div class="header"> |
| | | <div class="home_title">7日访客统计</div> |
| | | <div class="df_ac more"> |
| | | <!-- <div class="df_ac more"> |
| | | 更多<i class="el-icon-arrow-right"></i> |
| | | </div> |
| | | </div> --> |
| | | </div> |
| | | <div class="echart" id="echart3"></div> |
| | | </div> |
| | | <div class="wrap static4"> |
| | | <div class="header"> |
| | | <div class="home_title">7日车辆统计</div> |
| | | <div class="df_ac more"> |
| | | <!-- <div class="df_ac more"> |
| | | 更多<i class="el-icon-arrow-right"></i> |
| | | </div> |
| | | </div> --> |
| | | </div> |
| | | <div class="echart" id="echart4"></div> |
| | | </div> |
| | |
| | | <div class="header df_sb"> |
| | | <div class="home_title df"> |
| | | <span>待办事项</span> |
| | | <span class="num">10</span> |
| | | <span class="num" v-if="taskTotal">{{ taskTotal }}</span> |
| | | </div> |
| | | <div class="df_ac more"> |
| | | <div class="df_ac more" @click="jumpPage('/task/index')"> |
| | | 更多<i class="el-icon-arrow-right"></i> |
| | | </div> |
| | | </div> |
| | | <div class="list"> |
| | | <div class="item"> |
| | | <div class="item" v-for="item in taskList" :key="item.id"> |
| | | <div class="content"> |
| | | <div class="title">点点滴滴</div> |
| | | <div class="time">time</div> |
| | | <div class="title">{{ item.title }}</div> |
| | | <div class="time">{{ item.createDate }}</div> |
| | | </div> |
| | | <div class="btn">处理</div> |
| | | <div class="btn" v-permissions="['business:staging:query']" @click="handleDetail(item)">处理</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="content"> |
| | | <div class="title">点点滴滴</div> |
| | | <div class="time">time</div> |
| | | </div> |
| | | <div class="btn">处理</div> |
| | | <div v-if="taskList.length == 0" class="empty"> |
| | | <img src="@/assets/images/default_nodata.png" alt=""> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <div class="header df_sb"> |
| | | <div class="home_title df"> |
| | | <span>超时预警</span> |
| | | <span class="num">10</span> |
| | | <span class="num" v-if="warningTotal">{{ warningTotal }}</span> |
| | | </div> |
| | | <div class="df_ac more"> |
| | | <div class="df_ac more" @click="jumpPage('/business/strandedPersonnel')"> |
| | | 更多<i class="el-icon-arrow-right"></i> |
| | | </div> |
| | | </div> |
| | | <div class="list"> |
| | | <div class="item"> |
| | | <div class="item" v-for="item in warningList" :key="item.id"> |
| | | <div class="name_wrap df_sb"> |
| | | <div class="name">袁隆平</div> |
| | | <div class="identity">普通访客</div> |
| | | <div class="name">{{ item.name }}</div> |
| | | <div class="identity" v-if="item.memberType == 0">劳务访客</div> |
| | | <div class="identity" v-if="item.memberType == 1">普通访客</div> |
| | | <div class="identity" v-if="item.memberType == 2">内部人员</div> |
| | | </div> |
| | | <div class="line">联系电话:1888</div> |
| | | <div class="line">访客公司:安徽豆米</div> |
| | | <div class="line">联系电话:{{ item.phone }}</div> |
| | | <div class="line">访客公司:{{ item.companyName }}</div> |
| | | <div class="auth df_sb"> |
| | | <div class="time">授权期限:</div> |
| | | <div class="btn">离场</div> |
| | | <div class="time">授权期限:{{ item.endtime }}</div> |
| | | <div class="btn" @click="departure(item.id)">离场</div> |
| | | </div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="name_wrap df_sb"> |
| | | <div class="name">袁隆平</div> |
| | | <div class="identity">普通访客</div> |
| | | </div> |
| | | <div class="line">联系电话:1888</div> |
| | | <div class="line">访客公司:安徽豆米</div> |
| | | <div class="auth df_sb"> |
| | | <div class="time">授权期限:</div> |
| | | <div class="btn">离场</div> |
| | | </div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="name_wrap df_sb"> |
| | | <div class="name">袁隆平</div> |
| | | <div class="identity">普通访客</div> |
| | | </div> |
| | | <div class="line">联系电话:1888</div> |
| | | <div class="line">访客公司:安徽豆米</div> |
| | | <div class="auth df_sb"> |
| | | <div class="time">授权期限:</div> |
| | | <div class="btn">离场</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div v-if="warningList.length == 0" class="empty"> |
| | | <img src="@/assets/images/default_nodata.png" alt=""> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <TaskDetail v-if="isShowDetail" ref="DetailRef" @success="SubSuccess('isShowDetail')" /> |
| | | <VisReportDetail v-if="isShowReport" ref="VisReportDetailRef" @success="SubSuccess('isShowReport')" /> |
| | | <DangetDetail v-if="isShowDanger" ref="DangetDetailRef" @success="SubSuccess('isShowDanger')" /> |
| | | <DriverDetail v-if="isShowDriver" ref="DriverDetailRef" @success="SubSuccess('isShowDriver')" /> |
| | | <!-- 用车申请 --> |
| | | <OperaCarUseBookWindow ref="OperaDetailsWindow" @success="getTaskList" /> |
| | | <!-- 隐患 --> |
| | | <OperaHiddenDangerWindow ref="OperaHiddenDangerWindow" @success="getTaskList" /> |
| | | <!-- 预约详情 --> |
| | | <OperaVisitsDesWindow ref="OperaVisitsDesWindow" /> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | getWorkbenchData, |
| | | getAppHeaderNav |
| | | } from '@/api' |
| | | import { level } from '@/api/business/visits' |
| | | import TaskDetail from '@/views/task/visSubDetail.vue' |
| | | import VisReportDetail from '@/views/task/visReportDetail.vue' |
| | | import DangetDetail from '@/views/task/dangetDetail.vue' |
| | | import DriverDetail from '@/views/task/driverDetail.vue' |
| | | import OperaCarUseBookWindow from '@/components/business/OperaCarUseBookWindow' |
| | | import OperaHiddenDangerWindow from '@/components/business/OperaHiddenDangerWindow' |
| | | import OperaVisitsDesWindow from '@/components/business/OperaVisitsDesWindow' |
| | | const colors = ['#52a4f7', '#7678f7', '#5fc6d5'] |
| | | export default { |
| | | components: { |
| | | TaskDetail, |
| | | VisReportDetail, |
| | | DangetDetail, |
| | | DriverDetail, |
| | | OperaCarUseBookWindow, |
| | | OperaHiddenDangerWindow, |
| | | OperaVisitsDesWindow |
| | | }, |
| | | data() { |
| | | return { |
| | | colors, |
| | | nowDate: '', |
| | | nowWeek: '', |
| | | headerData: {}, |
| | | staticData: {}, |
| | | taskList: [], |
| | | taskTotal: 0, |
| | | warningList: [], |
| | | warningTotal: 0, |
| | | funcList: [ |
| | | { 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') } |
| | | ] |
| | | ], |
| | | isShowDetail: false, |
| | | isShowReport: false, |
| | | isShowDanger: false, |
| | | isShowDriver: false, |
| | | } |
| | | }, |
| | | computed: { |
| | |
| | | this.initData() |
| | | }, |
| | | methods: { |
| | | SubSuccess(str) { |
| | | this[str] = false |
| | | this.getTaskList() |
| | | }, |
| | | funcClick(item) { |
| | | if (item.name == '考勤工作台') { |
| | | getAppHeaderNav(4).then(res => { |
| | |
| | | this.nowWeek = weeks[new Date().getDay()] |
| | | }, |
| | | initData() { |
| | | this.getWorkBody() //主体数据 |
| | | this.getWorkHead() //主体数据 |
| | | |
| | | this.initEchart1() |
| | | this.initEchart2() |
| | | this.initEchart3() |
| | | this.initEchart4() |
| | | this.getWorkHead() |
| | | this.getWorkBody() |
| | | this.getTaskList() |
| | | this.getWarningList() |
| | | }, |
| | | getWarningList() { |
| | | getWorkbenchData({ queryType: 4 }).then(res => { |
| | | this.warningList = res.timeOutVisitList || [] |
| | | this.warningTotal = res.timeOutVisitNum || 0 |
| | | }) |
| | | }, |
| | | getTaskList() { |
| | | getWorkbenchData({ queryType: 3 }).then(res => { |
| | | this.taskList = res.noticesList || [] |
| | | this.taskTotal = res.noticesNum || 0 |
| | | }) |
| | | }, |
| | | getWorkBody() { |
| | | getWorkbenchData({queryType: 2}) |
| | | getWorkbenchData({ queryType: 2 }).then(res => { |
| | | this.staticData = res || {} |
| | | this.initEchart2() |
| | | this.initEchart3() |
| | | this.initEchart4() |
| | | }) |
| | | }, |
| | | getWorkHead() { |
| | | getWorkbenchData({queryType: 1}) |
| | | getWorkbenchData({ queryType: 1 }).then(res => { |
| | | this.headerData = res || {} |
| | | this.initEchart1() |
| | | }) |
| | | }, |
| | | jumpPage(page) { |
| | | this.$router.push(page) |
| | | }, |
| | | departure(id) { |
| | | this.$confirm('确定离厂吗, 是否继续?', '提示', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning' |
| | | }).then(() => { |
| | | level(id) |
| | | .then(res => { |
| | | this.getWarningList() |
| | | }) |
| | | }).catch(() => { |
| | | |
| | | }) |
| | | }, |
| | | handleDetail (row) { |
| | | if (row.objType === 2) { |
| | | this.$refs.OperaDetailsWindow.open('公务车申请详情', { ...row, id: row.objId }) |
| | | return |
| | | } |
| | | if (row.objType === 1) { |
| | | this.isShowReport = true |
| | | this.$nextTick(() => { |
| | | this.$refs.VisReportDetailRef.id = row.objId |
| | | this.$refs.VisReportDetailRef.type = row.objType |
| | | this.$refs.VisReportDetailRef.getDetail() |
| | | this.$refs.VisReportDetailRef.isShowModal = true |
| | | }) |
| | | return |
| | | } |
| | | if (row.objType === 3) { |
| | | const obj = { ...row, id: row.objId } |
| | | this.$refs.OperaHiddenDangerWindow.open('隐患随手拍详情', obj) |
| | | return |
| | | } |
| | | if (row.objType === 6) { |
| | | const obj = { ...row, id: row.objId } |
| | | this.isShowDriver = true |
| | | this.$nextTick(() => { |
| | | this.$refs.DriverDetailRef.id = row.objId |
| | | this.$refs.DriverDetailRef.type = row.objType |
| | | this.$refs.DriverDetailRef.getDetail() |
| | | this.$refs.DriverDetailRef.isShowModal = true |
| | | }) |
| | | return |
| | | } |
| | | if (row.objType === 0) { |
| | | this.isShowDetail = true |
| | | this.$nextTick(() => { |
| | | this.$refs.DetailRef.id = row.objId |
| | | this.$refs.DetailRef.type = row.objType |
| | | this.$refs.DetailRef.getDetail() |
| | | this.$refs.DetailRef.isShowModal = true |
| | | }) |
| | | } |
| | | }, |
| | | initEchart1() { |
| | | const myChart = echarts.init(document.getElementById('echart1')) |
| | | let that = this |
| | | |
| | | const option = { |
| | | series: [ |
| | | { |
| | |
| | | show: false |
| | | }, |
| | | data: [ |
| | | { value: 1048, name: 'Search Engine' }, |
| | | { value: 735, name: 'Direct' }, |
| | | { value: 580, name: 'Email' } |
| | | { value: that.headerData.inParkVisitUserNum, name: '访客' }, |
| | | { value: that.headerData.todayInParkUserNum - that.headerData.inParkVisitUserNum - that.headerData.inParkLwUserNum, name: '内部员工' }, |
| | | { value: that.headerData.inParkLwUserNum, name: '长期相关方' } |
| | | ] |
| | | } |
| | | ] |
| | |
| | | }, |
| | | initEchart2() { |
| | | const myChart = echarts.init(document.getElementById('echart2')) |
| | | let that = this |
| | | myChart.setOption({ |
| | | grid: { |
| | | top: '4%', |
| | |
| | | }, |
| | | yAxis: { |
| | | type: 'category', |
| | | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
| | | data: that.staticData.lwList.map(i => i.name) |
| | | }, |
| | | series: [ |
| | | { |
| | | data: [120, 200, 150, 80, 70, 110, 130], |
| | | data: that.staticData.lwList.map(i => i.num), |
| | | type: 'bar', |
| | | barWidth: 10, |
| | | itemStyle: { |
| | |
| | | { offset: 1, color: '#407ff0' } |
| | | ] |
| | | ), |
| | | barBorderRadius: [0, 10, 10, 0] |
| | | // barBorderRadius: [0, 10, 10, 0] |
| | | } |
| | | } |
| | | } |
| | |
| | | }, |
| | | initEchart3() { |
| | | const myChart = echarts.init(document.getElementById('echart3')) |
| | | let that = this |
| | | myChart.setOption({ |
| | | tooltip: { |
| | | trigger: 'axis', |
| | |
| | | xAxis: { |
| | | type: 'category', |
| | | boundaryGap: false, |
| | | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
| | | data: that.staticData.weekVisitList.map(i => i.name) |
| | | }, |
| | | yAxis: { |
| | | type: 'value', |
| | |
| | | grid: { |
| | | top: '16%', |
| | | left: '2%', |
| | | right: '2%', |
| | | bottom: '4%', |
| | | right: '8%', |
| | | bottom: '2%', |
| | | containLabel: true |
| | | }, |
| | | series: [ |
| | | { |
| | | data: [150, 230, 224, 218, 135, 147, 260], |
| | | data: that.staticData.weekVisitList.map(i => i.num), |
| | | type: 'line', |
| | | areaStyle: { |
| | | normal: { |
| | |
| | | }, |
| | | initEchart4() { |
| | | const myChart = echarts.init(document.getElementById('echart4')) |
| | | let that = this |
| | | myChart.setOption({ |
| | | tooltip: { |
| | | trigger: 'axis', |
| | |
| | | xAxis: { |
| | | type: 'category', |
| | | boundaryGap: false, |
| | | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
| | | data: that.staticData.weekCarList.map(i => i.name) |
| | | }, |
| | | yAxis: { |
| | | type: 'value', |
| | |
| | | grid: { |
| | | top: '16%', |
| | | left: '2%', |
| | | right: '2%', |
| | | right: '8%', |
| | | bottom: '4%', |
| | | containLabel: true |
| | | }, |
| | | series: [ |
| | | { |
| | | data: [150, 230, 224, 218, 135, 147, 260], |
| | | data: that.staticData.weekCarList.map(i => i.num), |
| | | type: 'line', |
| | | areaStyle: { |
| | | normal: { |
| | |
| | | border: 1px solid #207ff7; |
| | | font-size: 13px; |
| | | color: #207ff7; |
| | | cursor: pointer; |
| | | } |
| | | } |
| | | } |
| | |
| | | width: 58px; |
| | | text-align: center; |
| | | height: 30px; |
| | | cursor: pointer; |
| | | line-height: 30px; |
| | | background: #ffffff; |
| | | border-radius: 2px; |
| | |
| | | } |
| | | } |
| | | } |
| | | .more{ |
| | | cursor: pointer; |
| | | } |
| | | .empty { |
| | | height: 300px; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | |
| | | img { |
| | | width: 140px; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .static_wrap { |