737 lines
18 KiB
Vue
737 lines
18 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-top">
|
|
<div class="left-chart-box">
|
|
<div class="title">
|
|
<span> 已完成维保统计 </span>
|
|
<el-date-picker
|
|
v-model="value1"
|
|
type="year"
|
|
placeholder="请选择年份"
|
|
@change="completedMaintenancePlan"
|
|
/>
|
|
</div>
|
|
<div class="chart" id="pieChart1"></div>
|
|
</div>
|
|
<div class="right-chart-box">
|
|
<div class="title">
|
|
<span> 保养计划 </span>
|
|
<el-date-picker
|
|
v-model="value2"
|
|
type="year"
|
|
placeholder="请选择年份"
|
|
@change="maintenancePlan"
|
|
/>
|
|
</div>
|
|
<div class="chart" id="pieChart2"></div>
|
|
</div>
|
|
</div>
|
|
<div class="box-content-bottom">
|
|
<div class="title">
|
|
<span> 维护计划 </span>
|
|
<el-select
|
|
@change="getMaintenancePlanData()"
|
|
clearable
|
|
v-model="planParams.facName"
|
|
placeholder="请选择"
|
|
>
|
|
<el-option
|
|
v-for="item in allName"
|
|
:key="item"
|
|
:label="item"
|
|
:value="item"
|
|
/>
|
|
</el-select>
|
|
</div>
|
|
<div class="box-content-bottom-table">
|
|
<el-table :data="tableList" style="width: 100%">
|
|
<el-table-column prop="keepPlanTime" label="计划时间" />
|
|
<el-table-column prop="facCode" label="设备编码" />
|
|
<el-table-column prop="facName" label="设备名称" />
|
|
<el-table-column prop="keepFinishTime" label="执行时间" />
|
|
<el-table-column prop="keepContent" label="保养内容" />
|
|
<el-table-column prop="status" label="状态" align="center">
|
|
<template #default="{ row }">
|
|
<div :style="row.status ? 'color:rgba(28, 238, 251, 1)' : ''">
|
|
{{ row.status ? "已完成" : "未完成" }}
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
|
|
<div style="float: right">
|
|
<el-pagination
|
|
v-model:current-page="planParams.pageIndex"
|
|
:page-size="planParams.pageSize"
|
|
:size="planParams.pageSize"
|
|
layout="total, prev, pager, next"
|
|
:total="total"
|
|
prev-text="上一页"
|
|
next-text="下一页"
|
|
>
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import * as echarts from "echarts";
|
|
import { onMounted, ref, nextTick, reactive } from "vue";
|
|
import {
|
|
countKeepRecord,
|
|
getMaintenancePlan,
|
|
allDeviceNames,
|
|
} from "@/api/equipmentManagement/index";
|
|
const emit = defineEmits(["closeMaintenance"]);
|
|
|
|
function close() {
|
|
emit("closeMaintenance", -1);
|
|
}
|
|
const tableList = ref([
|
|
// {
|
|
// planDate: "2023-12-12",
|
|
// planFinishDate: "2024-07-26",
|
|
// type: "穿梭车保养",
|
|
// content: "润滑",
|
|
// deviceNum: "Car1",
|
|
// env: "已执行",
|
|
// people: "---",
|
|
// },
|
|
// {
|
|
// planDate: "2023-12-12",
|
|
// planFinishDate: "2024-07-26",
|
|
// type: "穿梭车保养",
|
|
// content: "润滑",
|
|
// deviceNum: "Car1",
|
|
// env: "已执行",
|
|
// people: "---",
|
|
// },
|
|
// {
|
|
// planDate: "2023-12-12",
|
|
// planFinishDate: "2024-07-26",
|
|
// type: "穿梭车保养",
|
|
// content: "润滑",
|
|
// deviceNum: "Car1",
|
|
// env: "已执行",
|
|
// people: "---",
|
|
// },
|
|
]);
|
|
// 已完成维保统计
|
|
function drawLeftChart(list) {
|
|
const color = [
|
|
"rgba(25, 174, 250, 0.7)",
|
|
"rgba(28, 238, 251, 0.7)",
|
|
"rgba(255, 206, 84, 0.7)",
|
|
"rgba(174, 211, 255, 0.7)",
|
|
];
|
|
let result = [];
|
|
let total = list.totalCount;
|
|
for (var i = 0; i < list.columnDatas.length; i++) {
|
|
// if (key != "totalCount") {
|
|
result.push({
|
|
name: list.columnDatas[i].name,
|
|
value: list.columnDatas[i].number,
|
|
});
|
|
// } else {
|
|
// total = list[key];
|
|
// }
|
|
}
|
|
let dom = document.querySelector("#pieChart1");
|
|
dom.removeAttribute("_echarts_instance_");
|
|
let myChart;
|
|
myChart = echarts.init(dom);
|
|
|
|
let dataStyle = {
|
|
normal: {
|
|
label: {
|
|
show: false,
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
shadowBlur: 40,
|
|
borderWidth: 10,
|
|
shadowColor: "rgba(0, 0, 0, 0)", //边框阴影
|
|
},
|
|
};
|
|
let placeHolderStyle = {
|
|
normal: {
|
|
color: "rgba(216, 233, 253, 0.10)",
|
|
label: {
|
|
show: false,
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
},
|
|
};
|
|
let option = {
|
|
tooltip: {
|
|
trigger: "item",
|
|
show: true,
|
|
formatter: "{b} : <br/>{d}%",
|
|
backgroundColor: "rgba(0,0,0,0.7)", // 背景
|
|
padding: [8, 10], //内边距
|
|
extraCssText: "box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);", //添加阴影
|
|
formatter: function (params) {
|
|
// return params.name + ': ' + total*params.value
|
|
return params.name + ': ' + params.value
|
|
},
|
|
},
|
|
legend: {
|
|
orient: "vertical",
|
|
icon: "rect",
|
|
left: "60%",
|
|
top: "center",
|
|
data: result.map((el) => {
|
|
return el.name;
|
|
}),
|
|
textStyle: {
|
|
padding: [10, 14],
|
|
color: "#fff",
|
|
},
|
|
itemWidth: 8,
|
|
itemHeight: 8,
|
|
},
|
|
series: [
|
|
{
|
|
name: "背景1",
|
|
type: "pie",
|
|
clockWise: false,
|
|
radius: ["73%", "79%"],
|
|
center: ["27%", "50%"],
|
|
itemStyle: dataStyle,
|
|
hoverAnimation: false,
|
|
startAngle: 90,
|
|
label: {
|
|
borderRadius: "10",
|
|
},
|
|
data: [
|
|
{
|
|
value: 0,
|
|
name: "背景1",
|
|
},
|
|
{
|
|
value: 45.4,
|
|
name: "",
|
|
tooltip: {
|
|
show: false,
|
|
},
|
|
itemStyle: placeHolderStyle,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "背景2",
|
|
type: "pie",
|
|
clockWise: false,
|
|
radius: ["50%", "64%"],
|
|
center: ["27%", "50%"],
|
|
itemStyle: dataStyle,
|
|
hoverAnimation: false,
|
|
startAngle: 90,
|
|
label: {
|
|
borderRadius: "10",
|
|
},
|
|
data: [
|
|
{
|
|
value: 0,
|
|
name: "背景2",
|
|
},
|
|
{
|
|
value: 10,
|
|
name: "",
|
|
tooltip: {
|
|
show: false,
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: "rgba(216, 233, 253, 0.20)",
|
|
label: {
|
|
show: false,
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "穿梭车保养",
|
|
type: "pie",
|
|
clockWise: true,
|
|
radius: ["0%", "64%"],
|
|
center: ["27%", "50%"],
|
|
itemStyle: dataStyle,
|
|
hoverAnimation: false,
|
|
startAngle: 90,
|
|
data: result.map((el, index) => {
|
|
return {
|
|
value: el.value,
|
|
name: el.name,
|
|
itemStyle: {
|
|
normal: {
|
|
color: color[index],
|
|
},
|
|
},
|
|
};
|
|
}),
|
|
},
|
|
],
|
|
};
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize", function () {
|
|
myChart.resize();
|
|
});
|
|
}
|
|
// 保养计划
|
|
function drawRightChart(list) {
|
|
const color = [
|
|
"rgba(25, 174, 250, 0.7)",
|
|
"rgba(28, 238, 251, 0.7)",
|
|
"rgba(255, 206, 84, 0.7)",
|
|
"rgba(174, 211, 255, 0.7)",
|
|
];
|
|
let result = [];
|
|
let total = list.totalCount;
|
|
for (var i = 0; i < list.columnDatas.length; i++) {
|
|
// if (key != "totalCount") {
|
|
result.push({
|
|
name: list.columnDatas[i].name,
|
|
value: list.columnDatas[i].number,
|
|
});
|
|
// } else {
|
|
// total = list[key];
|
|
// }
|
|
}
|
|
let dom = document.querySelector("#pieChart2");
|
|
dom.removeAttribute("_echarts_instance_");
|
|
let myChart;
|
|
myChart = echarts.init(dom);
|
|
let dataStyle = {
|
|
normal: {
|
|
label: {
|
|
show: false,
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
shadowBlur: 40,
|
|
borderWidth: 10,
|
|
shadowColor: "rgba(0, 0, 0, 0)", //边框阴影
|
|
},
|
|
};
|
|
let placeHolderStyle = {
|
|
normal: {
|
|
color: "rgba(216, 233, 253, 0.10)",
|
|
label: {
|
|
show: false,
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
},
|
|
};
|
|
let option = {
|
|
tooltip: {
|
|
trigger: "item",
|
|
show: true,
|
|
formatter: "{b} : <br/>{d}%",
|
|
backgroundColor: "rgba(0,0,0,0.7)", // 背景
|
|
padding: [8, 10], //内边距
|
|
extraCssText: "box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);", //添加阴影
|
|
formatter: function (params) {
|
|
// return params.name + ': ' + total*params.value
|
|
return params.name + ': ' + params.value
|
|
},
|
|
},
|
|
legend: {
|
|
orient: "vertical",
|
|
icon: "rect",
|
|
left: "60%",
|
|
top: "center",
|
|
data: result.map((el) => {
|
|
return el.name;
|
|
}),
|
|
textStyle: {
|
|
padding: [0, 14],
|
|
color: "#fff",
|
|
},
|
|
itemWidth: 8,
|
|
itemHeight: 8,
|
|
},
|
|
series: [
|
|
{
|
|
name: "背景1",
|
|
type: "pie",
|
|
clockWise: false,
|
|
radius: ["73%", "79%"],
|
|
center: ["27%", "50%"],
|
|
itemStyle: dataStyle,
|
|
hoverAnimation: false,
|
|
startAngle: 90,
|
|
label: {
|
|
borderRadius: "10",
|
|
},
|
|
data: [
|
|
{
|
|
value: 0,
|
|
name: "背景1",
|
|
},
|
|
{
|
|
value: 45.4,
|
|
name: "",
|
|
tooltip: {
|
|
show: false,
|
|
},
|
|
itemStyle: placeHolderStyle,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "背景2",
|
|
type: "pie",
|
|
clockWise: false,
|
|
radius: ["50%", "64%"],
|
|
center: ["27%", "50%"],
|
|
itemStyle: dataStyle,
|
|
hoverAnimation: false,
|
|
startAngle: 90,
|
|
label: {
|
|
borderRadius: "10",
|
|
},
|
|
data: [
|
|
{
|
|
value: 0,
|
|
name: "背景2",
|
|
},
|
|
{
|
|
value: 10,
|
|
name: "",
|
|
tooltip: {
|
|
show: false,
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: "rgba(216, 233, 253, 0.20)",
|
|
label: {
|
|
show: false,
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "穿梭车保养",
|
|
type: "pie",
|
|
clockWise: true,
|
|
radius: ["0%", "64%"],
|
|
center: ["27%", "50%"],
|
|
itemStyle: dataStyle,
|
|
hoverAnimation: false,
|
|
startAngle: 90,
|
|
data: result.map((el, index) => {
|
|
return {
|
|
value: el.value,
|
|
name: el.name,
|
|
itemStyle: {
|
|
normal: {
|
|
color: color[index],
|
|
},
|
|
},
|
|
};
|
|
}),
|
|
// {
|
|
// value: 20,
|
|
// name: "穿梭车保养",
|
|
// itemStyle: {
|
|
//
|
|
// },
|
|
// },
|
|
},
|
|
],
|
|
};
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize", function () {
|
|
myChart.resize();
|
|
});
|
|
}
|
|
const value1 = ref(new Date());
|
|
const value2 = ref(new Date());
|
|
|
|
// 保养计划接口
|
|
function maintenancePlan() {
|
|
let params = {
|
|
year: value2.value.getFullYear(),
|
|
status: false,
|
|
};
|
|
countKeepRecord(params).then((res) => {
|
|
drawRightChart(res.result);
|
|
});
|
|
}
|
|
// 已完成维保计划接口
|
|
function completedMaintenancePlan() {
|
|
let params = {
|
|
year: value1.value.getFullYear(),
|
|
status: true,
|
|
};
|
|
countKeepRecord(params).then((res) => {
|
|
drawLeftChart(res.result);
|
|
});
|
|
}
|
|
|
|
const planParams = reactive({
|
|
pageIndex: 1,
|
|
pageSize: 5,
|
|
facName: "",
|
|
});
|
|
const total = ref(0);
|
|
// 维护计划接口
|
|
function getMaintenancePlanData() {
|
|
getMaintenancePlan(planParams).then((res) => {
|
|
total.value = res.result.totalNum;
|
|
tableList.value = res.result.data;
|
|
});
|
|
}
|
|
|
|
const allName = ref([]);
|
|
// 获取所有设备名称
|
|
function getAllDeviceNames() {
|
|
allDeviceNames().then((res) => {
|
|
allName.value = res.result;
|
|
});
|
|
}
|
|
onMounted(() => {
|
|
maintenancePlan();
|
|
|
|
completedMaintenancePlan();
|
|
|
|
getMaintenancePlanData();
|
|
|
|
getAllDeviceNames();
|
|
// drawRightChart();
|
|
});
|
|
</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);
|
|
}
|
|
&-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;
|
|
justify-content: space-between;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-content: space-between;
|
|
&-bottom {
|
|
padding: vh(20) vw(20);
|
|
box-sizing: border-box;
|
|
}
|
|
&-top {
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
height: vh(288);
|
|
display: flex;
|
|
.left-chart-box,
|
|
.right-chart-box {
|
|
width: vw(660);
|
|
height: vh(288);
|
|
border: 1px solid;
|
|
padding: vh(20) 0 0 vw(20);
|
|
box-sizing: border-box;
|
|
border-image: linear-gradient(
|
|
180deg,
|
|
rgba(144, 218, 255, 0.5),
|
|
rgba(144, 218, 255, 0.1000000015)
|
|
)
|
|
1 1;
|
|
}
|
|
.title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: vw(614);
|
|
height: vh(36);
|
|
line-height: vh(36);
|
|
padding-left: vw(32);
|
|
font-family: "pangmen";
|
|
font-size: 1.375rem;
|
|
background-image: url("@/assets/images/dialog/title3.png");
|
|
background-size: 100% 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
.chart {
|
|
height: vh(232);
|
|
width: 100%;
|
|
}
|
|
}
|
|
&-bottom {
|
|
width: 100%;
|
|
height: vh(308);
|
|
border: 1px solid;
|
|
border-image: linear-gradient(
|
|
180deg,
|
|
rgba(144, 218, 255, 0.5),
|
|
rgba(144, 218, 255, 0.1000000015)
|
|
)
|
|
1 1;
|
|
.title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
align-items: center;
|
|
height: vh(36);
|
|
line-height: vh(36);
|
|
background-image: url("@/assets/images/dialog/brand-title.png");
|
|
background-size: 100% 100%;
|
|
font-family: "pangmen";
|
|
font-size: 1.375rem;
|
|
padding-left: vw(32);
|
|
box-sizing: border-box;
|
|
|
|
margin-bottom: vh(12);
|
|
}
|
|
&-table {
|
|
height: vh(192);
|
|
margin-bottom: vh(5);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
:deep(.el-table__row--striped) {
|
|
background-image: none !important;
|
|
}
|
|
|
|
// :deep(tr.el-table__row td.el-table__cell) {
|
|
// background-color: rgba(174, 211, 255, 0.20) !important;
|
|
|
|
// }
|
|
|
|
:deep(.el-table__inner-wrapper::before) {
|
|
background-color: transparent !important;
|
|
}
|
|
:deep(.el-table .el-table__cell) {
|
|
padding: 0;
|
|
}
|
|
:deep(.el-table .cell) {
|
|
height: 100%;
|
|
line-height: vh(48);
|
|
}
|
|
:deep(.el-table tr),
|
|
:deep(.el-table),
|
|
:deep(.el-table th),
|
|
:deep(.el-table td) {
|
|
background-color: transparent;
|
|
}
|
|
:deep(.el-table__row) {
|
|
height: vh(48);
|
|
border: 1px solid rgba(144, 218, 255, 1) !important;
|
|
}
|
|
:deep(.el-table) {
|
|
color: rgba(233, 244, 255, 1);
|
|
font-size: 0.8rem;
|
|
height: 100%;
|
|
--el-table-row-hover-bg-color: rgba(174, 211, 255, 0.2) !important;
|
|
}
|
|
:deep(.el-table thead) {
|
|
color: rgba(255, 255, 255, 1);
|
|
font-size: 0.8rem;
|
|
background-image: url("@/assets/images/dialog/table-thead.png");
|
|
line-height: vh(48);
|
|
font-weight: normal;
|
|
}
|
|
:deep(.el-table th.el-table__cell.is-leaf),
|
|
:deep(.el-table td.el-table__cell) {
|
|
border-color: transparent;
|
|
}
|
|
:deep(.el-pager li) {
|
|
background-color: #d8e9fd0d;
|
|
color: #fff;
|
|
margin: 0 0.25rem;
|
|
}
|
|
:deep(.el-pagination button) {
|
|
background-color: rgba(216, 233, 253, 0.05);
|
|
font-size: 0.875rem;
|
|
color: #fff;
|
|
}
|
|
:deep(.el-pager li.is-active) {
|
|
background-color: rgba(25, 194, 250, 0.6);
|
|
}
|
|
:deep(.el-pagination button.is-disabled),
|
|
:deep(.el-pagination button:disabled) {
|
|
color: #a8abb2;
|
|
}
|
|
:deep(.el-pagination__total) {
|
|
color: #fff;
|
|
position: absolute;
|
|
left: vw(40) !important;
|
|
}
|
|
:deep(.el-input__inner) {
|
|
color: #fff;
|
|
}
|
|
:deep(.el-input__wrapper) {
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
:deep(.el-date-editor.el-input) {
|
|
width: vw(160);
|
|
height: vh(28);
|
|
border: 1px solid;
|
|
box-sizing: border-box;
|
|
border-image: linear-gradient(
|
|
180deg,
|
|
rgba(25.000000409781933, 174.00000482797623, 250.00000029802322, 1),
|
|
rgba(25.000000409781933, 174.00000482797623, 250.00000029802322, 0.2)
|
|
)
|
|
1 1;
|
|
}
|
|
:deep(.el-input) {
|
|
width: vw(160);
|
|
height: vh(28);
|
|
}
|
|
</style> |