<template>
|
<div class="charts-container">
|
<el-select
|
clearable
|
v-model="data.queryParams.companyId"
|
filterable
|
remote
|
:teleported="false"
|
reserve-keyword
|
placeholder="请选择企业"
|
remote-show-suffix
|
:remote-method="getData"
|
style="width: 100%"
|
>
|
<el-option
|
v-for="item in data.companyList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
/>
|
</el-select>
|
<div class="top">
|
共计<span>{{data.totalCount}}</span>人/次
|
</div>
|
<div id="main"></div>
|
</div>
|
</template>
|
<script setup>
|
import * as echarts from 'echarts';
|
import {onMounted, reactive} from "vue";
|
import {getCompany} from "@/api/hazardousChemicals/company";
|
import {ElMessage} from "element-plus";
|
import {getDayUseStatistic} from "@/api/monitor/screenCharts";
|
|
onMounted(async () => {
|
await getCompanyList()
|
await getData()
|
})
|
|
const data = reactive({
|
queryParams: {
|
companyId: null
|
},
|
companyList: [],
|
totalCount: 0
|
})
|
const getCompanyList = async (val)=>{
|
if(val){
|
const queryParams = {
|
name: val
|
}
|
const res = await getCompany(queryParams)
|
if (res.code == 200) {
|
data.companyList = res.data.list
|
} else {
|
ElMessage.warning(res.message)
|
}
|
}else {
|
const queryParams = {
|
pageNum: 1,
|
pageSize: 999
|
}
|
const res = await getCompany(queryParams)
|
if (res.code == 200) {
|
data.companyList = res.data.list
|
if(data.queryParams.companyId == null){
|
data.queryParams.companyId = data.companyList[0].id
|
}
|
} else {
|
ElMessage.warning(res.message)
|
}
|
}
|
}
|
|
|
const getData = async ()=>{
|
const res = await getDayUseStatistic(data.queryParams.companyId)
|
if (res.code == 200) {
|
initChart(res.data || [])
|
data.totalCount = res.data.find(i=>i.totalCount >0)?.totalCount || 0
|
} else {
|
ElMessage.warning(res.message)
|
}
|
}
|
|
const initChart = (data) => {
|
var chartDom = document.getElementById('main');
|
var myChart = echarts.init(chartDom);
|
var option;
|
|
option = {
|
title: [
|
{
|
text: '领用统计（人/次）',
|
left: '0',
|
top: '2%',
|
textStyle: {
|
fontSize: 12,
|
color: 'rgba(255,255,255,.6)',
|
fontWeight: 'normal'
|
}
|
}
|
],
|
xAxis: {
|
type: 'category',
|
data: data.map(i=>i.hour + ':00'),
|
axisLabel: {
|
color: '#fff'
|
},
|
axisTick: {
|
show: false
|
}
|
},
|
yAxis: {
|
type: 'value',
|
splitLine: {
|
lineStyle: {
|
color: 'rgba(255,255,255,.1)',
|
type: 'dashed'
|
}
|
},
|
axisLabel: {
|
color: 'rgba(255,255,255,.6)'
|
}
|
},
|
grid: [
|
{
|
top: '15%',
|
right: '2%',
|
bottom: '10%'
|
}
|
],
|
series: [
|
{
|
data: data.map(i=>i.count),
|
type: 'line',
|
label: {
|
show: true,
|
color: '#fff',
|
textBorderColor: 'transparent',
|
fontSize: 8
|
},
|
// showSymbol: false,
|
lineStyle: {
|
color: '#54d5ff'
|
},
|
itemStyle: {
|
color: '#54d5ff',
|
}
|
}
|
]
|
};
|
|
option && myChart.setOption(option);
|
}
|
|
</script>
|
|
<style lang="postcss" scoped>
|
@font-face {
|
font-family: "LKJH";
|
src: url("@/assets/styles/LKJH.ttf");
|
font-style: normal;
|
font-weight: normal;
|
}
|
|
.charts-container {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.top {
|
width: 100%;
|
font-size: 14px;
|
height: 50px;
|
line-height: 50px;
|
text-align: center;
|
margin: 10px 0 20px;
|
|
span {
|
display: inline-block;
|
font-family: "LKJH";
|
vertical-align: middle;
|
font-size: 28px;
|
color: yellow;
|
margin: 0 5px;
|
padding: 5px 10px;
|
letter-spacing: 4px;
|
border-top: 1px solid #155285;
|
border-bottom: 1px solid #155285;
|
background: url('../../../../assets/bigScreen/numberBg.png') left center no-repeat,
|
url('../../../../assets/bigScreen/numberBg.png') right center no-repeat;
|
background-size: 1px 100%;
|
}
|
}
|
|
#main {
|
flex: 1;
|
width: 100%;
|
}
|
:deep(.el-input__wrapper){
|
height: 28px;
|
box-shadow: none;
|
border: 1px solid #11FEEE;
|
background: rgba(6,24,88,.6);
|
color: #fff;
|
}
|
:deep(.el-input__inner){
|
color: #02CDE6;
|
}
|
:deep(.el-input .el-select__caret){
|
color: #02CDE6
|
}
|
:deep(.el-popper.is-light){
|
background: rgb(8,44,97);
|
.el-select-dropdown__item{
|
color: #fff;
|
&:hover{
|
background: #015fb0;
|
}
|
}
|
}
|
</style>
|
