代码提交
This commit is contained in:
parent
94fdd067dc
commit
e2d194eab3
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1 @@
|
|||
172.16.1.104:5005
|
||||
|
|
@ -6,14 +6,14 @@
|
|||
<title>Unity WebGL Player | U3D_TobaccoWarehouseISMDTSystem</title>
|
||||
<link rel="shortcut icon" href="TemplateData/favicon.ico">
|
||||
<link rel="stylesheet" href="TemplateData/style.css">
|
||||
<style>
|
||||
body,html{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<style>
|
||||
html,body{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="unity-container" class="unity-desktop" style="width: 100%;height:100%">
|
||||
<canvas id="unity-canvas" style="width: 100%;height:100%" tabindex="-1"></canvas>
|
||||
|
|
@ -31,9 +31,9 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <button onclick="OpenHtmlMQTT()">Connect</button>
|
||||
<button onclick="OpenHtmlMQTT()">Connect</button>
|
||||
<button onclick="publishMessage()">Publish</button>
|
||||
<button onclick="disconnectMQTT()">Disconnect</button> -->
|
||||
<button onclick="disconnectMQTT()">Disconnect</button>
|
||||
<script src="./js/mqtt.min.js"></script>
|
||||
|
||||
|
||||
|
|
@ -118,7 +118,7 @@
|
|||
let client;
|
||||
|
||||
function OpenHtmlMQTT() {
|
||||
client = mqtt.connect('ws://172.16.1.119:8083/mqtt');
|
||||
client = mqtt.connect('ws://172.16.1.104:8083/mqtt');
|
||||
|
||||
client.on('connect', () => {
|
||||
console.log('连接...');
|
||||
|
|
|
|||
|
|
@ -19,8 +19,8 @@ onMounted(() => {
|
|||
智能仓储全息可视化平台
|
||||
</div>
|
||||
<div class="header-weather">
|
||||
<el-image style="width: 1.5rem; height: 1.5rem" :src="cloudy" fit="fill" />
|
||||
<span>多云 12℃</span>
|
||||
<!-- <el-image style="width: 1.5rem; height: 1.5rem" :src="cloudy" fit="fill" />
|
||||
<span>多云 12℃</span> -->
|
||||
</div>
|
||||
</header>
|
||||
<router-view></router-view>
|
||||
|
|
|
|||
|
|
@ -1,26 +0,0 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 分页查询维修保养统计
|
||||
export function getKeepRecord(params){
|
||||
return request({
|
||||
url:'/api/keepPlan/GetKeepRecord',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
// 分页查询设备的保养情况
|
||||
export function getKeepRecord(params){
|
||||
return request({
|
||||
url:'/api/keepPlan/CountKeepRecord',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
// 分页获取故障分析的信息
|
||||
export function GetPageFaultAnalysisInfo(params){
|
||||
return request({
|
||||
url:'/api/keepPlan/CountKeepRecord',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,154 @@
|
|||
import request from '@/utils/request'
|
||||
// 设备基础信息页面
|
||||
export function getDeviceDetail(params){
|
||||
return request({
|
||||
url:'/api/deviceCode/detail',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
//获取设备列表
|
||||
export function getEquipTable(params){
|
||||
|
||||
return request({
|
||||
url:'/api/equipManage/GetDeviceElement',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
// 设备分析页面
|
||||
// 获取设备列表
|
||||
export function getPageEquipList(params){
|
||||
return request({
|
||||
url:'/api/equipManage/GetPageEquipList',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
// 获取所有设备名称
|
||||
export function getEquipmentName(params){
|
||||
return request({
|
||||
url:'/api/equipManage/GetEquipmentName',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
// 获取设备编码
|
||||
export function getEquipCode(params){
|
||||
return request({
|
||||
url:'/api/equipManage/GetEquipCode',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export function allDeviceNames(params){
|
||||
return request({
|
||||
url:'/api/deviceCode/allDeviceNames',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
// 获取设备编号
|
||||
export function allDevicId(params){
|
||||
return request({
|
||||
url:'/api/devicecode/deviceName2models',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
// 易损件
|
||||
export function getPageDamageEquip(params){
|
||||
return request({
|
||||
url:'/api/equipManage/GetPageDamageEquip',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
// 维护保养页面
|
||||
// 保养计划接口,已完成维保计划
|
||||
export function countKeepRecord(params){
|
||||
return request({
|
||||
url:'/api/keepPlan/CountKeepRecord',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
// 维护计划接口
|
||||
export function getMaintenancePlan(params){
|
||||
return request({
|
||||
url:'/api/keepPlan/GetKeepRecord',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
//健康管理页面
|
||||
// 运行情况统计，故障分析
|
||||
export function countYearErrors(params){
|
||||
return request({
|
||||
url:'/api/maintainManage/CountYearErrors',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 维护保养统计
|
||||
export function countMaintainRecord(params){
|
||||
return request({
|
||||
url:'/api/maintainManage/CountMaintainRecord',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
// 分页查询维修保养统计
|
||||
export function getPageMaintainInfo(params){
|
||||
return request({
|
||||
url:'/api/maintainManage/GetPageMaintainInfo',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
// 分页备件更换统计
|
||||
export function getPageSparePart(params){
|
||||
return request({
|
||||
url:'/api/equipManage/GetPageSparePart',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
// 备件更换统计
|
||||
export function countSparePart(params){
|
||||
return request({
|
||||
url:'/api/equipManage/CountSparePart',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
// 分页获取故障分析的信息
|
||||
export function getPageFaultAnalysisInfo(params){
|
||||
return request({
|
||||
url:'/api/maintainManage/GetPageFaultAnalysisInfo',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
// 获取设备健康指数
|
||||
export function getErrorRate(params){
|
||||
return request({
|
||||
url:'/api/maintainManage/GetErrorRate',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
//查询设备状态
|
||||
export function getEquipStatus(params){
|
||||
return request({
|
||||
url:'/api/equipManage/GetEquipStatus',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
// 查询各品牌库存情况
|
||||
export function getInventoryInfo(params){
|
||||
return request({
|
||||
url:'/api/inventory/GetInventoryInfo',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
// 12小时以内的小车错误消息提醒
|
||||
export function getCarErrorIn12(params){
|
||||
return request({
|
||||
url:'/api/maintainManage/GetCarErrorIn12',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
//超时信息
|
||||
export function getOverTransmission(params){
|
||||
return request({
|
||||
url:'/api/maintainManage/GetOverTransmission',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
// 查询入库工单
|
||||
export function getInOrder(params){
|
||||
return request({
|
||||
url:'/api/order/GetInOrder',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
// 查询出库工单
|
||||
export function getOutOrder(params){
|
||||
return request({
|
||||
url:'/api/order/GetOutOrder',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
// 查询位置信息
|
||||
export function getLocInfo(params){
|
||||
return request({
|
||||
url:'/api/location/GetLocInfo',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 843 B |
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 427 B |
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 868 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 676 B |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
|
|
@ -12,8 +12,8 @@
|
|||
}
|
||||
|
||||
}
|
||||
$designWidth: 1920;
|
||||
$designHeight: 1080;
|
||||
$designWidth: 1920 ;
|
||||
$designHeight: 1080 ;
|
||||
|
||||
//px转为vw的函数
|
||||
@function vw($px) {
|
||||
|
|
@ -71,3 +71,63 @@ $designHeight: 1080;
|
|||
: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(20);
|
||||
}
|
||||
:deep(.el-input .el-input__wrapper.is-focus) {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
:deep(.el-select .el-input.is-focus .el-input__wrapper) {
|
||||
// border-color: #dcdfe6 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.box-btn{
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
:deep(.el-input__wrapper) {
|
||||
background-color: transparent;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
:deep(.el-input) {
|
||||
border: 1px solid;
|
||||
border-image: linear-gradient(
|
||||
180deg,
|
||||
rgba(25.000000409781933, 174.00000482797623, 250.00000029802322, 1),
|
||||
rgba(25.000000409781933, 174.00000482797623, 250.00000029802322, 0.6)
|
||||
)
|
||||
1 1;
|
||||
}
|
||||
:deep(.el-input__inner) {
|
||||
color: #fff;
|
||||
}
|
||||
:deep(.el-select .el-input.is-focus .el-input__wrapper) {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
:deep(.el-popper){
|
||||
max-width:vw(200);
|
||||
line-height: 23px;
|
||||
}
|
||||
|
|
@ -20,6 +20,7 @@
|
|||
}
|
||||
&-title{
|
||||
line-height: vh(60);
|
||||
text-shadow: 0px 0px 6px #19aefa;
|
||||
}
|
||||
&-btn{
|
||||
background-image: url('@/assets/images/dialog/close.png');
|
||||
|
|
|
|||
|
|
@ -0,0 +1,447 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,358 @@
|
|||
<template>
|
||||
<!-- 健康管理内部弹窗 -->
|
||||
<div class="el-overlay">
|
||||
<div class="box">
|
||||
<div class="box-header">
|
||||
<div class="box-title">
|
||||
{{ props.title === '维护保养统计'?"维修统计":props.title }}
|
||||
</div>
|
||||
<div class="el-select1">
|
||||
<el-select
|
||||
v-model="params.facName"
|
||||
placeholder="请选择"
|
||||
@change="
|
||||
params.pageIndex = 1;
|
||||
getTableList();
|
||||
"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in allName"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="el-select2">
|
||||
<el-select v-if="props.title === '维护保养统计'"
|
||||
v-model="isMaintain"
|
||||
placeholder="请选择"
|
||||
@change="
|
||||
params.pageIndex = 1;
|
||||
getTableList();
|
||||
"
|
||||
clearable
|
||||
>
|
||||
<el-option label="已维修" :value="true" />
|
||||
<el-option label="未维修" :value="false" />
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<div class="box-btn" @click="close"></div>
|
||||
</div>
|
||||
<!-- 备件更换统计 -->
|
||||
<div class="box-content">
|
||||
<div class="box-content-table" v-if="props.title === '备件更换统计'">
|
||||
<el-table :data="tableList" style="width: 100%">
|
||||
<el-table-column
|
||||
prop="maintainTime"
|
||||
label="维修时间"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column prop="facCode" label="设备编码" align="center" />
|
||||
<el-table-column
|
||||
prop="elementCode"
|
||||
label="零件编码"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="elementName"
|
||||
label="零件名称"
|
||||
align="center"
|
||||
/>
|
||||
</el-table>
|
||||
</div>
|
||||
<!-- 故障分析 -->
|
||||
<div class="box-content-table" v-else-if="props.title === '故障分析'">
|
||||
<el-table :data="tableList" style="width: 100%">
|
||||
<el-table-column
|
||||
prop="errorDateTime"
|
||||
label="报错时间"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column prop="facCode" label="设备编码" align="center" />
|
||||
<el-table-column prop="errorName" label="故障名称" align="center" />
|
||||
<el-table-column prop="maintainer" label="维修人" align="center" />
|
||||
<el-table-column
|
||||
prop="maintainDateTime"
|
||||
label="维修时间"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column prop="reason" label="报错原因" align="center" />
|
||||
<el-table-column prop="remark" label="备注" align="center" />
|
||||
</el-table>
|
||||
</div>
|
||||
<!-- 维护保养统计 -->
|
||||
<div
|
||||
class="box-content-table"
|
||||
v-else-if="props.title === '维护保养统计'"
|
||||
>
|
||||
<el-table :data="tableList" style="width: 100%">
|
||||
<el-table-column
|
||||
prop="errorDateTime"
|
||||
label="故障时间"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column prop="facCode" label="设备编码" align="center" />
|
||||
<el-table-column prop="facName" label="设备名称" align="center" />
|
||||
<el-table-column
|
||||
prop="maintainDateTime"
|
||||
label="维修时间"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="errorName"
|
||||
label="错误内容"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column prop="status" label="状态" align="center">
|
||||
<template #default="{ row }">
|
||||
<div :style="row.isMaintain ? 'color:rgba(28, 238, 251, 1)' : ''">
|
||||
{{ row.isMaintain ? "已维修" : "未维修" }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<div style="float: right">
|
||||
<el-pagination
|
||||
v-model:current-page="params.pageIndex"
|
||||
:page-size="params.pageSize"
|
||||
:size="params.pageSize"
|
||||
layout="total, prev, pager, next"
|
||||
:total="total"
|
||||
prev-text="上一页"
|
||||
next-text="下一页"
|
||||
@current-change="getTableList"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, onMounted, reactive } from "vue";
|
||||
import {
|
||||
getPageMaintainInfo,
|
||||
getPageSparePart,
|
||||
getPageFaultAnalysisInfo,
|
||||
allDeviceNames,
|
||||
} from "@/api/equipmentManagement/index";
|
||||
const emit = defineEmits(["close"]);
|
||||
const props = defineProps({
|
||||
title: String,
|
||||
});
|
||||
|
||||
const tableList = ref([
|
||||
// {
|
||||
// maintenanceTime: "2023-03-16",
|
||||
// deviceNum: "Car1",
|
||||
// partNum: "SFTR-003DB001",
|
||||
// partName: "转向大齿轮",
|
||||
// },
|
||||
]);
|
||||
// 关闭按钮
|
||||
function close() {
|
||||
emit("close", false);
|
||||
}
|
||||
const params = reactive({
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
facName: "",
|
||||
});
|
||||
const isMaintain = ref(null);
|
||||
const total = ref(0);
|
||||
function getTableList() {
|
||||
// 获取表格数据
|
||||
if (props.title === "备件更换统计") {
|
||||
getPageSparePart(params).then((res) => {
|
||||
tableList.value = res.result.data;
|
||||
total.value = res.result.total;
|
||||
});
|
||||
} else if (props.title === "故障分析") {
|
||||
getPageFaultAnalysisInfo(params).then((res) => {
|
||||
tableList.value = res.result.data;
|
||||
total.value = res.result.total;
|
||||
});
|
||||
} else if (props.title === "维护保养统计") {
|
||||
params.isMaintain = isMaintain.value;
|
||||
getPageMaintainInfo(params).then((res) => {
|
||||
tableList.value = res.result.data;
|
||||
total.value = res.result.totalNum;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const allName = ref([]);
|
||||
// 获取所有设备名称接口
|
||||
function getAllDeviceNames() {
|
||||
allDeviceNames().then((res) => {
|
||||
allName.value = res.result;
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getAllDeviceNames();
|
||||
getTableList();
|
||||
});
|
||||
</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;
|
||||
&-table {
|
||||
height: vh(586);
|
||||
}
|
||||
}
|
||||
}
|
||||
: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(20);
|
||||
}
|
||||
.el-select1{
|
||||
position: absolute;
|
||||
right: vw(104);
|
||||
top: vh(7);
|
||||
width: vw(212);
|
||||
height: vh(36);
|
||||
:deep(.el-input){
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
.el-select2{
|
||||
position: absolute;
|
||||
right: vw(340);
|
||||
top: vh(7);
|
||||
width: vw(212);
|
||||
height: vh(36);
|
||||
:deep(.el-input){
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
:deep(.el-select) {
|
||||
|
||||
width: vw(212);
|
||||
height: vh(36);
|
||||
border: 1px solid;
|
||||
border-image: linear-gradient(
|
||||
180deg,
|
||||
rgba(25.000000409781933, 174.00000482797623, 250.00000029802322, 1),
|
||||
rgba(25.000000409781933, 174.00000482797623, 250.00000029802322, 0.5)
|
||||
)
|
||||
1 1;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:deep(.el-select:hover:not(.el-select--disabled) .el-input__wrapper),
|
||||
:deep(.el-select .el-input.is-focus .el-input__wrapper) {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
:deep(.el-input .el-input__wrapper.is-focus) {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
:deep(.el-select .el-input.is-focus .el-input__wrapper) {
|
||||
border-color: #dcdfe6 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,13 +2,16 @@
|
|||
<div :id="'pieChart' + dataMap.id"></div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, onMounted ,defineProps} from "vue";
|
||||
import { ref, onMounted,watch ,defineProps} from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import getPath from "@/utils/getPath";
|
||||
const props = defineProps({
|
||||
dataMap: Object,
|
||||
});
|
||||
function darwChart() {
|
||||
defineExpose({
|
||||
drawChart
|
||||
})
|
||||
function drawChart() {
|
||||
let myChart = echarts.init(
|
||||
document.getElementById("pieChart" + props.dataMap.id)
|
||||
);
|
||||
|
|
@ -107,7 +110,7 @@ function darwChart() {
|
|||
myChart.setOption(option);
|
||||
}
|
||||
onMounted(() => {
|
||||
darwChart();
|
||||
// darwChart();
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -3,47 +3,81 @@
|
|||
<div class="el-overlay">
|
||||
<div class="box">
|
||||
<div class="box-header">
|
||||
<div class="box-title">设备基本信息</div>
|
||||
<div class="box-title">零件基本信息</div>
|
||||
<div class="box-btn" @click="close"></div>
|
||||
</div>
|
||||
<div class="box-content">
|
||||
<div class="box-content-left">
|
||||
<div class="box-content-left-title">
|
||||
<span>设备列表</span>
|
||||
<span>零件列表</span>
|
||||
</div>
|
||||
<!-- 选择框 -->
|
||||
<div class="box-content-left-select">
|
||||
<el-select v-model="selectParams.params1" placeholder="请选择">
|
||||
<el-select
|
||||
v-model="deviceListParams.name"
|
||||
@clear="clearHandle"
|
||||
@change="
|
||||
deviceNameChange();
|
||||
getDeviceList();
|
||||
"
|
||||
clearable
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
v-for="item in allName"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
<el-select v-model="selectParams.params2" placeholder="请选择">
|
||||
<el-select
|
||||
v-model="deviceListParams.code"
|
||||
@change="deviceListParams.index=1;getDeviceList()"
|
||||
clearable
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
v-for="item in deviceIds"
|
||||
:key="item.id"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<!-- table -->
|
||||
<div class="box-content-left-table">
|
||||
<el-table :data="tableList" style="width: 100%">
|
||||
<el-table-column prop="id" label="代号" />
|
||||
<el-table-column prop="name" label="名称" />
|
||||
<el-table
|
||||
:row-class-name="getRowClassName"
|
||||
:data="tableList"
|
||||
style="width: 100%"
|
||||
@row-click="rowClick"
|
||||
>
|
||||
<el-table-column prop="code" label="代号" />
|
||||
<el-table-column prop="name" show-overflow-tooltip label="名称" />
|
||||
</el-table>
|
||||
|
||||
</div>
|
||||
<div style="float: right">
|
||||
<el-pagination
|
||||
v-model:current-page="deviceListParams.index"
|
||||
:page-size="deviceListParams.size"
|
||||
:size="deviceListParams.size"
|
||||
:pager-count='5'
|
||||
layout="total, prev, pager, next"
|
||||
:total="total"
|
||||
prev-text="上一页"
|
||||
next-text="下一页"
|
||||
@current-change="getDeviceList"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-content-right">
|
||||
<div class="box-content-right-title">
|
||||
<span>设备参数</span>
|
||||
<span>零件参数</span>
|
||||
</div>
|
||||
<div class="box-content-right-subtxt">
|
||||
<span>转向大齿轮</span>
|
||||
<span>{{ deviceMsg.name }}</span>
|
||||
</div>
|
||||
<div class="box-content-right-data">
|
||||
<section>
|
||||
|
|
@ -53,14 +87,21 @@
|
|||
</p>
|
||||
<div class="chart">
|
||||
<div class="chart-pie" v-for="item in pieList" :key="item.id">
|
||||
<pieChart :dataMap="item" />
|
||||
<pieChart :dataMap="item" ref="chartRef" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="message">
|
||||
<ul>
|
||||
<li><span>供应商：</span><span>------</span></li>
|
||||
<li><span>生产厂商：</span><span>-----</span></li>
|
||||
<li><span>备注信息：</span><span>机加件</span></li>
|
||||
<li>
|
||||
<span>供应商：</span><span>{{ deviceMsg.supplyer }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>生产厂商：</span
|
||||
><span>{{ deviceMsg.productor }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>备注信息：</span><span>{{ deviceMsg.remark }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -78,63 +119,90 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { onMounted, ref, reactive, toRefs } from "vue";
|
||||
import pieChart from "./components/pieChart";
|
||||
import {
|
||||
allDevicId,
|
||||
allDeviceNames,
|
||||
getEquipTable,
|
||||
getDeviceDetail,
|
||||
} from "@/api/equipmentManagement/index";
|
||||
const emit = defineEmits(["closeDeviceInfo"]);
|
||||
const options = ref([
|
||||
{
|
||||
value: 1,
|
||||
label: 1,
|
||||
},
|
||||
]);
|
||||
const selectParams = ref({
|
||||
params1: "",
|
||||
params2: "",
|
||||
|
||||
const tableList = ref([]);
|
||||
|
||||
// 获取设备列表数据
|
||||
const deviceListParams = reactive({
|
||||
name: "",
|
||||
code: "",
|
||||
size:8,
|
||||
index:1
|
||||
});
|
||||
const total = ref(0)
|
||||
const { facName, deviceCode } = toRefs(deviceListParams);
|
||||
function getDeviceList() {
|
||||
getEquipTable(deviceListParams).then((res) => {
|
||||
tableList.value = res.result.data;
|
||||
rowClick(tableList.value[0]);
|
||||
total.value = res.result.totalNum
|
||||
});
|
||||
}
|
||||
|
||||
const tableList = ref([
|
||||
{
|
||||
id: "SFTR-003DB013",
|
||||
name: "周边盖板",
|
||||
},
|
||||
{
|
||||
id: "SFTR-003DB013",
|
||||
name: "遥控天线",
|
||||
},
|
||||
{
|
||||
id: "SFTR-003DB013",
|
||||
name: "周边盖板",
|
||||
},
|
||||
{
|
||||
id: "SFTR-003DB013",
|
||||
name: "遥控天线",
|
||||
},
|
||||
{
|
||||
id: "SFTR-003DB013",
|
||||
name: "周边盖板",
|
||||
},
|
||||
{
|
||||
id: "SFTR-003DB013",
|
||||
name: "遥控天线",
|
||||
},
|
||||
{
|
||||
id: "SFTR-003DB013",
|
||||
name: "周边盖板",
|
||||
},
|
||||
{
|
||||
id: "SFTR-003DB013",
|
||||
name: "遥控天线",
|
||||
},
|
||||
{
|
||||
id: "SFTR-003DB013",
|
||||
name: "周边盖板",
|
||||
},
|
||||
{
|
||||
id: "SFTR-003DB013",
|
||||
name: "遥控天线",
|
||||
},
|
||||
]);
|
||||
const allName = ref([]);
|
||||
function getAllDeviceNames() {
|
||||
allDeviceNames().then((res) => {
|
||||
allName.value = res.result;
|
||||
});
|
||||
}
|
||||
|
||||
// 所有设备id
|
||||
const deviceIds = ref([]);
|
||||
function deviceNameChange() {
|
||||
deviceListParams.code = "";
|
||||
deviceListParams.index = 1
|
||||
allDevicId({ name: deviceListParams.name }).then((res) => {
|
||||
if (res.result.length) {
|
||||
deviceIds.value = res.result[0].models;
|
||||
}
|
||||
});
|
||||
}
|
||||
// 清空事件
|
||||
function clearHandle() {
|
||||
deviceListParams.index = 1
|
||||
deviceListParams.code = "";
|
||||
deviceIds.value = "";
|
||||
}
|
||||
|
||||
const chartRef = ref(null);
|
||||
|
||||
// 初始id
|
||||
const currentRowId = ref(null);
|
||||
|
||||
const getRowClassName = ({ row, rowIndex }) => {
|
||||
if (currentRowId.value == row.id) {
|
||||
return "highlight-row";
|
||||
}
|
||||
return "";
|
||||
};
|
||||
// 设备详情信息
|
||||
const deviceMsg = ref([]);
|
||||
function rowClick(row) {
|
||||
currentRowId.value = row.id;
|
||||
getDeviceDetail({ id: row.id }).then((res) => {
|
||||
deviceMsg.value = res.result;
|
||||
if (res.result.stockNum / res.result.stockWarn > 1) {
|
||||
pieList.value[0].total = pieList.value[0].value;
|
||||
}
|
||||
pieList.value[0].value = res.result.stockNum;
|
||||
pieList.value[1].value = res.result.life;
|
||||
chartRef.value.forEach((el, index) => {
|
||||
el.drawChart();
|
||||
});
|
||||
// if (pieChart2.value) {
|
||||
// pieChart2.value.darwChart();
|
||||
// }
|
||||
});
|
||||
}
|
||||
// 饼图数据列表
|
||||
const pieList = ref([
|
||||
{
|
||||
|
|
@ -147,15 +215,30 @@ const pieList = ref([
|
|||
id: 2,
|
||||
name: "使用年限",
|
||||
value: 2,
|
||||
total: 10,
|
||||
// total: 10,
|
||||
},
|
||||
]);
|
||||
// 关闭设备的基本信息弹窗
|
||||
function close() {
|
||||
emit("closeDeviceInfo", -1);
|
||||
}
|
||||
onMounted(() => {
|
||||
getDeviceList();
|
||||
getAllDeviceNames();
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
:deep(.highlight-row) {
|
||||
background-color:rgba(174, 211, 255, 0.2) !important;
|
||||
}
|
||||
// :deep(.row) {
|
||||
// background-color: rgba(174, 211, 255, 0.2) !important;
|
||||
// // background: #000 !important;
|
||||
// }
|
||||
// :deep(.el-table__body tr.current-row > td.el-table__cell) {
|
||||
// background: rgba(174, 211, 255, 0.2) !important;
|
||||
// color: #ffffff !important;
|
||||
// }
|
||||
.box {
|
||||
width: vw(1380);
|
||||
height: vh(716);
|
||||
|
|
@ -292,7 +375,7 @@ function close() {
|
|||
position: absolute;
|
||||
width: vw(12);
|
||||
height: vh(12);
|
||||
background-image: url('@/assets/images/dialog/dot.png');
|
||||
background-image: url("@/assets/images/dialog/dot.png");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -307,9 +390,33 @@ function close() {
|
|||
display: flex;
|
||||
}
|
||||
&-table {
|
||||
height: vh(480);
|
||||
height: vh(440);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-input__wrapper) {
|
||||
background-color: transparent;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
:deep(.el-input) {
|
||||
border: 1px solid;
|
||||
border-image: linear-gradient(
|
||||
180deg,
|
||||
rgba(25.000000409781933, 174.00000482797623, 250.00000029802322, 1),
|
||||
rgba(25.000000409781933, 174.00000482797623, 250.00000029802322, 0.6)
|
||||
)
|
||||
1 1;
|
||||
}
|
||||
:deep(.el-select .el-input.is-focus .el-input__wrapper) {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
:deep(.el-table .cell ){
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
:deep(.el-pagination__total){
|
||||
left: vw(40) !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -13,30 +13,58 @@
|
|||
</div>
|
||||
<!-- 选择框 -->
|
||||
<div class="box-content-left-select">
|
||||
<el-select v-model="selectParams.params1" placeholder="请选择">
|
||||
<el-select
|
||||
@clear="clearHandle"
|
||||
@change="
|
||||
deviceNameChange();
|
||||
getDeviceList();
|
||||
"
|
||||
clearable
|
||||
v-model="deviceListParams.deviceName"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
v-for="item in allName"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
<el-select v-model="selectParams.params2" placeholder="请选择">
|
||||
<el-select
|
||||
@change="deviceListParams.index = 1;getDeviceList()"
|
||||
clearable
|
||||
v-model="deviceListParams.deviceCode"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
v-for="item in deviceIds"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<!-- table -->
|
||||
<div class="box-content-left-table">
|
||||
<el-table :data="tableList" style="width: 100%">
|
||||
<el-table-column prop="id" label="设备编号" />
|
||||
<el-table-column prop="name" label="设备名称" />
|
||||
<el-table-column prop="facCode" label="设备编号" />
|
||||
<el-table-column prop="deviceName" label="设备名称" />
|
||||
</el-table>
|
||||
</div>
|
||||
<div style="float: right">
|
||||
<el-pagination
|
||||
v-model:current-page="deviceListParams.index"
|
||||
:page-size="deviceListParams.size"
|
||||
:size="deviceListParams.size"
|
||||
:pager-count='5'
|
||||
layout="total, prev, pager, next"
|
||||
:total="total"
|
||||
prev-text="上一页"
|
||||
next-text="下一页"
|
||||
@current-change="getDeviceList"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-content-right">
|
||||
<div class="box-content-right-top">
|
||||
|
|
@ -57,18 +85,18 @@
|
|||
:key="index"
|
||||
>
|
||||
<p>
|
||||
<span>{{ item.name }}</span>
|
||||
<span>{{ item.value }}</span>
|
||||
<span>{{item.equipment.facName }} {{item.equipment.facCode}}</span>
|
||||
<span>{{ item.damageRatio*100 }}%</span>
|
||||
</p>
|
||||
<div class="switch-item-progress"></div>
|
||||
<div class="switch-item-progress" :style="'width:' + item.damageRatio*100 + '%'"></div>
|
||||
<div class="switch-item-time">
|
||||
<div>
|
||||
<span style="color:rgba(137, 215, 253, 1)">预计更换时间：</span>
|
||||
<span>2025-03-04</span>
|
||||
</div>
|
||||
<i>
|
||||
|
||||
</i>
|
||||
<div>
|
||||
<span style="color: rgba(137, 215, 253, 1)"
|
||||
>预计更换时间：</span
|
||||
>
|
||||
<span>{{item.replaceTime}}</span>
|
||||
</div>
|
||||
<i> </i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -80,7 +108,16 @@
|
|||
</template>
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { onMounted, ref, nextTick } from "vue";
|
||||
import { onMounted, ref, nextTick, reactive, toRefs } from "vue";
|
||||
import {
|
||||
allDevicId,
|
||||
allDeviceNames,
|
||||
getPageEquipList,
|
||||
getPageDamageEquip,
|
||||
countYearErrors,
|
||||
getEquipmentName,
|
||||
getEquipCode
|
||||
} from "@/api/equipmentManagement/index";
|
||||
const emit = defineEmits(["closeEquipmentAnalysis"]);
|
||||
const options = ref([
|
||||
{
|
||||
|
|
@ -88,10 +125,6 @@ const options = ref([
|
|||
label: 1,
|
||||
},
|
||||
]);
|
||||
const selectParams = ref({
|
||||
params1: "",
|
||||
params2: "",
|
||||
});
|
||||
const tableList = ref([
|
||||
{
|
||||
id: "SFTR-003DB013",
|
||||
|
|
@ -135,7 +168,7 @@ const tableList = ref([
|
|||
},
|
||||
]);
|
||||
// 折线图
|
||||
function drawLineChart() {
|
||||
function drawLineChart(data) {
|
||||
let dom = document.querySelector("#lineChart");
|
||||
dom.removeAttribute("_echarts_instance_");
|
||||
let myChart;
|
||||
|
|
@ -168,14 +201,12 @@ function drawLineChart() {
|
|||
},
|
||||
},
|
||||
axisTick: { show: false },
|
||||
data: ["1", "2", "3", "4", "5", "6", "7"],
|
||||
data: [1,2,3,4,5,6,7,8,9,10,11,12],
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
min: 0,
|
||||
max: 1,
|
||||
splitNumber: 5,
|
||||
splitLine: {
|
||||
show: true,
|
||||
|
|
@ -202,7 +233,7 @@ function drawLineChart() {
|
|||
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: "#3deaff", // 线条颜色
|
||||
color: "rgba(24, 174, 250, 1)", // 线条颜色
|
||||
},
|
||||
},
|
||||
areaStyle: {
|
||||
|
|
@ -221,11 +252,13 @@ function drawLineChart() {
|
|||
false
|
||||
),
|
||||
|
||||
shadowColor: "rgba(25, 174, 250, 1)", //阴影颜色
|
||||
// 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],
|
||||
data: data.map(el=>{
|
||||
return el
|
||||
}),
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
@ -239,32 +272,93 @@ function drawLineChart() {
|
|||
}
|
||||
// 易损件
|
||||
const switchList = ref([
|
||||
{
|
||||
name: "栖型光电开关INCMD[1]",
|
||||
value: "99%",
|
||||
updateTime: "2025-03-04",
|
||||
},
|
||||
{
|
||||
name: "栖型光电开关INCMD[1]",
|
||||
value: "99%",
|
||||
updateTime: "2025-03-04",
|
||||
},
|
||||
{
|
||||
name: "栖型光电开关INCMD[1]",
|
||||
value: "99%",
|
||||
updateTime: "2025-03-04",
|
||||
},
|
||||
{
|
||||
name: "栖型光电开关INCMD[1]",
|
||||
value: "99%",
|
||||
updateTime: "2025-03-04",
|
||||
},
|
||||
// {
|
||||
// name: "栖型光电开关INCMD[1]",
|
||||
// value: "99%",
|
||||
// updateTime: "2025-03-04",
|
||||
// },
|
||||
// {
|
||||
// name: "栖型光电开关INCMD[1]",
|
||||
// value: "99%",
|
||||
// updateTime: "2025-03-04",
|
||||
// },
|
||||
// {
|
||||
// name: "栖型光电开关INCMD[1]",
|
||||
// value: "99%",
|
||||
// updateTime: "2025-03-04",
|
||||
// },
|
||||
// {
|
||||
// name: "栖型光电开关INCMD[1]",
|
||||
// value: "99%",
|
||||
// updateTime: "2025-03-04",
|
||||
// },
|
||||
]);
|
||||
function close() {
|
||||
emit("closeEquipmentAnalysis", -1);
|
||||
}
|
||||
|
||||
// 获取设备列表数据
|
||||
const deviceListParams = reactive({
|
||||
deviceName: "",
|
||||
deviceCode: "",
|
||||
size:8,
|
||||
index:1
|
||||
});
|
||||
const total = ref(0)
|
||||
function getDeviceList() {
|
||||
getPageEquipList(deviceListParams).then((res) => {
|
||||
tableList.value = res.result.data;
|
||||
total.value = res.result.totalNum
|
||||
});
|
||||
}
|
||||
// 所有设备名称
|
||||
const { facName, deviceCode } = toRefs(deviceListParams);
|
||||
const allName = ref([]);
|
||||
function getAllDeviceNames() {
|
||||
deviceListParams.deviceCode = "";
|
||||
allDeviceNames().then((res) => {
|
||||
allName.value = res.result;
|
||||
});
|
||||
}
|
||||
// 所有设备id
|
||||
const deviceIds = ref([]);
|
||||
function deviceNameChange() {
|
||||
deviceListParams.index = 1
|
||||
deviceListParams.deviceCode = "";
|
||||
allDevicId({ name: deviceListParams.deviceName }).then((res) => {
|
||||
if (res.result.length) {
|
||||
deviceIds.value = res.result[0].models;
|
||||
}
|
||||
});
|
||||
}
|
||||
function clearHandle() {
|
||||
deviceListParams.index = 1
|
||||
deviceListParams.deviceCode = "";
|
||||
deviceIds.value = "";
|
||||
}
|
||||
// 获取运行情况数据请求
|
||||
function OperationData() {
|
||||
countYearErrors().then((res) => {
|
||||
drawLineChart(res.result.slice(1));
|
||||
});
|
||||
}
|
||||
|
||||
const params = {
|
||||
facName:'',
|
||||
pageIndex:1,
|
||||
pageSize:4
|
||||
}
|
||||
// 获取易损件数据
|
||||
function getPageDamageEquipList(){
|
||||
getPageDamageEquip(params).then(res=>{
|
||||
switchList.value = res.result.data
|
||||
})
|
||||
}
|
||||
onMounted(() => {
|
||||
drawLineChart();
|
||||
getAllDeviceNames();
|
||||
getDeviceList();
|
||||
OperationData();
|
||||
getPageDamageEquipList()
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
|
|
@ -393,29 +487,32 @@ onMounted(() => {
|
|||
}
|
||||
//进度条
|
||||
&-progress {
|
||||
margin-top: vh(11);
|
||||
width: 90%;
|
||||
margin-top: vh(11);
|
||||
// width: 90%;
|
||||
height: vh(10);
|
||||
border-radius: vh(8);
|
||||
background:linear-gradient( to left, #87F8FF 0%, #1CEEFB 3%, rgba(28,238,251,0) 100%);
|
||||
background: linear-gradient(
|
||||
to left,
|
||||
#87f8ff 0%,
|
||||
#1ceefb 3%,
|
||||
rgba(28, 238, 251, 0) 100%
|
||||
);
|
||||
}
|
||||
// 底部时间
|
||||
&-time{
|
||||
font-size: .875rem;
|
||||
margin-top: vh(10);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
i{
|
||||
display: inline-block;
|
||||
width: vw(14);
|
||||
height: vh(14);
|
||||
cursor: pointer;
|
||||
background-image: url("@/assets/images/dialog/add-icon.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
&-time {
|
||||
font-size: 0.875rem;
|
||||
margin-top: vh(10);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
i {
|
||||
display: inline-block;
|
||||
width: vw(17);
|
||||
height: vh(17);
|
||||
cursor: pointer;
|
||||
background-image: url("@/assets/images/dialog/add-icon.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -428,9 +525,31 @@ onMounted(() => {
|
|||
display: flex;
|
||||
}
|
||||
&-table {
|
||||
height: vh(480);
|
||||
height: vh(440);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-input__wrapper) {
|
||||
background-color: transparent;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
:deep(.el-input) {
|
||||
border: 1px solid;
|
||||
border-image: linear-gradient(
|
||||
180deg,
|
||||
rgba(25.000000409781933, 174.00000482797623, 250.00000029802322, 1),
|
||||
rgba(25.000000409781933, 174.00000482797623, 250.00000029802322, 0.6)
|
||||
)
|
||||
1 1;
|
||||
}
|
||||
:deep(.el-input__inner) {
|
||||
color: #fff;
|
||||
}
|
||||
:deep(.el-select .el-input.is-focus .el-input__wrapper) {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
:deep(.el-pagination__total){
|
||||
left: vw(40) !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,797 @@
|
|||
<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-box1">
|
||||
<div class="title">
|
||||
<span>设备健康指数</span>
|
||||
<el-date-picker
|
||||
v-model="value1"
|
||||
type="year"
|
||||
placeholder="请选择年份"
|
||||
@change="getHealthIndex"
|
||||
/>
|
||||
</div>
|
||||
<div id="healthIndex"></div>
|
||||
</div>
|
||||
<div class="box-content-box2">
|
||||
<div class="title">
|
||||
<span>备件更换统计</span>
|
||||
|
||||
<div style="display: flex; algin-item: center">
|
||||
<el-date-picker
|
||||
v-model="value2"
|
||||
type="year"
|
||||
placeholder="请选择年份"
|
||||
/>
|
||||
<span
|
||||
style="margin-left: 1.25rem"
|
||||
class="more"
|
||||
@click="openDialog($event, 1)"
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="spareParts"></div>
|
||||
</div>
|
||||
<div class="box-content-box3">
|
||||
<div class="title">
|
||||
<span>故障分析</span>
|
||||
<div style="display: flex; algin-item: center">
|
||||
<el-date-picker
|
||||
v-model="value3"
|
||||
type="year"
|
||||
placeholder="请选择年份"
|
||||
@change="faultAnalysisInterface"
|
||||
/>
|
||||
<span
|
||||
style="margin-left: 1.25rem"
|
||||
class="more"
|
||||
@click="openDialog($event, 1)"
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="fault"></div>
|
||||
</div>
|
||||
<div class="box-content-box4">
|
||||
<div class="title">
|
||||
<span>维护保养统计</span>
|
||||
<span class="more" @click="openDialog"></span>
|
||||
</div>
|
||||
<div class="maintenance">
|
||||
<div class="maintenance-left">
|
||||
<img src="@/assets/images/dialog/statistics.png" alt="" />
|
||||
<div class="avg">
|
||||
<span>平均维修时间</span>
|
||||
<span>
|
||||
{{ maintenanceList[2] }}
|
||||
<span
|
||||
style="font-size: 0.875rem; color: #fff; display: inline"
|
||||
>小时</span
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="maintenance-right">
|
||||
<div class="handle">
|
||||
<span>已处理（台）</span>
|
||||
<span>{{ maintenanceList[0] }}</span>
|
||||
</div>
|
||||
<div class="untreated">
|
||||
<span>未处理（台）</span>
|
||||
<span>{{ maintenanceList[1] }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 健康管理内部弹窗 -->
|
||||
<healthManagementDialog
|
||||
@close="receiveMsg"
|
||||
v-if="maintenanceDialogShow"
|
||||
:title="dialogTitle"
|
||||
/>
|
||||
</template>
|
||||
<script setup>
|
||||
import healthManagementDialog from "./components/health/index.vue";
|
||||
import * as echarts from "echarts";
|
||||
import { onMounted, ref, nextTick } from "vue";
|
||||
import {
|
||||
countSparePart,
|
||||
getErrorRate,
|
||||
countMaintainRecord,
|
||||
countYearErrors,
|
||||
allDeviceNames,
|
||||
} from "@/api/equipmentManagement/index";
|
||||
const emit = defineEmits(["closeHealth"]);
|
||||
function close() {
|
||||
emit("closeHealth", -1);
|
||||
}
|
||||
const maintenanceDialogShow = ref(false);
|
||||
const dialogTitle = ref("");
|
||||
// 关闭弹窗
|
||||
function receiveMsg(val) {
|
||||
maintenanceDialogShow.value = val;
|
||||
}
|
||||
function openDialog(event, val) {
|
||||
if (val !== undefined) {
|
||||
dialogTitle.value =
|
||||
event.target.parentNode.previousElementSibling.innerText;
|
||||
maintenanceDialogShow.value = true;
|
||||
} else {
|
||||
dialogTitle.value = event.target.previousElementSibling.innerText;
|
||||
maintenanceDialogShow.value = true;
|
||||
}
|
||||
// console.log(event.target.previousElementSibling.innerText);
|
||||
}
|
||||
// 设备健康指数ecahrts
|
||||
function drawHealthIndex(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 = []
|
||||
for (let key in list) {
|
||||
if (key !== "错误总数") {
|
||||
result.push({
|
||||
name: key,
|
||||
value: list[key],
|
||||
});
|
||||
}
|
||||
}
|
||||
let dom = document.querySelector("#healthIndex");
|
||||
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,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
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);", //添加阴影
|
||||
},
|
||||
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,
|
||||
// itemStyle: {
|
||||
// color: "rgba(28, 238, 251, 1)",
|
||||
// },
|
||||
},
|
||||
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) => {
|
||||
if (el.name === "往复式提升机") {
|
||||
return {
|
||||
value: el.value,
|
||||
name: "往复式提升机",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(28, 238, 251, 0.62)",
|
||||
},
|
||||
},
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
value: el.value,
|
||||
name: "智能双向穿梭车",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(4, 132, 189, 0.62)",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
}),
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
// 备件更换统计echarts
|
||||
function drawSpareParts(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 = []
|
||||
for (let key in list) {
|
||||
if (key !== "总数") {
|
||||
result.push({
|
||||
name: key,
|
||||
value: list[key],
|
||||
});
|
||||
}
|
||||
}
|
||||
let dom = document.querySelector("#spareParts");
|
||||
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,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
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);", //添加阴影
|
||||
},
|
||||
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,
|
||||
// itemStyle: {
|
||||
// color: "rgba(28, 238, 251, 1)",
|
||||
// },
|
||||
},
|
||||
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();
|
||||
});
|
||||
}
|
||||
// 故障分析echarts
|
||||
function drawFault(data) {
|
||||
let dom = document.querySelector("#fault");
|
||||
dom.removeAttribute("_echarts_instance_");
|
||||
let myChart;
|
||||
myChart = echarts.init(dom);
|
||||
let option = {
|
||||
tooltip: {},
|
||||
grid: {
|
||||
top: "8%",
|
||||
left: "1%",
|
||||
right: "1%",
|
||||
bottom: "8%",
|
||||
containLabel: true,
|
||||
},
|
||||
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, 4, 5, 6, 7, 8, 9, 10, 11, 12],
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
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: data.map((el) => {
|
||||
return el;
|
||||
}),
|
||||
},
|
||||
],
|
||||
};
|
||||
nextTick(() => {
|
||||
myChart.setOption(option);
|
||||
});
|
||||
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
// 健康指数参数
|
||||
const value1 = ref(new Date());
|
||||
// 故障分析参数
|
||||
const value3 = ref(new Date());
|
||||
// 备件更换统计
|
||||
const value2 = ref(new Date());
|
||||
|
||||
// 获取健康指数接口
|
||||
const healthIndexList = ref([]);
|
||||
function getHealthIndex() {
|
||||
// console.log(value1.value.getFullYear(),'xxxxxxxxxxx');
|
||||
let params = {
|
||||
year: value1.value.getFullYear(),
|
||||
};
|
||||
getErrorRate(params).then((res) => {
|
||||
|
||||
|
||||
drawHealthIndex(res.result);
|
||||
});
|
||||
}
|
||||
|
||||
const maintenanceList = ref([]);
|
||||
// 维护保养统计接口
|
||||
function maintenanceInterface() {
|
||||
countMaintainRecord().then((res) => {
|
||||
for (let key in res.result) {
|
||||
maintenanceList.value.push(res.result[key]);
|
||||
}
|
||||
});
|
||||
}
|
||||
// 故障分析接口
|
||||
function faultAnalysisInterface() {
|
||||
let params = {
|
||||
year: value3.value.getFullYear(),
|
||||
};
|
||||
countYearErrors(params).then((res) => {
|
||||
drawFault(res.result.slice(1));
|
||||
});
|
||||
}
|
||||
|
||||
const sparePartsList = [];
|
||||
// 备件更换统计
|
||||
function sparePartsInterface() {
|
||||
let params = {
|
||||
year: value2.value.getFullYear(),
|
||||
};
|
||||
countSparePart(params).then((res) => {
|
||||
|
||||
drawSpareParts(res.result);
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
sparePartsInterface();
|
||||
faultAnalysisInterface();
|
||||
getHealthIndex();
|
||||
maintenanceInterface();
|
||||
});
|
||||
</script>
|
||||
<style scoped lang='scss'>
|
||||
#healthIndex,
|
||||
#spareParts,
|
||||
#fault {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.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: vw(20) vh(20);
|
||||
box-sizing: border-box;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
align-content: space-between;
|
||||
&-box1,
|
||||
&-box2,
|
||||
&-box3,
|
||||
&-box4 {
|
||||
width: vw(660);
|
||||
height: vh(298);
|
||||
border: 1px solid;
|
||||
border-image: linear-gradient(
|
||||
180deg,
|
||||
rgba(144, 218, 255, 0.5),
|
||||
rgba(144, 218, 255, 0.1000000015)
|
||||
)
|
||||
1 1;
|
||||
padding: vh(20) vw(20);
|
||||
box-sizing: border-box;
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
text-shadow: 0px 0px 6px #19aefa;
|
||||
width: vw(620);
|
||||
height: vh(36);
|
||||
line-height: vh(36);
|
||||
background-image: url("@/assets/images/dialog/title3.png");
|
||||
box-sizing: border-box;
|
||||
background-size: 100% 100%;
|
||||
padding-left: vw(36);
|
||||
font-family: "pangmen";
|
||||
font-size: 1.375rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//维修保养
|
||||
.maintenance {
|
||||
padding: vh(26) vw(30) 0 vw(42);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
&-left {
|
||||
margin-right: vw(56);
|
||||
img {
|
||||
width: vw(140);
|
||||
height: vh(122);
|
||||
}
|
||||
.avg {
|
||||
text-align: center;
|
||||
margin-bottom: vh(16);
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
span:nth-child(1) {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
span:nth-child(2) {
|
||||
color: rgba(2, 192, 255, 1);
|
||||
font-size: 1.625rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-right {
|
||||
.handle,
|
||||
.untreated {
|
||||
width: vw(352);
|
||||
height: vh(80);
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 vw(24) 0 vw(94);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.handle {
|
||||
margin-bottom: vh(30);
|
||||
background-image: url("@/assets/images/dialog/handle.png");
|
||||
span:nth-child(2) {
|
||||
font-size: 1.625rem;
|
||||
color: rgba(28, 238, 251, 1);
|
||||
}
|
||||
}
|
||||
.untreated {
|
||||
background-image: url("@/assets/images/dialog/untreated.png");
|
||||
span:nth-child(2) {
|
||||
font-size: 1.625rem;
|
||||
color: rgba(255, 206, 84, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
: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;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -7,10 +7,82 @@
|
|||
</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>
|
||||
|
|
@ -18,15 +90,431 @@
|
|||
</template>
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { onMounted, ref, nextTick } from "vue";
|
||||
import { onMounted, ref, nextTick, reactive } from "vue";
|
||||
import { countKeepRecord ,getMaintenancePlan,allDeviceNames} from "@/api/equipmentManagement/index";
|
||||
const emit = defineEmits(["closeMaintenance"]);
|
||||
|
||||
function close() {
|
||||
|
||||
emit("closeMaintenance", -1);
|
||||
}
|
||||
onMounted(()=>{
|
||||
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 = [];
|
||||
for (let key in list) {
|
||||
if (key != "总数") {
|
||||
result.push({
|
||||
name: key,
|
||||
value: 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);", //添加阴影
|
||||
},
|
||||
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 = [];
|
||||
for (let key in list) {
|
||||
if (key != "总数") {
|
||||
result.push({
|
||||
name: key,
|
||||
value: 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);", //添加阴影
|
||||
},
|
||||
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:3,
|
||||
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 {
|
||||
|
|
@ -66,18 +554,173 @@ onMounted(()=>{
|
|||
box-sizing: border-box;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
&-top,&-bottom{
|
||||
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;
|
||||
height: vh(288);
|
||||
.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>
|
||||
|
|
@ -0,0 +1,523 @@
|
|||
<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-title">
|
||||
<span>监测分析统计</span>
|
||||
<div class="box-content-selelct">
|
||||
<el-form :inline="true" :model="form" class="demo-form-inline">
|
||||
<el-form-item label="电池筛选">
|
||||
<el-select
|
||||
v-model="form.battery"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
>
|
||||
<el-option label="Zone one" value="shanghai" />
|
||||
<el-option label="Zone two" value="beijing" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间筛选">
|
||||
<el-select v-model="form.date" placeholder="请选择" clearable>
|
||||
<el-option label="Zone one" value="shanghai" />
|
||||
<el-option label="Zone two" value="beijing" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 电流电压echart图 -->
|
||||
<div id="electricity"></div>
|
||||
<!-- 温度echart图 -->
|
||||
<div id="heart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
const emit = defineEmits(["closeOnline"]);
|
||||
function close() {
|
||||
emit("closeOnline", -1);
|
||||
}
|
||||
const form = reactive({
|
||||
battery: "", //电池筛选
|
||||
date: "",
|
||||
});
|
||||
// 电力电流echart
|
||||
function drawElectricity() {
|
||||
let dom = document.querySelector("#electricity");
|
||||
dom.removeAttribute("_echarts_instance_");
|
||||
let myChart;
|
||||
myChart = echarts.init(dom);
|
||||
const colorList = ["#9E87FF", "#73DDFF", "#fe9a8b", "#F56948", "#9E87FF"];
|
||||
let option = {
|
||||
legend: {
|
||||
icon: "rect",
|
||||
top: "5%",
|
||||
right: "center",
|
||||
itemWidth: 16,
|
||||
itemHeight:4,
|
||||
itemGap:20,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
|
||||
trigger: "axis",
|
||||
borderColor:'rgba(174, 211, 255, 1)',
|
||||
backgroundColor: 'rgba(8, 54, 86, .7)',
|
||||
textStyle: {
|
||||
color: "#FFF",
|
||||
},
|
||||
padding: [10, 10],
|
||||
formatter: function (params) {
|
||||
// params 是一个数组，数组中包含每个系列的数据信息
|
||||
let result = params[0].name + '<br/>';
|
||||
params.forEach(function (item) {
|
||||
result += item.seriesName + ': ' + item.value + (item.seriesName=='电流'?'A':'V') + '<br/>';
|
||||
});
|
||||
return result;
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: "20%",
|
||||
right:'4%',
|
||||
left:'2%',
|
||||
bottom:'6%'
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: ["3.10", "3.10", "3.10", "3.10", "3.10", "3.10", "3.10"],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(56, 72, 89, 1)",
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show:false,
|
||||
interval: 0,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
// 默认x轴字体大小
|
||||
fontSize: 12,
|
||||
// margin:文字到x轴的距离
|
||||
margin: 15,
|
||||
},
|
||||
axisPointer: {
|
||||
label: {
|
||||
// padding: [11, 5, 7],
|
||||
padding: [0, 0, 10, 0],
|
||||
/*
|
||||
除了padding[0]建议必须是0之外，其他三项可随意设置
|
||||
|
||||
和CSSpadding相同，[上，右，下，左]
|
||||
|
||||
如果需要下边线超出文字，设左右padding即可，注：左右padding最好相同
|
||||
|
||||
padding[2]的10:
|
||||
|
||||
10 = 文字距下边线的距离 + 下边线的宽度
|
||||
|
||||
如：UI图中文字距下边线距离为7 下边线宽度为2
|
||||
|
||||
则padding: [0, 0, 9, 0]
|
||||
|
||||
*/
|
||||
// 这里的margin和axisLabel的margin要一致!
|
||||
margin: 15,
|
||||
// 移入时的字体大小
|
||||
fontSize: 12,
|
||||
global: false, // 缺省为 false
|
||||
},
|
||||
},
|
||||
boundaryGap: false,
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
name:'单位:V',
|
||||
nameTextStyle:{
|
||||
color:'#fff',
|
||||
padding:[0,0,0,-10]
|
||||
},
|
||||
type: "value",
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#DCE2E8",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle:{
|
||||
type:'dashed',
|
||||
color:'rgba(255,255,255,0.2)'
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
name:'单位:A',
|
||||
type: "value",
|
||||
nameTextStyle:{
|
||||
color:'#fff',
|
||||
padding:[0,-30,0,0]
|
||||
},
|
||||
position: "right",
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
formatter: "{value}",
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "电流",
|
||||
type: "line",
|
||||
data: [10, 10, 30, 12, 15, 3, 7],
|
||||
symbolSize: 1,
|
||||
symbol: "circle",
|
||||
smooth: true,
|
||||
yAxisIndex: 0,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
// width: 1,
|
||||
color: 'rgba(25, 174, 250, 1)'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "电压",
|
||||
type: "line",
|
||||
data: [150, 120, 170, 140, 500, 160, 110],
|
||||
symbolSize: 1,
|
||||
yAxisIndex: 1,
|
||||
symbol: "circle",
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
// width: 5,
|
||||
color: 'rgba(28, 238, 251, 1)'
|
||||
},
|
||||
itemStyle: {
|
||||
color: 'rgba(28, 238, 251, 1)',
|
||||
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
}
|
||||
// 温度echarts
|
||||
function drawHeartChart(){
|
||||
let dom = document.querySelector("#heart");
|
||||
dom.removeAttribute("_echarts_instance_");
|
||||
let myChart;
|
||||
myChart = echarts.init(dom);
|
||||
const colorList = ["rgba(25, 174, 250, 1)", "rgba(28, 238, 251, 1)", "rgba(255, 206, 84, 1)", "rgba(174, 211, 255, 1)"];
|
||||
let option = {
|
||||
legend: {
|
||||
icon: "rect",
|
||||
top: "5%",
|
||||
right: "center",
|
||||
itemWidth: 16,
|
||||
itemHeight:4,
|
||||
itemGap:20,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
|
||||
trigger: "axis",
|
||||
borderColor:'rgba(174, 211, 255, 1)',
|
||||
backgroundColor: 'rgba(8, 54, 86, .7)',
|
||||
textStyle: {
|
||||
color: "#FFF",
|
||||
},
|
||||
padding: [10, 10],
|
||||
formatter: function (params) {
|
||||
// params 是一个数组，数组中包含每个系列的数据信息
|
||||
let result = params[0].name + '<br/>';
|
||||
params.forEach(function (item) {
|
||||
result += item.seriesName + ': ' + item.value + '℃' + '<br/>';
|
||||
});
|
||||
return result;
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: "20%",
|
||||
right:'4%',
|
||||
left:'2%',
|
||||
bottom:'6%'
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: ["3.10", "3.10", "3.10", "3.10", "3.10", "3.10", "3.10"],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(56, 72, 89, 1)",
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show:false,
|
||||
interval: 0,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
// 默认x轴字体大小
|
||||
fontSize: 12,
|
||||
// margin:文字到x轴的距离
|
||||
margin: 15,
|
||||
},
|
||||
axisPointer: {
|
||||
label: {
|
||||
// padding: [11, 5, 7],
|
||||
padding: [0, 0, 10, 0],
|
||||
/*
|
||||
除了padding[0]建议必须是0之外，其他三项可随意设置
|
||||
|
||||
和CSSpadding相同，[上，右，下，左]
|
||||
|
||||
如果需要下边线超出文字，设左右padding即可，注：左右padding最好相同
|
||||
|
||||
padding[2]的10:
|
||||
|
||||
10 = 文字距下边线的距离 + 下边线的宽度
|
||||
|
||||
如：UI图中文字距下边线距离为7 下边线宽度为2
|
||||
|
||||
则padding: [0, 0, 9, 0]
|
||||
|
||||
*/
|
||||
// 这里的margin和axisLabel的margin要一致!
|
||||
margin: 15,
|
||||
// 移入时的字体大小
|
||||
fontSize: 12,
|
||||
global: false, // 缺省为 false
|
||||
},
|
||||
},
|
||||
boundaryGap: false,
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
name:'单位:V',
|
||||
nameTextStyle:{
|
||||
color:'#fff',
|
||||
padding:[0,0,0,-10]
|
||||
},
|
||||
type: "value",
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#DCE2E8",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle:{
|
||||
type:'dashed',
|
||||
color:'rgba(255,255,255,0.2)'
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "温度1",
|
||||
type: "line",
|
||||
data: [10, 10, 30, 12, 15, 3, 7],
|
||||
symbolSize: 1,
|
||||
symbol: "rect",
|
||||
smooth: true,
|
||||
yAxisIndex: 0,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
// width: 1,
|
||||
color: colorList[0]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "温度2",
|
||||
type: "line",
|
||||
data: [22, 3, 4, 5, 6, 9, 11],
|
||||
symbolSize: 1,
|
||||
symbol: "rect",
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
// width: 5,
|
||||
color: colorList[1]
|
||||
},
|
||||
|
||||
},
|
||||
{
|
||||
name: "温度3",
|
||||
type: "line",
|
||||
data: [22, 3, 4, 5, 6, 9, 11],
|
||||
symbolSize: 1,
|
||||
symbol: "rect",
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
// width: 5,
|
||||
color: colorList[2]
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "温度4",
|
||||
type: "line",
|
||||
data: [50, 34, 54, 11, 33, 22, 11],
|
||||
symbolSize: 1,
|
||||
symbol: "rect",
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
// width: 5,
|
||||
color: colorList[3]
|
||||
},
|
||||
itemStyle:{
|
||||
color:colorList[3]
|
||||
}
|
||||
}
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
}
|
||||
onMounted(() => {
|
||||
drawElectricity();
|
||||
drawHeartChart();
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
#electricity,
|
||||
#heart {
|
||||
width: 100%;
|
||||
height: vh(270);
|
||||
}
|
||||
.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;
|
||||
&-title {
|
||||
width: 100%;
|
||||
height: vh(36);
|
||||
background-size: 100% 100%;
|
||||
font-size: 1.375rem;
|
||||
background-image: url("@/assets/images/dialog/brand-title.png");
|
||||
font-family: pangmen;
|
||||
padding-left: vw(32);
|
||||
// align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
line-height: vh(36);
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-input__wrapper) {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
:deep(.el-select) {
|
||||
width: vw(160);
|
||||
height: vh(28);
|
||||
border: 1px solid;
|
||||
border-image: linear-gradient(
|
||||
180deg,
|
||||
rgba(25.000000409781933, 174.00000482797623, 250.00000029802322, 1),
|
||||
rgba(25.000000409781933, 174.00000482797623, 250.00000029802322, 0.5)
|
||||
)
|
||||
1 1;
|
||||
}
|
||||
:deep(.el-input) {
|
||||
width: vw(160);
|
||||
height: vh(28);
|
||||
}
|
||||
:deep(.el-select .el-input.is-focus .el-input__wrapper),
|
||||
:deep(.el-select .el-input__wrapper.is-focus) {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
:deep(.el-form-item__label) {
|
||||
color: #fff;
|
||||
font-family: normal;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,153 @@
|
|||
<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-device">
|
||||
<ul>
|
||||
<li
|
||||
v-for="(item, index) in deviceList"
|
||||
:key="index"
|
||||
@click="toggleHandle(index)"
|
||||
:class="liIndex === index ? 'device-select' : ''"
|
||||
>
|
||||
{{ item }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="box-content-msg">
|
||||
<div class="box-content-top">
|
||||
<div class="btn1"></div>
|
||||
<div class="btn2"></div>
|
||||
</div>
|
||||
<div class="box-content-bottom">
|
||||
<div class="name">
|
||||
<span>
|
||||
设备名称:
|
||||
</span>
|
||||
<span>
|
||||
穿梭车
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
const deviceList = ref(["穿梭车", "TW4", "TW3", "快换电池"]);
|
||||
const liIndex = ref(0);
|
||||
|
||||
const emit = defineEmits(['closeExplosion'])
|
||||
|
||||
function toggleHandle(index) {
|
||||
liIndex.value = index;
|
||||
}
|
||||
|
||||
function close(){
|
||||
emit('closeExplosion',-1)
|
||||
}
|
||||
</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);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: vh(20) vw(20);
|
||||
&-device {
|
||||
ul {
|
||||
li {
|
||||
width: vw(180);
|
||||
height: vh(44);
|
||||
background-image: url("@/assets/images/dialog/device-default.png");
|
||||
background-size: 100% 100%;
|
||||
line-height: vh(44);
|
||||
text-align: center;
|
||||
margin-bottom: vh(15);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-msg{
|
||||
width: vw(340);
|
||||
}
|
||||
&-top{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: vh(16);
|
||||
.btn1,.btn2{
|
||||
width: vw(160);
|
||||
height: vh(44);
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn1{
|
||||
background-image: url('@/assets/images/dialog/explosion-btn1-select.png');
|
||||
}
|
||||
.btn2{
|
||||
background-image: url('@/assets/images/dialog/explosion-btn2-default.png');
|
||||
}
|
||||
}
|
||||
&-bottom{
|
||||
width: vw(340);
|
||||
height: vh(556);
|
||||
background-image: url('@/assets/images/dialog/explosion-msg.png');
|
||||
background-size: 100% 100%;
|
||||
padding:vh(66) vw(16) 0 vw(16);
|
||||
box-sizing: border-box;
|
||||
.name{
|
||||
width: 100%;
|
||||
height: vh(44);
|
||||
line-height: vh(44);
|
||||
padding-left: vw(28);
|
||||
background-size: 100% 100%;
|
||||
box-sizing: border-box;
|
||||
background-image: url('@/assets/images/dialog/explosion-name-bg.png');
|
||||
span:nth-child(1){
|
||||
color:rgba(174, 211, 255, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.device-select {
|
||||
background-image: url("@/assets/images/dialog/device-select.png") !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,152 @@
|
|||
<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">
|
||||
<ul>
|
||||
<li v-for="(item, index) in fileList" :key="'file' + index">
|
||||
<span>
|
||||
{{ item.name }}
|
||||
</span>
|
||||
<span>
|
||||
<span class="preview">预览</span>
|
||||
<span class="download">下载</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
const emit = defineEmits(["closeGuidance"]);
|
||||
const fileList = ref([
|
||||
|
||||
{
|
||||
name: "CN12升降输送机说明书",
|
||||
},
|
||||
{
|
||||
name: "ABRC01型快换电池及电池充电系统使用说明书",
|
||||
},
|
||||
{
|
||||
name: "CN12升降输送机说明书",
|
||||
},
|
||||
{
|
||||
name: "ABRC01型快换电池及电池充电系统使用说明书",
|
||||
},
|
||||
{
|
||||
name: "CN12升降输送机说明书",
|
||||
},
|
||||
{
|
||||
name: "ABRC01型快换电池及电池充电系统使用说明书",
|
||||
},
|
||||
{
|
||||
name: "CN12升降输送机说明书",
|
||||
},
|
||||
{
|
||||
name: "ABRC01型快换电池及电池充电系统使用说明书",
|
||||
},
|
||||
{
|
||||
name: "CN12升降输送机说明书",
|
||||
},
|
||||
{
|
||||
name: "ABRC01型快换电池及电池充电系统使用说明书",
|
||||
},
|
||||
{
|
||||
name: "CN12升降输送机说明书",
|
||||
},
|
||||
]);
|
||||
|
||||
function close() {
|
||||
emit("closeGuidance", -1);
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.box {
|
||||
width: vw(1088);
|
||||
height: vh(636);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
margin: auto;
|
||||
background-image: url("@/assets/images/dialog/device-dialog.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::-webkit-scrollbar {
|
||||
width: 10px; /* 设置滚动条的宽度 */
|
||||
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;
|
||||
}
|
||||
&-content::-webkit-scrollbar-track {
|
||||
background: transparent; /* 轨道的背景色 */
|
||||
}
|
||||
&-content::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(187, 220, 255, 0.7); /* 滑块的背景色 */
|
||||
// border-radius: 8px; /* 滑块的圆角 */
|
||||
}
|
||||
&-content {
|
||||
overflow: scroll;
|
||||
overflow-x: hidden;
|
||||
height: vh(636 - 60);
|
||||
width: vw(1088);
|
||||
padding: vh(20) vw(20);
|
||||
box-sizing: border-box;
|
||||
ul {
|
||||
|
||||
li {
|
||||
padding: 0 vw(40);
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: vh(48);
|
||||
font-size: 0.875rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: rgba(174, 211, 255, 0.03);
|
||||
margin-bottom: vh(12);
|
||||
.preview {
|
||||
color: rgba(25, 174, 250, 1);
|
||||
margin-right: vw(24);
|
||||
}
|
||||
.download {
|
||||
color: rgba(28, 238, 251, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
<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="box-content-select">
|
||||
<el-select v-model="value" clearable placeholder="请选择设备">
|
||||
<el-option>11</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="box-content-table">
|
||||
<el-table
|
||||
:row-class-name="getRowClassName"
|
||||
:data="tableList"
|
||||
style="width: 100%"
|
||||
@row-click="rowClick"
|
||||
>
|
||||
<el-table-column prop="code" label="序号" />
|
||||
<el-table-column prop="name" label="名称" />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-content-right">
|
||||
<div class="bg"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
const value = ref('')
|
||||
const emit = defineEmits(["closeKnowledgeBase"]);
|
||||
function close() {
|
||||
emit("closeKnowledgeBase", -1);
|
||||
}
|
||||
|
||||
const tableList = ref([
|
||||
{
|
||||
name:'智能双向穿梭车',
|
||||
code:1
|
||||
}
|
||||
])
|
||||
</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);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: vh(20) vw(20);
|
||||
box-sizing: border-box;
|
||||
&-select{
|
||||
margin-bottom: vh(16);
|
||||
}
|
||||
&-left {
|
||||
width: vw(340);
|
||||
height: vh(616);
|
||||
background-image: url("@/assets/images/dialog/knowledgeBase-left.png");
|
||||
padding: vh(20) vw(20);
|
||||
box-sizing: border-box;
|
||||
:deep(.el-input){
|
||||
width: vw(300);
|
||||
height: vh(36);
|
||||
}
|
||||
}
|
||||
&-right {
|
||||
width: vw(980);
|
||||
height: vh(616);
|
||||
background-size: 100% 100%;
|
||||
background-image: url("@/assets/images/dialog/knowledgeBase-right.png");
|
||||
.bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("@/assets/images/dialog/knowledgeBase-img.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,324 @@
|
|||
<template>
|
||||
<!-- 出入库批次耗时 -->
|
||||
<div class="el-overlay">
|
||||
<div class="box">
|
||||
<div class="box-header">
|
||||
<div class="box-title">{{ props.title }}</div>
|
||||
<div class="box-btn" @click="close"></div>
|
||||
</div>
|
||||
<div class="box-content">
|
||||
<div class="box-content-title">
|
||||
<span> 批次入库耗时情况表 </span>
|
||||
</div>
|
||||
<div class="box-content-chart" id="lineChart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, defineProps, onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
const emit = defineEmits(["closeBatch"]);
|
||||
const props = defineProps({
|
||||
title: String,
|
||||
});
|
||||
function close() {
|
||||
emit("closeBatch", -1);
|
||||
}
|
||||
|
||||
// 折线图
|
||||
function drawLineChart() {
|
||||
let dom = document.querySelector("#lineChart");
|
||||
dom.removeAttribute("_echarts_instance_");
|
||||
let myChart;
|
||||
myChart = echarts.init(dom);
|
||||
const colorList = ["#9E87FF", "#73DDFF", "#fe9a8b", "#F56948", "#9E87FF"];
|
||||
let option = {
|
||||
legend: {
|
||||
icon: "rect",
|
||||
top: "5%",
|
||||
right: "center",
|
||||
itemWidth: 16,
|
||||
itemHeight: 4,
|
||||
itemGap: 20,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
borderColor: "rgba(174, 211, 255, 1)",
|
||||
backgroundColor: "rgba(8, 54, 86, .7)",
|
||||
textStyle: {
|
||||
color: "#FFF",
|
||||
},
|
||||
padding: [10, 10],
|
||||
formatter: function (params) {
|
||||
// params 是一个数组，数组中包含每个系列的数据信息
|
||||
let result = params[0].name + "<br/>";
|
||||
params.forEach(function (item) {
|
||||
result +=
|
||||
item.seriesName +
|
||||
": " +
|
||||
item.value +
|
||||
(item.seriesName == "电流" ? "A" : "V") +
|
||||
"<br/>";
|
||||
});
|
||||
return result;
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: "20%",
|
||||
right: "2%",
|
||||
left: "2%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: [
|
||||
"YZP2303001",
|
||||
"YZP2303002",
|
||||
"YZP2303002",
|
||||
"YZP2303002",
|
||||
"YZP2303002",
|
||||
"YZP2303002",
|
||||
],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(56, 72, 89, 1)",
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
|
||||
// alignWithLabel: false, // true：标签位于刻度线正下方；false：标签位于2个刻度线中间
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
interval: 0,
|
||||
align: "left",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
margin: 15,
|
||||
},
|
||||
// 默认x轴字体大小
|
||||
fontSize: 12,
|
||||
// margin:文字到x轴的距离
|
||||
// margin: 10,
|
||||
},
|
||||
axisPointer: {
|
||||
label: {
|
||||
// padding: [11, 5, 7],
|
||||
padding: [0, 0, 10, 0],
|
||||
/*
|
||||
除了padding[0]建议必须是0之外，其他三项可随意设置
|
||||
|
||||
和CSSpadding相同，[上，右，下，左]
|
||||
|
||||
如果需要下边线超出文字，设左右padding即可，注：左右padding最好相同
|
||||
|
||||
padding[2]的10:
|
||||
|
||||
10 = 文字距下边线的距离 + 下边线的宽度
|
||||
|
||||
如：UI图中文字距下边线距离为7 下边线宽度为2
|
||||
|
||||
则padding: [0, 0, 9, 0]
|
||||
|
||||
*/
|
||||
// 这里的margin和axisLabel的margin要一致!
|
||||
margin: 15,
|
||||
// 移入时的字体大小
|
||||
fontSize: 12,
|
||||
global: false, // 缺省为 false
|
||||
},
|
||||
},
|
||||
boundaryGap: false,
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
name: "单位:分钟",
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
padding: [0, 0, 0, -10],
|
||||
},
|
||||
type: "value",
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#DCE2E8",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "rgba(255,255,255,0.2)",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "单位:kg",
|
||||
type: "value",
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
padding: [0, -30, 0, 0],
|
||||
},
|
||||
position: "right",
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
formatter: "{value}",
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "公布耗时",
|
||||
type: "line",
|
||||
data: [10, 10, 30, 12, 15, 3],
|
||||
symbolSize: 1,
|
||||
symbol: "circle",
|
||||
smooth: true,
|
||||
yAxisIndex: 0,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
// width: 1,
|
||||
color: "rgba(25, 174, 250, 1)",
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 1,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(25, 174, 250, 0.5)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(25, 174, 250, 0.2)",
|
||||
},
|
||||
]),
|
||||
},
|
||||
// emphasis: {
|
||||
// focus: 'series'
|
||||
// },
|
||||
},
|
||||
{
|
||||
name: "公布重量",
|
||||
type: "line",
|
||||
data: [150, 120, 170, 140, 500, 160],
|
||||
symbolSize: 1,
|
||||
yAxisIndex: 1,
|
||||
symbol: "circle",
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
// width: 5,
|
||||
color: "rgba(28, 238, 251, 1)",
|
||||
},
|
||||
itemStyle: {
|
||||
color: "rgba(28, 238, 251, 1)",
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 1,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(28, 238, 251, 0.5)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(28, 238, 251, 0.2)",
|
||||
},
|
||||
]),
|
||||
},
|
||||
// emphasis: {
|
||||
// focus: 'series'
|
||||
// },
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
drawLineChart();
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.box {
|
||||
width: vw(1088);
|
||||
height: vh(636);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
margin: auto;
|
||||
background-image: url("@/assets/images/dialog/device-dialog.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 {
|
||||
padding: vh(20) vw(20);
|
||||
box-sizing: border-box;
|
||||
&-title {
|
||||
width: 100%;
|
||||
height: vh(36);
|
||||
padding-left: vw(32);
|
||||
line-height: vh(36);
|
||||
box-sizing: border-box;
|
||||
background-size: 100% 100%;
|
||||
background-image: url("@/assets/images/dialog/inoutbound.png");
|
||||
span {
|
||||
font-size: 1.375rem;
|
||||
font-family: "pangmen";
|
||||
}
|
||||
}
|
||||
&-chart {
|
||||
height: vh(480);
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,399 @@
|
|||
<template>
|
||||
<!-- 喂丝机 装箱 -->
|
||||
<div class="el-overlay">
|
||||
<div class="box">
|
||||
<div class="box-header">
|
||||
<div class="box-title">{{ props.title }}</div>
|
||||
<div class="box-btn" @click="close"></div>
|
||||
</div>
|
||||
<div class="box-content">
|
||||
<div class="box-content-title">
|
||||
<span> {{ props.title }} </span>
|
||||
</div>
|
||||
<div style="display: flex">
|
||||
<div class="box-content-plate1">
|
||||
<div class="produce" v-for="item in deviceList" :key="item.id">
|
||||
<div class="produce-name">{{ item.name }}</div>
|
||||
<div class="produce-msg">
|
||||
<section class="avg">
|
||||
<span>平均生产力</span>
|
||||
<span>{{ item.avgPro }}</span>
|
||||
<span>（千克/天）</span>
|
||||
</section>
|
||||
<section class="total">
|
||||
<span>生产总量</span>
|
||||
<span>{{ item.total }}</span>
|
||||
<span>（千克）</span>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-content-plate2">
|
||||
<div id="chart1"></div>
|
||||
<div id="chart2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, defineProps, onMounted ,nextTick} from "vue";
|
||||
import * as echarts from "echarts";
|
||||
const emit = defineEmits(["closeMachine"]);
|
||||
const deviceList = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: "1号翻箱机",
|
||||
total: "222699.28",
|
||||
avgPro: "27897.41",
|
||||
},
|
||||
{
|
||||
name: "2号翻箱机",
|
||||
total: "222699.28",
|
||||
avgPro: "27897.41",
|
||||
id: 2,
|
||||
},
|
||||
]);
|
||||
const props = defineProps({
|
||||
title: String,
|
||||
});
|
||||
function close() {
|
||||
emit("closeMachine", -1);
|
||||
}
|
||||
function drawChart1() {
|
||||
let dom = document.querySelector("#chart1");
|
||||
dom.removeAttribute("_echarts_instance_");
|
||||
let myChart;
|
||||
myChart = echarts.init(dom);
|
||||
let option = {
|
||||
tooltip: {},
|
||||
grid: {
|
||||
top: "15%",
|
||||
left: "1%",
|
||||
right: "1%",
|
||||
bottom: "0%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
axisLine: {
|
||||
//坐标轴轴线相关设置。数学上的x轴
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#233e64",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
//坐标轴刻度标签的相关设置
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize:'0.875rem',
|
||||
// margin: 15,
|
||||
},
|
||||
},
|
||||
axisTick: { show: false },
|
||||
data: ['2023-03-03', '2023-03-03', '2023-03-03', '2023-03-03', '2023-03-03', '2023-03-03', '2023-03-03', '2023-03-03'],
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name:'单位:kg',
|
||||
nameTextStyle:{
|
||||
color:'#fff',
|
||||
fontSize:'0.875rem',
|
||||
},
|
||||
splitNumber: 5,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#233e64",
|
||||
},
|
||||
},
|
||||
axisLine: { show: false },
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize:'0.875rem',
|
||||
},
|
||||
},
|
||||
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: [5, 6, 7, 8, 9, 7, 5, 4, 2, 7, 8, 4],
|
||||
},
|
||||
],
|
||||
};
|
||||
nextTick(() => {
|
||||
myChart.setOption(option);
|
||||
});
|
||||
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
function drawChart2() {
|
||||
let dom = document.querySelector("#chart2");
|
||||
dom.removeAttribute("_echarts_instance_");
|
||||
let myChart;
|
||||
myChart = echarts.init(dom);
|
||||
let option = {
|
||||
tooltip: {},
|
||||
grid: {
|
||||
top: "16%",
|
||||
left: "1%",
|
||||
right: "1%",
|
||||
bottom: "8%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
axisLine: {
|
||||
//坐标轴轴线相关设置。数学上的x轴
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#233e64",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
//坐标轴刻度标签的相关设置
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize:'0.875rem',
|
||||
},
|
||||
},
|
||||
axisTick: { show: false },
|
||||
data: ['2023-03-03', '2023-03-03', '2023-03-03', '2023-03-03', '2023-03-03', '2023-03-03', '2023-03-03', '2023-03-03'],
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name:'单位:kg',
|
||||
nameTextStyle:{
|
||||
color:'#fff',
|
||||
fontSize:'0.875rem',
|
||||
},
|
||||
splitNumber: 5,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#233e64",
|
||||
},
|
||||
},
|
||||
axisLine: { show: false },
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize:'0.875rem',
|
||||
},
|
||||
},
|
||||
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: [5, 6, 7, 8, 9, 7, 5, 4, 2, 7, 8, 4],
|
||||
},
|
||||
],
|
||||
};
|
||||
nextTick(() => {
|
||||
myChart.setOption(option);
|
||||
});
|
||||
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
onMounted(() => {
|
||||
drawChart1()
|
||||
drawChart2()
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.box {
|
||||
width: vw(1088);
|
||||
height: vh(636);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
margin: auto;
|
||||
background-image: url("@/assets/images/dialog/device-dialog.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 {
|
||||
padding: vh(20) vw(20);
|
||||
box-sizing: border-box;
|
||||
|
||||
&-title {
|
||||
width: 100%;
|
||||
height: vh(36);
|
||||
padding-left: vw(32);
|
||||
line-height: vh(36);
|
||||
box-sizing: border-box;
|
||||
background-size: 100% 100%;
|
||||
background-image: url("@/assets/images/dialog/inoutbound.png");
|
||||
span {
|
||||
font-size: 1.375rem;
|
||||
font-family: "pangmen";
|
||||
}
|
||||
}
|
||||
&-plate1 {
|
||||
float: left;
|
||||
width: vw(224);
|
||||
height: vh(592);
|
||||
.produce {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: vh(20);
|
||||
box-sizing: border-box;
|
||||
&-name {
|
||||
width: vw(48);
|
||||
height: vh(230);
|
||||
background-image: url("@/assets/images/dialog/chassis.png");
|
||||
background-size: 100% 100%;
|
||||
writing-mode: vertical-rl; /* 文字从上到下，从右到左 */
|
||||
text-orientation: upright;
|
||||
// text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// line-height: vh(48);
|
||||
letter-spacing: 0.2rem;
|
||||
color: rgba(28, 238, 251, 1);
|
||||
// transform: rotate(180deg); /* 可选，使文字从上到下，从左到右 */
|
||||
}
|
||||
&-msg {
|
||||
.avg {
|
||||
margin-bottom: vh(20);
|
||||
}
|
||||
section {
|
||||
text-align: center;
|
||||
width: vw(160);
|
||||
height: vh(104);
|
||||
background-size: 100% 100%;
|
||||
background-image: url("@/assets/images/dialog/pro-bg.png");
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
span:nth-child(1) {
|
||||
font-size: 0.875rem;
|
||||
// margin-top: vh(16);
|
||||
line-height: vh(31);
|
||||
}
|
||||
span:nth-child(2) {
|
||||
font-size: 1.375rem;
|
||||
margin-top: vh(9);
|
||||
color: rgba(234, 255, 254, 1);
|
||||
// line-height: vh(32);
|
||||
}
|
||||
span:nth-child(3) {
|
||||
font-size: 0.8rem;
|
||||
color: rgba(113, 133, 149, 1);
|
||||
// line-height: vh(32);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-plate2 {
|
||||
#chart1,
|
||||
#chart2 {
|
||||
margin-top: vh(20);
|
||||
width: vw(800);
|
||||
height: vh(228);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -28,17 +28,68 @@
|
|||
|
||||
<div class="next" @click="nextPage"></div>
|
||||
</div>
|
||||
<div class="box-content-inBound">
|
||||
<div class="box-content-inBound-title">
|
||||
<span> 入库信息统计 </span>
|
||||
<div>
|
||||
<ul>
|
||||
<li><span>单位：</span><span>kg</span></li>
|
||||
<li><span>总量：</span><span>3047457</span></li>
|
||||
<li><span>品牌总量：</span><span>1632057</span></li>
|
||||
<li><span>批次数量：</span><span>176</span></li>
|
||||
</ul>
|
||||
<section class="one">
|
||||
<el-date-picker
|
||||
class="picker"
|
||||
v-model="value2"
|
||||
type="year"
|
||||
placeholder="请选择年份"
|
||||
@change="maintenancePlan"
|
||||
/>
|
||||
</section>
|
||||
<section>
|
||||
<el-date-picker
|
||||
v-model="value2"
|
||||
type="year"
|
||||
placeholder="请选择年份"
|
||||
@change="maintenancePlan"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-content-inBound-data">
|
||||
<div class="left-data">
|
||||
<el-collapse v-model="activeNames">
|
||||
<el-collapse-item title="品牌" name="1">
|
||||
<div class="brand">
|
||||
<div
|
||||
v-for="item in brandList"
|
||||
:key="item"
|
||||
class="brand-item"
|
||||
>
|
||||
<span>{{ item.slice(0, 2) }}</span>
|
||||
<span>{{ item.slice(2) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
<div class="right-data" id="barChart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import pieChart from "@/components/echarts/pie";
|
||||
import { ref, defineProps } from "vue";
|
||||
import { ref, defineProps, onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
const props = defineProps({
|
||||
title: String,
|
||||
});
|
||||
const emit = defineEmits(['closeBoundMsg'])
|
||||
const activeNames = ref(["1"]);
|
||||
const emit = defineEmits(["closeBoundMsg"]);
|
||||
const index = ref(0);
|
||||
const transform = ref(0);
|
||||
const chartList = ref([
|
||||
|
|
@ -117,9 +168,119 @@ function prvePage() {
|
|||
transform.value = 1 * index.value * 100 + "%";
|
||||
}
|
||||
|
||||
function close(){
|
||||
emit('closeBoundMsg',-1)
|
||||
function close() {
|
||||
emit("closeBoundMsg", -1);
|
||||
}
|
||||
const value2 = ref("");
|
||||
const brandList = ref([
|
||||
"兰州(硬珍品)烟丝",
|
||||
"利群(长嘴)烟丝",
|
||||
"兰州(硬吉祥)烟丝",
|
||||
"兰州(硬珍品)烟丝",
|
||||
"利群(长嘴)烟丝",
|
||||
"兰州(硬吉祥)烟丝",
|
||||
"兰州(硬珍品)烟丝",
|
||||
"利群(长嘴)烟丝",
|
||||
"兰州(硬吉祥)烟丝",
|
||||
]);
|
||||
function drawBarChart() {
|
||||
let dom = document.querySelector("#barChart");
|
||||
dom.removeAttribute("_echarts_instance_");
|
||||
let myChart;
|
||||
myChart = echarts.init(dom);
|
||||
let option = {
|
||||
grid:{
|
||||
left:'5%',
|
||||
bottom:'8%',
|
||||
right:'2%',
|
||||
top:'15%'
|
||||
},
|
||||
xAxis: {
|
||||
data: [
|
||||
1,
|
||||
2,
|
||||
3,
|
||||
4,
|
||||
5,
|
||||
6,
|
||||
7,
|
||||
],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(56, 72, 89, 1)",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name: "单位:kg",
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: '1rem',
|
||||
padding:[0,35,10,0]
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: '0.875rem',
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type:'dashed',
|
||||
color: "rgba(255, 255, 255, 0.20)",
|
||||
},
|
||||
},
|
||||
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "bar",
|
||||
barWidth: 16,
|
||||
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: 'rgba(28, 238, 251, 1)',
|
||||
borderWidth: 1,
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(28, 238, 251, 1)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(28, 238, 251, 0)",
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
},
|
||||
data: [254, 3254, 1654, 2454, 4757, 2011, 1211],
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
onMounted(()=>{
|
||||
drawBarChart()
|
||||
|
||||
})
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.swiper {
|
||||
|
|
@ -209,6 +370,132 @@ function close(){
|
|||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
&-inBound {
|
||||
padding: vh(20) vw(20);
|
||||
box-sizing: border-box;
|
||||
margin-top: vh(20);
|
||||
height: vh(460);
|
||||
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 {
|
||||
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(20);
|
||||
div {
|
||||
align-items: center;
|
||||
font-family: normal;
|
||||
display: flex;
|
||||
ul {
|
||||
display: flex;
|
||||
li {
|
||||
font-size: 1rem;
|
||||
margin-right: vw(30);
|
||||
span:nth-child(2) {
|
||||
color: rgba(28, 238, 251, 1);
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
.one {
|
||||
margin-right: vw(12);
|
||||
}
|
||||
:deep(.el-input) {
|
||||
width: vw(160);
|
||||
height: vh(28);
|
||||
}
|
||||
section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 数据板块内容
|
||||
&-data {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.left-data {
|
||||
width: vw(200);
|
||||
margin-right: vw(20);
|
||||
.brand::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.brand {
|
||||
height: vh(320);
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
.brand-item {
|
||||
width: vw(200);
|
||||
height: vh(36);
|
||||
line-height: vh(36);
|
||||
margin: vh(2) 0;
|
||||
padding-left: vw(14);
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
background-image: url("@/assets/images/dialog/down-default.png");
|
||||
}
|
||||
}
|
||||
}
|
||||
.right-data {
|
||||
width: vw(1100);
|
||||
height: vh(370);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-collapse-item__header) {
|
||||
width: vw(200);
|
||||
height: vh(36);
|
||||
background-image: url("@/assets/images/dialog/down.png");
|
||||
background-size: 100% 100%;
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
padding: 0 0 0 0.875rem;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
:deep(.el-collapse-item__content) {
|
||||
background-color: transparent;
|
||||
}
|
||||
// :deep(.el-collapse-item__header){
|
||||
// height: 1.75rem;
|
||||
// padding-left: 0.625rem;
|
||||
// font-size: 1rem;
|
||||
// box-sizing: border-box;
|
||||
// border: none;
|
||||
// background-color: transparent;
|
||||
// color: rgba(233, 244, 255, 1);
|
||||
// background-image: url('@/assets/images/door-device.png');
|
||||
// }
|
||||
:deep(.el-collapse-item__content) {
|
||||
background-color: transparent;
|
||||
border: none !important;
|
||||
// font-size: 1rem;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
:deep(.el-collapse-item__wrap) {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
:deep(.el-collapse) {
|
||||
border: none;
|
||||
//border-color: unset;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { createApp } from 'vue'
|
||||
import './style.css'
|
||||
import './style.scss'
|
||||
import App from './App.vue'
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/dist/index.css'
|
||||
|
|
|
|||
|
|
@ -1,17 +0,0 @@
|
|||
#app,html,body{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
user-select: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
font-family:'siyuan';
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
#app,
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
user-select: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
font-family: 'siyuan';
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.more {
|
||||
display: inline-block;
|
||||
background-size: 100% 100%;
|
||||
background-image: url("@/assets/images/home/more.png");
|
||||
cursor: pointer;
|
||||
width: vw(52);
|
||||
height: vh(24);
|
||||
}
|
||||
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="el-overlay">
|
||||
<div class="box">
|
||||
<div class="box-header">
|
||||
<div class="box-title">生产信息</div>
|
||||
<div class="box-title">运维指导</div>
|
||||
<div class="box-btn" @click="close"></div>
|
||||
</div>
|
||||
<div class="box-content">
|
||||
|
|
@ -21,10 +21,20 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 爆炸图 -->
|
||||
<explosion v-if="listIndex===0" @closeExplosion="closeSecondDialog"/>
|
||||
<!-- 指导文件 -->
|
||||
<guidance v-if="listIndex===1" @closeGuidance="closeSecondDialog"/>
|
||||
<!-- 知识库 -->
|
||||
<knowledgeBase v-if="listIndex===2" @closeKnowledgeBase="closeSecondDialog"/>
|
||||
</template>
|
||||
<script setup>
|
||||
import explosion from '@/components/operation/explosion'
|
||||
import guidance from '@/components/operation/guidance'
|
||||
import knowledgeBase from '@/components/operation/knowledgeBase'
|
||||
import { ref } from "vue";
|
||||
import getPath from "@/utils/getPath";
|
||||
import knowledgeBaseVue from '../../../../components/operation/knowledgeBase.vue';
|
||||
const emit = defineEmits(["closeDialog"]);
|
||||
const listIndex = ref(-1);
|
||||
// 运维指导
|
||||
|
|
@ -45,6 +55,10 @@ const list = ref([
|
|||
function close() {
|
||||
emit("closeDialog", -1);
|
||||
}
|
||||
|
||||
function closeSecondDialog(){
|
||||
listIndex.value = -1
|
||||
}
|
||||
function listToggle(index) {
|
||||
listIndex.value = index;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,13 +22,19 @@
|
|||
</div>
|
||||
</div>
|
||||
<!-- 出入库信息 -->
|
||||
<inOutboundMsg :title="title" v-if="listIndex===0||listIndex===1" @closeBoundMsg="closeBoundMsg"/>
|
||||
|
||||
|
||||
<inOutboundMsg :title="title" v-if="listIndex===0||listIndex===1" @closeBoundMsg="closeSecondDialog"/>
|
||||
<!-- 出入库批次耗时 -->
|
||||
<!-- <inOutBoundBacth :title="title" v-if="listIndex===2 || listIndex===3" @closeBatch='closeSecondDialog'/> -->
|
||||
<!-- 库存消息 -->
|
||||
<inventoryNews v-if="listIndex===2" @close='closeSecondDialog' />
|
||||
<!-- 喂丝机 装箱机弹窗 -->
|
||||
<inOutMachine :title="title" v-if="listIndex===3 || listIndex===4" @closeMachine="closeSecondDialog" />
|
||||
</template>
|
||||
<script setup>
|
||||
import inOutboundMsg from '@/components/productionInformation/inOutboundMsg';
|
||||
|
||||
import inventoryNews from '@/views/home/components/homeDialog/inventoryNews'
|
||||
import inOutboundMsg from '@/components/productionInformation/inOutboundMsg'
|
||||
import inOutBoundBacth from '@/components/productionInformation/inOutBoundBacth'
|
||||
import inOutMachine from '@/components/productionInformation/inOutMachine'
|
||||
import { ref } from "vue";
|
||||
import getPath from "@/utils/getPath";
|
||||
const emit = defineEmits(["closeDialog"]);
|
||||
|
|
@ -47,16 +53,16 @@ const list = ref([
|
|||
select: getPath.dev2Select,
|
||||
title:'出库信息'
|
||||
},
|
||||
{
|
||||
default: getPath.dev3,
|
||||
select: getPath.dev3Select,
|
||||
title:'入库批次耗时'
|
||||
},
|
||||
{
|
||||
default: getPath.dev4,
|
||||
select: getPath.dev4Select,
|
||||
title:'出库批次耗时'
|
||||
},
|
||||
// {
|
||||
// default: getPath.dev3,
|
||||
// select: getPath.dev3Select,
|
||||
// title:'入库批次耗时'
|
||||
// },
|
||||
// {
|
||||
// default: getPath.dev4,
|
||||
// select: getPath.dev4Select,
|
||||
// title:'出库批次耗时'
|
||||
// },
|
||||
{
|
||||
default: getPath.dev5,
|
||||
select: getPath.dev5Select,
|
||||
|
|
@ -73,14 +79,16 @@ const list = ref([
|
|||
title:'装箱站入库统计'
|
||||
},
|
||||
]);
|
||||
|
||||
|
||||
function closeSecondDialog(){
|
||||
listIndex.value = -1
|
||||
}
|
||||
function close() {
|
||||
emit("closeDialog", -1);
|
||||
}
|
||||
|
||||
// 关闭出入库弹窗
|
||||
function closeBoundMsg(e){
|
||||
listIndex.value = e
|
||||
}
|
||||
|
||||
function listToggle(index,item) {
|
||||
listIndex.value = index;
|
||||
title.value = item.title
|
||||
|
|
|
|||
|
|
@ -28,11 +28,20 @@
|
|||
<equipmentAnalysis v-if="listIndex === 1" @closeEquipmentAnalysis="closeDialog"/>
|
||||
<!-- 维护保养弹窗 -->
|
||||
<maintenance v-if="listIndex === 2" @closeMaintenance="closeDialog"/>
|
||||
<!-- 健康管理 -->
|
||||
<healthManagement v-if="listIndex === 3" @closeHealth="closeDialog"/>
|
||||
<!-- 电池管理 -->
|
||||
<batteryManagement @closeBattery="closeDialog" v-if="listIndex === 4"/>
|
||||
<!-- 电池位监测 -->
|
||||
<onLineMonitoring @closeOnline="closeDialog" v-if="listIndex === 5"/>
|
||||
</template>
|
||||
<script setup>
|
||||
import deviceInfo from '@/components/equipmentManagement/deviceInfo';
|
||||
import equipmentAnalysis from '@/components/equipmentManagement/equipmentAnalysis';
|
||||
import maintenance from '@/components/equipmentManagement/maintenance'
|
||||
import healthManagement from '@/components/equipmentManagement/healthManagement'
|
||||
import batteryManagement from '@/components/equipmentManagement/batteryManagement'
|
||||
import onLineMonitoring from '@/components/equipmentManagement/onLineMonitoring'
|
||||
import { ref } from "vue";
|
||||
import getPath from "@/utils/getPath";
|
||||
const emit = defineEmits(["closeDialog"]);
|
||||
|
|
@ -64,8 +73,8 @@ const list = ref([
|
|||
select: getPath.device6Select,
|
||||
},
|
||||
]);
|
||||
function close() {
|
||||
emit("closeDialog", -1);
|
||||
function close(value) {
|
||||
emit("closeDialog", value);
|
||||
}
|
||||
function listToggle(index) {
|
||||
listIndex.value = index;
|
||||
|
|
|
|||
|
|
@ -10,56 +10,56 @@
|
|||
<div class="box-content" v-if="props.title === '入库工单'">
|
||||
<div
|
||||
class="box-content-item in"
|
||||
v-for="(item, index) in list"
|
||||
v-for="(item, index) in props.data"
|
||||
:key="index"
|
||||
>
|
||||
<div class="in-left">
|
||||
<div class="in-left-img">
|
||||
<p>{{ item.num }}</p>
|
||||
<span>{{ item.line }}</span>
|
||||
<p>装箱站编号</p>
|
||||
<span>{{ item.packStation }}</span>
|
||||
</div>
|
||||
<div class="in-left-border">
|
||||
<span class="name">装箱总数</span>
|
||||
<span>{{ item.boxTotal }}</span>
|
||||
<span class="name">预计装箱总数</span>
|
||||
<span>{{ item.planBoxQuantity }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="in-right">
|
||||
<ul>
|
||||
<li>
|
||||
<span class="name">工单号</span>
|
||||
<span>{{ item.workerNumber }}</span>
|
||||
<span>{{ item.orderNum }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="name">批次号</span>
|
||||
<span>{{ item.batchNumber }}</span>
|
||||
<span>{{ item.batch }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="name">品牌</span>
|
||||
<span>{{ item.brand }}</span>
|
||||
<span>{{ item.itemDesc }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="name">计划量</span>
|
||||
<span>{{ item.invName }}</span>
|
||||
<span>{{ item.planWeight }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="name">工单开始时间</span>
|
||||
<span>{{ item.stratTime }}</span>
|
||||
<span>{{ item.creatTime }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="name">预计完成时间</span>
|
||||
<span>{{ item.endTime }}</span>
|
||||
<span>{{ item.planFinishTime }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="name">已装箱重量</span>
|
||||
<span>{{ item.packagedWeight }}</span>
|
||||
<span>{{ item.boxedWeight }}kg</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="name">已装箱数</span>
|
||||
<span>{{ item.packingQuantity }}</span>
|
||||
<span>{{ item.boxedNumber }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="name">状态</span>
|
||||
<span>{{ item.status }}</span>
|
||||
<span>{{ item.status==='Doing'?'执行中':'已完成' }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -69,36 +69,37 @@
|
|||
<div class="box-content" v-else>
|
||||
<div
|
||||
class="box-content-item out"
|
||||
v-for="(item, index) in outList"
|
||||
v-for="(item, index) in props.data"
|
||||
:key="index"
|
||||
>
|
||||
<div class="out-left">
|
||||
<div class="out-left-img">
|
||||
<p>{{ item.num }}</p>
|
||||
<span>{{ item.line }}</span>
|
||||
<p>喂丝机编号</p>
|
||||
<span>{{ item.feederId }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="out-right">
|
||||
<ul>
|
||||
<li>
|
||||
<span class="name">工单号</span>
|
||||
<span>{{ item.workerNumber }}</span>
|
||||
<span>{{ item.orderNum }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="name">品牌</span>
|
||||
<span>{{ item.brand }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="name">计划量</span>
|
||||
<span>{{ item.invName }}</span>
|
||||
<span>{{ item.itemDesc }}</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="name">工单开始时间</span>
|
||||
<span>{{ item.startTime }}</span>
|
||||
<span>{{ item.creatTime }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="name">实际投料量</span>
|
||||
<span>{{ item.realityInventory }}</span>
|
||||
<span class="name">剩余箱数</span>
|
||||
<span>{{ item.remainCount }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="name">剩余投料量</span>
|
||||
<span>{{ item.remainWeight }}kg</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -112,6 +113,9 @@ import { ref, defineProps } from "vue";
|
|||
import getPath from "@/utils/getPath";
|
||||
const props = defineProps({
|
||||
title: String,
|
||||
|
||||
|
||||
data:Array
|
||||
});
|
||||
const emit = defineEmits(["close"]);
|
||||
const list = ref([
|
||||
|
|
@ -286,7 +290,8 @@ function close() {
|
|||
p {
|
||||
color: rgba(255, 206, 84, 1);
|
||||
font-weight: 700;
|
||||
font-size: 1.875rem;
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: vh(10);
|
||||
}
|
||||
}
|
||||
&-right {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="el-overlay">
|
||||
<div class="box">
|
||||
<div class="box-header">
|
||||
<div class="box-title">消息提醒</div>
|
||||
<div class="box-title">库存消息</div>
|
||||
<div class="box-btn" @click="close"></div>
|
||||
</div>
|
||||
<div class="box-content">
|
||||
|
|
|
|||
|
|
@ -6,12 +6,27 @@
|
|||
<div class="box-btn" @click="close"></div>
|
||||
</div>
|
||||
<div class="box-content">
|
||||
<div class="box-content-title">
|
||||
<span> 超时提醒 </span>
|
||||
</div>
|
||||
<el-table :data="list" style="width: 100%" @row-click="rowClick">
|
||||
<el-table-column prop="code" label="设备代码" width="180" />
|
||||
<el-table-column prop="roundName" label="故障名称" width="180" />
|
||||
<el-table-column prop="date" label="故障日期" />
|
||||
<el-table-column prop="cause" label="故障原因" />
|
||||
<el-table-column prop="repairPersonnel" label="维修人" />
|
||||
<el-table-column prop="batch" label="批次" width="180" />
|
||||
<el-table-column prop="conveyType" label="任务类型" width="180" />
|
||||
<el-table-column prop="itemDesc" label="货箱类型" />
|
||||
<el-table-column prop="palletNum" label="托盘号" />
|
||||
<el-table-column prop="startDate" label="任务开始时间" />
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="box-content">
|
||||
<div class="box-content-title">
|
||||
<span> 维修提醒 </span>
|
||||
</div>
|
||||
<el-table :data="list1" style="width: 100%" @row-click="rowClick">
|
||||
<el-table-column prop="facCode" label="设备代码" width="180" />
|
||||
<el-table-column prop="errorName" label="故障名称" width="180" />
|
||||
<el-table-column prop="errorDateTime" label="故障日期" />
|
||||
<el-table-column prop="reason" label="故障原因" />
|
||||
<el-table-column prop="reporter" label="记录者" />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -82,8 +97,9 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { reactive, ref, toRefs } from "vue";
|
||||
import getPath from "@/utils/getPath";
|
||||
import { onMounted, reactive, ref, toRefs } from "vue";
|
||||
import {getCarErrorIn12,getOverTransmission} from '@/api/home'
|
||||
import getPath from "@/utils/getPath";
|
||||
const emit = defineEmits(["closeMsg"]);
|
||||
const list = ref([
|
||||
{
|
||||
|
|
@ -185,9 +201,21 @@ const list = ref([
|
|||
repairPersonnel: "",
|
||||
},
|
||||
]);
|
||||
const list1 = ref([])
|
||||
function close() {
|
||||
emit("closeMsg", false);
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
//
|
||||
getCarErrorIn12().then(res=>{
|
||||
list1.value = res.result
|
||||
})
|
||||
// 超时
|
||||
getOverTransmission().then(res=>{
|
||||
list.value = res.result
|
||||
})
|
||||
})
|
||||
// 维修提醒的弹窗
|
||||
const options = [
|
||||
{
|
||||
|
|
@ -237,7 +265,24 @@ function closeDialogBox() {
|
|||
background-image: url("@/assets/images/dialog/device-dialog.png");
|
||||
}
|
||||
.box-content {
|
||||
height: vh(636 - 60);
|
||||
height: vh(280);
|
||||
:deep(.el-table){
|
||||
height: vh(280 - 60 - 16);
|
||||
}
|
||||
&-title {
|
||||
width: 100%;
|
||||
height: vh(36);
|
||||
padding-left: vw(32);
|
||||
line-height: vh(36);
|
||||
box-sizing: border-box;
|
||||
background-size: 100% 100%;
|
||||
background-image: url("@/assets/images/dialog/inoutbound.png");
|
||||
margin-bottom: vh(16);
|
||||
span {
|
||||
font-size: 1.375rem;
|
||||
font-family: "pangmen";
|
||||
}
|
||||
}
|
||||
}
|
||||
.dialog-box {
|
||||
width: vw(544);
|
||||
|
|
@ -386,7 +431,7 @@ function closeDialogBox() {
|
|||
:deep(.el-form-item) {
|
||||
margin-bottom: vh(16);
|
||||
}
|
||||
:deep(.el-radio){
|
||||
:deep(.el-radio) {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,14 +1,13 @@
|
|||
<template>
|
||||
|
||||
<div class="unity">
|
||||
<iframe src="model/index.html" frameborder="0"></iframe>
|
||||
<!-- <iframe src="model/index.html" frameborder="0"></iframe> -->
|
||||
</div>
|
||||
<div class="home">
|
||||
<div class="home-left">
|
||||
<!-- 设备状态 -->
|
||||
<div class="home-title">
|
||||
<span class="home-title-font"> 设备状态 </span>
|
||||
<span class="home-title-more"> </span>
|
||||
<!-- <span class="home-title-more"> </span> -->
|
||||
</div>
|
||||
<div class="home-left-device">
|
||||
<div
|
||||
|
|
@ -28,7 +27,18 @@
|
|||
<span class="home-title-font"> 各品牌库存情况 </span>
|
||||
<span class="home-title-more" @click="brandShow = true"> </span>
|
||||
</div>
|
||||
<div class="home-left-brand" id="brand"></div>
|
||||
<div class="home-left-brand" id="brand">
|
||||
<div v-for="(item,index) in brandList" :key="'brand' + index" class="item">
|
||||
<div class="home-left-brand-title">
|
||||
<span>{{item.name}}</span><span class="pct">{{item.pct*100}}%</span>
|
||||
</div>
|
||||
<div class="home-left-brand-progress">
|
||||
<div class="home-left-brand-bg" :style="'width:'+item.pct*100+'%'">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 消息提醒 -->
|
||||
<div class="home-title">
|
||||
<span class="home-title-font"> 消息提醒 </span>
|
||||
|
|
@ -72,50 +82,69 @@
|
|||
<!-- 出库工单 -->
|
||||
<div class="home-title">
|
||||
<span class="home-title-font"> 出库工单 </span>
|
||||
<span class="home-title-more" @click="inOutShow=true;inOutTitle='出库工单'"> </span>
|
||||
<span
|
||||
class="home-title-more"
|
||||
@click="
|
||||
inOutShow = true;
|
||||
inOutTitle = '出库工单';
|
||||
"
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
<div class="home-right-outboundWorkOrder">
|
||||
<div
|
||||
class="home-right-outboundWorkOrder-box"
|
||||
v-for="(item, index) in outboundWorkOrder"
|
||||
:key="'out' + index"
|
||||
>
|
||||
<div class="left-plate">
|
||||
<img :src="item.pic" alt="" />
|
||||
<p class="name">{{ item.picName }}</p>
|
||||
</div>
|
||||
<div class="right-plate">
|
||||
<p class="name">{{ item.name }}</p>
|
||||
<p class="id">{{ item.id }}</p>
|
||||
<p class="start-time">
|
||||
开始时间：<span>{{ item.startTime }}</span>
|
||||
</p>
|
||||
<div class="home-right-outboundWorkOrder-content">
|
||||
<div
|
||||
class="home-right-outboundWorkOrder-box"
|
||||
v-for="(item, index) in outboundWorkOrder"
|
||||
:key="'out' + index"
|
||||
>
|
||||
<div class="left-plate">
|
||||
<img :src="item.pic" alt="" />
|
||||
<p class="name">喂丝机{{ item.feederId }}号</p>
|
||||
</div>
|
||||
<div class="right-plate">
|
||||
<p class="name">{{ item.itemDesc }}</p>
|
||||
<p class="id">{{ item.currentBatch }}</p>
|
||||
<p class="start-time">
|
||||
开始时间：<span>{{ item.creatTime }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 入库工单 -->
|
||||
<div class="home-title">
|
||||
<span class="home-title-font"> 入库工单 </span>
|
||||
<span class="home-title-more" @click="inOutShow=true;inOutTitle='入库工单'"> </span>
|
||||
<span
|
||||
class="home-title-more"
|
||||
@click="
|
||||
inOutShow = true;
|
||||
inOutTitle = '入库工单';
|
||||
"
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
<div class="home-right-inboundWorkOrder">
|
||||
<div
|
||||
<div class="home-right-inboundWorkOrder-content">
|
||||
<div
|
||||
class="home-right-inboundWorkOrder-box"
|
||||
v-for="(item, index) in inboundWorkOrder"
|
||||
:key="'out' + index"
|
||||
>
|
||||
<div class="left-plate">
|
||||
<img :src="item.pic" alt="" />
|
||||
<p class="name">{{ item.picName }}</p>
|
||||
<p class="name">装箱站{{ item.packStation }}号</p>
|
||||
</div>
|
||||
<div class="right-plate">
|
||||
<p class="name">{{ item.name }}</p>
|
||||
<p class="id">{{ item.id }}</p>
|
||||
<p class="name">{{ item.itemDesc }}</p>
|
||||
<p class="id">{{ item.batch }}</p>
|
||||
<p class="start-time">
|
||||
开始时间：<span>{{ item.startTime }}</span>
|
||||
开始时间：<span>{{ item.creatTime }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-bottom">
|
||||
|
|
@ -123,41 +152,59 @@
|
|||
<span></span>
|
||||
</div>
|
||||
<ul>
|
||||
<li :style="`background-image:url(${asideListIndex===index?item.select:item.default})`" v-for="(item,index) in asideList" :key="'key'+index" @click="asideToggle(index)">
|
||||
|
||||
</li>
|
||||
<li
|
||||
:style="`background-image:url(${
|
||||
asideListIndex === index ? item.select : item.default
|
||||
})`"
|
||||
v-for="(item, index) in asideList"
|
||||
:key="'key' + index"
|
||||
@click="asideToggle(index)"
|
||||
></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 消息提醒弹窗 -->
|
||||
<messageDialog v-if='isOpen' @closeMsg="closeMsg"/>
|
||||
<messageDialog v-if="isOpen" @closeMsg="closeMsg" />
|
||||
<!-- 各品牌库存弹窗 -->
|
||||
<brand v-if="brandShow" @closeBrand="closeBrand"/>
|
||||
<brand v-if="brandShow" @closeBrand="closeBrand" />
|
||||
<!-- 库存消息弹窗 -->
|
||||
<inventoryNews v-if="inventoryNewsShow" @close="closeInventoryNews"/>
|
||||
<inventoryNews v-if="inventoryNewsShow" @close="closeInventoryNews" />
|
||||
<!-- 出入库信息弹窗 -->
|
||||
<inOutBound v-if="inOutShow" :title="inOutTitle" @close="closeInOut" ></inOutBound>
|
||||
<inOutBound
|
||||
v-if="inOutShow"
|
||||
:title="inOutTitle"
|
||||
:data="inOutTitle === '出库工单' ? outboundWorkOrder : inboundWorkOrder"
|
||||
@close="closeInOut"
|
||||
></inOutBound>
|
||||
<!-- 设备管理弹窗 -->
|
||||
<equipmentManagement v-if="asideListIndex===1" @closeDialog="closeDialog"/>
|
||||
<equipmentManagement v-if="asideListIndex === 1" @closeDialog="closeDialog" />
|
||||
<!-- 生产信息弹窗 -->
|
||||
<devData v-if="asideListIndex===0" @closeDialog="closeDialog" />
|
||||
<!-- 运维指导弹窗 -->
|
||||
<OPEX v-if="asideListIndex===2" @closeDialog="closeDialog"/>
|
||||
<devData v-if="asideListIndex === 0" @closeDialog="closeDialog" />
|
||||
<!-- 运维指导弹窗 -->
|
||||
<OPEX v-if="asideListIndex === 2" @closeDialog="closeDialog" />
|
||||
</template>
|
||||
<script setup>
|
||||
import devData from "./components/aside/devData" //生产信息
|
||||
import equipmentManagement from "./components/aside/equipmentManagement"// 设备管理
|
||||
import OPEX from "./components/aside/OPEX"
|
||||
import devData from "./components/aside/devData"; //生产信息
|
||||
import equipmentManagement from "./components/aside/equipmentManagement"; // 设备管理
|
||||
import OPEX from "./components/aside/OPEX";
|
||||
|
||||
import brand from './components/homeDialog/brand' //各品牌库存管理
|
||||
import messageDialog from './components/homeDialog/messageDialog' //消息提醒
|
||||
import inventoryNews from './components/homeDialog/inventoryNews'//库存消息
|
||||
import inOutBound from './components/homeDialog/inOutBound'
|
||||
import brand from "./components/homeDialog/brand"; //各品牌库存管理
|
||||
import messageDialog from "./components/homeDialog/messageDialog"; //消息提醒
|
||||
import inventoryNews from "./components/homeDialog/inventoryNews"; //库存消息
|
||||
import inOutBound from "./components/homeDialog/inOutBound";
|
||||
import { Search } from "@element-plus/icons-vue"; //出入库工单
|
||||
import * as echarts from "echarts";
|
||||
import { ref, onMounted } from "vue";
|
||||
import getPath from "@/utils/getPath";
|
||||
|
||||
import {
|
||||
getEquipStatus,
|
||||
getInventoryInfo,
|
||||
getCarErrorIn12,
|
||||
getOverTransmission,
|
||||
getInOrder,
|
||||
getOutOrder,
|
||||
getLocInfo,
|
||||
} from "@/api/home";
|
||||
// 设备状态列表
|
||||
const deviceList = ref([
|
||||
{
|
||||
|
|
@ -174,7 +221,7 @@ const deviceList = ref([
|
|||
},
|
||||
]);
|
||||
// 绘制各品牌库存情况
|
||||
function darwBrandChart() {
|
||||
function darwBrandChart(data) {
|
||||
let yData = [
|
||||
"兰州(硬珍品)烟丝",
|
||||
"兰州(长嘴)烟丝",
|
||||
|
|
@ -186,6 +233,13 @@ function darwBrandChart() {
|
|||
// yData.push(item.Ranking + " " + item.DeviceName);
|
||||
// xData.push(item.EH);
|
||||
// });
|
||||
if (data) {
|
||||
yData = Object.keys(data[1]);
|
||||
xData = Object.values(data[1]).map((el) => {
|
||||
return el * data[0];
|
||||
});
|
||||
console.log(xData);
|
||||
}
|
||||
let myChart = echarts.init(document.getElementById("brand"));
|
||||
let option = {
|
||||
grid: {
|
||||
|
|
@ -207,7 +261,7 @@ function darwBrandChart() {
|
|||
"<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
|
||||
params[0].seriesName +
|
||||
" : " +
|
||||
parseInt((params[0].value / 100) * 100) +
|
||||
parseInt((params[0].value / data[0]) * 100) +
|
||||
"%"
|
||||
);
|
||||
},
|
||||
|
|
@ -266,7 +320,7 @@ function darwBrandChart() {
|
|||
// axisPointer: {
|
||||
// show: true,
|
||||
// },
|
||||
data: yData.slice(0, 5),
|
||||
data: yData,
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
|
|
@ -280,7 +334,7 @@ function darwBrandChart() {
|
|||
inside: true,
|
||||
textStyle: {},
|
||||
formatter: function (value) {
|
||||
return "{a|" + parseInt((value / 100) * 100) + "%}";
|
||||
return "{a|" + parseInt((value / data[0]) * 100) + "%}";
|
||||
},
|
||||
rich: {
|
||||
a: {
|
||||
|
|
@ -318,7 +372,7 @@ function darwBrandChart() {
|
|||
type: "bar",
|
||||
barWidth: 10,
|
||||
barGap: "-115%",
|
||||
data: [100, 100, 100, 100, 100],
|
||||
data: [data[0], data[0], data[0], data[0], data[0]],
|
||||
itemStyle: {
|
||||
color: "rgba(112, 112, 112, 0.23)",
|
||||
},
|
||||
|
|
@ -333,55 +387,63 @@ function darwBrandChart() {
|
|||
}
|
||||
// 消息提醒
|
||||
const messageReminder = ref([
|
||||
{
|
||||
msg: "维保提醒",
|
||||
date: "2024-08-21 14:41:10",
|
||||
reminderMsg: "设备EWGAGAD需要维保",
|
||||
},
|
||||
{
|
||||
msg: "维保提醒",
|
||||
date: "2024-08-21 14:41:10",
|
||||
reminderMsg: "设备EWGAGAD需要维保",
|
||||
},
|
||||
{
|
||||
msg: "维保提醒",
|
||||
date: "2024-08-21 14:41:10",
|
||||
reminderMsg: "设备EWGAGAD需要维保",
|
||||
},
|
||||
// {
|
||||
// msg: "维修提醒",
|
||||
// date: "2024-08-21 14:41:10",
|
||||
// reminderMsg: "设备EWGAGAD需要维保",
|
||||
// },
|
||||
// {
|
||||
// msg: "维修提醒",
|
||||
// date: "2024-08-21 14:41:10",
|
||||
// reminderMsg: "设备EWGAGAD需要维保",
|
||||
// },
|
||||
// {
|
||||
// msg: "维修提醒",
|
||||
// date: "2024-08-21 14:41:10",
|
||||
// reminderMsg: "设备EWGAGAD需要维保",
|
||||
// },
|
||||
]);
|
||||
// 搜索框关联的搜索内容
|
||||
const searchData = ref();
|
||||
|
||||
// 库存消息的echarts
|
||||
function drawInventoryNewsEcahrt() {
|
||||
function drawInventoryNewsEcahrt(result) {
|
||||
let myChart = echarts.init(document.getElementById("inventoryNews"));
|
||||
var scaleData = [
|
||||
{
|
||||
name: "货位",
|
||||
value: 1174,
|
||||
radius1: [52, 53],
|
||||
radius1: ['51%', '53%'],
|
||||
},
|
||||
{
|
||||
name: "实箱",
|
||||
value: 1101,
|
||||
radius1: [59, 60],
|
||||
radius1: ["59%", "60%"],
|
||||
},
|
||||
{
|
||||
name: "空箱",
|
||||
value: 68,
|
||||
radius1: [67, 68],
|
||||
radius1: ["67%", "68%"],
|
||||
},
|
||||
];
|
||||
// 数据处理
|
||||
scaleData.forEach((el) => {
|
||||
for (let key in result) {
|
||||
if (el.name === key) {
|
||||
el.value = result[key];
|
||||
}
|
||||
}
|
||||
});
|
||||
var placeHolderStyle = {
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
},
|
||||
color: "rgba(0, 0, 0, 0)",
|
||||
borderColor: "rgba(0, 0, 0, 0.2)",
|
||||
borderWidth: 2,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
},
|
||||
color: "rgba(0, 0, 0, 0)",
|
||||
borderColor: "rgba(0, 0, 0, 0.2)",
|
||||
borderWidth: 2,
|
||||
};
|
||||
var seriesObj = [];
|
||||
var color = [
|
||||
|
|
@ -395,7 +457,7 @@ function drawInventoryNewsEcahrt() {
|
|||
name: "",
|
||||
type: "pie",
|
||||
radius: scaleData[i].radius1,
|
||||
center:['24%','50%'],
|
||||
center: ["24%", "50%"],
|
||||
hoverAnimation: false,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
|
|
@ -417,7 +479,7 @@ function drawInventoryNewsEcahrt() {
|
|||
},
|
||||
},
|
||||
{
|
||||
value: 1174 - scaleData[i].value,
|
||||
value: scaleData[0].value - scaleData[i].value,
|
||||
name: "",
|
||||
itemStyle: placeHolderStyle,
|
||||
},
|
||||
|
|
@ -426,22 +488,22 @@ function drawInventoryNewsEcahrt() {
|
|||
}
|
||||
let option = {
|
||||
graphic: {
|
||||
/**
|
||||
* 【主要代码】图形中心展示图片
|
||||
*/
|
||||
elements: [
|
||||
{
|
||||
type: 'image',
|
||||
style: {
|
||||
image: getPath.homeIcon, // 图片地址
|
||||
width: 50,
|
||||
height: 50
|
||||
},
|
||||
// left: '18.5%',
|
||||
left: '17.5%', // 【主要代码1】
|
||||
top: 'center'
|
||||
}
|
||||
]
|
||||
/**
|
||||
* 【主要代码】图形中心展示图片
|
||||
*/
|
||||
elements: [
|
||||
{
|
||||
type: "image",
|
||||
style: {
|
||||
image: getPath.homeIcon, // 图片地址
|
||||
width: 50,
|
||||
height: 50,
|
||||
},
|
||||
// left: '18.5%',
|
||||
left: "17.5%", // 【主要代码1】
|
||||
top: "center",
|
||||
},
|
||||
],
|
||||
},
|
||||
color: color,
|
||||
tooltip: {
|
||||
|
|
@ -450,38 +512,42 @@ function drawInventoryNewsEcahrt() {
|
|||
legend: {
|
||||
icon: "circle",
|
||||
orient: "vertical",
|
||||
x: "200",
|
||||
x: "58%",
|
||||
y: "center",
|
||||
itemWidth:10,
|
||||
itemHeight:10,
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
itemGap: 40,
|
||||
data:scaleData.map(el=>{return el.name}),
|
||||
data: scaleData.map((el) => {
|
||||
return el.name;
|
||||
}),
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize:"14",
|
||||
rich:{
|
||||
name:{
|
||||
fontSize: "14",
|
||||
rich: {
|
||||
name: {
|
||||
color: "#fff",
|
||||
|
||||
fontSize:"14",
|
||||
|
||||
fontSize: "14",
|
||||
},
|
||||
val:{
|
||||
fontSize:"16",
|
||||
textAlign:'right',
|
||||
width:'40',
|
||||
}
|
||||
}
|
||||
val: {
|
||||
fontSize: "16",
|
||||
textAlign: "right",
|
||||
width: "40",
|
||||
padding: [0, 0, 0, 50],
|
||||
color: color[i],
|
||||
},
|
||||
},
|
||||
},
|
||||
formatter:function(name){
|
||||
formatter: function (name) {
|
||||
let total = 0;
|
||||
for (var i = 0; i < scaleData.length; i++) {
|
||||
if(scaleData[i].name===name){
|
||||
total = scaleData[i].value
|
||||
if (scaleData[i].name === name) {
|
||||
total = scaleData[i].value;
|
||||
}
|
||||
}
|
||||
return `{name|${name}} {val|${total}}`
|
||||
}
|
||||
return `{name|${name}} {val|${total}}`;
|
||||
},
|
||||
},
|
||||
toolbox: {
|
||||
show: false,
|
||||
|
|
@ -545,64 +611,138 @@ const inboundWorkOrder = ref([
|
|||
|
||||
const asideList = ref([
|
||||
{
|
||||
default:getPath.devDefault,
|
||||
select:getPath.devSelect
|
||||
default: getPath.devDefault,
|
||||
select: getPath.devSelect,
|
||||
},
|
||||
{
|
||||
default:getPath.deviceDefault,
|
||||
select:getPath.deviceSelect
|
||||
default: getPath.deviceDefault,
|
||||
select: getPath.deviceSelect,
|
||||
},
|
||||
{
|
||||
default:getPath.operationDefault,
|
||||
select:getPath.operationSelect
|
||||
default: getPath.operationDefault,
|
||||
select: getPath.operationSelect,
|
||||
},
|
||||
])
|
||||
const asideListIndex = ref(-1)
|
||||
function asideToggle(index){
|
||||
|
||||
asideListIndex.value = index
|
||||
]);
|
||||
const asideListIndex = ref(-1);
|
||||
function asideToggle(index) {
|
||||
asideListIndex.value = index;
|
||||
}
|
||||
// 关闭生产信息弹窗
|
||||
// 关闭设备管理弹窗
|
||||
function closeDialog(e){
|
||||
asideListIndex.value = e
|
||||
function closeDialog(e) {
|
||||
asideListIndex.value = e;
|
||||
}
|
||||
|
||||
|
||||
// 各品牌库存情况
|
||||
const brandShow = ref(false)
|
||||
function closeBrand(boolean){
|
||||
brandShow.value = boolean
|
||||
const brandShow = ref(false);
|
||||
function closeBrand(boolean) {
|
||||
brandShow.value = boolean;
|
||||
}
|
||||
const isOpen = ref(false)
|
||||
const isOpen = ref(false);
|
||||
// 消息提醒弹窗
|
||||
function closeMsg(boolean){
|
||||
isOpen.value = boolean
|
||||
function closeMsg(boolean) {
|
||||
isOpen.value = boolean;
|
||||
}
|
||||
// 打开消息提醒弹窗
|
||||
function openMsg(){
|
||||
isOpen.value = true
|
||||
function openMsg() {
|
||||
isOpen.value = true;
|
||||
}
|
||||
|
||||
const inventoryNewsShow = ref(false)
|
||||
const inventoryNewsShow = ref(false);
|
||||
// 关闭库存消息弹窗
|
||||
function closeInventoryNews(boolean){
|
||||
inventoryNewsShow.value = boolean
|
||||
function closeInventoryNews(boolean) {
|
||||
inventoryNewsShow.value = boolean;
|
||||
}
|
||||
// 打开库存消息弹窗
|
||||
function openInventoryNews(){
|
||||
inventoryNewsShow.value = true
|
||||
function openInventoryNews() {
|
||||
inventoryNewsShow.value = true;
|
||||
}
|
||||
// 出入库工单显隐
|
||||
const inOutShow = ref(false)
|
||||
const inOutTitle = ref('')
|
||||
function closeInOut(boolean){
|
||||
inOutShow.value = boolean
|
||||
const inOutShow = ref(false);
|
||||
const inOutTitle = ref("");
|
||||
function closeInOut(boolean) {
|
||||
inOutShow.value = boolean;
|
||||
}
|
||||
/*---------------------------接口方法 */
|
||||
// 获取设备状态的接口方法
|
||||
function getDeviceStatus() {
|
||||
getEquipStatus().then((res) => {
|
||||
deviceList.value.forEach((el) => {
|
||||
// if(el.deviceStatus)
|
||||
for (let key in res.result) {
|
||||
if (el.deviceStatus === key) {
|
||||
el.deviceNum = res.result[key];
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
const brandList = ref([])
|
||||
// 各品牌库存情况接口方法
|
||||
function getBrandData() {
|
||||
getInventoryInfo().then((res) => {
|
||||
// darwBrandChart(res.result);
|
||||
for(let key in res.result[1]){
|
||||
brandList.value.push({
|
||||
pct:res.result[1][key],
|
||||
name:key
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
// 消息提醒
|
||||
async function getMessageReminder() {
|
||||
await getCarErrorIn12().then((res) => {
|
||||
res.result.forEach((el) => {
|
||||
el.msg = "维修提醒";
|
||||
el.reminderMsg = el.facName + el.facCode + " 需要维修";
|
||||
el.date = el.errorDateTime;
|
||||
messageReminder.value.push(el);
|
||||
});
|
||||
});
|
||||
await getOverTransmission().then((res) => {
|
||||
res.result.forEach((el) => {
|
||||
el.msg = "超时提醒";
|
||||
el.reminderMsg = el.itemDesc + el.palletNum + " 任务超时";
|
||||
el.date = el.startDate;
|
||||
messageReminder.value.push(el);
|
||||
});
|
||||
});
|
||||
}
|
||||
// 获取库存消息接口方法
|
||||
function getInventory() {
|
||||
getLocInfo().then((res) => {
|
||||
drawInventoryNewsEcahrt(res.result);
|
||||
});
|
||||
}
|
||||
// 出库工单接口
|
||||
function getOutboundWorkOrder() {
|
||||
getOutOrder().then((res) => {
|
||||
outboundWorkOrder.value = res.result;
|
||||
outboundWorkOrder.value.forEach((el) => {
|
||||
el.pic = getPath.outDevice;
|
||||
});
|
||||
});
|
||||
}
|
||||
// 入库工单接口
|
||||
function getInboundWorkOrder() {
|
||||
getInOrder().then((res) => {
|
||||
inboundWorkOrder.value = res.result;
|
||||
inboundWorkOrder.value.forEach((el) => {
|
||||
el.pic = getPath.inDevice;
|
||||
});
|
||||
});
|
||||
}
|
||||
onMounted(() => {
|
||||
darwBrandChart();
|
||||
getDeviceStatus(); //获取设备状态
|
||||
|
||||
drawInventoryNewsEcahrt();
|
||||
getBrandData(); //获取各品牌库存情况
|
||||
getMessageReminder(); //消息提醒
|
||||
|
||||
getInventory(); //库存消息
|
||||
|
||||
getOutboundWorkOrder(); //出库工单
|
||||
getInboundWorkOrder(); //入库工单
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
|
|
@ -632,10 +772,11 @@ onMounted(() => {
|
|||
height: vh(31);
|
||||
padding-left: vw(27);
|
||||
display: flex;
|
||||
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
&-font {
|
||||
text-shadow: 0px 2px 0px #073c6a;
|
||||
text-shadow: 0px 0px 6px #19aefa;
|
||||
font-family: "pangmen";
|
||||
font-size: 1.2rem;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
|
|
@ -650,6 +791,8 @@ onMounted(() => {
|
|||
}
|
||||
&-left,
|
||||
&-right {
|
||||
// background-color: rgba(6, 32, 59, 1);
|
||||
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
width: vw(368);
|
||||
|
|
@ -678,11 +821,44 @@ onMounted(() => {
|
|||
}
|
||||
}
|
||||
}
|
||||
&-brand>div{
|
||||
margin-bottom: vh(24);
|
||||
}
|
||||
&-brand::-webkit-scrollbar{
|
||||
display: none;
|
||||
}
|
||||
&-brand {
|
||||
height: vh(300);
|
||||
overflow-y: scroll;
|
||||
padding: vh(23) vw(10);
|
||||
box-sizing: border-box;
|
||||
height: vh(388);
|
||||
&-progress{
|
||||
background-color: rgba(112, 112, 112, 0.23);
|
||||
height: vh(8);
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
&-title{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: vh(10);
|
||||
font-size: 0.875rem;
|
||||
.pct{
|
||||
font-size:1rem;color:rgba(144, 218, 255, 1);font-weight:700
|
||||
}
|
||||
}
|
||||
&-bg{
|
||||
height: 100%;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
background: linear-gradient( 79deg, #19AEFA 0%, #94DBFF 100%);
|
||||
}
|
||||
}
|
||||
&-messageReminder {
|
||||
height: vh(257);
|
||||
height: vh(180);
|
||||
padding: vh(22) vw(12);
|
||||
box-sizing: border-box;
|
||||
&-data {
|
||||
|
|
@ -710,20 +886,38 @@ onMounted(() => {
|
|||
}
|
||||
&-outboundWorkOrder,
|
||||
&-inboundWorkOrder {
|
||||
height: vh(296);
|
||||
padding: vh(30) vw(30);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: space-between;
|
||||
height: vh(388);
|
||||
padding: vh(20) vw(30);
|
||||
// overflow-y: scroll;
|
||||
// display: flex;
|
||||
// flex-wrap: wrap;
|
||||
// align-content: space-between;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
&-inboundWorkOrder{
|
||||
height: vh(205);
|
||||
}
|
||||
&-outboundWorkOrder-content::-webkit-scrollbar,
|
||||
&-inboundWorkOrder-content::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
&-outboundWorkOrder-content,&-inboundWorkOrder-content{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
&-outboundWorkOrder-box,
|
||||
&-inboundWorkOrder-box {
|
||||
margin-bottom: vh(15);
|
||||
display: flex;
|
||||
.left-plate {
|
||||
font-size: 0.75rem;
|
||||
text-align: center;
|
||||
margin-right: vw(32);
|
||||
img{
|
||||
width: vw(47);
|
||||
height:vh(41)
|
||||
}
|
||||
}
|
||||
.right-plate {
|
||||
font-size: 0.875rem;
|
||||
|
|
@ -735,7 +929,7 @@ onMounted(() => {
|
|||
}
|
||||
.start-time {
|
||||
span {
|
||||
font-size: 1.1rem;
|
||||
font-size: 1rem;
|
||||
color: rgba(28, 238, 251, 1);
|
||||
}
|
||||
}
|
||||
|
|
@ -744,37 +938,37 @@ onMounted(() => {
|
|||
}
|
||||
}
|
||||
// 底部
|
||||
.home-bottom{
|
||||
.home-bottom {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: vh(-24);
|
||||
left: 0;
|
||||
height: vh(64.5);
|
||||
// height: 41px;
|
||||
background-image: url('@/assets/images/home/bottom.png');
|
||||
background-image: url("@/assets/images/home/bottom.png");
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
&-put{
|
||||
&-put {
|
||||
width: vw(24);
|
||||
height: vh(16);
|
||||
background-image: url('@/assets/images/home/put.png');
|
||||
background-image: url("@/assets/images/home/put.png");
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
top: vh(-30);
|
||||
cursor: pointer;
|
||||
}
|
||||
ul{
|
||||
ul {
|
||||
position: absolute;
|
||||
bottom: vh(26);
|
||||
bottom: vh(26);
|
||||
display: flex;
|
||||
li{
|
||||
li {
|
||||
cursor: pointer;
|
||||
width: vw(242);
|
||||
height: vh(38);
|
||||
background-size: 100% 100%;
|
||||
width: vw(242);
|
||||
height: vh(38);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
li:nth-child(2){
|
||||
li:nth-child(2) {
|
||||
margin: 0 0.625rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue