@@ -2,7 +2,7 @@ | |||
* @Author: zwq | |||
* @Date: 2022-08-22 14:57:50 | |||
* @LastEditors: zwq | |||
* @LastEditTime: 2023-06-02 10:02:23 | |||
* @LastEditTime: 2023-08-07 16:11:40 | |||
* @Description: | |||
--> | |||
<!DOCTYPE html> | |||
@@ -58,7 +58,7 @@ | |||
<% if (process.env.VUE_APP_NODE_ENV === 'prod') { %> | |||
<script> | |||
window.SITE_CONFIG['apiURL'] = '/api'; // api请求地址 | |||
window.SITE_CONFIG['wbURL'] = '192.168.1.12:8080/ym-wms-wcs'; | |||
window.SITE_CONFIG['wbURL'] = '192.168.1.101:8080/ym-wms-wcs'; | |||
</script> | |||
<% } %> | |||
</head> | |||
@@ -2,7 +2,7 @@ | |||
* @Author: zwq | |||
* @Date: 2023-01-04 10:29:39 | |||
* @LastEditors: zwq | |||
* @LastEditTime: 2023-05-31 11:00:34 | |||
* @LastEditTime: 2023-08-08 09:19:20 | |||
* @Description: | |||
*/ | |||
import Vue from 'vue' | |||
@@ -37,7 +37,7 @@ export const moduleRoutes = { | |||
path: '/', | |||
component: () => import('@/views/main'), | |||
name: 'main', | |||
redirect: { name: 'home' }, | |||
redirect: { name: 'main' }, | |||
meta: { title: '主入口布局' }, | |||
children: [ | |||
{ path: '/home', component: () => import('@/views/modules/home'), name: 'home', meta: { title: '首页', isTab: true } }, | |||
@@ -86,24 +86,25 @@ router.beforeEach((to, from, next) => { | |||
return next() | |||
} | |||
// 获取字典列表, 添加并全局变量保存 | |||
http.get('/sys/dict/type/all').then(({ data: res }) => { | |||
if (res.code !== 0) { | |||
return | |||
} | |||
window.SITE_CONFIG['dictList'] = res.data | |||
}).catch(() => {}) | |||
// http.get('/sys/dict/type/all').then(({ data: res }) => { | |||
// if (res.code !== 0) { | |||
// return | |||
// } | |||
// window.SITE_CONFIG['dictList'] = res.data | |||
// }).catch(() => {}) | |||
// 获取菜单列表, 添加并全局变量保存 | |||
http.get('/sys/menu/nav').then(({ data: res }) => { | |||
if (res.code !== 0) { | |||
Vue.prototype.$message.error(res.msg) | |||
return next({ name: 'main' }) | |||
} | |||
window.SITE_CONFIG['menuList'] = res.data | |||
fnAddDynamicMenuRoutes(window.SITE_CONFIG['menuList']) | |||
next({ ...to, replace: true }) | |||
}).catch(() => { | |||
next({ name: 'main' }) | |||
}) | |||
// http.get('/sys/menu/nav').then(({ data: res }) => { | |||
// if (res.code !== 0) { | |||
// Vue.prototype.$message.error(res.msg) | |||
// return next({ name: 'main' }) | |||
// } | |||
// window.SITE_CONFIG['menuList'] = res.data | |||
// fnAddDynamicMenuRoutes(window.SITE_CONFIG['menuList']) | |||
// next({ ...to, replace: true }) | |||
// }).catch(() => { | |||
// next({ name: 'main' }) | |||
// }) | |||
next({ name: 'main' }) | |||
}) | |||
/** | |||
@@ -2,7 +2,7 @@ | |||
* @Author: zwq | |||
* @Date: 2023-01-04 10:29:39 | |||
* @LastEditors: zwq | |||
* @LastEditTime: 2023-06-01 09:23:35 | |||
* @LastEditTime: 2023-08-07 15:44:58 | |||
* @Description: | |||
*/ | |||
import axios from 'axios' | |||
@@ -62,7 +62,7 @@ http.interceptors.request.use(config => { | |||
http.interceptors.response.use(response => { | |||
if (response.data.code === 401 || response.data.code === 10001) { | |||
clearLoginInfo() | |||
router.replace({ name: 'ceshi' }) | |||
router.replace({ name: 'main' }) | |||
return Promise.reject(response.data.msg) | |||
} | |||
return response | |||
@@ -2,7 +2,7 @@ | |||
* @Author: zwq | |||
* @Date: 2022-08-22 14:57:51 | |||
* @LastEditors: zwq | |||
* @LastEditTime: 2023-02-28 15:17:13 | |||
* @LastEditTime: 2023-08-07 15:46:06 | |||
* @Description: | |||
--> | |||
<template> | |||
@@ -26,7 +26,7 @@ | |||
<el-menu-item index="6" @click="$router.push({ name: 'home' })"> | |||
<svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"><use xlink:href="#icon-home"></use></svg> | |||
</el-menu-item> | |||
<el-menu-item index="7"> | |||
<!-- <el-menu-item index="7"> | |||
<el-dropdown trigger="click" class="international" @command="handleSetLanguage"> | |||
<div> | |||
<svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"> | |||
@@ -42,7 +42,7 @@ | |||
</el-dropdown-item> | |||
</el-dropdown-menu> | |||
</el-dropdown> | |||
</el-menu-item> | |||
</el-menu-item> --> | |||
<el-menu-item index="4" @click="fullscreenHandle()"> | |||
<svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"><use xlink:href="#icon-fullscreen"></use></svg> | |||
</el-menu-item> | |||
@@ -2,58 +2,70 @@ | |||
* @Author: zwq | |||
* @Date: 2023-01-04 10:29:40 | |||
* @LastEditors: zwq | |||
* @LastEditTime: 2023-07-06 16:33:01 | |||
* @LastEditTime: 2023-08-08 16:25:02 | |||
* @Description: | |||
--> | |||
<template> | |||
<el-card shadow="never" class="aui-card--fill"> | |||
<div class="bottom-info"> | |||
<el-row :gutter="20"> | |||
<el-col :span="3"> | |||
<div class="text-div"> | |||
<div class="titleStyle"> | |||
上一班组下料数: | |||
</div> | |||
<h1 style="text-align: center;">{{ GroutCount.lastGroutCount }}</h1> | |||
</div> | |||
<div class="text-div"> | |||
<div class="titleStyle"> | |||
当前班组下料数: | |||
</div> | |||
<h1 style="text-align: center;">{{ GroutCount.nowGroupCount }}</h1> | |||
</div> | |||
</el-col> | |||
<el-col :span="9"> | |||
<el-row :gutter="20"> | |||
<el-col :span="12"> | |||
<echart-1 | |||
class="echart-div" | |||
ref="chartRef1" | |||
v-if="chartVisible" | |||
:echart-data="echartData.echart1" | |||
:id="'echart1'" | |||
:title="'窑头1-1'" | |||
></echart-1> | |||
</el-col> | |||
<el-col :span="12"> | |||
<echart-1 | |||
class="echart-div" | |||
ref="chartRef2" | |||
v-if="chartVisible" | |||
:echart-data="echartData.echart2" | |||
:id="'echart2'" | |||
:title="'窑头1-2'" | |||
></echart-1> | |||
</el-col> | |||
<el-col :span="12"> | |||
<echart-1 | |||
class="echart-div" | |||
ref="chartRef3" | |||
v-if="chartVisible" | |||
:echart-data="echartData.echart3" | |||
:id="'echart3'" | |||
:title="'窑头1-3'" | |||
></echart-1> | |||
</el-col> | |||
<el-col :span="12"> | |||
<echart-1 | |||
class="echart-div" | |||
ref="chartRef4" | |||
v-if="chartVisible" | |||
:echart-data="echartData.echart4" | |||
:id="'echart4'" | |||
:title="'窑头1-4'" | |||
></echart-1> | |||
</el-col> | |||
</el-row> | |||
<div class="echart-all"> | |||
<el-row :gutter="20"> | |||
<el-col :span="12"> | |||
<echart-1 | |||
class="echart-div" | |||
ref="chartRef1" | |||
v-if="chartVisible" | |||
:id="'echart1'" | |||
:title="'窑头1-1'" | |||
></echart-1> | |||
</el-col> | |||
<el-col :span="12"> | |||
<echart-1 | |||
class="echart-div" | |||
ref="chartRef2" | |||
v-if="chartVisible" | |||
:id="'echart2'" | |||
:title="'窑头1-2'" | |||
></echart-1> | |||
</el-col> | |||
<el-col :span="12"> | |||
<echart-1 | |||
class="echart-div" | |||
ref="chartRef3" | |||
v-if="chartVisible" | |||
:id="'echart3'" | |||
:title="'窑头1-3'" | |||
></echart-1> | |||
</el-col> | |||
<el-col :span="12"> | |||
<echart-1 | |||
class="echart-div" | |||
ref="chartRef4" | |||
v-if="chartVisible" | |||
:id="'echart4'" | |||
:title="'窑头1-4'" | |||
></echart-1> | |||
</el-col> | |||
</el-row> | |||
</div> | |||
</el-col> | |||
<el-col :span="15"> | |||
<el-col :span="12"> | |||
<div class="table2"> | |||
<div class="titleStyle"> | |||
当前报警 | |||
@@ -88,7 +100,8 @@ export default { | |||
}, | |||
data() { | |||
return { | |||
chartVisible:false | |||
chartVisible: false, | |||
GroutCount: {}, | |||
}; | |||
}, | |||
components: { | |||
@@ -98,14 +111,18 @@ export default { | |||
}, | |||
created() {}, | |||
methods: { | |||
init() { | |||
this.chartVisible = true | |||
this.$nextTick(() => { | |||
this.$refs.chartRef1.initChart(); | |||
this.$refs.chartRef2.initChart(); | |||
this.$refs.chartRef3.initChart(); | |||
this.$refs.chartRef4.initChart(); | |||
}); | |||
init(data) { | |||
this.chartVisible = true; | |||
if (data) { | |||
this.GroutCount = data; | |||
} else { | |||
this.$nextTick(() => { | |||
this.$refs.chartRef1.initChart(this.echartData.echart1); | |||
this.$refs.chartRef2.initChart(this.echartData.echart2); | |||
this.$refs.chartRef3.initChart(this.echartData.echart3); | |||
this.$refs.chartRef4.initChart(this.echartData.echart4); | |||
}); | |||
} | |||
}, | |||
}, | |||
}; | |||
@@ -116,6 +133,10 @@ export default { | |||
background-color: #f2f4f9; | |||
padding: 0; | |||
} | |||
.echart-all { | |||
margin-left: -8px; | |||
} | |||
.echart-div { | |||
background: #ffffff; | |||
border-radius: 8px; | |||
@@ -127,6 +148,17 @@ export default { | |||
margin: 8px 0 0 0; | |||
padding: 17px 24px; | |||
} | |||
.text-div { | |||
background: #ffffff; | |||
border-radius: 8px; | |||
margin: 8px 0 0 0; | |||
padding: 17px; | |||
line-height: 50px; | |||
color: #47E282; | |||
font-size: 50px; | |||
height: 213px; | |||
} | |||
.titleStyle { | |||
margin: -8px 0 10px -10px; | |||
font-size: 16px; | |||
@@ -2,7 +2,7 @@ | |||
* @Author: zwq | |||
* @Date: 2023-01-04 10:29:40 | |||
* @LastEditors: zwq | |||
* @LastEditTime: 2023-07-07 10:15:15 | |||
* @LastEditTime: 2023-08-08 16:58:37 | |||
* @Description: | |||
--> | |||
<template> | |||
@@ -180,8 +180,6 @@ export default { | |||
</script> | |||
<style scoped> | |||
.aui-card--fill >>> .el-card__body { | |||
} | |||
.car { | |||
width: 110px; | |||
height: 46px; | |||
@@ -201,8 +199,6 @@ export default { | |||
margin: 3px 0 0 3px; | |||
float: left; | |||
} | |||
.line-pot { | |||
} | |||
.line-div { | |||
width: 39px; | |||
height: 39px; | |||
@@ -2,7 +2,7 @@ | |||
* @Author: zwq | |||
* @Date: 2023-06-01 10:47:42 | |||
* @LastEditors: zwq | |||
* @LastEditTime: 2023-07-06 16:41:08 | |||
* @LastEditTime: 2023-08-08 15:38:39 | |||
* @Description: | |||
--> | |||
<template> | |||
@@ -13,10 +13,6 @@ | |||
import * as echarts from "echarts"; | |||
export default { | |||
props: { | |||
echartData: { | |||
type: Number, | |||
default: 0, | |||
}, | |||
id: { | |||
type: String, | |||
default: "", | |||
@@ -41,10 +37,10 @@ export default { | |||
}, | |||
methods: { | |||
// 折线图 | |||
initChart() { | |||
if (this.echart !== "") { | |||
this.echart.dispose(); //去掉控制台多个echarts Dom的警告 | |||
} | |||
initChart(data) { | |||
// if (this.echart !== "") { | |||
// this.echart.dispose(); //去掉控制台多个echarts Dom的警告 | |||
// } | |||
var option = { | |||
title: { | |||
text: "{space|}{tip|}{space|}{value|" + this.title + "}", | |||
@@ -186,7 +182,7 @@ export default { | |||
}, | |||
data: [ | |||
{ | |||
value: this.echartData, | |||
value: data, | |||
}, | |||
], | |||
radius: "90%", | |||
@@ -194,8 +190,12 @@ export default { | |||
}, | |||
], | |||
}; | |||
this.echart = echarts.init(document.getElementById(this.id)); | |||
this.echart.setOption(option); | |||
if (this.echart !== "") { | |||
this.echart.setOption(option); | |||
} else { | |||
this.echart = echarts.init(document.getElementById(this.id)); | |||
this.echart.setOption(option); | |||
} | |||
window.addEventListener("resize", () => { | |||
this.echart.resize(); | |||
}); | |||
@@ -2,11 +2,14 @@ | |||
* @Author: zwq | |||
* @Date: 2023-01-04 10:29:40 | |||
* @LastEditors: zwq | |||
* @LastEditTime: 2023-07-07 09:02:22 | |||
* @LastEditTime: 2023-08-09 09:54:14 | |||
* @Description: | |||
--> | |||
<template> | |||
<div style="background-color:#f2f4f9;height:100vh"> | |||
<div style="background-color:#f2f4f9;"> | |||
<div id="alertOverlay" :class="{ alertOverlay: showAlarm }"> | |||
<div></div> | |||
</div> | |||
<div class="title"> | |||
<img style="height: 52px;float:left;margin:12px 24px" src="~@/assets/img/横版logo.png" /> | |||
<img | |||
@@ -19,20 +22,26 @@ | |||
</span> | |||
</div> | |||
<div class="tab-div" style="margin:5px 12px"> | |||
<el-tabs v-model="activeName" style="width:100%;" tab-position="left" @tab-click="handleClick"> | |||
<el-tabs | |||
v-model="activeName" | |||
style="width:100%;" | |||
tab-position="left" | |||
@tab-click="handleClick" | |||
> | |||
<el-tab-pane name="first"> | |||
<span slot="label" class="tab-item"> | |||
<img style="height: 60px;" src="~@/assets/img/RGV/运行状态@2x.png" /> | |||
<br /><span>运行状态</span> | |||
</span> | |||
<ceshi-1 | |||
ref="ceshi1" | |||
:potData='potData' | |||
:rgv='rgv' | |||
:radio='radio' | |||
:arrow='arrow' | |||
:modelData='modelData' | |||
v-if="activeName === 'first'"></ceshi-1> | |||
<ceshi-1 | |||
ref="ceshi1" | |||
:potData="potData" | |||
:rgv="rgv" | |||
:radio="radio" | |||
:arrow="arrow" | |||
:modelData="modelData" | |||
v-if="activeName === 'first'" | |||
></ceshi-1> | |||
</el-tab-pane> | |||
<el-tab-pane name="second"> | |||
<span slot="label" class="tab-item"> | |||
@@ -49,11 +58,12 @@ | |||
<ceshi-3 ref="ceshi3" v-if="activeName === 'third'"></ceshi-3> | |||
</el-tab-pane> | |||
</el-tabs> | |||
<bottom-info | |||
:echartData='echartData' | |||
:table2Data='tableData' | |||
ref="bottomInfo" | |||
style="margin:12px 0px"> | |||
<bottom-info | |||
:echartData="echartData" | |||
:table2Data="tableData" | |||
ref="bottomInfo" | |||
style="margin:12px 0px" | |||
> | |||
</bottom-info> | |||
</div> | |||
</div> | |||
@@ -77,9 +87,10 @@ export default { | |||
echartData: {}, | |||
tableData: [], | |||
rgv: 0, | |||
radio:1, | |||
arrow:1, | |||
modelData: {} | |||
radio: 1, | |||
arrow: 1, | |||
modelData: {}, | |||
showAlarm: false, | |||
}; | |||
}, | |||
components: { | |||
@@ -91,7 +102,7 @@ export default { | |||
created() { | |||
this.url = window.SITE_CONFIG["wbURL"]; | |||
this.initWebSocket(); | |||
}, | |||
}, | |||
mounted() { | |||
this.init(); | |||
this.getCurrentTime(); | |||
@@ -146,7 +157,6 @@ export default { | |||
}, | |||
websocketonmessage(e) { | |||
let dataJson = JSON.parse(e.data); | |||
console.log(dataJson); | |||
// 数据接收 | |||
this.wbData = dataJson; | |||
@@ -162,8 +172,24 @@ export default { | |||
this.$refs.bottomInfo.init(); | |||
}); | |||
} | |||
if ("lastGroutCount" in dataJson) { | |||
const data = { | |||
lastGroutCount: JSON.parse(JSON.stringify(dataJson)).lastGroutCount, | |||
nowGroupCount: JSON.parse(JSON.stringify(dataJson)).nowGroupCount, | |||
}; | |||
this.$nextTick(() => { | |||
this.$refs.bottomInfo.init(data); | |||
}); | |||
} | |||
if ("alarm" in dataJson) { | |||
this.tableData = JSON.parse(JSON.stringify(dataJson)).alarm; | |||
if (this.tableData.length > 0 && this.tableData.find((i) => i.type !== "RGV1提示")) { | |||
this.showAlarm = true; | |||
this.setAlertState(true); | |||
} else { | |||
this.showAlarm = false; | |||
this.setAlertState(false); | |||
} | |||
} | |||
if ("model1" in dataJson) { | |||
this.modelData = JSON.parse(JSON.stringify(dataJson)); | |||
@@ -185,6 +211,14 @@ export default { | |||
// 关闭 | |||
console.log("断开连接", e); | |||
}, | |||
setAlertState(active) { | |||
var alertOverlay = document.getElementById("alertOverlay"); | |||
if (active) { | |||
alertOverlay.classList.add("alert-active"); | |||
} else { | |||
alertOverlay.classList.remove("alert-active"); | |||
} | |||
}, | |||
}, | |||
}; | |||
</script> | |||
@@ -209,8 +243,6 @@ export default { | |||
right: 30px; | |||
top: 22px; | |||
} | |||
.tab-div { | |||
} | |||
.tab-div >>> .el-tabs__item { | |||
width: 220px; | |||
height: 160px; | |||
@@ -233,7 +265,7 @@ export default { | |||
} | |||
.tab-div >>> .el-tabs__active-bar { | |||
border-radius: 2px; | |||
background: #3FC471; | |||
background: #3fc471; | |||
} | |||
.tab-div >>> .el-tabs__nav-wrap::after { | |||
display: none; | |||
@@ -242,3 +274,87 @@ export default { | |||
text-align: center; | |||
} | |||
</style> | |||
<style> | |||
html, | |||
body { | |||
margin: 0; | |||
padding: 0; | |||
overflow: hidden; | |||
} | |||
:root { | |||
--alert-size: 120px; | |||
} | |||
.alertOverlay::before, | |||
.alertOverlay::after { | |||
content: ""; | |||
position: absolute; | |||
width: var(--alert-size); | |||
height: 100%; | |||
} | |||
.alertOverlay > div::before, | |||
.alertOverlay > div::after { | |||
content: ""; | |||
position: absolute; | |||
width: 100%; | |||
height: var(--alert-size); | |||
} | |||
.alertOverlay::before { | |||
background: linear-gradient(to right, red, transparent); | |||
top: 0; | |||
left: 0; | |||
transform: rotate(0deg); | |||
} | |||
.alertOverlay::after { | |||
background: linear-gradient(to left, red, transparent); | |||
top: 0%; | |||
left: 100%; | |||
transform: rotate(0deg) translate(calc(-1 * var(--alert-size)), 0px); | |||
} | |||
.alertOverlay > div::before { | |||
background: linear-gradient(to top, red, transparent); | |||
top: 0; | |||
left: 0; | |||
transform: rotate(180deg); | |||
} | |||
.alertOverlay > div::after { | |||
background: linear-gradient(to top, red, transparent); | |||
top: 100%; | |||
left: 0; | |||
transform: rotate(0deg) translate(0px, calc(-1 * var(--alert-size))); | |||
} | |||
.alertOverlay { | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
height: 100%; | |||
box-sizing: border-box; | |||
opacity: 1; | |||
transition: opacity 0.5s; | |||
pointer-events: none; | |||
z-index: 10; | |||
} | |||
.alert-active { | |||
animation: blink 1s infinite; | |||
} | |||
@keyframes blink { | |||
0% { | |||
opacity: 0; | |||
} | |||
50% { | |||
opacity: 0.5; | |||
} | |||
100% { | |||
opacity: 0; | |||
} | |||
} | |||
</style> |
@@ -1,3 +1,10 @@ | |||
<!-- | |||
* @Author: zwq | |||
* @Date: 2023-08-07 08:26:17 | |||
* @LastEditors: zwq | |||
* @LastEditTime: 2023-08-07 16:02:48 | |||
* @Description: | |||
--> | |||
<template> | |||
<div class="aui-wrapper aui-page__not-found"> | |||
<div class="aui-content__wrapper"> | |||
@@ -6,7 +13,7 @@ | |||
<p class="desc" v-html="$t('notFound.desc')"></p> | |||
<div class="btn-bar"> | |||
<el-button @click="$router.go(-1)">{{ $t('notFound.back') }}</el-button> | |||
<el-button type="primary" @click="$router.push({ name: 'home' })">{{ $t('notFound.home') }}</el-button> | |||
<el-button type="primary" @click="$router.push({ name: 'main' })">{{ $t('notFound.home') }}</el-button> | |||
</div> | |||
</div> | |||
</div> | |||
@@ -101,7 +101,7 @@ export default { | |||
return this.$message.error(res.msg) | |||
} | |||
Cookies.set('token', res.data.token) | |||
this.$router.replace({ name: 'home' }) | |||
this.$router.replace({ name: 'main' }) | |||
}).catch(() => {}) | |||
}) | |||
}, 1000, { 'leading': true, 'trailing': false }) | |||