9.6代码提交
This commit is contained in:
parent
e2d194eab3
commit
2aeb10ea03
File diff suppressed because it is too large
Load Diff
|
|
@ -15,8 +15,11 @@
|
||||||
"element-plus": "^2.3.14",
|
"element-plus": "^2.3.14",
|
||||||
"less": "^4.2.0",
|
"less": "^4.2.0",
|
||||||
"three": "^0.164.1",
|
"three": "^0.164.1",
|
||||||
|
"video.js": "^7.21.6",
|
||||||
"vue": "^3.3.4",
|
"vue": "^3.3.4",
|
||||||
"vue-router": "^4.2.5"
|
"vue-router": "^4.2.5",
|
||||||
|
"vue-video-player": "^5.0.2",
|
||||||
|
"vue3-video-play": "^1.3.2"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vitejs/plugin-vue": "^4.2.3",
|
"@vitejs/plugin-vue": "^4.2.3",
|
||||||
|
|
|
||||||
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
Binary file not shown.
|
|
@ -0,0 +1 @@
|
||||||
|
172.16.1.104:5005
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 665 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 175 B |
Binary file not shown.
|
After Width: | Height: | Size: 96 B |
Binary file not shown.
|
After Width: | Height: | Size: 109 B |
Binary file not shown.
|
After Width: | Height: | Size: 74 B |
Binary file not shown.
|
After Width: | Height: | Size: 84 B |
|
|
@ -0,0 +1,24 @@
|
||||||
|
body { overflow: hidden;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%; }
|
||||||
|
#unity-container { position: absolute }
|
||||||
|
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
|
||||||
|
#unity-container.unity-mobile { width: 100%; height: 100% }
|
||||||
|
#unity-canvas { background: url('bg1.jpg') no-repeat; }
|
||||||
|
.unity-mobile #unity-canvas { width: 100%; height: 100% }
|
||||||
|
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none ;background: url('bg1.jpg') no-repeat;display: none; }
|
||||||
|
#unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center ;display: none; }
|
||||||
|
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; margin-left: 6.5px; background: url('progress-bar-empty-dark.png') no-repeat center;display: none; }
|
||||||
|
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center;display: none; }
|
||||||
|
#unity-footer { position: relative }
|
||||||
|
.unity-mobile #unity-footer { display: none }
|
||||||
|
/* #unity-webgl-logo { float:left; width: 204px; height: 38px; background: url('webgl-logo.png') no-repeat center } */
|
||||||
|
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px ;display: none}
|
||||||
|
#unity-fullscreen-button { float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center ;display: none}
|
||||||
|
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }
|
||||||
|
#blackleng{
|
||||||
|
width: 100%; height: 100%; background: url('bg1.jpg') no-repeat;
|
||||||
|
}
|
||||||
|
#black{
|
||||||
|
width: 100%; height: 100%; background: url('bg1.jpg') no-repeat;
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -0,0 +1,139 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en-us">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||||
|
<title>Unity WebGL Player | U3D_TobaccoWarehouseISMDTSystem</title>
|
||||||
|
<link rel="shortcut icon" href="TemplateData/favicon.ico">
|
||||||
|
<link rel="stylesheet" href="TemplateData/style.css">
|
||||||
|
</head>
|
||||||
|
<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>
|
||||||
|
<div id="unity-loading-bar">
|
||||||
|
<div id="unity-logo"></div>
|
||||||
|
<div id="unity-progress-bar-empty">
|
||||||
|
<div id="unity-progress-bar-full"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="unity-warning"> </div>
|
||||||
|
<!-- <div id="unity-footer">
|
||||||
|
<div id="unity-webgl-logo"></div>
|
||||||
|
<div id="unity-fullscreen-button"></div>
|
||||||
|
<div id="unity-build-title">U3D_TobaccoWarehouseISMDTSystem</div>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var container = document.querySelector("#unity-container");
|
||||||
|
var canvas = document.querySelector("#unity-canvas");
|
||||||
|
var loadingBar = document.querySelector("#unity-loading-bar");
|
||||||
|
var progressBarFull = document.querySelector("#unity-progress-bar-full");
|
||||||
|
var fullscreenButton = document.querySelector("#unity-fullscreen-button");
|
||||||
|
var warningBanner = document.querySelector("#unity-warning");
|
||||||
|
var unity
|
||||||
|
// Shows a temporary message banner/ribbon for a few seconds, or
|
||||||
|
// a permanent error message on top of the canvas if type=='error'.
|
||||||
|
// If type=='warning', a yellow highlight color is used.
|
||||||
|
// Modify or remove this function to customize the visually presented
|
||||||
|
// way that non-critical warnings and error messages are presented to the
|
||||||
|
// user.
|
||||||
|
function unityShowBanner(msg, type) {
|
||||||
|
function updateBannerVisibility() {
|
||||||
|
warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
|
||||||
|
}
|
||||||
|
var div = document.createElement('div');
|
||||||
|
div.innerHTML = msg;
|
||||||
|
warningBanner.appendChild(div);
|
||||||
|
if (type == 'error') div.style = 'background: red; padding: 10px;';
|
||||||
|
else {
|
||||||
|
if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
|
||||||
|
setTimeout(function() {
|
||||||
|
warningBanner.removeChild(div);
|
||||||
|
updateBannerVisibility();
|
||||||
|
}, 5000);
|
||||||
|
}
|
||||||
|
updateBannerVisibility();
|
||||||
|
}
|
||||||
|
|
||||||
|
var buildUrl = "Build";
|
||||||
|
var loaderUrl = buildUrl + "/Hoister.loader.js";
|
||||||
|
var config = {
|
||||||
|
dataUrl: buildUrl + "/Hoister.data.unityweb",
|
||||||
|
frameworkUrl: buildUrl + "/Hoister.framework.js.unityweb",
|
||||||
|
codeUrl: buildUrl + "/Hoister.wasm.unityweb",
|
||||||
|
streamingAssetsUrl: "StreamingAssets",
|
||||||
|
companyName: "DefaultCompany",
|
||||||
|
productName: "U3D_TobaccoWarehouseISMDTSystem",
|
||||||
|
productVersion: "0.1",
|
||||||
|
showBanner: unityShowBanner,
|
||||||
|
};
|
||||||
|
|
||||||
|
// By default, Unity keeps WebGL canvas render target size matched with
|
||||||
|
// the DOM size of the canvas element (scaled by window.devicePixelRatio)
|
||||||
|
// Set this to false if you want to decouple this synchronization from
|
||||||
|
// happening inside the engine, and you would instead like to size up
|
||||||
|
// the canvas DOM size and WebGL render target sizes yourself.
|
||||||
|
// config.matchWebGLToCanvasSize = false;
|
||||||
|
|
||||||
|
if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
|
||||||
|
// Mobile device style: fill the whole browser client area with the game canvas:
|
||||||
|
|
||||||
|
var meta = document.createElement('meta');
|
||||||
|
meta.name = 'viewport';
|
||||||
|
meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
|
||||||
|
document.getElementsByTagName('head')[0].appendChild(meta);
|
||||||
|
container.className = "unity-mobile";
|
||||||
|
canvas.className = "unity-mobile";
|
||||||
|
|
||||||
|
// To lower canvas resolution on mobile devices to gain some
|
||||||
|
// performance, uncomment the following line:
|
||||||
|
// config.devicePixelRatio = 1;
|
||||||
|
|
||||||
|
|
||||||
|
} else {
|
||||||
|
// Desktop style: Render the game canvas in a window that can be maximized to fullscreen:
|
||||||
|
|
||||||
|
canvas.style.width = "100%";
|
||||||
|
canvas.style.height = "100%";
|
||||||
|
}
|
||||||
|
|
||||||
|
// loadingBar.style.display = "block";
|
||||||
|
|
||||||
|
var script = document.createElement("script");
|
||||||
|
script.src = loaderUrl;
|
||||||
|
script.onload = () => {
|
||||||
|
createUnityInstance(canvas, config, (progress) => {
|
||||||
|
// progressBarFull.style.width = 100 * progress + "%";
|
||||||
|
// window.parent.getProgress(progress);
|
||||||
|
}).then((unityInstance) => {
|
||||||
|
unity = unityInstance
|
||||||
|
// loadingBar.style.display = "none";
|
||||||
|
// fullscreenButton.onclick = () => {
|
||||||
|
// unityInstance.SetFullscreen(1);
|
||||||
|
// };
|
||||||
|
}).catch((message) => {
|
||||||
|
alert(message);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
//切换模型
|
||||||
|
function changeModel(data){
|
||||||
|
unity.SendMessage('Controller','Displaymodel',data)
|
||||||
|
}
|
||||||
|
function open(){
|
||||||
|
unity.SendMessage('提升机','Unfold')
|
||||||
|
}
|
||||||
|
function close(){
|
||||||
|
unity.SendMessage('提升机','Restore')
|
||||||
|
}
|
||||||
|
function opencar(){
|
||||||
|
unity.SendMessage('AGV','Unfold')
|
||||||
|
}
|
||||||
|
function closecar(){
|
||||||
|
unity.SendMessage('AGV','Restore')
|
||||||
|
}
|
||||||
|
document.body.appendChild(script);
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<configuration>
|
||||||
|
<system.webServer>
|
||||||
|
<staticContent>
|
||||||
|
<mimeMap fileExtension=".unity3d" mimeType="application/octet-stream" />
|
||||||
|
<mimeMap fileExtension=".unityweb" mimeType="application/octet-stream" />
|
||||||
|
</staticContent>
|
||||||
|
</system.webServer>
|
||||||
|
</configuration>
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -64,7 +64,7 @@ export function allDevicId(params){
|
||||||
// 易损件
|
// 易损件
|
||||||
export function getPageDamageEquip(params){
|
export function getPageDamageEquip(params){
|
||||||
return request({
|
return request({
|
||||||
url:'/api/equipManage/GetPageDamageEquip',
|
url:'/api/equipManage/GetDamageElement',
|
||||||
method:'get',
|
method:'get',
|
||||||
params
|
params
|
||||||
})
|
})
|
||||||
|
|
@ -102,7 +102,7 @@ export function countYearErrors(params){
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// 维护保养统计
|
// 维修统计
|
||||||
export function countMaintainRecord(params){
|
export function countMaintainRecord(params){
|
||||||
return request({
|
return request({
|
||||||
url:'/api/maintainManage/CountMaintainRecord',
|
url:'/api/maintainManage/CountMaintainRecord',
|
||||||
|
|
@ -152,3 +152,40 @@ export function getErrorRate(params){
|
||||||
params
|
params
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//运维指导
|
||||||
|
|
||||||
|
//指导文件下拉数据
|
||||||
|
export function getDocsIdentity(params){
|
||||||
|
return request({
|
||||||
|
url:'/api/guide/GetDocsIdentity',
|
||||||
|
method:'get',
|
||||||
|
params
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//指导文件
|
||||||
|
export function GetPageGuideDocs(params){
|
||||||
|
return request({
|
||||||
|
url:'/api/guide/GetPageGuideDocs',
|
||||||
|
method:'get',
|
||||||
|
params
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//知识库
|
||||||
|
//获取知识库下拉数据
|
||||||
|
export function GetVideosIdentity(params){
|
||||||
|
return request({
|
||||||
|
url:'/api/guide/GetVideosIdentity',
|
||||||
|
method:'get',
|
||||||
|
params
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//获取知识库列表数据
|
||||||
|
export function GetPageGuideVideos(params){
|
||||||
|
return request({
|
||||||
|
url:'/api/guide/GetPageGuideVideos',
|
||||||
|
method:'get',
|
||||||
|
params
|
||||||
|
})
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 121 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
|
|
@ -4,7 +4,7 @@
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="box-header">
|
<div class="box-header">
|
||||||
<div class="box-title">
|
<div class="box-title">
|
||||||
{{ props.title === '维护保养统计'?"维修统计":props.title }}
|
{{ props.title === '维修统计'?"维修统计":props.title }}
|
||||||
</div>
|
</div>
|
||||||
<div class="el-select1">
|
<div class="el-select1">
|
||||||
<el-select
|
<el-select
|
||||||
|
|
@ -25,7 +25,7 @@
|
||||||
</el-select>
|
</el-select>
|
||||||
</div>
|
</div>
|
||||||
<div class="el-select2">
|
<div class="el-select2">
|
||||||
<el-select v-if="props.title === '维护保养统计'"
|
<el-select v-if="props.title === '维修统计'"
|
||||||
v-model="isMaintain"
|
v-model="isMaintain"
|
||||||
placeholder="请选择"
|
placeholder="请选择"
|
||||||
@change="
|
@change="
|
||||||
|
|
@ -83,10 +83,10 @@
|
||||||
<el-table-column prop="remark" label="备注" align="center" />
|
<el-table-column prop="remark" label="备注" align="center" />
|
||||||
</el-table>
|
</el-table>
|
||||||
</div>
|
</div>
|
||||||
<!-- 维护保养统计 -->
|
<!-- 维修统计 -->
|
||||||
<div
|
<div
|
||||||
class="box-content-table"
|
class="box-content-table"
|
||||||
v-else-if="props.title === '维护保养统计'"
|
v-else-if="props.title === '维修统计'"
|
||||||
>
|
>
|
||||||
<el-table :data="tableList" style="width: 100%">
|
<el-table :data="tableList" style="width: 100%">
|
||||||
<el-table-column
|
<el-table-column
|
||||||
|
|
@ -177,7 +177,7 @@ function getTableList() {
|
||||||
tableList.value = res.result.data;
|
tableList.value = res.result.data;
|
||||||
total.value = res.result.total;
|
total.value = res.result.total;
|
||||||
});
|
});
|
||||||
} else if (props.title === "维护保养统计") {
|
} else if (props.title === "维修统计") {
|
||||||
params.isMaintain = isMaintain.value;
|
params.isMaintain = isMaintain.value;
|
||||||
getPageMaintainInfo(params).then((res) => {
|
getPageMaintainInfo(params).then((res) => {
|
||||||
tableList.value = res.result.data;
|
tableList.value = res.result.data;
|
||||||
|
|
|
||||||
|
|
@ -46,7 +46,7 @@
|
||||||
</div>
|
</div>
|
||||||
<!-- table -->
|
<!-- table -->
|
||||||
<div class="box-content-left-table">
|
<div class="box-content-left-table">
|
||||||
<el-table :data="tableList" style="width: 100%">
|
<el-table :data="tableList" style="width: 100%" @row-click="OperationData" :row-class-name="getCellClassName">
|
||||||
<el-table-column prop="facCode" label="设备编号" />
|
<el-table-column prop="facCode" label="设备编号" />
|
||||||
<el-table-column prop="deviceName" label="设备名称" />
|
<el-table-column prop="deviceName" label="设备名称" />
|
||||||
</el-table>
|
</el-table>
|
||||||
|
|
@ -70,6 +70,15 @@
|
||||||
<div class="box-content-right-top">
|
<div class="box-content-right-top">
|
||||||
<div class="box-content-right-title">
|
<div class="box-content-right-title">
|
||||||
<span>运行情况统计</span>
|
<span>运行情况统计</span>
|
||||||
|
<div style="display: flex; margin-left:50%">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="value3"
|
||||||
|
type="year"
|
||||||
|
placeholder="请选择年份"
|
||||||
|
@change="OperationData"
|
||||||
|
/>
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 折线图 -->
|
<!-- 折线图 -->
|
||||||
<div class="lineChart" id="lineChart"></div>
|
<div class="lineChart" id="lineChart"></div>
|
||||||
|
|
@ -85,7 +94,7 @@
|
||||||
:key="index"
|
:key="index"
|
||||||
>
|
>
|
||||||
<p>
|
<p>
|
||||||
<span>{{item.equipment.facName }} {{item.equipment.facCode}}</span>
|
<span>{{item.elementName }} {{item.elementCode}}</span>
|
||||||
<span>{{ item.damageRatio*100 }}%</span>
|
<span>{{ item.damageRatio*100 }}%</span>
|
||||||
</p>
|
</p>
|
||||||
<div class="switch-item-progress" :style="'width:' + item.damageRatio*100 + '%'"></div>
|
<div class="switch-item-progress" :style="'width:' + item.damageRatio*100 + '%'"></div>
|
||||||
|
|
@ -119,12 +128,25 @@ import {
|
||||||
getEquipCode
|
getEquipCode
|
||||||
} from "@/api/equipmentManagement/index";
|
} from "@/api/equipmentManagement/index";
|
||||||
const emit = defineEmits(["closeEquipmentAnalysis"]);
|
const emit = defineEmits(["closeEquipmentAnalysis"]);
|
||||||
|
const value3 = ref(new Date());
|
||||||
|
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);
|
||||||
|
}
|
||||||
const options = ref([
|
const options = ref([
|
||||||
{
|
{
|
||||||
value: 1,
|
value: 1,
|
||||||
label: 1,
|
label: 1,
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
const activeRow= ref(null)
|
||||||
const tableList = ref([
|
const tableList = ref([
|
||||||
{
|
{
|
||||||
id: "SFTR-003DB013",
|
id: "SFTR-003DB013",
|
||||||
|
|
@ -174,7 +196,9 @@ function drawLineChart(data) {
|
||||||
let myChart;
|
let myChart;
|
||||||
myChart = echarts.init(dom);
|
myChart = echarts.init(dom);
|
||||||
let option = {
|
let option = {
|
||||||
tooltip: {},
|
tooltip: {
|
||||||
|
trigger: 'axis'
|
||||||
|
},
|
||||||
grid: {
|
grid: {
|
||||||
top: "8%",
|
top: "8%",
|
||||||
left: "1%",
|
left: "1%",
|
||||||
|
|
@ -225,7 +249,7 @@ function drawLineChart(data) {
|
||||||
],
|
],
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: "异常流量",
|
name: "运行情况",
|
||||||
type: "line",
|
type: "line",
|
||||||
|
|
||||||
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
||||||
|
|
@ -308,7 +332,9 @@ const total = ref(0)
|
||||||
function getDeviceList() {
|
function getDeviceList() {
|
||||||
getPageEquipList(deviceListParams).then((res) => {
|
getPageEquipList(deviceListParams).then((res) => {
|
||||||
tableList.value = res.result.data;
|
tableList.value = res.result.data;
|
||||||
|
OperationData(tableList.value[0]);
|
||||||
total.value = res.result.totalNum
|
total.value = res.result.totalNum
|
||||||
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
// 所有设备名称
|
// 所有设备名称
|
||||||
|
|
@ -320,6 +346,12 @@ function getAllDeviceNames() {
|
||||||
allName.value = res.result;
|
allName.value = res.result;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
function getCellClassName({ row, rowIndex }) {
|
||||||
|
if (currentRowId.value == row.id) {
|
||||||
|
return "highlight-row";
|
||||||
|
}
|
||||||
|
return "";
|
||||||
|
}
|
||||||
// 所有设备id
|
// 所有设备id
|
||||||
const deviceIds = ref([]);
|
const deviceIds = ref([]);
|
||||||
function deviceNameChange() {
|
function deviceNameChange() {
|
||||||
|
|
@ -336,32 +368,65 @@ function clearHandle() {
|
||||||
deviceListParams.deviceCode = "";
|
deviceListParams.deviceCode = "";
|
||||||
deviceIds.value = "";
|
deviceIds.value = "";
|
||||||
}
|
}
|
||||||
|
// 初始id
|
||||||
|
const currentRowId = ref(null);
|
||||||
|
|
||||||
|
const equipmentCode = ref('Car1')
|
||||||
// 获取运行情况数据请求
|
// 获取运行情况数据请求
|
||||||
function OperationData() {
|
function OperationData(row) {
|
||||||
countYearErrors().then((res) => {
|
console.log(row,"row")
|
||||||
|
currentRowId.value = row.id;
|
||||||
|
console.log(" equipmentCode.value", equipmentCode.value)
|
||||||
|
let params={}
|
||||||
|
if(row.facCode){
|
||||||
|
equipmentCode.value = row.facCode
|
||||||
|
params = {
|
||||||
|
year: value3.value.getFullYear(),
|
||||||
|
equipmentCode: row.facCode,
|
||||||
|
};
|
||||||
|
getPageDamageEquipList()
|
||||||
|
}else{
|
||||||
|
params = {
|
||||||
|
year: value3.value.getFullYear(),
|
||||||
|
equipmentCode: equipmentCode.value,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
activeRow.value = row;
|
||||||
|
countYearErrors(params).then((res) => {
|
||||||
drawLineChart(res.result.slice(1));
|
drawLineChart(res.result.slice(1));
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
const params = {
|
const params1 = {
|
||||||
facName:'',
|
equipmentCode:'',
|
||||||
pageIndex:1,
|
pageIndex:1,
|
||||||
pageSize:4
|
pageSize:4
|
||||||
}
|
}
|
||||||
// 获取易损件数据
|
// 获取易损件数据
|
||||||
function getPageDamageEquipList(){
|
function getPageDamageEquipList(){
|
||||||
getPageDamageEquip(params).then(res=>{
|
params1.equipmentCode = equipmentCode.value
|
||||||
switchList.value = res.result.data
|
getPageDamageEquip(params1).then(res=>{
|
||||||
|
switchList.value = res.result
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
getAllDeviceNames();
|
getAllDeviceNames();
|
||||||
getDeviceList();
|
getDeviceList();
|
||||||
OperationData();
|
|
||||||
getPageDamageEquipList()
|
// getPageDamageEquipList()
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
<style>
|
||||||
|
.active-row {
|
||||||
|
background-color: #6ebd43;
|
||||||
|
/* 其他你想要的样式 */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
:deep(.highlight-row) {
|
||||||
|
background-color:rgba(174, 211, 255, 0.2) !important;
|
||||||
|
}
|
||||||
.box {
|
.box {
|
||||||
width: vw(1380);
|
width: vw(1380);
|
||||||
height: vh(716);
|
height: vh(716);
|
||||||
|
|
@ -418,6 +483,7 @@ onMounted(() => {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
background-image: url("@/assets/images/dialog/deviceInfo-title1.png");
|
background-image: url("@/assets/images/dialog/deviceInfo-title1.png");
|
||||||
|
|
||||||
span {
|
span {
|
||||||
font-size: 1.375rem;
|
font-size: 1.375rem;
|
||||||
font-family: "pangmen";
|
font-family: "pangmen";
|
||||||
|
|
@ -437,6 +503,7 @@ onMounted(() => {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
background-image: url("@/assets/images/dialog/deviceInfo-title2.png") !important;
|
background-image: url("@/assets/images/dialog/deviceInfo-title2.png") !important;
|
||||||
|
display: flex;
|
||||||
span {
|
span {
|
||||||
font-size: 1.375rem;
|
font-size: 1.375rem;
|
||||||
font-family: "pangmen";
|
font-family: "pangmen";
|
||||||
|
|
@ -463,6 +530,9 @@ onMounted(() => {
|
||||||
}
|
}
|
||||||
&-bottom {
|
&-bottom {
|
||||||
height: vh(288);
|
height: vh(288);
|
||||||
|
.switch::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
.switch {
|
.switch {
|
||||||
margin-top: vh(16);
|
margin-top: vh(16);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -471,8 +541,10 @@ onMounted(() => {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-content: space-between;
|
align-content: space-between;
|
||||||
|
overflow: scroll;
|
||||||
&-item {
|
&-item {
|
||||||
width: vw(392);
|
width: vw(392);
|
||||||
|
margin-bottom: vh(12);
|
||||||
height: vh(92);
|
height: vh(92);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: vh(8) vw(16);
|
padding: vh(8) vw(16);
|
||||||
|
|
@ -552,4 +624,5 @@ onMounted(() => {
|
||||||
:deep(.el-pagination__total){
|
:deep(.el-pagination__total){
|
||||||
left: vw(40) !important;
|
left: vw(40) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -28,6 +28,7 @@
|
||||||
v-model="value2"
|
v-model="value2"
|
||||||
type="year"
|
type="year"
|
||||||
placeholder="请选择年份"
|
placeholder="请选择年份"
|
||||||
|
@change="sparePartsInterface"
|
||||||
/>
|
/>
|
||||||
<span
|
<span
|
||||||
style="margin-left: 1.25rem"
|
style="margin-left: 1.25rem"
|
||||||
|
|
@ -59,7 +60,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="box-content-box4">
|
<div class="box-content-box4">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<span>维护保养统计</span>
|
<span>维修统计</span>
|
||||||
<span class="more" @click="openDialog"></span>
|
<span class="more" @click="openDialog"></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="maintenance">
|
<div class="maintenance">
|
||||||
|
|
@ -139,14 +140,17 @@ function drawHealthIndex(list) {
|
||||||
"rgba(174, 211, 255, 0.7)",
|
"rgba(174, 211, 255, 0.7)",
|
||||||
];
|
];
|
||||||
let result = []
|
let result = []
|
||||||
for (let key in list) {
|
let total = list.totalCount;
|
||||||
if (key !== "错误总数") {
|
for (var i = 0; i < list.columnDatas.length; i++) {
|
||||||
result.push({
|
// if (key != "totalCount") {
|
||||||
name: key,
|
result.push({
|
||||||
value: list[key],
|
name: list.columnDatas[i].name,
|
||||||
});
|
value: list.columnDatas[i].number,
|
||||||
}
|
});
|
||||||
}
|
// } else {
|
||||||
|
// total = list[key];
|
||||||
|
// }
|
||||||
|
}
|
||||||
let dom = document.querySelector("#healthIndex");
|
let dom = document.querySelector("#healthIndex");
|
||||||
dom.removeAttribute("_echarts_instance_");
|
dom.removeAttribute("_echarts_instance_");
|
||||||
let myChart;
|
let myChart;
|
||||||
|
|
@ -186,6 +190,10 @@ function drawHealthIndex(list) {
|
||||||
backgroundColor: "rgba(0,0,0,0.7)", // 背景
|
backgroundColor: "rgba(0,0,0,0.7)", // 背景
|
||||||
padding: [8, 10], //内边距
|
padding: [8, 10], //内边距
|
||||||
extraCssText: "box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);", //添加阴影
|
extraCssText: "box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);", //添加阴影
|
||||||
|
formatter: function (params) {
|
||||||
|
// return params.name + ': ' + total*params.value
|
||||||
|
return params.name + ': ' + params.value
|
||||||
|
},
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
orient: "vertical",
|
orient: "vertical",
|
||||||
|
|
@ -283,7 +291,7 @@ function drawHealthIndex(list) {
|
||||||
if (el.name === "往复式提升机") {
|
if (el.name === "往复式提升机") {
|
||||||
return {
|
return {
|
||||||
value: el.value,
|
value: el.value,
|
||||||
name: "往复式提升机",
|
name: el.name,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: "rgba(28, 238, 251, 0.62)",
|
color: "rgba(28, 238, 251, 0.62)",
|
||||||
|
|
@ -293,7 +301,7 @@ function drawHealthIndex(list) {
|
||||||
} else {
|
} else {
|
||||||
return {
|
return {
|
||||||
value: el.value,
|
value: el.value,
|
||||||
name: "智能双向穿梭车",
|
name:el.name,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: "rgba(4, 132, 189, 0.62)",
|
color: "rgba(4, 132, 189, 0.62)",
|
||||||
|
|
@ -319,14 +327,17 @@ function drawSpareParts(list) {
|
||||||
"rgba(174, 211, 255, 0.7)",
|
"rgba(174, 211, 255, 0.7)",
|
||||||
];
|
];
|
||||||
let result = []
|
let result = []
|
||||||
for (let key in list) {
|
let total = list.totalCount;
|
||||||
if (key !== "总数") {
|
for (var i = 0; i < list.columnDatas.length; i++) {
|
||||||
result.push({
|
// if (key != "totalCount") {
|
||||||
name: key,
|
result.push({
|
||||||
value: list[key],
|
name: list.columnDatas[i].name,
|
||||||
});
|
value: list.columnDatas[i].number,
|
||||||
}
|
});
|
||||||
}
|
// } else {
|
||||||
|
// total = list[key];
|
||||||
|
// }
|
||||||
|
}
|
||||||
let dom = document.querySelector("#spareParts");
|
let dom = document.querySelector("#spareParts");
|
||||||
dom.removeAttribute("_echarts_instance_");
|
dom.removeAttribute("_echarts_instance_");
|
||||||
let myChart;
|
let myChart;
|
||||||
|
|
@ -342,6 +353,7 @@ function drawSpareParts(list) {
|
||||||
shadowBlur: 40,
|
shadowBlur: 40,
|
||||||
borderWidth: 10,
|
borderWidth: 10,
|
||||||
shadowColor: "rgba(0, 0, 0, 0)", //边框阴影
|
shadowColor: "rgba(0, 0, 0, 0)", //边框阴影
|
||||||
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
let placeHolderStyle = {
|
let placeHolderStyle = {
|
||||||
|
|
@ -366,6 +378,10 @@ function drawSpareParts(list) {
|
||||||
backgroundColor: "rgba(0,0,0,0.7)", // 背景
|
backgroundColor: "rgba(0,0,0,0.7)", // 背景
|
||||||
padding: [8, 10], //内边距
|
padding: [8, 10], //内边距
|
||||||
extraCssText: "box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);", //添加阴影
|
extraCssText: "box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);", //添加阴影
|
||||||
|
formatter: function (params) {
|
||||||
|
// return params.name + ': ' + total*params.value
|
||||||
|
return params.name + ': ' + params.value
|
||||||
|
},
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
orient: "vertical",
|
orient: "vertical",
|
||||||
|
|
@ -485,7 +501,7 @@ function drawFault(data) {
|
||||||
let myChart;
|
let myChart;
|
||||||
myChart = echarts.init(dom);
|
myChart = echarts.init(dom);
|
||||||
let option = {
|
let option = {
|
||||||
tooltip: {},
|
tooltip: {trigger: 'axis'},
|
||||||
grid: {
|
grid: {
|
||||||
top: "8%",
|
top: "8%",
|
||||||
left: "1%",
|
left: "1%",
|
||||||
|
|
@ -536,7 +552,7 @@ function drawFault(data) {
|
||||||
],
|
],
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: "异常流量",
|
name: "故障",
|
||||||
type: "line",
|
type: "line",
|
||||||
|
|
||||||
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
||||||
|
|
@ -603,7 +619,7 @@ function getHealthIndex() {
|
||||||
}
|
}
|
||||||
|
|
||||||
const maintenanceList = ref([]);
|
const maintenanceList = ref([]);
|
||||||
// 维护保养统计接口
|
// 维修统计接口
|
||||||
function maintenanceInterface() {
|
function maintenanceInterface() {
|
||||||
countMaintainRecord().then((res) => {
|
countMaintainRecord().then((res) => {
|
||||||
for (let key in res.result) {
|
for (let key in res.result) {
|
||||||
|
|
@ -617,6 +633,7 @@ function faultAnalysisInterface() {
|
||||||
year: value3.value.getFullYear(),
|
year: value3.value.getFullYear(),
|
||||||
};
|
};
|
||||||
countYearErrors(params).then((res) => {
|
countYearErrors(params).then((res) => {
|
||||||
|
console.log("res.result",res.result)
|
||||||
drawFault(res.result.slice(1));
|
drawFault(res.result.slice(1));
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -11,11 +11,11 @@
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<span> 已完成维保统计 </span>
|
<span> 已完成维保统计 </span>
|
||||||
<el-date-picker
|
<el-date-picker
|
||||||
v-model="value1"
|
v-model="value1"
|
||||||
type="year"
|
type="year"
|
||||||
placeholder="请选择年份"
|
placeholder="请选择年份"
|
||||||
@change="completedMaintenancePlan"
|
@change="completedMaintenancePlan"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="chart" id="pieChart1"></div>
|
<div class="chart" id="pieChart1"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -23,11 +23,11 @@
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<span> 保养计划 </span>
|
<span> 保养计划 </span>
|
||||||
<el-date-picker
|
<el-date-picker
|
||||||
v-model="value2"
|
v-model="value2"
|
||||||
type="year"
|
type="year"
|
||||||
placeholder="请选择年份"
|
placeholder="请选择年份"
|
||||||
@change="maintenancePlan"
|
@change="maintenancePlan"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="chart" id="pieChart2"></div>
|
<div class="chart" id="pieChart2"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -36,9 +36,7 @@
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<span> 维护计划 </span>
|
<span> 维护计划 </span>
|
||||||
<el-select
|
<el-select
|
||||||
@change="
|
@change="getMaintenancePlanData()"
|
||||||
getMaintenancePlanData();
|
|
||||||
"
|
|
||||||
clearable
|
clearable
|
||||||
v-model="planParams.facName"
|
v-model="planParams.facName"
|
||||||
placeholder="请选择"
|
placeholder="请选择"
|
||||||
|
|
@ -52,22 +50,19 @@
|
||||||
</el-select>
|
</el-select>
|
||||||
</div>
|
</div>
|
||||||
<div class="box-content-bottom-table">
|
<div class="box-content-bottom-table">
|
||||||
<el-table
|
<el-table :data="tableList" style="width: 100%">
|
||||||
:data="tableList"
|
|
||||||
style="width: 100%"
|
|
||||||
>
|
|
||||||
<el-table-column prop="keepPlanTime" label="计划时间" />
|
<el-table-column prop="keepPlanTime" label="计划时间" />
|
||||||
<el-table-column prop="facCode" label="设备编码" />
|
<el-table-column prop="facCode" label="设备编码" />
|
||||||
<el-table-column prop="facName" label="设备名称" />
|
<el-table-column prop="facName" label="设备名称" />
|
||||||
<el-table-column prop="keepFinishTime" label="执行时间" />
|
<el-table-column prop="keepFinishTime" label="执行时间" />
|
||||||
<el-table-column prop="keepContent" label="保养内容" />
|
<el-table-column prop="keepContent" label="保养内容" />
|
||||||
<el-table-column prop="status" label="状态" align="center">
|
<el-table-column prop="status" label="状态" align="center">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<div :style="row.status ? 'color:rgba(28, 238, 251, 1)' : ''">
|
<div :style="row.status ? 'color:rgba(28, 238, 251, 1)' : ''">
|
||||||
{{ row.status ? "已完成" : "未完成" }}
|
{{ row.status ? "已完成" : "未完成" }}
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -91,11 +86,14 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
import { onMounted, ref, nextTick, reactive } from "vue";
|
import { onMounted, ref, nextTick, reactive } from "vue";
|
||||||
import { countKeepRecord ,getMaintenancePlan,allDeviceNames} from "@/api/equipmentManagement/index";
|
import {
|
||||||
|
countKeepRecord,
|
||||||
|
getMaintenancePlan,
|
||||||
|
allDeviceNames,
|
||||||
|
} from "@/api/equipmentManagement/index";
|
||||||
const emit = defineEmits(["closeMaintenance"]);
|
const emit = defineEmits(["closeMaintenance"]);
|
||||||
|
|
||||||
function close() {
|
function close() {
|
||||||
|
|
||||||
emit("closeMaintenance", -1);
|
emit("closeMaintenance", -1);
|
||||||
}
|
}
|
||||||
const tableList = ref([
|
const tableList = ref([
|
||||||
|
|
@ -136,13 +134,16 @@ function drawLeftChart(list) {
|
||||||
"rgba(174, 211, 255, 0.7)",
|
"rgba(174, 211, 255, 0.7)",
|
||||||
];
|
];
|
||||||
let result = [];
|
let result = [];
|
||||||
for (let key in list) {
|
let total = list.totalCount;
|
||||||
if (key != "总数") {
|
for (var i = 0; i < list.columnDatas.length; i++) {
|
||||||
|
// if (key != "totalCount") {
|
||||||
result.push({
|
result.push({
|
||||||
name: key,
|
name: list.columnDatas[i].name,
|
||||||
value: list[key],
|
value: list.columnDatas[i].number,
|
||||||
});
|
});
|
||||||
}
|
// } else {
|
||||||
|
// total = list[key];
|
||||||
|
// }
|
||||||
}
|
}
|
||||||
let dom = document.querySelector("#pieChart1");
|
let dom = document.querySelector("#pieChart1");
|
||||||
dom.removeAttribute("_echarts_instance_");
|
dom.removeAttribute("_echarts_instance_");
|
||||||
|
|
@ -181,6 +182,10 @@ function drawLeftChart(list) {
|
||||||
backgroundColor: "rgba(0,0,0,0.7)", // 背景
|
backgroundColor: "rgba(0,0,0,0.7)", // 背景
|
||||||
padding: [8, 10], //内边距
|
padding: [8, 10], //内边距
|
||||||
extraCssText: "box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);", //添加阴影
|
extraCssText: "box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);", //添加阴影
|
||||||
|
formatter: function (params) {
|
||||||
|
// return params.name + ': ' + total*params.value
|
||||||
|
return params.name + ': ' + params.value
|
||||||
|
},
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
orient: "vertical",
|
orient: "vertical",
|
||||||
|
|
@ -281,7 +286,7 @@ function drawLeftChart(list) {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
})
|
}),
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
@ -299,13 +304,16 @@ function drawRightChart(list) {
|
||||||
"rgba(174, 211, 255, 0.7)",
|
"rgba(174, 211, 255, 0.7)",
|
||||||
];
|
];
|
||||||
let result = [];
|
let result = [];
|
||||||
for (let key in list) {
|
let total = list.totalCount;
|
||||||
if (key != "总数") {
|
for (var i = 0; i < list.columnDatas.length; i++) {
|
||||||
|
// if (key != "totalCount") {
|
||||||
result.push({
|
result.push({
|
||||||
name: key,
|
name: list.columnDatas[i].name,
|
||||||
value: list[key],
|
value: list.columnDatas[i].number,
|
||||||
});
|
});
|
||||||
}
|
// } else {
|
||||||
|
// total = list[key];
|
||||||
|
// }
|
||||||
}
|
}
|
||||||
let dom = document.querySelector("#pieChart2");
|
let dom = document.querySelector("#pieChart2");
|
||||||
dom.removeAttribute("_echarts_instance_");
|
dom.removeAttribute("_echarts_instance_");
|
||||||
|
|
@ -343,6 +351,10 @@ function drawRightChart(list) {
|
||||||
backgroundColor: "rgba(0,0,0,0.7)", // 背景
|
backgroundColor: "rgba(0,0,0,0.7)", // 背景
|
||||||
padding: [8, 10], //内边距
|
padding: [8, 10], //内边距
|
||||||
extraCssText: "box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);", //添加阴影
|
extraCssText: "box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);", //添加阴影
|
||||||
|
formatter: function (params) {
|
||||||
|
// return params.name + ': ' + total*params.value
|
||||||
|
return params.name + ': ' + params.value
|
||||||
|
},
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
orient: "vertical",
|
orient: "vertical",
|
||||||
|
|
@ -358,7 +370,6 @@ function drawRightChart(list) {
|
||||||
},
|
},
|
||||||
itemWidth: 8,
|
itemWidth: 8,
|
||||||
itemHeight: 8,
|
itemHeight: 8,
|
||||||
|
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
|
|
@ -460,45 +471,45 @@ function drawRightChart(list) {
|
||||||
myChart.resize();
|
myChart.resize();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
const value1 = ref(new Date())
|
const value1 = ref(new Date());
|
||||||
const value2 = ref(new Date())
|
const value2 = ref(new Date());
|
||||||
|
|
||||||
// 保养计划接口
|
// 保养计划接口
|
||||||
function maintenancePlan() {
|
function maintenancePlan() {
|
||||||
let params = {
|
let params = {
|
||||||
year:value2.value.getFullYear(),
|
year: value2.value.getFullYear(),
|
||||||
status:false
|
status: false,
|
||||||
}
|
};
|
||||||
countKeepRecord(params).then((res) => {
|
countKeepRecord(params).then((res) => {
|
||||||
drawRightChart(res.result);
|
drawRightChart(res.result);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
// 已完成维保计划接口
|
// 已完成维保计划接口
|
||||||
function completedMaintenancePlan(){
|
function completedMaintenancePlan() {
|
||||||
let params = {
|
let params = {
|
||||||
year:value1.value.getFullYear(),
|
year: value1.value.getFullYear(),
|
||||||
status:true
|
status: true,
|
||||||
}
|
};
|
||||||
countKeepRecord(params).then((res) => {
|
countKeepRecord(params).then((res) => {
|
||||||
drawLeftChart(res.result);
|
drawLeftChart(res.result);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
const planParams = reactive({
|
const planParams = reactive({
|
||||||
pageIndex:1,
|
pageIndex: 1,
|
||||||
pageSize:3,
|
pageSize: 3,
|
||||||
facName:''
|
facName: "",
|
||||||
})
|
});
|
||||||
const total = ref(0)
|
const total = ref(0);
|
||||||
// 维护计划接口
|
// 维护计划接口
|
||||||
function getMaintenancePlanData(){
|
function getMaintenancePlanData() {
|
||||||
getMaintenancePlan(planParams).then(res=>{
|
getMaintenancePlan(planParams).then((res) => {
|
||||||
total.value = res.result.totalNum
|
total.value = res.result.totalNum;
|
||||||
tableList.value = res.result.data
|
tableList.value = res.result.data;
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
const allName = ref([])
|
const allName = ref([]);
|
||||||
// 获取所有设备名称
|
// 获取所有设备名称
|
||||||
function getAllDeviceNames() {
|
function getAllDeviceNames() {
|
||||||
allDeviceNames().then((res) => {
|
allDeviceNames().then((res) => {
|
||||||
|
|
@ -508,11 +519,11 @@ function getAllDeviceNames() {
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
maintenancePlan();
|
maintenancePlan();
|
||||||
|
|
||||||
completedMaintenancePlan()
|
completedMaintenancePlan();
|
||||||
|
|
||||||
getMaintenancePlanData()
|
getMaintenancePlanData();
|
||||||
|
|
||||||
getAllDeviceNames()
|
getAllDeviceNames();
|
||||||
// drawRightChart();
|
// drawRightChart();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -700,7 +711,7 @@ onMounted(() => {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: vw(40) !important;
|
left: vw(40) !important;
|
||||||
}
|
}
|
||||||
:deep(.el-input__inner){
|
:deep(.el-input__inner) {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
:deep(.el-input__wrapper) {
|
:deep(.el-input__wrapper) {
|
||||||
|
|
@ -719,8 +730,8 @@ onMounted(() => {
|
||||||
)
|
)
|
||||||
1 1;
|
1 1;
|
||||||
}
|
}
|
||||||
:deep(.el-input){
|
:deep(.el-input) {
|
||||||
width: vw(160);
|
width: vw(160);
|
||||||
height: vh(28);
|
height: vh(28);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -12,17 +12,23 @@
|
||||||
<li
|
<li
|
||||||
v-for="(item, index) in deviceList"
|
v-for="(item, index) in deviceList"
|
||||||
:key="index"
|
:key="index"
|
||||||
@click="toggleHandle(index)"
|
@click="toggleHandle(index,item)"
|
||||||
:class="liIndex === index ? 'device-select' : ''"
|
:class="liIndex === index ? 'device-select' : ''"
|
||||||
>
|
>
|
||||||
{{ item }}
|
{{ item }}
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="box-content-middle">
|
||||||
|
<div class="unity">
|
||||||
|
<iframe src="Hoister/index.html" frameborder="0" id="unityModule"></iframe>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
<div class="box-content-msg">
|
<div class="box-content-msg">
|
||||||
<div class="box-content-top">
|
<div class="box-content-top">
|
||||||
<div class="btn1"></div>
|
<div @click="openmodel" :class="openShow === true ? 'btn1' : 'btn11'"></div>
|
||||||
<div class="btn2"></div>
|
<div @click="closemodel" :class="closeShow === true ? 'btn22' : 'btn2'"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="box-content-bottom">
|
<div class="box-content-bottom">
|
||||||
<div class="name">
|
<div class="name">
|
||||||
|
|
@ -30,7 +36,7 @@
|
||||||
设备名称:
|
设备名称:
|
||||||
</span>
|
</span>
|
||||||
<span>
|
<span>
|
||||||
穿梭车
|
{{ changeName }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -41,18 +47,48 @@
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from "vue";
|
import { ref } from "vue";
|
||||||
const deviceList = ref(["穿梭车", "TW4", "TW3", "快换电池"]);
|
// const deviceList = ref(["穿梭车", "TW4", "TW3", "快换电池"]);
|
||||||
|
const deviceList = ref(["穿梭车", "提升机"])
|
||||||
const liIndex = ref(0);
|
const liIndex = ref(0);
|
||||||
|
const openShow= ref(false);
|
||||||
|
const closeShow= ref(false);
|
||||||
const emit = defineEmits(['closeExplosion'])
|
const emit = defineEmits(['closeExplosion'])
|
||||||
|
const changeName = ref("穿梭车");
|
||||||
function toggleHandle(index) {
|
function toggleHandle(index,item) {
|
||||||
|
console.log("item",item)
|
||||||
|
changeName.value = item
|
||||||
liIndex.value = index;
|
liIndex.value = index;
|
||||||
|
if(item==="穿梭车"){
|
||||||
|
document.getElementById("unityModule").contentWindow.changeModel('小车');
|
||||||
|
}else{
|
||||||
|
document.getElementById("unityModule").contentWindow.changeModel('提升机');
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function close(){
|
function close(){
|
||||||
emit('closeExplosion',-1)
|
emit('closeExplosion',-1)
|
||||||
}
|
}
|
||||||
|
function openmodel(){
|
||||||
|
openShow.value = true
|
||||||
|
closeShow.value = false
|
||||||
|
if(changeName.value==="穿梭车"){
|
||||||
|
document.getElementById("unityModule").contentWindow.opencar();
|
||||||
|
}else if(changeName.value==="提升机"){
|
||||||
|
document.getElementById("unityModule").contentWindow.open();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
function closemodel(){
|
||||||
|
openShow.value = false
|
||||||
|
closeShow.value = true
|
||||||
|
if(changeName.value==="穿梭车"){
|
||||||
|
document.getElementById("unityModule").contentWindow.closecar();
|
||||||
|
}else if(changeName.value==="提升机"){
|
||||||
|
document.getElementById("unityModule").contentWindow.close();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.box {
|
.box {
|
||||||
|
|
@ -105,6 +141,20 @@ function close(){
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
&-middle{
|
||||||
|
width: vw(660);
|
||||||
|
margin-left: vw(-100);
|
||||||
|
// border: 1px solid greenyellow;
|
||||||
|
.unity {
|
||||||
|
width: 115%;
|
||||||
|
height: 94%;
|
||||||
|
// position: fixed;
|
||||||
|
iframe {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
&-msg{
|
&-msg{
|
||||||
width: vw(340);
|
width: vw(340);
|
||||||
}
|
}
|
||||||
|
|
@ -112,7 +162,7 @@ function close(){
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin-bottom: vh(16);
|
margin-bottom: vh(16);
|
||||||
.btn1,.btn2{
|
.btn1,.btn2,.btn11,.btn22{
|
||||||
width: vw(160);
|
width: vw(160);
|
||||||
height: vh(44);
|
height: vh(44);
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
|
|
@ -121,9 +171,15 @@ function close(){
|
||||||
.btn1{
|
.btn1{
|
||||||
background-image: url('@/assets/images/dialog/explosion-btn1-select.png');
|
background-image: url('@/assets/images/dialog/explosion-btn1-select.png');
|
||||||
}
|
}
|
||||||
|
.btn11{
|
||||||
|
background-image: url('@/assets/images/dialog/explosion-btn11-select.png');
|
||||||
|
}
|
||||||
.btn2{
|
.btn2{
|
||||||
background-image: url('@/assets/images/dialog/explosion-btn2-default.png');
|
background-image: url('@/assets/images/dialog/explosion-btn2-default.png');
|
||||||
}
|
}
|
||||||
|
.btn22{
|
||||||
|
background-image: url('@/assets/images/dialog/explosion-btn22-default.png');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&-bottom{
|
&-bottom{
|
||||||
width: vw(340);
|
width: vw(340);
|
||||||
|
|
|
||||||
|
|
@ -7,64 +7,274 @@
|
||||||
<div class="box-btn" @click="close"></div>
|
<div class="box-btn" @click="close"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="box-content">
|
<div class="box-content">
|
||||||
|
<div class="box-content-left-title">
|
||||||
|
<span>文件列表</span>
|
||||||
|
</div>
|
||||||
|
<!-- 选择框 -->
|
||||||
|
<div class="box-content-right-select">
|
||||||
|
<el-select
|
||||||
|
@clear="clearHandle"
|
||||||
|
@change="
|
||||||
|
GetPageGuideDocsData(params1.code);
|
||||||
|
"
|
||||||
|
clearable
|
||||||
|
v-model="params1.code"
|
||||||
|
placeholder="请选择"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in allName"
|
||||||
|
:key="item.showName"
|
||||||
|
:label="item.showName"
|
||||||
|
:value="item.realCode"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
|
||||||
|
</div>
|
||||||
<ul>
|
<ul>
|
||||||
<li v-for="(item, index) in fileList" :key="'file' + index">
|
<li v-for="(item, index) in fileList" :key="'file' + index">
|
||||||
<span>
|
<span>
|
||||||
{{ item.name }}
|
{{ item.fileName }}
|
||||||
</span>
|
</span>
|
||||||
<span>
|
<span>
|
||||||
<span class="preview">预览</span>
|
<!-- <span class="preview">预览</span>
|
||||||
<span class="download">下载</span>
|
<span class="download">下载</span> -->
|
||||||
|
<el-button
|
||||||
|
type="text"
|
||||||
|
class="preview"
|
||||||
|
@click="previewFile(item.filePath)"
|
||||||
|
>预览</el-button
|
||||||
|
>
|
||||||
|
<el-button
|
||||||
|
type="text"
|
||||||
|
class="download"
|
||||||
|
@click="down(item.filePath)"
|
||||||
|
>下载</el-button
|
||||||
|
>
|
||||||
</span>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- <el-dialog
|
||||||
|
:visible.sync="dialogVisible4"
|
||||||
|
title="PDF预览"
|
||||||
|
width="70%"
|
||||||
|
append-to-body
|
||||||
|
top
|
||||||
|
>
|
||||||
|
<div id="container">
|
||||||
|
<div class="right-btn">
|
||||||
|
<div @click="changePage('first')" class="turn">首页</div>
|
||||||
|
<div style="width: 100%">
|
||||||
|
<el-button
|
||||||
|
plain
|
||||||
|
icon="el-icon-plus"
|
||||||
|
circle
|
||||||
|
@click="zoomPDF('plus')"
|
||||||
|
></el-button>
|
||||||
|
<el-button
|
||||||
|
plain
|
||||||
|
icon="el-icon-minus"
|
||||||
|
circle
|
||||||
|
@click="zoomPDF('minus')"
|
||||||
|
></el-button>
|
||||||
|
<el-button
|
||||||
|
plain
|
||||||
|
icon="el-icon-refresh-right"
|
||||||
|
circle
|
||||||
|
@click="clock()"
|
||||||
|
></el-button>
|
||||||
|
<el-button
|
||||||
|
plain
|
||||||
|
icon="el-icon-refresh-left"
|
||||||
|
circle
|
||||||
|
@click="counterClock()"
|
||||||
|
></el-button>
|
||||||
|
</div>
|
||||||
|
<div style="width: 100%">
|
||||||
|
<el-button size="mini" @click="changePage(0)" round
|
||||||
|
>上一页</el-button
|
||||||
|
>
|
||||||
|
<el-button size="mini" @click="changePage(1)" round
|
||||||
|
>下一页</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="pageNum">
|
||||||
|
<input
|
||||||
|
v-model.number="currentPage"
|
||||||
|
type="number"
|
||||||
|
class="inputNumber"
|
||||||
|
@input="inputEvent()"
|
||||||
|
/>
|
||||||
|
/ {{ pageCount }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div @click="changePage('last')" class="turn">尾页</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="pdfArea"
|
||||||
|
:style="{
|
||||||
|
width: pdfWidth + '%',
|
||||||
|
marginLeft: pdfLeft + '%',
|
||||||
|
marginTop: pdfTop + '%',
|
||||||
|
marginBottom: pdfBottom + '%',
|
||||||
|
}"
|
||||||
|
style="transition: all 0.3s"
|
||||||
|
>
|
||||||
|
<pdf
|
||||||
|
:src="src"
|
||||||
|
ref="pdf"
|
||||||
|
v-show="loadedRatio === 1"
|
||||||
|
:page="currentPage"
|
||||||
|
@loaded="loadPdf"
|
||||||
|
@num-pages="pageCount = $event"
|
||||||
|
@progress="loadedRatio = $event"
|
||||||
|
@page-loaded="currentPage = $event"
|
||||||
|
@link-clicked="currentPage = $event"
|
||||||
|
style="display: inline-block; width: 100%"
|
||||||
|
id="pdfID"
|
||||||
|
:rotate="pageRotate"
|
||||||
|
></pdf>
|
||||||
|
<div class="progress" v-if="loadedRatio != 1">
|
||||||
|
<el-progress
|
||||||
|
type="circle"
|
||||||
|
:width="70"
|
||||||
|
color="#53a7ff"
|
||||||
|
:percentage="
|
||||||
|
Math.floor(loadedRatio * 100)
|
||||||
|
? Math.floor(loadedRatio * 100)
|
||||||
|
: 0
|
||||||
|
"
|
||||||
|
></el-progress>
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<span>{{ remindShow }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-dialog> -->
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from "vue";
|
import { ref } from "vue";
|
||||||
|
import {
|
||||||
|
getDocsIdentity,GetPageGuideDocs
|
||||||
|
} from "@/api/equipmentManagement/index";
|
||||||
|
import { onMounted} from "vue";
|
||||||
const emit = defineEmits(["closeGuidance"]);
|
const emit = defineEmits(["closeGuidance"]);
|
||||||
const fileList = ref([
|
const allName = ref([]);
|
||||||
|
const fileList = ref([]);
|
||||||
|
//获取指导文件下拉数据
|
||||||
|
function getDocsIdentityData(){
|
||||||
|
|
||||||
{
|
getDocsIdentity().then(res=>{
|
||||||
name: "CN12升降输送机说明书",
|
allName.value = res.result
|
||||||
},
|
})
|
||||||
{
|
}
|
||||||
name: "ABRC01型快换电池及电池充电系统使用说明书",
|
const equipmentCode = ref('')
|
||||||
},
|
const params1 = {
|
||||||
{
|
code:'',
|
||||||
name: "CN12升降输送机说明书",
|
pageIndex:1,
|
||||||
},
|
pageSize:4
|
||||||
{
|
}
|
||||||
name: "ABRC01型快换电池及电池充电系统使用说明书",
|
function zoomPDF(method) {
|
||||||
},
|
const _this = this;
|
||||||
{
|
if (method === "plus") {
|
||||||
name: "CN12升降输送机说明书",
|
if (pdfWidth === 150) {
|
||||||
},
|
// $message({
|
||||||
{
|
// showClose: true,
|
||||||
name: "ABRC01型快换电池及电池充电系统使用说明书",
|
// message: "已放大至：100%",
|
||||||
},
|
// type: "info",
|
||||||
{
|
// });
|
||||||
name: "CN12升降输送机说明书",
|
} else {
|
||||||
},
|
pdfWidth = pdfWidth + 10;
|
||||||
{
|
pdfLeft = (100 - pdfWidth) / 2;
|
||||||
name: "ABRC01型快换电池及电池充电系统使用说明书",
|
}
|
||||||
},
|
}
|
||||||
{
|
if (method === "minus") {
|
||||||
name: "CN12升降输送机说明书",
|
if (pdfWidth === 10) {
|
||||||
},
|
// $message({
|
||||||
{
|
// showClose: true,
|
||||||
name: "ABRC01型快换电池及电池充电系统使用说明书",
|
// message: "已缩小至：10%，不可再缩小。",
|
||||||
},
|
// type: "info",
|
||||||
{
|
// });
|
||||||
name: "CN12升降输送机说明书",
|
} else {
|
||||||
},
|
pdfWidth = pdfWidth - 10;
|
||||||
]);
|
pdfLeft = (100 - pdfWidth) / 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 顺时针
|
||||||
|
function clock() {
|
||||||
|
pageRotate += 90;
|
||||||
|
}
|
||||||
|
// 逆时针
|
||||||
|
function counterClock() {
|
||||||
|
pageRotate -= 90;
|
||||||
|
}
|
||||||
|
function down(url) {
|
||||||
|
window.open(url);
|
||||||
|
}
|
||||||
|
// 翻页
|
||||||
|
function changePage(val) {
|
||||||
|
if (val === 0 && currentPage > 1) {
|
||||||
|
currentPage--;
|
||||||
|
}
|
||||||
|
if (val === 1 && currentPage < pageCount) {
|
||||||
|
currentPage++;
|
||||||
|
} else if (val === "first") {
|
||||||
|
currentPage = 1;
|
||||||
|
toTop();
|
||||||
|
} else if (val === "last" && currentPage < pageCount) {
|
||||||
|
currentPage = pageCount;
|
||||||
|
toTop();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// pdf加载时
|
||||||
|
function loadPdf() {
|
||||||
|
currentPage = 1; // 加载的时候先加载第一页
|
||||||
|
loadedRatio = 1;
|
||||||
|
}
|
||||||
|
// 输入页码时校验
|
||||||
|
function inputEvent() {
|
||||||
|
if (currentPage > pageCount) {
|
||||||
|
// 1. 大于max
|
||||||
|
currentPage = pageCount;
|
||||||
|
} else if (currentPage < 1) {
|
||||||
|
// 2. 小于min
|
||||||
|
currentPage = 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function toTop() {
|
||||||
|
document.getElementById("container").scrollTop = 0;
|
||||||
|
}
|
||||||
|
// 获取指导文件数据
|
||||||
|
function GetPageGuideDocsData(item){
|
||||||
|
// console.log("item",item)
|
||||||
|
// if(item){
|
||||||
|
// // params1.code = item.showName
|
||||||
|
// }
|
||||||
|
GetPageGuideDocs(params1).then(res=>{
|
||||||
|
fileList.value = res.result.data
|
||||||
|
for (var i = 0; i < fileList.value.length; i++) {
|
||||||
|
fileList.value[i].filePath =
|
||||||
|
`http://192.168.55.13:5002` + fileList.value[i].filePath;
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
function close() {
|
function close() {
|
||||||
emit("closeGuidance", -1);
|
emit("closeGuidance", -1);
|
||||||
}
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
getDocsIdentityData()
|
||||||
|
GetPageGuideDocsData()
|
||||||
|
// getPageDamageEquipList()
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.box {
|
.box {
|
||||||
|
|
@ -124,6 +334,43 @@ function close() {
|
||||||
width: vw(1088);
|
width: vw(1088);
|
||||||
padding: vh(20) vw(20);
|
padding: vh(20) vw(20);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
&-left {
|
||||||
|
padding: vh(20) vw(20);
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 100%;
|
||||||
|
border: 1px solid;
|
||||||
|
border-image: linear-gradient(
|
||||||
|
180deg,
|
||||||
|
rgba(144, 218, 255, 0.5),
|
||||||
|
rgba(144, 218, 255, 0.1000000015)
|
||||||
|
)
|
||||||
|
1 1;
|
||||||
|
&-title {
|
||||||
|
width: 65%;
|
||||||
|
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/deviceInfo-title1.png");
|
||||||
|
display: inline-block;
|
||||||
|
span {
|
||||||
|
font-size: 1.375rem;
|
||||||
|
font-family: "pangmen";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-right {
|
||||||
|
width: vw(480);
|
||||||
|
&-select {
|
||||||
|
margin: vh(12) 0;
|
||||||
|
justify-content: space-between;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
&-table {
|
||||||
|
height: vh(440);
|
||||||
|
}
|
||||||
|
}
|
||||||
ul {
|
ul {
|
||||||
|
|
||||||
li {
|
li {
|
||||||
|
|
|
||||||
|
|
@ -8,8 +8,24 @@
|
||||||
<div class="box-content">
|
<div class="box-content">
|
||||||
<div class="box-content-left">
|
<div class="box-content-left">
|
||||||
<div class="box-content-select">
|
<div class="box-content-select">
|
||||||
<el-select v-model="value" clearable placeholder="请选择设备">
|
<!-- <el-select v-model="value" clearable placeholder="请选择设备">
|
||||||
<el-option>11</el-option>
|
<el-option>11</el-option>
|
||||||
|
</el-select> -->
|
||||||
|
<el-select
|
||||||
|
@clear="clearHandle"
|
||||||
|
@change="
|
||||||
|
GetPageGuideDocsData(params1.code);
|
||||||
|
"
|
||||||
|
clearable
|
||||||
|
v-model="params1.code"
|
||||||
|
placeholder="请选择"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in allName"
|
||||||
|
:key="item.showName"
|
||||||
|
:label="item.showName"
|
||||||
|
:value="item.realCode"
|
||||||
|
/>
|
||||||
</el-select>
|
</el-select>
|
||||||
</div>
|
</div>
|
||||||
<div class="box-content-table">
|
<div class="box-content-table">
|
||||||
|
|
@ -19,32 +35,105 @@
|
||||||
style="width: 100%"
|
style="width: 100%"
|
||||||
@row-click="rowClick"
|
@row-click="rowClick"
|
||||||
>
|
>
|
||||||
<el-table-column prop="code" label="序号" />
|
<el-table-column prop="deviceCode" label="序号" />
|
||||||
<el-table-column prop="name" label="名称" />
|
<el-table-column prop="deviceName" label="名称" />
|
||||||
</el-table>
|
</el-table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="box-content-right">
|
<div class="box-content-right">
|
||||||
<div class="bg"></div>
|
<div class="bg">
|
||||||
|
<video-player
|
||||||
|
class="video-player vjs-custom-skin"
|
||||||
|
style="height: 500px; width: 500px"
|
||||||
|
ref="VideoPlayer1"
|
||||||
|
:playsinline="true"
|
||||||
|
:options="playerOptions"
|
||||||
|
>
|
||||||
|
</video-player>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup name="knowledgeBase">
|
||||||
|
import VideoPlayer from 'vue-video-player';
|
||||||
|
import 'video.js/dist/video-js.css';
|
||||||
|
import 'vue-video-player/src/custom-theme.css';
|
||||||
import { ref } from "vue";
|
import { ref } from "vue";
|
||||||
|
import {
|
||||||
|
GetVideosIdentity,GetPageGuideVideos
|
||||||
|
} from "@/api/equipmentManagement/index";
|
||||||
|
|
||||||
|
import { onMounted} from "vue";
|
||||||
const value = ref('')
|
const value = ref('')
|
||||||
const emit = defineEmits(["closeKnowledgeBase"]);
|
const emit = defineEmits(["closeKnowledgeBase"]);
|
||||||
function close() {
|
function close() {
|
||||||
emit("closeKnowledgeBase", -1);
|
emit("closeKnowledgeBase", -1);
|
||||||
}
|
}
|
||||||
|
const VideoPlayer1 = ref()
|
||||||
const tableList = ref([
|
const tableList = ref([
|
||||||
{
|
|
||||||
name:'智能双向穿梭车',
|
|
||||||
code:1
|
|
||||||
}
|
|
||||||
])
|
])
|
||||||
|
// const videoUrl = ref("")
|
||||||
|
// 视频控制设置
|
||||||
|
const playerOptions= {
|
||||||
|
height: 500,
|
||||||
|
width: 500,
|
||||||
|
playbackRates: [0.5, 1.0, 1.5, 2, 3], // 可选的播放速度
|
||||||
|
autoplay: false, // 如果为true,浏览器准备好时开始回放。
|
||||||
|
muted: false, // 默认情况下将会消除任何音频。
|
||||||
|
loop: false, // 是否视频一结束就重新开始。
|
||||||
|
preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
|
||||||
|
language: "zh-CN",
|
||||||
|
aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
|
||||||
|
fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
|
||||||
|
sources: [
|
||||||
|
{
|
||||||
|
type: "video/mp4", // 类型
|
||||||
|
src: "", // url地址
|
||||||
|
},
|
||||||
|
],
|
||||||
|
poster: "", // 封面地址
|
||||||
|
notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
|
||||||
|
controlBar: {
|
||||||
|
timeDivider: true, // 当前时间和持续时间的分隔符
|
||||||
|
durationDisplay: true, // 显示持续时间
|
||||||
|
remainingTimeDisplay: true, // 是否显示剩余时间功能
|
||||||
|
fullscreenToggle: true, // 是否显示全屏按钮
|
||||||
|
},
|
||||||
|
}
|
||||||
|
const allName = ref([]);
|
||||||
|
//获取知识库下拉数据
|
||||||
|
function getVideosIdentityData(){
|
||||||
|
|
||||||
|
GetVideosIdentity().then(res=>{
|
||||||
|
allName.value = res.result
|
||||||
|
})
|
||||||
|
}
|
||||||
|
function rowClick(row) {
|
||||||
|
console.log("rowClick",row)
|
||||||
|
// playerOptions.sources[0].src =
|
||||||
|
// // "http://220.163.114.158:5001/" + row.path.substring(1);
|
||||||
|
// "http://192.168.55.13:5002/" + row.path.substring(1);
|
||||||
|
}
|
||||||
|
const equipmentCode = ref('')
|
||||||
|
const params1 = {
|
||||||
|
code:'',
|
||||||
|
pageIndex:1,
|
||||||
|
pageSize:4
|
||||||
|
}
|
||||||
|
// 获取知识库数据
|
||||||
|
function getPageGuideVideosData(item){
|
||||||
|
GetPageGuideVideos(params1).then(res=>{
|
||||||
|
tableList.value = res.result.data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
getVideosIdentityData()
|
||||||
|
getPageGuideVideosData()
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.box {
|
.box {
|
||||||
|
|
@ -103,11 +192,18 @@ const tableList = ref([
|
||||||
height: vh(616);
|
height: vh(616);
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
background-image: url("@/assets/images/dialog/knowledgeBase-right.png");
|
background-image: url("@/assets/images/dialog/knowledgeBase-right.png");
|
||||||
|
.video-js.vjs-fluid,
|
||||||
|
.video-js.vjs-16-9,
|
||||||
|
.video-js.vjs-4-3 {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
.bg {
|
.bg {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-image: url("@/assets/images/dialog/knowledgeBase-img.png");
|
// background-image: url("@/assets/images/dialog/knowledgeBase-img.png");
|
||||||
background-size: 100% 100%;
|
// background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,4 +5,5 @@ import ElementPlus from 'element-plus'
|
||||||
import 'element-plus/dist/index.css'
|
import 'element-plus/dist/index.css'
|
||||||
import zhCn from 'element-plus/es/locale/lang/zh-cn'
|
import zhCn from 'element-plus/es/locale/lang/zh-cn'
|
||||||
import router from "./router/router.js"
|
import router from "./router/router.js"
|
||||||
|
|
||||||
createApp(App).use(ElementPlus,{locale:zhCn}).use(router).mount('#app')
|
createApp(App).use(ElementPlus,{locale:zhCn}).use(router).mount('#app')
|
||||||
|
|
|
||||||
|
|
@ -210,13 +210,13 @@ const deviceList = ref([
|
||||||
{
|
{
|
||||||
deviceStatus: "运行设备",
|
deviceStatus: "运行设备",
|
||||||
deviceNum: 1889,
|
deviceNum: 1889,
|
||||||
deviceImg: getPath.operatingEquipment,
|
deviceImg: getPath.operatingEquipment1,
|
||||||
color: "color:rgba(164, 255, 236, 1)",
|
color: "color:rgba(164, 255, 236, 1)",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
deviceStatus: "设备故障",
|
deviceStatus: "设备故障",
|
||||||
deviceNum: 26,
|
deviceNum: 26,
|
||||||
deviceImg: getPath.equipmentFailure,
|
deviceImg: getPath.equipmentFailure1,
|
||||||
color: "color:rgba(255, 244, 166, 1)",
|
color: "color:rgba(255, 244, 166, 1)",
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
|
@ -758,7 +758,6 @@ onMounted(() => {
|
||||||
.home {
|
.home {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
background-image: url("@/assets/images/home/home-bg.png");
|
background-image: url("@/assets/images/home/home-bg.png");
|
||||||
padding: vh(104) vw(20) 0 vw(20);
|
padding: vh(104) vw(20) 0 vw(20);
|
||||||
|
|
@ -798,6 +797,9 @@ onMounted(() => {
|
||||||
width: vw(368);
|
width: vw(368);
|
||||||
}
|
}
|
||||||
&-left {
|
&-left {
|
||||||
|
background-image: url("@/assets/images/home/左侧遮罩.png");
|
||||||
|
background-size: 101%;
|
||||||
|
// width: 22%;
|
||||||
&-device {
|
&-device {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: vh(186);
|
height: vh(186);
|
||||||
|
|
@ -881,6 +883,7 @@ onMounted(() => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&-right {
|
&-right {
|
||||||
|
background-image: url("@/assets/images/home/right-bg.png");
|
||||||
&-inventoryNews {
|
&-inventoryNews {
|
||||||
height: vh(222);
|
height: vh(222);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
import { defineConfig } from 'vite'
|
import { defineConfig } from 'vite'
|
||||||
import vue from '@vitejs/plugin-vue'
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
|
||||||
import path from "path";
|
import path from "path";
|
||||||
|
|
||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue