| | |
| | | <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" style="text-align: center"> |
| | | <div class="home_header"> |
| | | <div class="mb10 fs17">ä¸å好ï¼{{ userInfo.realname }}</div> |
| | | <div class="fs13"> |
| | | ä»å¤©æ¯ {{ nowDate }} {{ nowWeek }}ï¼æ¬¢è¿è®¿é®èåå©åäºä»¶ä¸æ¥ç³»ç»ç®¡çå¹³å° |
| | | </div> |
| | | </div> |
| | | <!-- <div class="main"> |
| | | <div class="main"> |
| | | <div class="app_content"> |
| | | <div class="static_card"> |
| | | <div class="card"> |
| | | <div class="header"> |
| | | <div class="left"> |
| | | <div class="fs15">仿¥å¨å人æ°(人)</div> |
| | | <div class="num">{{ headerData.todayInParkUserNum }}</div> |
| | | <div class="fs15">SHE仿¥ææ¥æ°é</div> |
| | | <div class="num">{{ headerData.todaySheNum ||0 }}</div> |
| | | </div> |
| | | <img src="@/assets/icons/home_icon1.png" alt="" /> |
| | | </div> |
| | | <div class="content"> |
| | | <div>å
¥å人次(人)ï¼{{ headerData.todayInUserNum }}</div> |
| | | <div>åºå人次(人)ï¼{{ headerData.todayOutUserNum }}</div> |
| | | <div>æªè§£å³ï¼{{ headerData.sheNum || 0}}</div> |
| | | <div>已解å³ï¼{{ headerData.sheNum || 0}}</div> |
| | | <div>æ»å·¥åéï¼{{ headerData.sheNum || 0}}</div> |
| | | </div> |
| | | </div> |
| | | <div class="card"> |
| | | <div class="header"> |
| | | <div class="left"> |
| | | <div class="fs15">å¨å访客æ°(人)</div> |
| | | <div class="num">{{ headerData.inParkVisitUserNum }}</div> |
| | | <div class="fs15">è·ç»æ»ä»æ¥å·¥åæ°é</div> |
| | | <div class="num">{{ headerData.todayDbhNum ||0 }}</div> |
| | | </div> |
| | | <img src="@/assets/icons/home_icon2.png" alt="" /> |
| | | </div> |
| | | <div class="content"> |
| | | <div>访客人次(人)ï¼{{ headerData.visitUserNum }}</div> |
| | | <div>ç¾ç¦»äººæ¬¡(人)ï¼{{ headerData.signLevelNum }}</div> |
| | | <div>æªè§£å³ï¼{{ headerData.dbhNum || 0}}</div> |
| | | <div>已解å³ï¼{{ headerData.dbhNum || 0}}</div> |
| | | <div>æ»å·¥åéï¼{{ headerData.dbhNum || 0}}</div> |
| | | </div> |
| | | </div> |
| | | <div class="card"> |
| | | <div class="header"> |
| | | <div class="left"> |
| | | <div class="fs15">å¨åé¿æç¸å
³æ¹æ°(人)</div> |
| | | <div class="num">{{ headerData.inParkLwUserNum }}</div> |
| | | <div class="fs15">DCA仿¥æäº¤æ°é</div> |
| | | <div class="num">{{ headerData.todayDcaNum ||0 }}</div> |
| | | </div> |
| | | <img src="@/assets/icons/home_icon3.png" alt="" /> |
| | | </div> |
| | | <div class="content"> |
| | | <div>å
¥å人次(人)ï¼{{ headerData.lwUserInNum }}</div> |
| | | <div>åºå人次(人)ï¼{{ headerData.lwUserOutNum }}</div> |
| | | <div>æ»æäº¤éï¼{{ headerData.dcaNum || 0}}</div> |
| | | </div> |
| | | </div> |
| | | <div class="card"> |
| | | <div class="header"> |
| | | <div class="left"> |
| | | <div class="fs15">仿¥å¨å车è¾(è¾)</div> |
| | | <div class="num">{{ headerData.todayInParkCarNum }}</div> |
| | | <div class="fs15">DCA仿¥å·¥åæ°é</div> |
| | | <div class="num">{{ headerData.todayDcaChildNum ||0 }}</div> |
| | | </div> |
| | | <img src="@/assets/icons/home_icon4.png" alt="" /> |
| | | <img src="@/assets/icons/home_icon3.png" alt="" /> |
| | | </div> |
| | | <div class="content"> |
| | | <div>å
¥å车次(è¾)ï¼{{ headerData.todayInCarNum }}</div> |
| | | <div>åºå车次(è¾)ï¼{{ headerData.todayOutCarNum }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="funcs"> |
| | | <div class="home_title">常ç¨åè½</div> |
| | | <div class="list"> |
| | | <div v-for="item in funcList" @click="funcClick(item)" :key="item.name" class="item"> |
| | | <img class="mb10" :src="item.url" alt="" /> |
| | | <div>{{ item.name }}</div> |
| | | <div>æªè§£å³ï¼{{ headerData.dcaChildNum || 0}}</div> |
| | | <div>已解å³ï¼{{ headerData.dcaChildNum || 0}}</div> |
| | | <div>æ»å·¥åéï¼{{ headerData.dcaChildNum || 0}}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <div class="df mb10"> |
| | | <div class="wrap static1"> |
| | | <div class="header"> |
| | | <div class="home_title">å¨åºäººåå æ¯</div> |
| | | <!– <div class="df_ac more"> |
| | | æ´å¤<i class="el-icon-arrow-right"></i> |
| | | </div> –> |
| | | <div class="home_title">1.SHEäºä»¶ä¸æ¥</div> |
| | | </div> |
| | | <div class="content"> |
| | | <div class="echart_wrap"> |
| | | <div class="pie_text"> |
| | | <div class="fs13">æ»æ°</div> |
| | | <div class="fs15"><strong>{{ headerData.todayInParkUserNum }}</strong></div> |
| | | </div> |
| | | <div class="echart" id="echart1"></div> |
| | | </div> |
| | | <div class="list"> |
| | | <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 class="echart" > |
| | | <div id="echart0"></div> |
| | | <div id="echart01"></div> |
| | | </div> |
| | | </div> |
| | | <div class="wrap static2"> |
| | | <div class="header"> |
| | | <div class="home_title">é¿æç¸å
³æ¹åå¸</div> |
| | | <!– <div class="df_ac more"> |
| | | æ´å¤<i class="el-icon-arrow-right"></i> |
| | | </div> –> |
| | | <div class="home_title">2.æ·±åº¦ç¬¦åæ§å®¡æ¥DCA䏿¥è®°å½</div> |
| | | </div> |
| | | <div class="echart" id="echart2"></div> |
| | | <div class="echart" > |
| | | <div id="echart1"> </div> |
| | | <div id="echart11"> </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="df"> |
| | | <div class="wrap static3"> |
| | | <div class="header"> |
| | | <div class="home_title">7æ¥è®¿å®¢ç»è®¡</div> |
| | | <!– <div class="df_ac more"> |
| | | æ´å¤<i class="el-icon-arrow-right"></i> |
| | | </div> –> |
| | | <div class="home_title">3.æ·±åº¦ç¬¦åæ§å®¡æ¥DCAäºä»¶å·¥å</div> |
| | | </div> |
| | | <div class="echart" id="echart3"></div> |
| | | <div class="echart" > |
| | | <div id="echart2"> </div> |
| | | <div id="echart21"> </div> |
| | | </div> |
| | | </div> |
| | | <div class="wrap static4"> |
| | | <div class="header"> |
| | | <div class="home_title">7æ¥è½¦è¾ç»è®¡</div> |
| | | <!– <div class="df_ac more"> |
| | | æ´å¤<i class="el-icon-arrow-right"></i> |
| | | </div> –> |
| | | <div class="home_title">4.è·ç»æ»é£é©ä¸æ¥</div> |
| | | </div> |
| | | <div class="echart" id="echart4"></div> |
| | | <div class="echart" > |
| | | <div id="echart3"> </div> |
| | | <div id="echart31"> </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="app_side"> |
| | | <div class="task"> |
| | | <div class="header df_sb"> |
| | | <div class="home_title df"> |
| | | <span >å¾
åäºé¡¹</span> |
| | | <span class="num" v-if="taskTotal">{{ taskTotal }}</span> |
| | | </div> |
| | | <div class="df_ac more" @click="jumpPage('/task/index')"> |
| | | æ´å¤<i class="el-icon-arrow-right"></i> |
| | | </div> |
| | | </div> |
| | | <div class="list"> |
| | | <div class="item" v-for="item in taskList" :key="item.id"> |
| | | <div class="content"> |
| | | <div class="title">{{ item.title }}</div> |
| | | <div class="time">{{ item.createDate }}</div> |
| | | </div> |
| | | <div class="btn" v-permissions="['business:staging:query']" @click="handleDetail(item)">å¤ç</div> |
| | | </div> |
| | | <div v-if="taskList.length == 0" class="empty"> |
| | | <img src="@/assets/images/default_homeimg.png" alt=""> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="warnning"> |
| | | <div class="header df_sb"> |
| | | <div class="home_title df"> |
| | | <span>è¶
æ¶é¢è¦</span> |
| | | <span class="num" v-if="warningTotal">{{ warningTotal }}</span> |
| | | </div> |
| | | <div class="df_ac more" @click="jumpPage('/business/strandedPersonnel')"> |
| | | æ´å¤<i class="el-icon-arrow-right"></i> |
| | | </div> |
| | | </div> |
| | | <div class="list"> |
| | | <div class="item" v-for="item in warningList" :key="item.id"> |
| | | <div class="name_wrap df_sb"> |
| | | <div class="name">{{ item.name }}</div> |
| | | <div class="identity">访客</div> |
| | | </div> |
| | | <div class="line">èç³»çµè¯ï¼{{ item.phone }}</div> |
| | | <div class="line">访客å
¬å¸ï¼{{ item.companyName }}</div> |
| | | <div class="auth df_sb"> |
| | | <div class="time">æææéï¼{{ item.endtime }}</div> |
| | | <div class="btn" @click="departure(item.id)">离åº</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div v-if="warningList.length == 0" class="empty"> |
| | | <img src="@/assets/images/default_homeimg.png" alt=""> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div>--> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | import dayjs from 'dayjs' |
| | | import * as echarts from 'echarts' |
| | | import { weeks } from '@/utils/config' |
| | | import { getIndexData, getWorkOrderData } from '@/api/business/workorder' |
| | | const colors = ['#52a4f7', '#7678f7', '#5fc6d5'] |
| | | export default { |
| | | components: { |
| | |
| | | nowDate: '', |
| | | nowWeek: '', |
| | | headerData: {}, |
| | | staticData: {}, |
| | | manningRatio: [], |
| | | 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 |
| | | staticData0: {}, |
| | | staticData01: {}, |
| | | staticData1: {}, |
| | | staticData2: {}, |
| | | staticData3: {}, |
| | | staticData4: {}, |
| | | manningRatio: [] |
| | | } |
| | | }, |
| | | computed: { |
| | |
| | | } |
| | | }, |
| | | created () { |
| | | |
| | | this.initData() |
| | | }, |
| | | mounted () { |
| | | this.updateDate() |
| | | // this.initData() |
| | | }, |
| | | methods: { |
| | | SubSuccess (str) { |
| | | this[str] = false |
| | | this.getTaskList() |
| | | }, |
| | | funcClick (item) { |
| | | if (item.name == 'èå¤å·¥ä½å°') { |
| | | getAppHeaderNav(4).then(res => { |
| | | window.open(res, '_blank') |
| | | }) |
| | | } |
| | | this.$router.push(item.path) |
| | | }, |
| | | updateDate () { |
| | | this.nowWeek = weeks[new Date().getDay()] |
| | | this.nowDate = dayjs().format('YYYYå¹´MæDæ¥') |
| | | |
| | | }, |
| | | initData () { |
| | | this.updateDate() |
| | | this.getWorkHead() |
| | | this.getWorkBody() |
| | | this.getTaskList() |
| | | this.getWarningList() |
| | | this.getWorkBody0() |
| | | this.getWorkBody1() |
| | | this.getWorkBody2() |
| | | this.getWorkBody3() |
| | | // this.getWorkBody() |
| | | }, |
| | | getWarningList () { |
| | | getWorkbenchData({ queryType: 4 }).then(res => { |
| | | this.warningList = res.timeOutVisitList || [] |
| | | this.warningTotal = res.timeOutVisitNum || 0 |
| | | getWorkBody0 () { |
| | | getWorkOrderData({ queryType: 0, orderType: 0 }).then(res => { |
| | | this.staticData0 = res || [] |
| | | this.initEchart0() |
| | | }) |
| | | getWorkOrderData({ queryType: 1, orderType: 0 }).then(res => { |
| | | this.staticData01 = res || [] |
| | | this.initEchart01() |
| | | }) |
| | | }, |
| | | getTaskList () { |
| | | getWorkbenchData({ queryType: 3 }).then(res => { |
| | | this.taskList = res.noticesList || [] |
| | | this.taskTotal = res.noticesNum || 0 |
| | | getWorkBody1 () { |
| | | getWorkOrderData({ queryType: 0, orderType: 1 }).then(res => { |
| | | this.staticData1 = res || [] |
| | | this.initEchart1() |
| | | }) |
| | | getWorkOrderData({ queryType: 1, orderType: 1 }).then(res => { |
| | | this.staticData11 = res || [] |
| | | this.initEchart11() |
| | | }) |
| | | }, |
| | | getWorkBody () { |
| | | getWorkbenchData({ queryType: 2 }).then(res => { |
| | | this.staticData = res || {} |
| | | getWorkBody2 () { |
| | | getWorkOrderData({ queryType: 0, orderType: 2 }).then(res => { |
| | | this.staticData2 = res || [] |
| | | this.initEchart2() |
| | | }) |
| | | getWorkOrderData({ queryType: 1, orderType: 2 }).then(res => { |
| | | this.staticData21 = res || [] |
| | | this.initEchart21() |
| | | }) |
| | | }, |
| | | getWorkBody3 () { |
| | | getWorkOrderData({ queryType: 0, orderType: 3 }).then(res => { |
| | | this.staticData3 = res || [] |
| | | this.initEchart3() |
| | | this.initEchart4() |
| | | }) |
| | | getWorkOrderData({ queryType: 1, orderType: 3 }).then(res => { |
| | | this.staticData31 = res || [] |
| | | this.initEchart31() |
| | | }) |
| | | }, |
| | | getWorkHead () { |
| | | getWorkbenchData({ queryType: 1 }).then(res => { |
| | | getIndexData({ }).then(res => { |
| | | 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.inParkLwUserNum }) |
| | | arr.sort((a, b) => b.value - a.value) |
| | | this.manningRatio = arr |
| | | this.initEchart1() |
| | | }) |
| | | }, |
| | | jumpPage (page) { |
| | | this.$router.push(page) |
| | | updateDate () { |
| | | this.nowDate = dayjs().format('YYYYå¹´MæDæ¥') |
| | | this.nowWeek = weeks[new Date().getDay()] |
| | | }, |
| | | departure (id) { |
| | | this.$confirm('ç¡®å®ç¦»åå, æ¯å¦ç»§ç»?', 'æç¤º', { |
| | | confirmButtonText: 'ç¡®å®', |
| | | cancelButtonText: 'åæ¶', |
| | | type: 'warning' |
| | | }).then(() => { |
| | | level(id) |
| | | .then(res => { |
| | | this.getWarningList() |
| | | }) |
| | | }).catch(() => { |
| | | |
| | | }) |
| | | initEchart0 () { |
| | | this.initEchartDataDo('echart0', this.staticData0.map(i => i.dateStr), this.staticData0.map(i => i.total),'å') |
| | | }, |
| | | handleDetail (row) { |
| | | if (row.type === 7) { |
| | | this.handleTest(row); |
| | | return |
| | | } |
| | | 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 |
| | | }) |
| | | } |
| | | initEchart01 () { |
| | | this.initEchartDataDo('echart01', this.staticData01.map(i => i.dateStr), this.staticData01.map(i => i.total),'å') |
| | | }, |
| | | initEchart1 () { |
| | | const myChart = echarts.init(document.getElementById('echart1')) |
| | | const that = this |
| | | |
| | | const option = { |
| | | tooltip: { |
| | | trigger: 'item' |
| | | }, |
| | | series: [ |
| | | { |
| | | type: 'pie', |
| | | radius: ['42%', '90%'], |
| | | label: { |
| | | show: false, |
| | | position: 'center' |
| | | }, |
| | | color: colors, |
| | | labelLine: { |
| | | show: false |
| | | }, |
| | | 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: 'é¿æç¸å
³æ¹' } |
| | | // ] |
| | | } |
| | | ] |
| | | } |
| | | myChart.setOption(option) |
| | | window.addEventListener('resize', function () { // æ§è¡ |
| | | myChart.resize() |
| | | }) |
| | | this.initEchartDataDo('echart1', this.staticData1.map(i => i.dateStr), this.staticData1.map(i => i.total),'次') |
| | | }, |
| | | initEchart11 () { |
| | | this.initEchartDataDo('echart11', this.staticData11.map(i => i.dateStr), this.staticData11.map(i => i.total),'次') |
| | | }, |
| | | initEchart2 () { |
| | | const myChart = echarts.init(document.getElementById('echart2')) |
| | | const that = this |
| | | myChart.setOption({ |
| | | grid: { |
| | | top: '4%', |
| | | left: '2%', |
| | | right: '6%', |
| | | bottom: '2%', |
| | | containLabel: true |
| | | }, |
| | | tooltip: { |
| | | trigger: 'axis', |
| | | axisPointer: { |
| | | type: 'line' |
| | | } |
| | | }, |
| | | xAxis: { |
| | | type: 'value', |
| | | position: 'bottom', |
| | | splitLine: { |
| | | show: true, |
| | | lineStyle: { |
| | | // è¿éè¾å
¥çº¿æ¡çæ ·å¼ |
| | | color: 'rgba(255,255,255,0.14)' |
| | | } |
| | | } |
| | | }, |
| | | yAxis: { |
| | | type: 'category', |
| | | data: that.staticData.lwList.map(i => i.name) |
| | | }, |
| | | series: [ |
| | | { |
| | | data: that.staticData.lwList.map(i => i.num), |
| | | 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() |
| | | }) |
| | | this.initEchartDataDo('echart2', this.staticData2.map(i => i.dateStr), this.staticData2.map(i => i.total),'å') |
| | | }, |
| | | initEchart21 () { |
| | | this.initEchartDataDo('echart21', this.staticData21.map(i => i.dateStr), this.staticData21.map(i => i.total),'å') |
| | | }, |
| | | initEchart3 () { |
| | | const myChart = echarts.init(document.getElementById('echart3')) |
| | | const that = this |
| | | this.initEchartDataDo('echart3', this.staticData3.map(i => i.dateStr), this.staticData3.map(i => i.total),'å') |
| | | }, |
| | | initEchart31 () { |
| | | this.initEchartDataDo('echart31',this.staticData31.map(i => i.dateStr), this.staticData31.map(i => i.total),'å') |
| | | }, |
| | | initEchartDataDo (id, xdata,ydata,unit) { |
| | | const myChart = echarts.init(document.getElementById(id)) |
| | | myChart.setOption({ |
| | | tooltip: { |
| | | trigger: 'axis', |
| | |
| | | <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> |
| | | <div>人</div> |
| | | <div>${unit}</div> |
| | | </div> |
| | | </div> |
| | | ` |
| | |
| | | xAxis: { |
| | | type: 'category', |
| | | boundaryGap: false, |
| | | data: that.staticData.weekVisitList.map(i => i.name) |
| | | data: xdata |
| | | }, |
| | | yAxis: { |
| | | type: 'value', |
| | | name: '人æ°', |
| | | name: '', |
| | | nameTextStyle: { |
| | | padding: [0, 0, 4, -30] // å个æ°ååå«ä¸ºä¸å³ä¸å·¦ä¸åä½ç½®è·ç¦» |
| | | }, |
| | |
| | | }, |
| | | series: [ |
| | | { |
| | | data: that.staticData.weekVisitList.map(i => i.num), |
| | | data: ydata, |
| | | type: 'line', |
| | | areaStyle: { |
| | | normal: { |
| | |
| | | myChart.resize() |
| | | }) |
| | | }, |
| | | initEchart4 () { |
| | | const myChart = echarts.init(document.getElementById('echart4')) |
| | | const that = this |
| | | myChart.setOption({ |
| | | tooltip: { |
| | | trigger: 'axis', |
| | | axisPointer: { |
| | | type: 'line' |
| | | }, |
| | | formatter: function (params) { |
| | | return ` |
| | | <div style="background-color: #15323f;margin: -12px;padding: 14px;border: 2px solid rgba(1,217,254,0.5);color: #fff;"> |
| | | <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> |
| | | <div>è¾</div> |
| | | </div> |
| | | </div> |
| | | ` |
| | | } |
| | | }, |
| | | xAxis: { |
| | | type: 'category', |
| | | boundaryGap: false, |
| | | data: that.staticData.weekCarList.map(i => i.name) |
| | | }, |
| | | yAxis: { |
| | | type: 'value', |
| | | name: 'è½¦è¾æ°', |
| | | nameTextStyle: { |
| | | padding: [0, 0, 4, -30] // å个æ°ååå«ä¸ºä¸å³ä¸å·¦ä¸åä½ç½®è·ç¦» |
| | | }, |
| | | splitLine: { |
| | | show: true, |
| | | lineStyle: { |
| | | // è¿éè¾å
¥çº¿æ¡çæ ·å¼ |
| | | color: 'rgba(255,255,255,0.14)' |
| | | } |
| | | } |
| | | }, |
| | | grid: { |
| | | top: '16%', |
| | | left: '2%', |
| | | right: '8%', |
| | | bottom: '4%', |
| | | containLabel: true |
| | | }, |
| | | series: [ |
| | | { |
| | | data: that.staticData.weekCarList.map(i => i.num), |
| | | type: 'line', |
| | | areaStyle: { |
| | | normal: { |
| | | color: { |
| | | x: 0, |
| | | y: 0, |
| | | x2: 0, |
| | | y2: 1, |
| | | colorStops: [{ |
| | | offset: 0, |
| | | color: '#42D49D' // 0% å¤çé¢è² |
| | | }, { |
| | | offset: 1, |
| | | color: 'rgba(255,255,255,.5)' // 100% å¤çé¢è² |
| | | }], |
| | | globalCoord: false // 缺ç为 false |
| | | } |
| | | } |
| | | }, |
| | | lineStyle: { // çº¿æ¡æ ·å¼ |
| | | color: { |
| | | type: 'linear', |
| | | x: 0, |
| | | y: 0, |
| | | x2: 0, |
| | | y2: 1, |
| | | colorStops: [{ |
| | | offset: 0, color: '#42D49D' // 0% å¤çé¢è² |
| | | }, { |
| | | offset: 1, color: '#42D49D' // 100% å¤çé¢è² |
| | | }] |
| | | }, |
| | | width: 2 // 线æ¡ç²ç» |
| | | }, |
| | | symbol: 'circle', |
| | | symbolSize: 10, |
| | | itemStyle: { |
| | | borderWidth: 1, |
| | | borderColor: '#fff', |
| | | color: '#42D49D' // æçº¿ç¹çé¢è² |
| | | }, |
| | | smooth: false |
| | | } |
| | | ] |
| | | }) |
| | | window.addEventListener('resize', function () { // æ§è¡ |
| | | myChart.resize() |
| | | }) |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | |
| | | &:nth-of-type(2n) { |
| | | margin-left: 10px; |
| | | } |
| | | |
| | | .echart { |
| | | width: 100%; |
| | | height: 190px; |
| | | position: relative; |
| | | display: flex; |
| | | div{ |
| | | flex: 1; |
| | | height: 190px; |
| | | } |
| | | } |
| | | |
| | | .header { |
| | |
| | | width: 100%; |
| | | height: 200px; |
| | | padding: 20px; |
| | | /* color: #fff; |
| | | background: linear-gradient(180deg, #0c6ce3 0%, rgba(32, 127, 247, 0) 100%);*/ |
| | | color: #fff; |
| | | background: linear-gradient(180deg, #076ae5 0%, rgba(32, 127, 247, 0) 100%); |
| | | } |
| | | } |
| | | </style> |