<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">
|
今天是 {{ nowDate }} {{ nowWeek }}，欢迎访问智慧物流园区安消一体化系统
|
</div>
|
</div>
|
<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>
|
<img src="@/assets/icons/home_icon1.png" alt="" />
|
</div>
|
<div class="content">
|
<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">{{ headerData.inParkVisitUserNum }}</div>
|
</div>
|
<img src="@/assets/icons/home_icon2.png" alt="" />
|
</div>
|
<div class="content">
|
<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">{{ headerData.inParkLwUserNum }}</div>
|
</div>
|
<img src="@/assets/icons/home_icon3.png" alt="" />
|
</div>
|
<div class="content">
|
<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">{{ headerData.todayInParkCarNum }}</div>
|
</div>
|
<img src="@/assets/icons/home_icon4.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>
|
</div>
|
</div>
|
<div class="static_wrap">
|
<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>
|
<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>
|
</div>
|
<div class="wrap static2">
|
<div class="header">
|
<!-- <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>
|
<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="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>
|
<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">
|
更多<i class="el-icon-arrow-right"></i>
|
</div> -->
|
</div>
|
<div class="echart" id="echart4"></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>
|
<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>
|
|
<script>
|
import dayjs from 'dayjs'
|
import * as echarts from 'echarts'
|
import { weeks } from '@/utils/config'
|
import {
|
getWorkbenchData,
|
getAppHeaderNav, syncHkNotice
|
} 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 {
|
tabPosition: 'right',
|
colors,
|
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') },
|
{ name: '食堂消费', path: '', url: require('@/assets/icons/8.png') }
|
],
|
isShowDetail: false,
|
isShowReport: false,
|
isShowDanger: false,
|
isShowDriver: false
|
}
|
},
|
computed: {
|
userInfo () {
|
return this.$store.state.userInfo
|
}
|
},
|
created () {
|
this.updateDate()
|
setInterval(() => {
|
this.updateDate()
|
}, 1000 * 60 * 60)
|
},
|
mounted () {
|
this.initData()
|
},
|
methods: {
|
changeType (e) {
|
console.log(e)
|
this.initEchart2()
|
this.initEchart21()
|
},
|
getNoticeList () {
|
syncHkNotice().then(res => {
|
|
})
|
},
|
handleTest (row) {
|
getAppHeaderNav(5).then(res => {
|
if (res == undefined || res == null) {
|
return
|
}
|
console.log('单点登录地址------', res)
|
|
const myWindow = top.window.open(res)
|
console.log('myWindow---', myWindow)
|
setTimeout(() => {
|
const params = {
|
componentId: 'dfe',
|
componentMenuId: 'process_apply',
|
callback: {
|
method: 'dealTlncMsg',
|
argument: {
|
msgId: '98c256b9-aaff-11ef-8347-fa163ee2c57c',
|
moduleId: 'dfeFlowTodoModuleId',
|
msgTitle: '请及时处理13856591439发起的请假申请',
|
msgStatus: '0',
|
msgCreateTime: '今天 15:33',
|
msgCreateTimeIso: '2024-11-25T15:33:42.000+08:00',
|
serverTime: 1732531014591,
|
menuCode: 'process_apply',
|
msgStatusStr: '待处理',
|
comId: 'dfe',
|
userId: '13856591439',
|
extendNoShow: '{"processInstanceId":"98a57fe0-aaff-11ef-8347-fa163ee2c57c","processId":"process_dabcfdd39f1b6f46d36a9f4ff6ce1080","param":{"sourceType":"todo","modelCode":"tb_leave_dfe_for_dfe_runtime","processNodeId":"UserTask_dde7d83377343a2d5fa1f60c23b023ef","taskId":"98c256b9-aaff-11ef-8347-fa163ee2c57c"},"process.param.appId":"32ca8770-6f85-11ec-b5a3-991864da52a6","appId":"32ca8770-6f85-11ec-b5a3-991864da52a6","name":"请假申请","taskId":"98c256b9-aaff-11ef-8347-fa163ee2c57c","taskNodeId":"UserTask_dde7d83377343a2d5fa1f60c23b023ef","url":"/dfe-form/process/tlnc/apply"}',
|
targetComId: 'dfe',
|
moduleName: '流程待办',
|
tid: '99cad778-aaff-11ef-9dbf-ff08ba71965c',
|
msgEndTime: null,
|
msgEndTimeIso: '',
|
picUrl: '',
|
extendJson: '{"key1":"请及时处理陈鸿飞发起的请假申请"}',
|
extendParam: null,
|
extendCascade: null,
|
createUser: '13856591439',
|
webCascadeUrl: null,
|
h5CascadeUrl: null,
|
cascadeTodoOpenType: null,
|
cascadeSourceConfigId: null,
|
h5Url: '/h5/pages/form-page/form-page?returnPath=-1&appId=32ca8770-6f85-11ec-b5a3-991864da52a6&taskId=98c256b9-aaff-11ef-8347-fa163ee2c57c&processNodeId=UserTask_dde7d83377343a2d5fa1f60c23b023ef&modelCode=tb_leave_dfe_for_dfe_runtime&type=flowHandle&component=form-apply&_sn=true',
|
segmentId: 'dfe-form',
|
lastUsers: '陈鸿飞',
|
currentUsers: '陈鸿飞',
|
todoTypeCode: 'dfe@@tlnc_placeholder_tlnc@@dfeFlowTodoModuleId',
|
currentUserIds: '13856591439',
|
lastUserIds: '13856591439',
|
msgDesc: null,
|
widgetUrl: null,
|
detailType: null,
|
widgetWidth: null,
|
widgetHeight: null,
|
userIdList: null,
|
statusName: null,
|
arriveTime: null,
|
stayTime: null,
|
todoType: null,
|
cascadePort: null,
|
openMode: null
|
}
|
},
|
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 + '}', '*')
|
}, 8000)
|
})
|
},
|
SubSuccess (str) {
|
this[str] = false
|
this.getTaskList()
|
},
|
funcClick (item) {
|
if (item.name == '考勤工作台') {
|
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)
|
},
|
updateDate () {
|
this.nowDate = dayjs().format('YYYY年M月D日')
|
this.nowWeek = weeks[new Date().getDay()]
|
},
|
initData () {
|
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 }).then(res => {
|
this.staticData = res || {}
|
this.initEchart2()
|
this.initEchart21()
|
this.initEchart3()
|
this.initEchart4()
|
})
|
},
|
getWorkHead () {
|
getWorkbenchData({ queryType: 1 }).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 - 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()
|
})
|
},
|
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.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
|
})
|
}
|
},
|
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()
|
})
|
},
|
initEchart2 () {
|
console.log('initEchart2')
|
if (!document.getElementById('echart2')) {
|
return
|
}
|
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%',
|
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
|
// 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')
|
if (!document.getElementById('echart21')) {
|
return
|
}
|
|
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: [
|
{
|
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()
|
})
|
},
|
initEchart3 () {
|
const myChart = echarts.init(document.getElementById('echart3'))
|
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.weekVisitList.map(i => i.name)
|
},
|
yAxis: {
|
type: 'value',
|
name: '人数',
|
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: {
|
// 这里输入线条的样式
|
color: 'rgba(255,255,255,0.14)'
|
}
|
}
|
},
|
grid: {
|
top: '16%',
|
left: '2%',
|
right: '8%',
|
bottom: '2%',
|
containLabel: true
|
},
|
series: [
|
{
|
data: that.staticData.weekVisitList.map(i => i.num),
|
type: 'line',
|
areaStyle: {
|
normal: {
|
color: {
|
x: 0,
|
y: 0,
|
x2: 0,
|
y2: 1,
|
colorStops: [{
|
offset: 0,
|
color: '#207FF7' // 0% 处的颜色
|
}, {
|
offset: 1,
|
color: 'rgba(255,255,255,.2)' // 100% 处的颜色
|
}],
|
globalCoord: false // 缺省为 false
|
}
|
}
|
},
|
lineStyle: { // 线条样式
|
color: {
|
type: 'linear',
|
x: 0,
|
y: 0,
|
x2: 0,
|
y2: 1,
|
colorStops: [{
|
offset: 0, color: '#207FF7' // 0% 处的颜色
|
}, {
|
offset: 1, color: '#207FF7' // 100% 处的颜色
|
}]
|
},
|
width: 2 // 线条粗细
|
},
|
symbol: 'circle',
|
symbolSize: 10,
|
itemStyle: {
|
borderWidth: 1,
|
borderColor: '#fff',
|
color: '#207FF7'
|
},
|
smooth: false
|
}
|
]
|
})
|
window.addEventListener('resize', function () { // 执行
|
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 || 0}</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)'
|
}
|
},
|
axisLabel: {
|
formatter: function (value) {
|
const intValue = Math.round(value)
|
return intValue > 0 ? intValue : ''
|
}
|
},
|
minInterval: 1,
|
min: 1
|
},
|
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>
|
|
<style lang="scss" scoped>
|
div {
|
box-sizing: border-box;
|
}
|
|
.home_title {
|
font-weight: 600;
|
font-size: 16px;
|
color: #222222;
|
line-height: 22px;
|
}
|
|
.main {
|
display: flex;
|
position: relative;
|
z-index: 99;
|
|
.app_content {
|
flex: 1;
|
|
.static_card {
|
height: 187px;
|
color: #fff;
|
display: flex;
|
justify-content: space-between;
|
|
.card {
|
flex: 1;
|
height: 187px;
|
background: linear-gradient(270deg, #29aeff 0%, #207ff7 100%);
|
box-shadow: 0px 2px 10px 0px rgba(32, 127, 247, 0.4);
|
border-radius: 8px;
|
margin-right: 14px;
|
|
&:nth-of-type(2) {
|
background: linear-gradient(270deg, #8383ff 0%, #6b6eff 100%);
|
}
|
|
&:nth-of-type(3) {
|
background: linear-gradient(270deg, #42d49d 0%, #12bb8b 100%);
|
}
|
|
&:nth-of-type(4) {
|
margin-right: 0;
|
background: linear-gradient(270deg, #30d3de 0%, #04b7cd 100%);
|
}
|
|
.header {
|
height: 103px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 20px 20px 12px;
|
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
|
img {
|
width: 40px;
|
height: 40px;
|
}
|
|
.num {
|
font-weight: 600;
|
font-size: 30px;
|
margin-top: 12px;
|
}
|
}
|
|
.content {
|
height: 82px;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
font-size: 13px;
|
padding: 15px 20px 20px;
|
}
|
}
|
}
|
|
.funcs {
|
height: 149px;
|
padding: 20px;
|
background: #fff;
|
margin: 10px 0;
|
|
.list {
|
display: flex;
|
padding-top: 20px;
|
|
.item {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
margin-right: 24px;
|
cursor: pointer;
|
|
img {
|
width: 44px;
|
height: 44px;
|
}
|
}
|
}
|
}
|
}
|
|
.app_side {
|
width: 408px;
|
margin-left: 10px;
|
|
.task {
|
background: #fff;
|
border-radius: 2px;
|
border: 1px solid #eeeeee;
|
padding: 20px;
|
height: 346px;
|
margin-bottom: 10px;
|
|
.header {
|
.num {
|
position: relative;
|
top: 3px;
|
height: 16px;
|
line-height: 16px;
|
font-size: 12px;
|
color: #ffffff;
|
padding: 0 6px;
|
font-weight: 400;
|
background: red;
|
border-radius: 8px;
|
margin-left: 13px;
|
}
|
|
.more {
|
font-size: 13px;
|
color: #999999;
|
}
|
}
|
|
.list {
|
.item {
|
display: flex;
|
align-items: center;
|
margin-top: 15px;
|
|
.content {
|
flex: 1;
|
|
.title {
|
color: #222222;
|
margin-bottom: 5px;
|
}
|
|
.time {
|
color: #999999;
|
font-size: 12px;
|
}
|
}
|
|
.btn {
|
margin-left: 10px;
|
width: 58px;
|
text-align: center;
|
height: 30px;
|
line-height: 30px;
|
background: #ffffff;
|
border-radius: 2px;
|
border: 1px solid #207ff7;
|
font-size: 13px;
|
color: #207ff7;
|
cursor: pointer;
|
}
|
}
|
}
|
}
|
|
.warnning {
|
background: #fff;
|
border-radius: 2px;
|
border: 1px solid #eeeeee;
|
padding: 20px;
|
height: 508px;
|
|
.header {
|
.num {
|
position: relative;
|
top: 3px;
|
height: 16px;
|
line-height: 16px;
|
font-size: 12px;
|
color: #ffffff;
|
padding: 0 6px;
|
font-weight: 400;
|
background: red;
|
border-radius: 8px;
|
margin-left: 13px;
|
}
|
|
.more {
|
font-size: 13px;
|
color: #999999;
|
}
|
}
|
|
.list {
|
padding-top: 6px;
|
|
.item {
|
margin-top: 10px;
|
padding: 15px;
|
width: 100%;
|
height: 140px;
|
background: rgba(32, 127, 247, 0.05);
|
border-radius: 4px;
|
|
.name_wrap {
|
margin-bottom: 10px;
|
|
.name {
|
font-weight: 600;
|
color: #222222;
|
}
|
|
.identity {
|
font-size: 13px;
|
color: #207ff7;
|
}
|
}
|
|
.line {
|
color: #666666;
|
margin-bottom: 8px;
|
font-size: 13px;
|
}
|
|
.auth {
|
.time {
|
font-weight: 600;
|
font-size: 13px;
|
color: #ee3821;
|
}
|
|
.btn {
|
margin-left: 10px;
|
width: 58px;
|
text-align: center;
|
height: 30px;
|
cursor: pointer;
|
line-height: 30px;
|
background: #ffffff;
|
border-radius: 2px;
|
border: 1px solid #207ff7;
|
font-size: 13px;
|
color: #207ff7;
|
}
|
}
|
}
|
}
|
}
|
|
.more {
|
cursor: pointer;
|
}
|
|
.empty {
|
height: 300px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
img {
|
width: 140px;
|
}
|
}
|
}
|
|
.static_wrap {
|
.wrap {
|
background: #fff;
|
padding: 20px 20px 10px;
|
border-radius: 2px;
|
border: 1px solid #eeeeee;
|
height: 250px;
|
flex: 1;
|
|
&:nth-of-type(2n) {
|
margin-left: 10px;
|
}
|
|
.echart {
|
width: 100%;
|
height: 190px;
|
}
|
|
.header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.more {
|
font-size: 13px;
|
color: #999999;
|
}
|
}
|
}
|
|
.static1 {
|
.content {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
height: 100%;
|
|
.echart_wrap {
|
position: relative;
|
|
.pie_text {
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
z-index: 999;
|
}
|
}
|
|
.echart {
|
width: 150px;
|
height: 150px;
|
}
|
|
.list {
|
margin-left: 36px;
|
|
.item {
|
display: flex;
|
align-items: center;
|
margin: 8px 0;
|
|
.icon {
|
width: 16px;
|
height: 16px;
|
border-radius: 50%;
|
margin-right: 6px;
|
background: linear-gradient(270deg, #29aeff 0%, #207ff7 100%);
|
}
|
|
.text {
|
margin-right: 6px;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.main_home {
|
background: #f4f7fc;
|
position: relative;
|
width: 100%;
|
height: 100%;
|
overflow: auto;
|
padding: 20px 20px 40px 20px;
|
padding-top: 92px;
|
|
.home_header {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 200px;
|
padding: 20px;
|
color: #fff;
|
background: linear-gradient(180deg, #207ff7 0%, rgba(32, 127, 247, 0) 100%);
|
}
|
}
|
</style>
|
