Skip to content

V
vue3portal
Commit a9be541b authored by 左玲玲's avatar 左玲玲 😬
Browse files
Options

1748

parent eca45725
Show whitespace changes
Inline Side-by-side
Showing with 390 additions and 51 deletions
package.json
View file @ a9be541b
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"@ant-design/icons-vue": "^6.1.0",
"@element-plus/icons-vue": "^2.1.0", "@element-plus/icons-vue": "^2.1.0",
"axios": "^1.4.0", "axios": "^1.4.0",
"ayin-color": "^1.0.9", "ayin-color": "^1.0.9",
......
src/assets/less/main.less
View file @ a9be541b
...@@ -47,6 +47,11 @@ body { ...@@ -47,6 +47,11 @@ body {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.oneText {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.scrollbar { .scrollbar {
&::-webkit-scrollbar { &::-webkit-scrollbar {
...@@ -65,3 +70,28 @@ body { ...@@ -65,3 +70,28 @@ body {
&::-webkit-scrollbar-button {} &::-webkit-scrollbar-button {}
} }
.home{
.el-radio-button {
&:last-child{
.el-radio-button__inner{
border-radius:0 0 6px 0 !important;
}
}
}
.el-radio-button__inner{
background-color: #015b85 !important;
color: #ccc !important;
border-color: #015b85 !important;
outline: none !important;
border-radius:0 !important;
display: flex;
}
.el-radio-button__original-radio:checked+.el-radio-button__inner{
background-color: #39bae8 !important;
border-color: #39bae8 !important;
color: #fff !important;
}
.el-badge__content{
background-color: #19e5e6;
}
}
\ No newline at end of file
src/main.js
View file @ a9be541b
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: zuolingling zuolingling@jsnangao.com * @Author: zuolingling zuolingling@jsnangao.com
* @Date: 2023-08-14 13:31:41 * @Date: 2023-08-14 13:31:41
* @LastEditors: zuolingling zuolingling@jsnangao.com * @LastEditors: zuolingling zuolingling@jsnangao.com
* @LastEditTime: 2023-08-14 13:31:41 * @LastEditTime: 2023-08-17 15:09:57
* @FilePath: \vue3portal\src\main.js * @FilePath: \vue3portal\src\main.js
* @Description: * @Description:
* *
...@@ -13,6 +13,7 @@ import { createApp } from 'vue' ...@@ -13,6 +13,7 @@ import { createApp } from 'vue'
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
import store from './store' import store from './store'
import * as Icons from '@ant-design/icons-vue'
import * as echarts from 'echarts'; import * as echarts from 'echarts';
window.echarts=echarts; window.echarts=echarts;
...@@ -22,11 +23,18 @@ import techUILite from "techui-vue3-lite" ...@@ -22,11 +23,18 @@ import techUILite from "techui-vue3-lite"
import vue3api from '@/plugins/vue3api' import vue3api from '@/plugins/vue3api'
import common from '@/plugins/common' import common from '@/plugins/common'
const icons = Icons;
const app=createApp(App) const app=createApp(App)
techUILite(app).then(()=>{ techUILite(app).then(()=>{
app.use(router) app.use(router)
app.use(store) app.use(store)
app.use(vue3api) app.use(vue3api)
app.use(common) app.use(common)
for (const i in icons) {
// 全局注册一下组件
app.component(i, icons[i])
}
app.mount('#app') app.mount('#app')
}) })
src/pages/layouts/components/Devicestatus.vue 0 → 100644
View file @ a9be541b
<!--
* @Author: zuolingling zuolingling@jsnangao.com
* @Date: 2023-08-16 11:00:36
* @LastEditors: zuolingling zuolingling@jsnangao.com
* @LastEditTime: 2023-08-17 14:40:03
* @FilePath: \vue3portal\src\pages\layouts\components\Devicestatus.vue
* @Description:
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<script setup>
const props = defineProps({
datas: {
type: Object,
default: {}
}
});
const state = reactive({
chartOption: {}
});
const flag = ref(false);
const processData = () => {
const { data,legendData } = props.datas ?? [];
let series = [
{
name: '设备总数',
type: 'pie',
selectedMode: 'single',
radius: [0, '45%'],
center: ['30%', '50%'],
data: data?.[0]? [data?.[0]]: [],
labelLine: {
show: false
},
label: {
show: false,
}
},
{
name: '设备状态',
type: 'pie',
radius: ['60%', '80%'],
center: ['30%', '50%'],
data: data ? data?.slice(-3) : [],
labelLine: {
show: false
},
label: {
show: false,
}
}
],
legendformat = (name)=>{
return `${name}：${data?.filter(it=>it.name==name)?.[0]?.value}`;
}
state.chartOption.series = series;
state.chartOption.legend.data = legendData;
state.chartOption.legend.formatter = legendformat;
}
const processOption = () => {
state.chartOption = {
color: ['#bea32e', '#629460', '#39bae8', '#2b4162'],
legend: {
data: [],
orient: 'vertical',
right: 20,
top:"center",
textStyle:{
fontSize:14
},
itemGap:20
},
tooltip: {
trigger: "item"
},
series: []
}
processData();
}
watch(() => props.datas, (newValue, oldValue) => {
flag.value = true;
processOption();
nextTick(() => {
flag.value = false;
})
}, { immediate: true, deep: true });
</script>
<template>
<echartsInit v-if="!flag" :chartOption="state.chartOption"></echartsInit>
</template>
<style lang="less"></style>
src/pages/layouts/components/Energy.vue
View file @ a9be541b
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: zuolingling zuolingling@jsnangao.com * @Author: zuolingling zuolingling@jsnangao.com
* @Date: 2023-08-16 11:00:36 * @Date: 2023-08-16 11:00:36
* @LastEditors: zuolingling zuolingling@jsnangao.com * @LastEditors: zuolingling zuolingling@jsnangao.com
* @LastEditTime: 2023-08-16 18:03:32 * @LastEditTime: 2023-08-17 09:22:05
* @FilePath: \vue3portal\src\pages\layouts\components\Energy.vue * @FilePath: \vue3portal\src\pages\layouts\components\Energy.vue
* @Description: * @Description:
* *
......
src/pages/layouts/components/Line.vue
View file @ a9be541b
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: zuolingling zuolingling@jsnangao.com * @Author: zuolingling zuolingling@jsnangao.com
* @Date: 2023-08-16 11:00:36 * @Date: 2023-08-16 11:00:36
* @LastEditors: zuolingling zuolingling@jsnangao.com * @LastEditors: zuolingling zuolingling@jsnangao.com
* @LastEditTime: 2023-08-16 18:02:38 * @LastEditTime: 2023-08-17 13:11:58
* @FilePath: \vue3portal\src\pages\layouts\components\Line.vue * @FilePath: \vue3portal\src\pages\layouts\components\Line.vue
* @Description: * @Description:
* *
......
src/pages/layouts/components/Produce.vue
View file @ a9be541b
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: zuolingling zuolingling@jsnangao.com * @Author: zuolingling zuolingling@jsnangao.com
* @Date: 2023-08-16 11:00:36 * @Date: 2023-08-16 11:00:36
* @LastEditors: zuolingling zuolingling@jsnangao.com * @LastEditors: zuolingling zuolingling@jsnangao.com
* @LastEditTime: 2023-08-16 17:57:44 * @LastEditTime: 2023-08-17 13:14:14
* @FilePath: \vue3portal\src\pages\layouts\components\Produce.vue * @FilePath: \vue3portal\src\pages\layouts\components\Produce.vue
* @Description: * @Description:
* *
......
src/pages/layouts/components/Tabsmessage.vue 0 → 100644
View file @ a9be541b
<!--
* @Author: zuolingling zuolingling@jsnangao.com
* @Date: 2023-08-17 15:37:50
* @LastEditors: zuolingling zuolingling@jsnangao.com
* @LastEditTime: 2023-08-17 17:47:56
* @FilePath: \vue3portal\src\pages\layouts\components\Tabsmessage.vue
* @Description:
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<template>
<div class="home messages swh">
<div class="tabs">
<el-radio-group v-model="switchvalue" size="small" @change="handlchange">
<el-radio-button label="1">
告警信息&nbsp;&nbsp;
<DigitalTransform :value="alarmnum" dislocation :interval="500"></DigitalTransform>
</el-radio-button>
<el-radio-button label="2">
业务信息&nbsp;&nbsp;
<DigitalTransform :value="msgnum" dislocation :interval="500"></DigitalTransform>
</el-radio-button>
</el-radio-group>
</div>
<div class="scrolltabs scrollbar">
<div class="colflex" style="gap:10px" v-if="switchvalue=='1'">
<div v-for="it in currentData" class="itemmsg">
<div class="itemt oneText" :key="it.id">
<span>【{{ it.deviceName}}】</span>
<span :title="it.type">{{ it.type }}</span>
</div>
<div class="itemb rowflex">
<div style="margin-right: 15px;">
<el-tag size="small" :type="types[it.severityCode]?.type" class="mx-1" effect="dark">
{{ types[it.severityCode]?.name }}
</el-tag>
</div>
<div class="time">
{{ it.alarmTimes }}
</div>
</div>
</div>
</div>
<div class="colflex" style="gap:10px" v-else>
<div v-for="it in currentData" class="itemmsg">
<div class="itemt oneText" :key="it.id">
<span>【{{ it.eventTypeName }}】</span>
<span :title="it.messageContent">{{ it.messageContent }}</span>
</div>
<div class="itemb rowflex">
<div class="time">
{{ it.sendTime }}
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
const types = {
MAJOR: {
name: "重要",
type: "warning"
},
WARNING: {
name: "普通",
type: "info"
},
CRITICAL: {
name: "紧急",
type: "danger"
}
}
import { postFetch } from "@/api/doFetch";
const switchvalue = ref('1'),
alarmnum = ref(0),
msgnum = ref(0);
const state = reactive({
currentData: []
});
const handlchange = (e) => {
switchvalue.value = e;
}
onMounted(() => {
getData("1");
getData("2");
});
const {currentData} = toRefs(state);
function getData(type) {
postFetch({ url: "/message/userMessageList", params: { type } }).then(res => {
if (res.code == "0000") {
let data = res?.data?.page ?? {};
if (type == "1") {
alarmnum.value = data?.total;
} else {
msgnum.value = data?.total;
}
currentData.value = data?.records ?? [];
}
})
}
watch(() => switchvalue.value, (newValue, oldValue) => {
getData(newValue);
})
</script>
<style lang="less" scoped>
.messages {
position: relative;
.tabs {
position: absolute;
top: -32px;
left: 0;
}
.scrolltabs {
width: 100%;
height: calc(100% - 32px);
padding: 12px;
padding-top: 0;
margin-top: 32px;
overflow: hidden;
overflow-y: auto;
}
.itemt {}
.itemb {
padding: 3px 8px;
.time {
color: rgb(151, 151, 151);
font-size: 12px;
}
}
}
</style>
\ No newline at end of file
src/pages/layouts/components/elsmain.vue
View file @ a9be541b
...@@ -2,7 +2,11 @@ ...@@ -2,7 +2,11 @@
<div class="mainbox"> <div class="mainbox">
<div class="set1 colflex leftbox"> <div class="set1 colflex leftbox">
<div class="box3"> <div class="box3">
<aYinTechBorderA1 :config="{ ...leftConfig, title: '设备状态' }"></aYinTechBorderA1> <aYinTechBorderA1 :config="{ ...leftConfig, title: '设备状态' }">
<div class="pad12 swh" style="padding-top: 24px;">
<Devicestatus :datas="devicestatus"></Devicestatus>
</div>
</aYinTechBorderA1>
</div> </div>
<div class="box3"> <div class="box3">
<aYinTechBorderA1 :config="{ ...leftConfig, title: '生产数据' }"> <aYinTechBorderA1 :config="{ ...leftConfig, title: '生产数据' }">
...@@ -58,14 +62,19 @@ ...@@ -58,14 +62,19 @@
<div class="set1 colflex leftbox"> <div class="set1 colflex leftbox">
<div class="box3"> <div class="box3">
<aYinTechBorderB3 :config="tableconfig"> <aYinTechBorderB3 :config="tableconfig">
<panelTitleA1 :config="{ ...titleconfig, position: 'left' }">任务待办</panelTitleA1> <panelTitleA1 :config="{ ...titleconfig, position: 'left' }">任务待办
<DigitalTransform :value="taskData?.length" dislocation :interval="500"></DigitalTransform>
</panelTitleA1>
<div class="pad12 swh" style="padding-top: 40px;"> <div class="pad12 swh" style="padding-top: 40px;">
<Scrolltable :dataSource="taskData" :columns="taskColumns" :colors="taskColors" ></Scrolltable> <Scrolltable :dataSource="taskData" :columns="taskColumns" :colors="taskColors"></Scrolltable>
</div> </div>
</aYinTechBorderB3> </aYinTechBorderB3>
</div> </div>
<div class="box3"> <div class="box3">
<aYinTechBorderB3 :config="tableconfig"></aYinTechBorderB3> <aYinTechBorderB4 :config="systemconfig">
<!-- <component is="step-backward-outlined"></component> -->
<Tabsmessage></Tabsmessage>
</aYinTechBorderB4>
</div> </div>
<div class="box3"> <div class="box3">
<aYinTechBorderA1 :config="{ ...rightConfig, title: '仓库使用趋势', titleWidth: 120 }"> <aYinTechBorderA1 :config="{ ...rightConfig, title: '仓库使用趋势', titleWidth: 120 }">
...@@ -85,8 +94,9 @@ import Line from "./Line.vue"; ...@@ -85,8 +94,9 @@ import Line from "./Line.vue";
import Energy from "./Energy.vue"; import Energy from "./Energy.vue";
import Produce from "./Produce.vue"; import Produce from "./Produce.vue";
import Scrolltable from "./Scrolltable.vue"; import Scrolltable from "./Scrolltable.vue";
const state = reactive({ import Devicestatus from "./Devicestatus.vue";
leftConfig: { import Tabsmessage from "./Tabsmessage.vue";
const leftConfig = {
backgroundColor: $c.bll9, backgroundColor: $c.bll9,
decorationColor: [$c.bll3, $c.cyl5], decorationColor: [$c.bll3, $c.cyl5],
borderColor: $c.bll7, borderColor: $c.bll7,
...@@ -94,22 +104,22 @@ const state = reactive({ ...@@ -94,22 +104,22 @@ const state = reactive({
titleColor: $c.cyl5, titleColor: $c.cyl5,
decorationAlt: true, decorationAlt: true,
rotate: 'y' rotate: 'y'
}, },
rightConfig: { rightConfig = {
backgroundColor: $c.bll9, backgroundColor: $c.bll9,
decorationColor: [$c.bll3, $c.cyl5], decorationColor: [$c.bll3, $c.cyl5],
borderColor: $c.bll7, borderColor: $c.bll7,
titleWidth: 100, titleWidth: 100,
titleColor: $c.cyl5 titleColor: $c.cyl5
}, },
systemconfig: { systemconfig = {
backgroundColor: $c.bll9, backgroundColor: $c.bll9,
borderColor: $c.bll7, borderColor: $c.bll7,
glowColor: $c.fade($c.cyl5, .3), glowColor: $c.fade($c.cyl5, .3),
decorationColor: [$c.bll3, $c.cyl5], decorationColor: [$c.bll3, $c.cyl5],
decoration: false decoration: false
}, },
config: { config = {
directionAlt: true, directionAlt: true,
rotate: "z", rotate: "z",
opacity: 0.8, opacity: 0.8,
...@@ -118,15 +128,16 @@ const state = reactive({ ...@@ -118,15 +128,16 @@ const state = reactive({
borderColor: $c.bll7, borderColor: $c.bll7,
titleColor: $c.cyl5 titleColor: $c.cyl5
}, },
tableconfig: { tableconfig = {
backgroundColor: $c.bll9, backgroundColor: $c.bll9,
borderColor: $c.bll7, borderColor: $c.bll7,
decoration: false decoration: false
}, },
titleconfig: { titleconfig = {
color: $c.cyl5, color: $c.cyl5,
decorationColor: $c.cyl5 decorationColor: $c.cyl5
}, };
const state = reactive({
menus: [], menus: [],
activeitem: {}, activeitem: {},
runRate: {}, runRate: {},
...@@ -134,12 +145,11 @@ const state = reactive({ ...@@ -134,12 +145,11 @@ const state = reactive({
quality: {}, quality: {},
store: {}, store: {},
produce: {}, produce: {},
taskData: [] taskData: [],
devicestatus: []
}); }),
const { leftConfig, rightConfig, systemconfig, config, tableconfig, titleconfig, menus, activeitem, runRate, energy, quality, store, produce, taskData } = toRefs(state); ratelineoptions = {
let timer = null;
const ratelineoptions = {
showLegend: false, showLegend: false,
unit: "%", unit: "%",
colors: ['#23B3F7'], colors: ['#23B3F7'],
...@@ -160,7 +170,7 @@ const ratelineoptions = { ...@@ -160,7 +170,7 @@ const ratelineoptions = {
} }
} }
] ]
}, },
qualityoptions = { qualityoptions = {
showLegend: true, showLegend: true,
unit: "%", unit: "%",
...@@ -201,7 +211,7 @@ const ratelineoptions = { ...@@ -201,7 +211,7 @@ const ratelineoptions = {
dataIndex: 'taskStatusName', dataIndex: 'taskStatusName',
key: 'taskStatusName', key: 'taskStatusName',
search: false, search: false,
width:72 width: 72
}, },
{ {
title: '创建时间', title: '创建时间',
...@@ -214,6 +224,8 @@ const ratelineoptions = { ...@@ -214,6 +224,8 @@ const ratelineoptions = {
borderc: "rgba(165, 214, 63, 0.2)", borderc: "rgba(165, 214, 63, 0.2)",
thumbcolor: "rgba(72, 208, 127, 1)" thumbcolor: "rgba(72, 208, 127, 1)"
}; };
const { menus, activeitem, runRate, energy, quality, store, produce, taskData, devicestatus } = toRefs(state);
let timer = null;
onMounted(() => { onMounted(() => {
// timer = setInterval(() => { // timer = setInterval(() => {
getData(); getData();
...@@ -232,6 +244,7 @@ function getData() { ...@@ -232,6 +244,7 @@ function getData() {
storeUsed(); storeUsed();
produceData(); produceData();
toDoTaskOrder(); toDoTaskOrder();
status();
} }
//应用 //应用
...@@ -350,7 +363,36 @@ function toDoTaskOrder() { ...@@ -350,7 +363,36 @@ function toDoTaskOrder() {
}) })
} }
//设备状态
function status() {
postFetch({ url: "/index/statusStatistics", params: {} }).then(res => {
if (res.code == "0000") {
let data = res?.data?.data ?? {};
devicestatus.value = {
data: [
{
name: "设备总数",
value: data.total
},
{
name: "运行",
value: data.run
},
{
name: "待机",
value: data.standby
},
{
name: "关机",
value: data.off
}
],
legendData: ["设备总数", "运行", "待机", "关机"]
}
}
})
}
const handleClick = (it) => { const handleClick = (it) => {
activeitem.value = it; activeitem.value = it;
}; };
......
yarn.lock
View file @ a9be541b
...@@ -2,6 +2,26 @@ ...@@ -2,6 +2,26 @@
# yarn lockfile v1 # yarn lockfile v1
"@ant-design/colors@^6.0.0":
version "6.0.0"
resolved "https://registry.npmmirror.com/@ant-design/colors/-/colors-6.0.0.tgz#9b9366257cffcc47db42b9d0203bb592c13c0298"
integrity sha512-qAZRvPzfdWHtfameEGP2Qvuf838NhergR35o+EuVyB5XvSA98xod5r4utvi4TJ3ywmevm290g9nsCG5MryrdWQ==
dependencies:
"@ctrl/tinycolor" "^3.4.0"
"@ant-design/icons-svg@^4.2.1":
version "4.3.0"
resolved "https://registry.npmmirror.com/@ant-design/icons-svg/-/icons-svg-4.3.0.tgz#cd8d3624bba50975e848591cea12cb6be132cd82"
integrity sha512-WOgvdH/1Wl8Z7VXigRbCa5djO14zxrNTzvrAQzhWiBQtEKT0uTc8K1ltjKZ8U1gPn/wXhMA8/jE39SJl0WNxSg==
"@ant-design/icons-vue@^6.1.0":
version "6.1.0"
resolved "https://registry.npmmirror.com/@ant-design/icons-vue/-/icons-vue-6.1.0.tgz#f9324fdc0eb4cea943cf626d2bf3db9a4ff4c074"
integrity sha512-EX6bYm56V+ZrKN7+3MT/ubDkvJ5rK/O2t380WFRflDcVFgsvl3NLH7Wxeau6R8DbrO5jWR6DSTC3B6gYFp77AA==
dependencies:
"@ant-design/colors" "^6.0.0"
"@ant-design/icons-svg" "^4.2.1"
"@antfu/install-pkg@^0.1.1": "@antfu/install-pkg@^0.1.1":
version "0.1.1" version "0.1.1"
resolved "https://registry.npmmirror.com/@antfu/install-pkg/-/install-pkg-0.1.1.tgz#157bb04f0de8100b9e4c01734db1a6c77e98bbb5" resolved "https://registry.npmmirror.com/@antfu/install-pkg/-/install-pkg-0.1.1.tgz#157bb04f0de8100b9e4c01734db1a6c77e98bbb5"
...@@ -20,7 +40,7 @@ ...@@ -20,7 +40,7 @@
resolved "https://registry.npmmirror.com/@babel/parser/-/parser-7.22.10.tgz#e37634f9a12a1716136c44624ef54283cabd3f55" resolved "https://registry.npmmirror.com/@babel/parser/-/parser-7.22.10.tgz#e37634f9a12a1716136c44624ef54283cabd3f55"
integrity sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ== integrity sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==
"@ctrl/tinycolor@^3.4.1": "@ctrl/tinycolor@^3.4.0", "@ctrl/tinycolor@^3.4.1":
version "3.6.0" version "3.6.0"
resolved "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.6.0.tgz#53fa5fe9c34faee89469e48f91d51a3766108bc8" resolved "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.6.0.tgz#53fa5fe9c34faee89469e48f91d51a3766108bc8"
integrity sha512-/Z3l6pXthq0JvMYdUFyX9j0MaCltlIn6mfh9jLyQwg5aPKxkyNa0PTHtU1AlFXLNk55ZuAeJRcpvq+tmLfKmaQ== integrity sha512-/Z3l6pXthq0JvMYdUFyX9j0MaCltlIn6mfh9jLyQwg5aPKxkyNa0PTHtU1AlFXLNk55ZuAeJRcpvq+tmLfKmaQ==
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment