<template>
|
<div>
|
<div class="content">
|
<div class="header_ct">
|
{{ localInfo.operationViewName }}
|
</div>
|
<div class="tab_page">
|
<div class="operation">运营数据分析</div>
|
<div class="alarm" @click="goAlarmPage">告警数据分析</div>
|
</div>
|
<div class="header-time">
|
<div class="rung-bar"></div>
|
<div class="time">{{ timeObj.nowTime }}</div>
|
<div>
|
<div>{{ timeObj.week }}</div>
|
<div>{{ timeObj.nowDate }}</div>
|
</div>
|
<!-- <div class="vertical-bar"></div> -->
|
</div>
|
<div class="info_ct">
|
<div class="left_ct">
|
<div class="block opera_overview">
|
<div class="block_title">
|
<div>
|
<span class="blue_text">运营</span>
|
<span>概况</span>
|
</div>
|
</div>
|
<img class="title_line" src="@/assets/img/bigdata/daoh.png" alt="" />
|
<div class="icon_ct">
|
<div class="icon_fa">
|
<div class="icon_img_fa">
|
<img src="@/assets/img/bigdata/cheliuliang.png" alt="" />
|
</div>
|
<div class="icon_name">车流量</div>
|
<div class="icon_num">{{ overviewData.trafficFlow }}</div>
|
</div>
|
<div class="icon_fa">
|
<div class="icon_img_fa">
|
<img src="@/assets/img/bigdata/jinzhanshu.png" alt="" />
|
</div>
|
<div class="icon_name">进站数</div>
|
<div class="icon_num">{{ overviewData.inboundCount }}</div>
|
</div>
|
<div class="icon_fa">
|
<div class="icon_img_fa">
|
<img src="@/assets/img/bigdata/jiayoushuliang.png" alt="" />
|
</div>
|
<div class="icon_name">加油数量</div>
|
<div class="icon_num">{{ overviewData.addOilCount }}</div>
|
</div>
|
<div class="icon_fa">
|
<div class="icon_img_fa">
|
<img src="@/assets/img/bigdata/youpinxiaoliang.png" alt="" />
|
</div>
|
<div class="icon_name">油品销量</div>
|
<div class="icon_num">{{ overviewData.saleOilCount }} L</div>
|
</div>
|
</div>
|
</div>
|
<div class="block traffic_statis">
|
<div class="block_title">
|
<div>
|
<span class="blue_text">车流量</span>
|
<span>统计</span>
|
</div>
|
</div>
|
<img class="title_line" src="@/assets/img/bigdata/daoh.png" alt="" />
|
<seamlessTable
|
:columns="trafficFlowStatColumns"
|
:scrollOption="{ limitMoveNum: 13 }"
|
:dataList="trafficFlowStatData"
|
height="39vh"
|
id="trafficStatisChart"
|
>
|
<div slot="tableCol">
|
<div class="singlexaminatio" v-for="(item, index) in trafficFlowStatData" :key="index">
|
<span>{{ index + 1 }}</span>
|
<span
|
:title="item.departName"
|
style="white-space: nowrap; text-overflow: ellipsis; overflow: hidden"
|
>{{ item.departName }}</span
|
>
|
<span style="text-align: center">{{ item.trafficFlow }}</span>
|
<span style="text-align: center">{{ item.inboundCount }}</span>
|
</div>
|
</div>
|
</seamlessTable>
|
</div>
|
<div class="block customer_statis">
|
<div class="block_title">
|
<div>
|
<span class="blue_text">客户</span>
|
<span>统计</span>
|
</div>
|
</div>
|
<img class="title_line" src="@/assets/img/bigdata/daoh.png" alt="" />
|
<div class="info_ct">
|
<div class="info_item">
|
<div class="info_num">{{ customerStatData.prospectCount }}</div>
|
<div class="info_name">潜在客户</div>
|
<!-- <div class="change_ct">
|
<img class="change_icon" src="@/assets/img/bigdata/s1.png" alt="" />
|
<div class="change_num">20%</div>
|
</div> -->
|
<img class="info_foot_icon" src="@/assets/img/bigdata/dizuo.png" alt="" />
|
</div>
|
<div class="info_item">
|
<div class="info_num">{{ customerStatData.generalCustomerCount }}</div>
|
<div class="info_name">一般客户</div>
|
<!-- <div class="change_ct">
|
<img class="change_icon" src="@/assets/img/bigdata/s1.png" alt="" />
|
<div class="change_num">20%</div>
|
</div> -->
|
<img class="info_foot_icon" src="@/assets/img/bigdata/dizuo.png" alt="" />
|
</div>
|
<div class="info_item">
|
<div class="info_num">{{ customerStatData.loyalCustomerCount }}</div>
|
<div class="info_name">忠实客户</div>
|
<!-- <div class="change_ct">
|
<img class="change_icon" src="@/assets/img/bigdata/s1.png" alt="" />
|
<div class="change_num">20%</div>
|
</div> -->
|
<img class="info_foot_icon" src="@/assets/img/bigdata/dizuo.png" alt="" />
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="middle_ct">
|
<div class="gas_station_img">
|
<img
|
v-if="localInfo.bigDataPath"
|
style="width: 100%; height:98%;margin-bottom: 5px"
|
:src="staticUrl + localInfo.bigDataPath"
|
alt=""
|
/>
|
<img v-else style="width: 100%" src="@/assets/img/bigdata/aa.png" alt="" />
|
</div>
|
<div class="block refueling_statis">
|
<div class="block_title">
|
<div>
|
<span class="blue_text">加油</span>
|
<span>统计</span>
|
</div>
|
<div class="tab">
|
<div @click="changeOilRecordTimeStatDataRange(0)" :class="{ active: regionOilRecordStatRange == 0 }">
|
当天
|
</div>
|
<div @click="changeOilRecordTimeStatDataRange(1)" :class="{ active: regionOilRecordStatRange == 1 }">
|
本月
|
</div>
|
</div>
|
</div>
|
<img class="title_line" src="@/assets/img/bigdata/daoh.png" alt="" />
|
<seamlessTable
|
:columns="oilRecordTimeStatColumns"
|
:scrollOption="{ limitMoveNum: 6 }"
|
:dataList="oilRecordTimeStatData"
|
height="21vh"
|
id="refuelingStatisChart"
|
>
|
<div slot="tableCol">
|
<div class="singlexaminatio" v-for="(item, index) in oilRecordTimeStatData" :key="index">
|
<span>{{ index + 1 }}</span>
|
<span
|
:title="item.departName"
|
style="white-space: nowrap; text-overflow: ellipsis; overflow: hidden"
|
>{{ item.departName }}</span
|
>
|
<span style="text-align: center">{{ item.addOilCount }}</span>
|
<span style="text-align: center">{{ (item.addOilRate * 100).toFixed(0) }}%</span>
|
</div>
|
</div>
|
</seamlessTable>
|
</div>
|
</div>
|
<div class="right_ct">
|
<div class="block sales_rank">
|
<div class="block_title">
|
<div>
|
<span class="blue_text">销量</span>
|
<span>排行</span>
|
</div>
|
<div class="tab">
|
<div @click="changeSalesRankRange(0)" :class="{ active: salesRankRange == 0 }">当天</div>
|
<div @click="changeSalesRankRange(1)" :class="{ active: salesRankRange == 1 }">本月</div>
|
</div>
|
</div>
|
<img class="title_line" src="@/assets/img/bigdata/daoh.png" alt="" />
|
<div class="words_ct">
|
<div class="item" v-for="(item, index) in salesRankingList" :key="index">
|
<div class="num">{{ index + 1 > 9 ? index + 1 : '0' + (index + 1) }}</div>
|
<div class="info">
|
<div style="display: flex; justify-content: space-between">
|
<div>{{ item.departName }}</div>
|
<div class="count">{{ item.salesVolume }} L</div>
|
</div>
|
<div style="display: flex; position: relative">
|
<div class="dashed-progress-ct">
|
<div
|
v-show="index == 2"
|
class="progress-color-green"
|
:style="{
|
width: (item.salesVolume / item.totalNum ? item.salesVolume / item.totalNum : 0) * 100 + '%',
|
}"
|
></div>
|
<div
|
v-show="index == 1"
|
class="progress-color-blue"
|
:style="{
|
width: (item.salesVolume / item.totalNum ? item.salesVolume / item.totalNum : 0) * 100 + '%',
|
}"
|
></div>
|
<div
|
v-show="index == 0"
|
class="progress-color-yellow"
|
:style="{
|
width: (item.salesVolume / item.totalNum ? item.salesVolume / item.totalNum : 0) * 100 + '%',
|
}"
|
></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="block vehicle_type_distribution">
|
<div class="block_title">
|
<div>
|
<span class="blue_text">车型</span>
|
<span>分布</span>
|
</div>
|
</div>
|
<img class="title_line" src="@/assets/img/bigdata/daoh.png" alt="" />
|
<div class="info_ct">
|
<div style="width: 60%" id="vehicleTypeDistriChart"></div>
|
<div class="words_ct" style="width: 38%">
|
<div class="item" v-for="(item, index) in carPercentArr" :key="index">
|
<div class="label">{{ item.name }}</div>
|
<div>
|
<span style="color: #5b81f9">{{ item.value }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="block monthly_sales_statis">
|
<div class="block_title">
|
<div>
|
<span class="blue_text">销售</span>
|
<span>趋势</span>
|
</div>
|
</div>
|
<img class="title_line" src="@/assets/img/bigdata/daoh.png" alt="" />
|
<div id="monthlySalesStatisChart"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="videocontainer">
|
<video class="fullscreenvideo" src="@/assets/img/bigdata/bgvideo.mp4" autoplay loop></video>
|
<img class="" src="@/assets/img/bigdata/videomodel.png" alt="" />
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { USER_INFO } from '@tievd/cube-block/lib/store/mutation-types'
|
import * as echarts from 'echarts'
|
import { getAction, postAction } from '@tievd/cube-block/lib/api/manage'
|
import seamlessTable from './modules/seamlessTable.vue'
|
export default {
|
components: {
|
seamlessTable,
|
},
|
data() {
|
return {
|
staticUrl: window._CONFIG['staticDomainURL'],
|
vehicleTypeDistriChart: null, //车型分布
|
monthlySalesStatisChart: null, //销售趋势
|
userInfo: {},
|
timer: null,
|
timeObj: {
|
nowTime: '',
|
nowDate: '2022/07/03',
|
week: '',
|
},
|
trafficFlowStatColumns: ['序号', '加油站名称', '车流量', '进站数量'],
|
oilRecordTimeStatColumns: ['序号', '加油站名称', '加油次数', '加油率'],
|
overviewData: {}, //运营概况数据
|
trafficFlowStatData: [], //车流量统计数据
|
oilRecordTimeStatData: [], //加油统计数据
|
regionOilRecordStatRange: 0, //加油统计范围
|
carModelStatData: {}, //车型分布数据
|
carPercentArr: [], //车型分布百分比
|
salesStatData: {}, //销售趋势数据
|
updateDataTimer: null,
|
salesRankRange: 0, //销量排行范围
|
salesRankingList: [],
|
localInfo: {},
|
customerStatData: {}, //客户统计数据
|
}
|
},
|
created() {
|
this.userInfo = this.$ls.get(USER_INFO)
|
this.timer = setInterval(() => {
|
this.getRightTime()
|
}, 1000)
|
this.localInfo = JSON.parse(localStorage.getItem('localInfo'))
|
document.title = this.localInfo.operationViewName
|
},
|
mounted() {
|
this.initData()
|
this.updateDataTimer = setInterval(() => {
|
this.initData()
|
}, 60000)
|
window.addEventListener('resize', () => {
|
//监听浏览器大小去改变图表尺寸
|
this.monthlySalesStatisChart.resize()
|
this.vehicleTypeDistriChart.resize()
|
})
|
},
|
methods: {
|
initData() {
|
this.getOverviewData()
|
this.getTrafficFlowStattData()
|
this.getOilRecordTimeStatData()
|
this.getSalesRankingData()
|
this.getCarModelStattData()
|
this.getSalesStatData()
|
this.getCustomerStatData()
|
},
|
//获取客户统计数据
|
getCustomerStatData() {
|
getAction('/jyz/operationData/customerStat', {}).then((res) => {
|
console.log(res)
|
this.customerStatData = res.result
|
})
|
},
|
//切换加油统计当天本月
|
changeOilRecordTimeStatDataRange(type) {
|
if (type != this.regionOilRecordStatRange) {
|
this.regionOilRecordStatRange = type
|
this.oilRecordTimeStatData = []
|
this.getOilRecordTimeStatData()
|
}
|
},
|
//切换销量排行当天本月
|
changeSalesRankRange(type) {
|
if (type != this.salesRankRange) {
|
this.salesRankRange = type
|
this.getSalesRankingData()
|
}
|
},
|
goAlarmPage() {
|
window.location.href = window.location.origin + '/analysisScreen/organAlarmBigdata'
|
},
|
//获取运营概况数据
|
getOverviewData() {
|
getAction('/jyz/operationData/overview', {}).then((res) => {
|
console.log(res)
|
this.overviewData = res.result
|
})
|
},
|
|
//获取车流量统计数据
|
getTrafficFlowStattData() {
|
getAction('/jyz/operationData/regionTrafficFlowStat', {}).then((res) => {
|
console.log(res)
|
this.trafficFlowStatData = res.result
|
})
|
},
|
//获取加油统计数据
|
getOilRecordTimeStatData() {
|
getAction('/jyz/operationData/regionOilRecordStat', {
|
freq: this.regionOilRecordStatRange,
|
limit: 1000,
|
}).then((res) => {
|
console.log(res)
|
this.oilRecordTimeStatData = res.result
|
})
|
},
|
//获取销量排行
|
getSalesRankingData() {
|
getAction('/jyz/operationData/salesRanking', {
|
freq: this.salesRankRange,
|
}).then((res) => {
|
console.log(res)
|
let arr = res.result
|
var total = 0
|
arr.map((el, index) => {
|
total += el.salesVolume
|
})
|
arr.map((el, index) => {
|
el.totalNum = total
|
})
|
console.log(arr)
|
this.salesRankingList = arr
|
// this.oilPositionHeatMapData = res.result
|
// this.oilPositionHeatMapData.map((el) => {
|
// if (el.heatIndex > -1 && el.heatIndex < 25) {
|
// el.color = '#427A31'
|
// el.border = '1px solid #73AD62'
|
// } else if (el.heatIndex > 24 && el.heatIndex < 50) {
|
// el.color = '#4262AE'
|
// el.border = '1px solid #5E7ABA'
|
// } else if (el.heatIndex > 49 && el.heatIndex < 75) {
|
// el.color = '#8B4756'
|
// el.border = '1px solid #B76C7D'
|
// } else if (el.heatIndex > 75) {
|
// el.color = '#9C3514'
|
// el.border = '1px solid #B44E2E'
|
// }
|
// })
|
})
|
},
|
|
//获取车型分布数据
|
getCarModelStattData() {
|
getAction('/jyz/operationData/carModelStat', {}).then((res) => {
|
console.log(res)
|
this.carModelStatData = res.result
|
this.carPercentArr = []
|
this.carModelStatData.proportionArr.map((el, index) => {
|
this.carPercentArr.push({
|
name: this.carModelStatData.carModelArr[index],
|
value: el * 100 + '%',
|
})
|
})
|
this.setVehicleTypeDistriChart()
|
})
|
},
|
|
//获取销售趋势数据
|
getSalesStatData() {
|
getAction('/jyz/operationData/salesStat', {}).then((res) => {
|
console.log(res)
|
this.salesStatData = res.result
|
this.setMonthlySalesStatisChart()
|
})
|
},
|
|
//车型分布图表
|
setVehicleTypeDistriChart() {
|
if (!this.vehicleTypeDistriChart) {
|
let chartDom = document.getElementById('vehicleTypeDistriChart')
|
this.vehicleTypeDistriChart = echarts.init(chartDom)
|
}
|
function contains(arr, val) {
|
var i = arr.length
|
while (i--) {
|
if (arr[i].name === val) {
|
return i
|
}
|
}
|
return false
|
}
|
let data1 = [...this.carModelStatData.addOilCountArr]
|
let max = Math.max.apply(null, this.carModelStatData.addOilCountArr)
|
let list = []
|
console.log(max)
|
this.carModelStatData.carModelArr.map((el) => {
|
list.push({
|
name: el,
|
max: max,
|
})
|
})
|
let option = {
|
backgroundColor: 'transparent',
|
tooltip: {
|
show: true,
|
trigger: 'item',
|
formatter: (data) => {
|
var tip = data.seriesName
|
let tmpData = []
|
if (data.seriesIndex === 0) {
|
tmpData = data1
|
}
|
data.value.forEach((item, index) => {
|
tip += '<div>'
|
tip += '<div>' + list[index].name + ': ' + tmpData[index] + '</div>'
|
tip += '</div>'
|
})
|
return tip
|
},
|
backgroundColor: 'rgba(49, 66, 114, .7)',
|
borderColor: 'rgba(52, 58, 68, 1)',
|
textStyle: { color: '#fff' },
|
},
|
radar: {
|
name: {
|
textStyle: {
|
color: '#2273DA',
|
fontSize: 12,
|
},
|
rich: {
|
a: {
|
fontSize: 12,
|
color: '#ACD3FF',
|
align: 'center',
|
// padding: [0, 0, 8, 0]
|
},
|
b: {
|
fontSize: 12,
|
color: 'rgba(209, 200, 48, 1)',
|
align: 'center',
|
},
|
},
|
formatter: (a) => {
|
let i = contains(list, a) // 处理对应要显示的样式
|
return `{a| ${a}}\n{b|${data1[i]}}`
|
},
|
},
|
nameGap: '5',
|
center: ['50%', '50%'],
|
radius: '70%',
|
splitNumber: 5,
|
splitArea: {
|
areaStyle: {
|
color: [
|
'rgba(255,255,255,.3)',
|
'rgba(255,255,255,.25)',
|
'rgba(255,255,255,.2)',
|
'rgba(255,255,255,.15)',
|
'rgba(255,255,255,.1)',
|
],
|
},
|
},
|
axisLabel: {
|
show: false,
|
},
|
axisLine: {
|
show: false,
|
},
|
splitLine: {
|
show: true,
|
lineStyle: {
|
color: 'rgba(255,255,255, 0.1)',
|
},
|
},
|
indicator: list,
|
},
|
series: [
|
{
|
name: '车型分布',
|
type: 'radar',
|
symbol: 'none',
|
symbolSize: 10,
|
areaStyle: {
|
normal: {
|
color: new echarts.graphic.LinearGradient(
|
0,
|
1,
|
0,
|
0,
|
[
|
{
|
offset: 0,
|
color: 'rgba(91, 129, 249, 1)',
|
},
|
{
|
offset: 1,
|
color: 'rgba(58, 79, 143, 0.2)',
|
},
|
],
|
false
|
),
|
},
|
},
|
data: [
|
{
|
value: data1,
|
},
|
],
|
},
|
],
|
}
|
option && this.vehicleTypeDistriChart.setOption(option, true)
|
},
|
//设置销售趋势图表
|
setMonthlySalesStatisChart() {
|
if (!this.monthlySalesStatisChart) {
|
let chartDom = document.getElementById('monthlySalesStatisChart')
|
this.monthlySalesStatisChart = echarts.init(chartDom)
|
}
|
let XData = this.salesStatData.dateArr
|
XData = XData.map((el) => {
|
return el.substring(5, 10)
|
})
|
let valueData = {
|
salesVolumeArr: this.salesStatData.salesVolumeArr,
|
growthRateArr: this.salesStatData.growthRateArr,
|
}
|
valueData.growthRateArr = valueData.growthRateArr.map((el) => {
|
return (el * 100).toFixed(0)
|
})
|
var option = {
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
// 坐标轴指示器，坐标轴触发有效
|
type: 'line', // 默认为直线，可选为：'line' | 'shadow'
|
shadowStyle: {
|
shadowColor: 'rgba(60, 161, 246, 0.43)',
|
shadowBlur: 10,
|
},
|
},
|
backgroundColor: 'rgba(49, 66, 114, .7)',
|
borderColor: 'rgba(52, 58, 68, 1)',
|
textStyle: { color: '#fff' },
|
borderWidth: 1,
|
shadowColor: ' rgba(111, 193, 253, 0.35)',
|
shadowBlur: 10,
|
formatter: function (params) {
|
// return params.value;
|
let strName1 = params[0].seriesName
|
let value1 = params[0].value
|
let strName2 = params[1].seriesName
|
let value2 = params[1].value
|
return (
|
'<div><span style="color:#fff;display: inline-block;width: 86px;">加油</span><span style="color:#5DB6FB">' +
|
value1 +
|
'</span></div><div><span style="color:#fff;display: inline-block;width: 86px;">加油率</span><span style="color:#5DB6FB">' +
|
value2 +
|
'%'
|
)
|
},
|
textStyle: {
|
rich: {
|
name: {
|
color: 'rgba(36, 36, 36, 1)',
|
fontSize: 13,
|
align: 'center',
|
},
|
percent: {
|
fontFamily: 'DIN',
|
fontWeight: 500,
|
fontSize: 22,
|
color: '#1D91F5',
|
align: 'center',
|
},
|
},
|
},
|
},
|
grid: {
|
left: '2%',
|
right: '4%',
|
bottom: '4%',
|
top: '14%',
|
containLabel: true,
|
},
|
legend: {
|
top: '0%',
|
right: '5%',
|
itemStyle: {},
|
itemWidth: 12,
|
itemHeight: 8,
|
textStyle: {
|
color: '#8C8B8B',
|
fontSize: 12,
|
},
|
},
|
xAxis: {
|
type: 'category',
|
data: XData,
|
axisLabel: { textStyle: { fontSize: '90%', color: 'rgba(140, 139, 139, 1)' } },
|
axisLine: { show: true, lineStyle: { color: '#494D56' } },
|
axisTick: {
|
show: false,
|
},
|
},
|
yAxis: [
|
{
|
name: '单位/升',
|
type: 'value',
|
splitLine: { lineStyle: { color: 'rgba(255,255,255, .1)', type: 'dashed' } },
|
axisLabel: { textStyle: { fontSize: '90%', color: 'rgba(140, 139, 139, 1)' } },
|
axisLine: { show: true, lineStyle: { color: '#494D56' } },
|
axisTick: {
|
show: false,
|
},
|
},
|
{
|
type: 'value',
|
nameTextStyle: {
|
color: 'rgba(185, 185, 185, 1)',
|
},
|
position: 'right',
|
axisLine: {
|
show: false,
|
},
|
splitLine: {
|
show: false,
|
},
|
axisTick: {
|
show: false,
|
},
|
axisLabel: {
|
show: true,
|
formatter: '{value} %', //右侧Y轴文字显示
|
textStyle: {
|
color: 'rgba(185, 185, 185, 1)',
|
},
|
},
|
},
|
],
|
|
series: [
|
{
|
name: '加油',
|
type: 'bar',
|
barWidth: '12px',
|
itemStyle: {
|
normal: {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
{
|
offset: 0,
|
color: '#5B81F9',
|
},
|
{
|
offset: 1,
|
color: '#151A22',
|
},
|
]),
|
},
|
},
|
data: valueData.salesVolumeArr,
|
},
|
|
{
|
name: '加油率',
|
type: 'line',
|
// smooth: true,
|
yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
|
|
symbol: 'emptycircle', //标记的图形为实心圆
|
symbolSize: 0, //标记的大小
|
areaStyle: {
|
normal: {
|
color: {
|
type: 'linear',
|
x: 0,
|
y: 0,
|
x2: 0,
|
y2: 1,
|
colorStops: [
|
{
|
offset: 0,
|
color: 'rgba(87, 147, 67, .5)', // 0% 处的颜色
|
},
|
{
|
offset: 1,
|
color: 'rgba(87, 147, 67, 0.1)', // 100% 处的颜色
|
},
|
],
|
global: false, // 缺省为 false
|
},
|
},
|
},
|
itemStyle: {
|
color: 'rgba(65, 197, 95, 1)',
|
},
|
|
data: valueData.growthRateArr,
|
},
|
],
|
}
|
option && this.monthlySalesStatisChart.setOption(option, true)
|
},
|
//获取时间
|
getRightTime() {
|
var date = new Date()
|
var sign2 = ':'
|
var year = date.getFullYear() // 年
|
var month = date.getMonth() + 1 // 月
|
var day = date.getDate() // 日
|
var hour = date.getHours() // 时
|
var minutes = date.getMinutes() // 分
|
var seconds = date.getSeconds() //秒
|
var weekArr = ['Sunday', 'Monday', 'Tuesday', 'Wendnesday', 'Thursday', 'Friday', 'Saturday']
|
var week = weekArr[date.getDay()]
|
// 给一位数的数据前面加 “0”
|
if (month >= 1 && month <= 9) {
|
month = '0' + month
|
}
|
if (day >= 0 && day <= 9) {
|
day = '0' + day
|
}
|
if (hour >= 0 && hour <= 9) {
|
hour = '0' + hour
|
}
|
if (minutes >= 0 && minutes <= 9) {
|
minutes = '0' + minutes
|
}
|
if (seconds >= 0 && seconds <= 9) {
|
seconds = '0' + seconds
|
}
|
this.timeObj.nowDate = year + '/' + month + '/' + day
|
this.timeObj.nowTime = hour + sign2 + minutes + sign2 + seconds
|
this.timeObj.week = week
|
},
|
},
|
beforeDestroy() {
|
clearInterval(this.timer)
|
clearInterval(this.updateDataTimer)
|
},
|
}
|
</script>
|
|
<style lang="less" scoped>
|
* {
|
box-sizing: border-box;
|
margin: 0;
|
padding: 0;
|
}
|
@font-face {
|
font-family: 'trends';
|
src: url('../../assets/font/trends/font.TTF');
|
font-style: normal;
|
font-weight: normal;
|
}
|
@font-face {
|
font-family: 'CAPSUULA';
|
src: url('../../assets/font/CAPSUULA.TTF');
|
font-style: normal;
|
font-weight: normal;
|
}
|
.content {
|
width: 100vw;
|
height: 100vh;
|
padding: 20px 30px;
|
font-family: 'trends';
|
.header_ct {
|
width: 100%;
|
height: 7.5vh;
|
background: url(~@/assets/img/bigdata/top.png) no-repeat;
|
background-size: 100% 100%;
|
text-align: center;
|
font-size: 40px;
|
color: #fff;
|
}
|
.tab_page {
|
display: flex;
|
justify-content: center;
|
font-size: 14px;
|
color: #fff;
|
div {
|
cursor: pointer;
|
&:hover {
|
opacity: 0.8;
|
}
|
}
|
.operation {
|
width: 140px;
|
height: 2.8vh;
|
padding-left: 20px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
background: url(~@/assets/img/bigdata/11.png) no-repeat;
|
background-size: 100% 100%;
|
}
|
.alarm {
|
width: 140px;
|
height: 2.8vh;
|
padding-right: 20px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
background: url(~@/assets/img/bigdata/22.png) no-repeat;
|
background-size: 100% 100%;
|
}
|
}
|
.header-time {
|
display: flex;
|
align-items: center;
|
color: #bdc7d0;
|
font-size: 10px;
|
padding-right: 30px;
|
position: fixed;
|
right: 20px;
|
top: 6vh;
|
font-family: Arial;
|
.rung-bar {
|
width: 17px;
|
height: 4px;
|
background: #ffcc3b;
|
border-radius: 4px;
|
margin-right: 16px;
|
margin-bottom: 16px;
|
}
|
.time {
|
width: 120px;
|
font-size: 34px;
|
font-weight: 400;
|
letter-spacing: 0.5px;
|
font-family: 'CAPSUULA';
|
}
|
.vertical-bar {
|
width: 2px;
|
height: 28px;
|
margin: 0 20px;
|
background: #fff;
|
opacity: 0.2;
|
}
|
}
|
.info_ct {
|
color: #fff;
|
display: flex;
|
justify-content: space-between;
|
.left_ct {
|
width: 23vw;
|
height: 86vh;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
}
|
.middle_ct {
|
width: 48vw;
|
.gas_station_img {
|
width: 100%;
|
height: 54.5vh;
|
display: flex;
|
align-items: flex-end;
|
}
|
.refueling_statis {
|
height: 31.5vh;
|
#refuelingStatisChart {
|
height: 24vh;
|
}
|
}
|
}
|
.right_ct {
|
width: 23vw;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
.sales_rank {
|
height: 23vh;
|
.words_ct {
|
width: 100%;
|
height: 85%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-around;
|
.item {
|
display: flex;
|
align-items: center;
|
.info {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
width: 100%;
|
font-size: 14px;
|
color: #98afcc;
|
font-weight: 400;
|
line-height: 1;
|
.dashed-progress-ct {
|
display: flex;
|
align-items: center;
|
margin-top: 5px;
|
width: 100%;
|
height: 7px;
|
background-size: 6px 7px;
|
background-repeat: repeat-x;
|
background-image: linear-gradient(to right, rgba(42, 51, 63) 70%, transparent 70%);
|
.progress-color-green {
|
width: 100%;
|
height: 7px;
|
// border-top: 4px dashed red;
|
background-size: 6px 7px;
|
background-repeat: repeat-x;
|
background-image: linear-gradient(to right, #4dd41d 70%, transparent 70%);
|
box-shadow: 0 0 10px #4dd41d inset, 0 0 10px #4dd41d;
|
}
|
.progress-color-blue {
|
width: 100%;
|
height: 7px;
|
// border-top: 4px dashed red;
|
background-size: 6px 7px;
|
background-repeat: repeat-x;
|
background-image: linear-gradient(to right, #8dc6f7 70%, transparent 70%);
|
box-shadow: 0 0 10px #8dc6f7 inset, 0 0 10px #8dc6f7;
|
}
|
.progress-color-yellow {
|
width: 100%;
|
height: 7px;
|
// border-top: 4px dashed red;
|
background-size: 6px 7px;
|
background-repeat: repeat-x;
|
background-image: linear-gradient(to right, #e8b94f 70%, transparent 70%);
|
box-shadow: 0 0 10px #e8b94f inset, 0 0 10px #e8b94f;
|
}
|
.progress-color-red {
|
width: 100%;
|
height: 7px;
|
// border-top: 4px dashed red;
|
background-size: 6px 7px;
|
background-repeat: repeat-x;
|
background-image: linear-gradient(to right, #f7450f 70%, transparent 70%);
|
box-shadow: 0 0 10px #f7450f inset, 0 0 10px #f7450f;
|
}
|
}
|
.count {
|
margin-left: 16px;
|
}
|
}
|
.num {
|
width: 42px;
|
height: 30px;
|
background: url('../../assets/img/bigdata/4144.png');
|
background-size: 100% 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-right: 12px;
|
font-family: 'pmzd';
|
font-size: 14px;
|
font-weight: 400;
|
color: #98afcc;
|
}
|
}
|
}
|
}
|
.vehicle_type_distribution {
|
height: 28vh;
|
width: 100%;
|
.info_ct {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
width: 100%;
|
height: 83%;
|
#vehicleTypeDistriChart {
|
height: 100%;
|
}
|
.words_ct {
|
display: flex;
|
flex-direction: column;
|
.item {
|
display: flex;
|
margin-bottom: 14px;
|
.label {
|
color: #afb1b4;
|
width: 75px;
|
padding: 0 12px;
|
margin-right: 40px;
|
border: 1px solid #5b81f9;
|
}
|
}
|
}
|
}
|
}
|
.monthly_sales_statis {
|
height: 31.5vh;
|
#monthlySalesStatisChart {
|
height: 24vh;
|
}
|
}
|
}
|
.block {
|
width: 100%;
|
padding: 14px;
|
background: rgba(0, 0, 0, 0.5);
|
border: 1px solid rgba(112, 113, 118, 0.5);
|
border-radius: 8px;
|
.block_title {
|
font-size: 20px;
|
line-height: 1;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.blue_text {
|
color: #5b81f9;
|
}
|
.tab {
|
display: flex;
|
font-size: 12px;
|
div {
|
padding: 4px 8px;
|
margin-left: 5px;
|
border: 1px solid #74777c;
|
background: rgba(116, 119, 124, 0.6);
|
cursor: pointer;
|
&.active {
|
border: 1px solid #5b81f9;
|
|
background: rgba(91, 129, 249, 0.6);
|
}
|
}
|
}
|
}
|
.title_line {
|
width: 100%;
|
margin-top: -1vh;
|
height: 10px;
|
}
|
}
|
.opera_overview {
|
height: 22vh;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-around;
|
padding-bottom: 10px;
|
.icon_ct {
|
display: flex;
|
justify-content: space-around;
|
.icon_fa {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
.icon_name {
|
font-size: 14px;
|
color: #8c8b8b;
|
}
|
.icon_num {
|
font-size: 22px;
|
}
|
}
|
}
|
.pie_chart_ct {
|
height: 9vh;
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
background: linear-gradient(180deg, rgba(47, 76, 134, 0.19), rgba(18, 23, 29, 0.19));
|
border: 1px solid rgba(91, 129, 249, 0.2);
|
border-radius: 8px;
|
.line {
|
margin: 0 20px;
|
}
|
.pie_self {
|
width: 30%;
|
height: 100%;
|
}
|
}
|
}
|
.traffic_statis {
|
height: 42vh;
|
#trafficStatisChart {
|
height: 25vh;
|
}
|
}
|
.customer_statis {
|
height: 19vh;
|
.info_ct {
|
height: 12vh;
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
.info_item {
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-around;
|
align-items: center;
|
.info_num {
|
font-size: 22px;
|
}
|
.info_name {
|
color: #8c8b8b;
|
}
|
.change_ct {
|
display: flex;
|
align-items: center;
|
font-size: 12px;
|
border: 1px solid #6d9f5e;
|
background: #427a31;
|
border-radius: 30px;
|
padding: 0 8px;
|
img {
|
margin-right: 4px;
|
}
|
}
|
.info_foot_icon {
|
margin-top: -3vh;
|
}
|
}
|
}
|
}
|
}
|
.singlexaminatio {
|
height: 37px;
|
width: 100%;
|
color: #92969e;
|
font-size: 12px;
|
line-height: 37px;
|
display: flex;
|
span {
|
flex: 1;
|
border: 1px solid #333842;
|
justify-content: center;
|
flex-wrap: nowrap;
|
text-align: center;
|
}
|
}
|
}
|
.videocontainer {
|
position: fixed;
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
z-index: -100;
|
top: 0;
|
left: 0;
|
}
|
|
.videocontainer:before {
|
content: '';
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
display: block;
|
z-index: -1;
|
top: 0;
|
left: 0;
|
}
|
|
.fullscreenvideo {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
min-width: 100%;
|
min-height: 100%;
|
width: auto;
|
height: auto;
|
z-index: -100;
|
-webkit-transform: translateX(-50%) translateY(-50%);
|
transform: translateX(-50%) translateY(-50%);
|
-webkit-transition: 1s opacity;
|
transition: 1s opacity;
|
}
|
</style>
|
