447 lines
12 KiB
Vue
447 lines
12 KiB
Vue
<template>
|
||
<!-- 电池管理页面 -->
|
||
<div class="el-overlay">
|
||
<div class="box">
|
||
<div class="box-header">
|
||
<div class="box-title">电池管理</div>
|
||
<div class="box-btn" @click="close"></div>
|
||
</div>
|
||
<div class="box-content">
|
||
<!-- 电池列表 -->
|
||
<div class="box-content-left">
|
||
<div class="title">
|
||
<span>电池列表</span>
|
||
</div>
|
||
<p>电池编号</p>
|
||
<ul>
|
||
<li v-for="(item, index) in batteryNumList" :key="'li' + index">
|
||
{{ item }}
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="box-content-right">
|
||
<!-- 统计分析 -->
|
||
<div class="top">
|
||
<div class="title">
|
||
<span>统计分析</span>
|
||
</div>
|
||
<div style="display: flex; justify-content: space-between">
|
||
<div class="left-plate">
|
||
<section
|
||
v-for="(item, index) in analysisList"
|
||
:key="'analysis' + index"
|
||
:style="'background-image:url(' + item.pic + ')'"
|
||
>
|
||
<span>{{ item.name }}</span>
|
||
<span :style="'color:' + item.color">{{ item.num }}</span>
|
||
</section>
|
||
</div>
|
||
<div class="right-plate">
|
||
<div class="right-plate-title">
|
||
<span>充电时间统计</span>
|
||
</div>
|
||
<div class="right-plate-chart" id="plate-chart"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 电池检测 -->
|
||
<div class="bottom">
|
||
<div class="title">
|
||
<span>电池检测</span>
|
||
</div>
|
||
<div class="bottom-box">
|
||
<el-table
|
||
:data="tableList"
|
||
style="width: 100%"
|
||
@row-click="rowClick"
|
||
>
|
||
<el-table-column prop="startTime" label="充电开始时间" />
|
||
<el-table-column
|
||
prop="endTime"
|
||
label="充电结束时间"
|
||
align="center"
|
||
/>
|
||
<el-table-column prop="errorMsg" label="故障信息" align="right" />
|
||
</el-table>
|
||
</div>
|
||
|
||
<div style="float: right">
|
||
<el-pagination
|
||
v-model:current-page="currentPage1"
|
||
:page-size="100"
|
||
:size="size"
|
||
layout="total, prev, pager, next"
|
||
:total="1000"
|
||
prev-text="上一页"
|
||
next-text="下一页"
|
||
|
||
>
|
||
</el-pagination>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
import { ref, onMounted, nextTick } from "vue";
|
||
import getPath from "@/utils/getPath";
|
||
import * as echarts from "echarts";
|
||
const batteryNumList = ref([
|
||
20230013, 20230013, 20230013, 20230013, 20230013, 20230013, 20230013,
|
||
20230013, 20230013, 20230013, 20230013, 20230013, 20230013, 20230013,
|
||
]);
|
||
const analysisList = ref([
|
||
{
|
||
pic: getPath.analysisItem1,
|
||
name: "报警次数（次）",
|
||
num: 0,
|
||
color: "rgba(255, 206, 84, 1)",
|
||
},
|
||
{
|
||
pic: getPath.analysisItem2,
|
||
name: "充电次数（次）",
|
||
num: 3,
|
||
color: "rgba(25, 174, 250, 1)",
|
||
},
|
||
{
|
||
pic: getPath.analysisItem3,
|
||
name: "使用寿命（月）",
|
||
num: 0,
|
||
color: "rgba(28, 238, 251, 1)",
|
||
},
|
||
]);
|
||
const emit = defineEmits(["closeBattery"]);
|
||
|
||
const tableList = ref([
|
||
{
|
||
startTime: "2023-03-08T17:45:04.417",
|
||
endTime:'2023-03-08T17:45:04.417',
|
||
errorMsg:'无故障'
|
||
},
|
||
{
|
||
startTime: "2023-03-08T17:45:04.417",
|
||
endTime:'2023-03-08T17:45:04.417',
|
||
errorMsg:'无故障'
|
||
},
|
||
]);
|
||
function close() {
|
||
emit("closeBattery", -1);
|
||
}
|
||
|
||
function drawLineChart() {
|
||
let dom = document.querySelector("#plate-chart");
|
||
dom.removeAttribute("_echarts_instance_");
|
||
let myChart;
|
||
myChart = echarts.init(dom);
|
||
let option = {
|
||
tooltip: {},
|
||
grid: {
|
||
top: "20%",
|
||
left: "1%",
|
||
right: "1%",
|
||
bottom: "8%",
|
||
containLabel: true,
|
||
},
|
||
// legend:{
|
||
// show:true,
|
||
// icon:'rect',
|
||
// },
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
boundaryGap: false,
|
||
axisLine: {
|
||
//坐标轴轴线相关设置。数学上的x轴
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#233e64",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
//坐标轴刻度标签的相关设置
|
||
textStyle: {
|
||
color: "#fff",
|
||
margin: 15,
|
||
},
|
||
},
|
||
axisTick: { show: false },
|
||
data: ["1", "2", "3"],
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
name: "单位:min",
|
||
nameTextStyle: {
|
||
color: "#FFF",
|
||
align: "middle",
|
||
padding: [0, 0, 0, 0],
|
||
},
|
||
// min: 0,
|
||
// max: 1,
|
||
// splitNumber: 5,
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#233e64",
|
||
},
|
||
},
|
||
axisLine: { show: false },
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
},
|
||
axisTick: { show: false },
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "充电时间统计",
|
||
type: "line",
|
||
|
||
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
||
symbolSize: 0,
|
||
|
||
lineStyle: {
|
||
normal: {
|
||
color: "rgba(24, 174, 250, 1)", // 线条颜色
|
||
},
|
||
},
|
||
areaStyle: {
|
||
//区域填充样式
|
||
normal: {
|
||
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{ offset: 0, color: "rgba(25, 174, 250, 1)" },
|
||
{ offset: 0.9, color: "rgba(25, 174, 250, 0)" },
|
||
],
|
||
false
|
||
),
|
||
|
||
// shadowColor: "rgba(25, 174, 250, 1)", //阴影颜色
|
||
shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
||
},
|
||
},
|
||
data: [0.3, 0.8, 0.4, 0.5, 0.8, 0.9, 0.4],
|
||
},
|
||
],
|
||
};
|
||
nextTick(() => {
|
||
myChart.setOption(option);
|
||
});
|
||
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
}
|
||
|
||
onMounted(() => {
|
||
drawLineChart();
|
||
});
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.box {
|
||
width: vw(1380);
|
||
height: vh(716);
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
top: 0;
|
||
margin: auto;
|
||
background-image: url("@/assets/images/dialog/device-dialog1.png");
|
||
background-size: 100% 100%;
|
||
&-header {
|
||
width: 100%;
|
||
height: vh(60);
|
||
font-family: "pangmen";
|
||
display: flex;
|
||
font-size: 1.875rem;
|
||
justify-content: center;
|
||
}
|
||
&-title {
|
||
line-height: vh(60);
|
||
text-shadow: 0px 0px 6px #19aefa;
|
||
}
|
||
&-btn {
|
||
background-image: url("@/assets/images/dialog/close.png");
|
||
width: vw(34);
|
||
height: vh(34);
|
||
position: absolute;
|
||
right: vw(20);
|
||
top: vh(12);
|
||
cursor: pointer;
|
||
}
|
||
&-content {
|
||
height: vh(716 - 60);
|
||
padding: vh(20) vw(20);
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
&-left,
|
||
&-right {
|
||
box-sizing: border-box;
|
||
}
|
||
&-left {
|
||
padding: vh(20) vw(20);
|
||
width: vw(280);
|
||
height: vh(616);
|
||
border: 1px solid;
|
||
border-image: linear-gradient(
|
||
180deg,
|
||
rgba(144.00000661611557, 218.00000220537186, 255, 0.5),
|
||
rgba(144.00000661611557, 218.00000220537186, 255, 0.10000000149011612)
|
||
)
|
||
1 1;
|
||
p {
|
||
width: vw(244);
|
||
height: vh(36);
|
||
background-size: 100% 100%;
|
||
line-height: vh(36);
|
||
color: rgba(28, 238, 251, 1);
|
||
padding-left: 0.875rem;
|
||
background-image: url("@/assets/images/dialog/num-bg.png");
|
||
background-size: 100% 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
ul {
|
||
overflow-y: scroll;
|
||
overflow-x: hidden;
|
||
height: vh(476);
|
||
li {
|
||
width: vw(224);
|
||
height: vh(36);
|
||
background-image: url("@/assets/images/dialog/num-default.png");
|
||
padding-left: vw(14);
|
||
box-sizing: border-box;
|
||
line-height: vh(36);
|
||
font-size: 0.875rem;
|
||
margin: vh(2) 0;
|
||
}
|
||
}
|
||
ul::-webkit-scrollbar {
|
||
width: vw(8); /* 设置滚动条的宽度 */
|
||
background-color: transparent; /* 滚动条的背景色 */
|
||
border: 1px solid;
|
||
border-radius: 8px;
|
||
border-image: linear-gradient(
|
||
180deg,
|
||
rgba(144.00000661611557, 218.00000220537186, 255, 0.5),
|
||
rgba(
|
||
144.00000661611557,
|
||
218.00000220537186,
|
||
255,
|
||
0.10000000149011612
|
||
)
|
||
)
|
||
1 1;
|
||
}
|
||
ul::-webkit-scrollbar-track {
|
||
background: transparent; /* 轨道的背景色 */
|
||
}
|
||
ul::-webkit-scrollbar-thumb {
|
||
background-color: rgba(187, 220, 255, 0.7); /* 滑块的背景色 */
|
||
// border-radius: 8px; /* 滑块的圆角 */
|
||
}
|
||
}
|
||
&-right {
|
||
width: vw(1040);
|
||
height: vh(616);
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-content: space-between;
|
||
.top,
|
||
.bottom {
|
||
padding: vh(20) vw(20);
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
height: vh(298);
|
||
border: 1px solid;
|
||
border-image: linear-gradient(
|
||
180deg,
|
||
rgba(144.00000661611557, 218.00000220537186, 255, 0.5),
|
||
rgba(
|
||
144.00000661611557,
|
||
218.00000220537186,
|
||
255,
|
||
0.10000000149011612
|
||
)
|
||
)
|
||
1 1;
|
||
.title {
|
||
background-image: url("@/assets/images/dialog/battery-title2.png");
|
||
}
|
||
}
|
||
.top {
|
||
.left-plate {
|
||
section {
|
||
width: vw(352);
|
||
height: vh(60);
|
||
background-size: 100% 100%;
|
||
font-size: 0.875rem;
|
||
margin-bottom: vh(15);
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 vw(26) 0 vw(76);
|
||
box-sizing: border-box;
|
||
justify-content: space-between;
|
||
}
|
||
section > span:nth-child(2) {
|
||
font-size: 1.625rem;
|
||
}
|
||
}
|
||
.right-plate {
|
||
&-title {
|
||
padding-left: vw(28);
|
||
box-sizing: border-box;
|
||
width: vw(614);
|
||
margin-top: vh(16);
|
||
margin-bottom: vh(10);
|
||
height: vh(12);
|
||
font-size: 1.125rem;
|
||
background-image: url("@/assets/images/dialog/under-line1.png");
|
||
background-size: 100% 100%;
|
||
span {
|
||
position: relative;
|
||
top: vh(-20);
|
||
}
|
||
}
|
||
&-chart {
|
||
height: vh(192);
|
||
width: vw(628);
|
||
}
|
||
}
|
||
}
|
||
.bottom {
|
||
position: relative;
|
||
&-box {
|
||
height: vh(150);
|
||
margin-bottom: vh(32);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.title {
|
||
width: 100%;
|
||
height: vh(36);
|
||
background-size: 100% 100%;
|
||
background-image: url("@/assets/images/dialog/battery-title.png");
|
||
padding-left: vw(32);
|
||
line-height: vh(36);
|
||
box-sizing: border-box;
|
||
margin-bottom: vh(16);
|
||
font-family: "pangmen";
|
||
text-shadow: 0px 0px 6px #19aefa;
|
||
font-size: 1.375rem;
|
||
}
|
||
</style> |