mes/mes-lxsm-ui
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

设备大屏第一版

Browse Source
This commit is contained in:
打豆豆 2024-01-16 16:45:14 +08:00
parent 78c317301a
commit 0be0c2deb1
10 changed files with 1587 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/biaotixiugai.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
src/assets/images/return.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

BIN
src/assets/images/zhubeijing.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 594 KiB

162
src/views/mes/dv/largeScreen/components/AGVrate.vue Normal file
View File

@ -0,0 +1,162 @@
<template>
<div class="app-container">
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="AGVrate" style="width: 100%; height: 150px"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
components: { echarts, Treeselect },
props: ["message"], // 声明一个自定义的属性
data() {
return {
echartData: [],
};
},
watch: {
message: {
immediate: true,
handler(val) {
// console.log(val,'差点撒旦阿萨=============');
this.echartData = val;
// val.forEach((item) => {
// this.getDataNum.push(Number(item.ytdUvNew))
// this.getDataTime.push(moment(item.dt).format('YYYY-MM-DD'))
// })
this.$nextTick(() => {
//这里需要重新加载渲染
this.drawLine();
});
},
},
},
mounted() {
this.drawLine();
},
methods: {
drawLine() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("AGVrate"));
let value = "10%";
let title = "设备在线率";
var option = {
title: [
{
text: "{a|" + value + "}\n{c|" + title + "}",
x: "center",
top: "35%",
textStyle: {
rich: {
a: {
fontSize: 15,
color: "#ffffff",
},
c: {
fontSize: 10,
color: "#ffffff",
padding: [5, 0],
},
},
},
},
],
// backgroundColor: "#111",
polar: {
radius: ["70%", "95%"],
center: ["50%", "50%"],
},
angleAxis: {
max: 100,
show: false,
},
radiusAxis: {
type: "category",
show: true,
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
series: [
{
name: "",
type: "bar",
roundCap: true,
barWidth: 90,
showBackground: true,
backgroundStyle: {
color: "rgba(66, 66, 66, .3)",
},
data: [10],
coordinateSystem: "polar",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: "#717171",
},
{
offset: 1,
color: "#717171",
},
]),
},
},
},
// {
// name: '',
// type: 'pie',
// startAngle: 80,
// radius: ['6%'],
// hoverAnimation: false,
// center: ['50%', '50%'],
// itemStyle: {
// color: 'rgba(66, 66, 66, .1)',
// borderWidth: 1,
// borderColor: '#5269EE',
// },
// data: [100],
// },
{
name: "",
type: "pie",
startAngle: 80,
radius: ["100%"],
hoverAnimation: false,
center: ["50%", "50%"],
itemStyle: {
color: "rgba(66, 66, 66, .1)",
borderWidth: 1,
borderColor: "#5269EE",
},
data: [100],
},
],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
},
};
</script>
<style lang="scss" scoped>
.app-container {
padding: 0px !important;
min-height: calc(0vh - 0px) !important;
}
</style>

153
src/views/mes/dv/largeScreen/components/fault.vue Normal file
View File

@ -0,0 +1,153 @@
<template>
<div class="app-container">
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="fault" style="width: 100%; height: 70px"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
components: { echarts, Treeselect },
props: ["message"], // 声明一个自定义的属性
data() {
return {
echartData: [],
};
},
watch: {
message: {
immediate: true,
handler(val) {
// console.log(val,'差点撒旦阿萨=============');
this.echartData = val;
// val.forEach((item) => {
// this.getDataNum.push(Number(item.ytdUvNew))
// this.getDataTime.push(moment(item.dt).format('YYYY-MM-DD'))
// })
this.$nextTick(() => {
//这里需要重新加载渲染
this.drawLine();
});
},
},
},
mounted() {
this.drawLine();
},
methods: {
drawLine() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("fault"));
var option = {
title: [
{
text: "1%",
x: "center",
top: "35%",
textStyle: {
fontSize: "15",
color: "#FFFFFF",
fontFamily: "DINAlternate-Bold, DINAlternate",
foontWeight: "100",
},
},
],
// backgroundColor: "#111",
polar: {
radius: ["75%", "90%"],
center: ["50%", "50%"],
},
angleAxis: {
max: 100,
show: false,
},
radiusAxis: {
type: "category",
show: true,
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
series: [
{
name: "",
type: "bar",
roundCap: true,
barWidth: 90,
showBackground: true,
backgroundStyle: {
color: "rgba(66, 66, 66, .3)",
},
data: [1],
coordinateSystem: "polar",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: "#717171",
},
{
offset: 1,
color: "#717171",
},
]),
},
},
},
// {
// name: '',
// type: 'pie',
// startAngle: 80,
// radius: ['6%'],
// hoverAnimation: false,
// center: ['50%', '50%'],
// itemStyle: {
// color: 'rgba(66, 66, 66, .1)',
// borderWidth: 1,
// borderColor: '#5269EE',
// },
// data: [100],
// },
{
name: "",
type: "pie",
startAngle: 80,
radius: ["100%"],
hoverAnimation: false,
center: ["50%", "50%"],
itemStyle: {
color: "rgba(66, 66, 66, .1)",
borderWidth: 1,
borderColor: "#5269EE",
},
data: [100],
},
],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
},
};
</script>
<style lang="scss" scoped>
.app-container {
padding: 0px !important;
min-height: calc(0vh - 0px) !important;
}
</style>

153
src/views/mes/dv/largeScreen/components/offline.vue Normal file
View File

@ -0,0 +1,153 @@
<template>
<div class="app-container">
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="offline" style="width: 100%; height: 70px"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
components: { echarts, Treeselect },
props: ["message"], // 声明一个自定义的属性
data() {
return {
echartData: [],
};
},
watch: {
message: {
immediate: true,
handler(val) {
// console.log(val,'差点撒旦阿萨=============');
this.echartData = val;
// val.forEach((item) => {
// this.getDataNum.push(Number(item.ytdUvNew))
// this.getDataTime.push(moment(item.dt).format('YYYY-MM-DD'))
// })
this.$nextTick(() => {
//这里需要重新加载渲染
this.drawLine();
});
},
},
},
mounted() {
this.drawLine();
},
methods: {
drawLine() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("offline"));
var option = {
title: [
{
text: "5%",
x: "center",
top: "35%",
textStyle: {
fontSize: "15",
color: "#FFFFFF",
fontFamily: "DINAlternate-Bold, DINAlternate",
foontWeight: "100",
},
},
],
// backgroundColor: "#111",
polar: {
radius: ["75%", "90%"],
center: ["50%", "50%"],
},
angleAxis: {
max: 100,
show: false,
},
radiusAxis: {
type: "category",
show: true,
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
series: [
{
name: "",
type: "bar",
roundCap: true,
barWidth: 90,
showBackground: true,
backgroundStyle: {
color: "rgba(66, 66, 66, .3)",
},
data: [5],
coordinateSystem: "polar",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: "#717171",
},
{
offset: 1,
color: "#717171",
},
]),
},
},
},
// {
// name: '',
// type: 'pie',
// startAngle: 80,
// radius: ['6%'],
// hoverAnimation: false,
// center: ['50%', '50%'],
// itemStyle: {
// color: 'rgba(66, 66, 66, .1)',
// borderWidth: 1,
// borderColor: '#5269EE',
// },
// data: [100],
// },
{
name: "",
type: "pie",
startAngle: 80,
radius: ["100%"],
hoverAnimation: false,
center: ["50%", "50%"],
itemStyle: {
color: "rgba(66, 66, 66, .1)",
borderWidth: 1,
borderColor: "#5269EE",
},
data: [100],
},
],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
},
};
</script>
<style lang="scss" scoped>
.app-container {
padding: 0px !important;
min-height: calc(0vh - 0px) !important;
}
</style>

153
src/views/mes/dv/largeScreen/components/online.vue Normal file
View File

@ -0,0 +1,153 @@
<template>
<div class="app-container">
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 100%; height: 70px"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
components: { echarts, Treeselect },
props: ["message"], // 声明一个自定义的属性
data() {
return {
echartData: [],
};
},
watch: {
message: {
immediate: true,
handler(val) {
// console.log(val,'差点撒旦阿萨=============');
this.echartData = val;
// val.forEach((item) => {
// this.getDataNum.push(Number(item.ytdUvNew))
// this.getDataTime.push(moment(item.dt).format('YYYY-MM-DD'))
// })
this.$nextTick(() => {
//这里需要重新加载渲染
this.drawLine();
});
},
},
},
mounted() {
this.drawLine();
},
methods: {
drawLine() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("main"));
var option = {
title: [
{
text: "10%",
x: "center",
top: "35%",
textStyle: {
fontSize: "15",
color: "#FFFFFF",
fontFamily: "DINAlternate-Bold, DINAlternate",
foontWeight: "100",
},
},
],
// backgroundColor: "#111",
polar: {
radius: ["75%", "90%"],
center: ["50%", "50%"],
},
angleAxis: {
max: 100,
show: false,
},
radiusAxis: {
type: "category",
show: true,
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
series: [
{
name: "",
type: "bar",
roundCap: true,
barWidth: 90,
showBackground: true,
backgroundStyle: {
color: "rgba(66, 66, 66, .3)",
},
data: [10],
coordinateSystem: "polar",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: "#717171",
},
{
offset: 1,
color: "#717171",
},
]),
},
},
},
// {
// name: '',
// type: 'pie',
// startAngle: 80,
// radius: ['6%'],
// hoverAnimation: false,
// center: ['50%', '50%'],
// itemStyle: {
// color: 'rgba(66, 66, 66, .1)',
// borderWidth: 1,
// borderColor: '#5269EE',
// },
// data: [100],
// },
{
name: "",
type: "pie",
startAngle: 80,
radius: ["100%"],
hoverAnimation: false,
center: ["50%", "50%"],
itemStyle: {
color: "rgba(66, 66, 66, .1)",
borderWidth: 1,
borderColor: "#5269EE",
},
data: [100],
},
],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
},
};
</script>
<style lang="scss" scoped>
.app-container {
padding: 0px !important;
min-height: calc(0vh - 0px) !important;
}
</style>

162
src/views/mes/dv/largeScreen/components/onlineRate.vue Normal file
View File

@ -0,0 +1,162 @@
<template>
<div class="app-container">
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="onlineRate" style="width: 100%; height: 150px"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
components: { echarts, Treeselect },
props: ["message"], // 声明一个自定义的属性
data() {
return {
echartData: [],
};
},
watch: {
message: {
immediate: true,
handler(val) {
// console.log(val,'差点撒旦阿萨=============');
this.echartData = val;
// val.forEach((item) => {
// this.getDataNum.push(Number(item.ytdUvNew))
// this.getDataTime.push(moment(item.dt).format('YYYY-MM-DD'))
// })
this.$nextTick(() => {
//这里需要重新加载渲染
this.drawLine();
});
},
},
},
mounted() {
this.drawLine();
},
methods: {
drawLine() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("onlineRate"));
let value = "50%";
let title = "设备在线率";
var option = {
title: [
{
text: "{a|" + value + "}\n{c|" + title + "}",
x: "center",
top: "35%",
textStyle: {
rich: {
a: {
fontSize: 15,
color: "#ffffff",
},
c: {
fontSize: 10,
color: "#ffffff",
padding: [5, 0],
},
},
},
},
],
// backgroundColor: "#111",
polar: {
radius: ["70%", "95%"],
center: ["50%", "50%"],
},
angleAxis: {
max: 100,
show: false,
},
radiusAxis: {
type: "category",
show: true,
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
series: [
{
name: "",
type: "bar",
roundCap: true,
barWidth: 90,
showBackground: true,
backgroundStyle: {
color: "rgba(66, 66, 66, .3)",
},
data: [50],
coordinateSystem: "polar",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: "#717171",
},
{
offset: 1,
color: "#717171",
},
]),
},
},
},
// {
// name: '',
// type: 'pie',
// startAngle: 80,
// radius: ['6%'],
// hoverAnimation: false,
// center: ['50%', '50%'],
// itemStyle: {
// color: 'rgba(66, 66, 66, .1)',
// borderWidth: 1,
// borderColor: '#5269EE',
// },
// data: [100],
// },
{
name: "",
type: "pie",
startAngle: 80,
radius: ["100%"],
hoverAnimation: false,
center: ["50%", "50%"],
itemStyle: {
color: "rgba(66, 66, 66, .1)",
borderWidth: 1,
borderColor: "#5269EE",
},
data: [100],
},
],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
},
};
</script>
<style lang="scss" scoped>
.app-container {
padding: 0px !important;
min-height: calc(0vh - 0px) !important;
}
</style>

162
src/views/mes/dv/largeScreen/components/roboticRate.vue Normal file
View File

@ -0,0 +1,162 @@
<template>
<div class="app-container">
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="roboticRate" style="width: 100%; height: 150px"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
components: { echarts, Treeselect },
props: ["message"], // 声明一个自定义的属性
data() {
return {
echartData: [],
};
},
watch: {
message: {
immediate: true,
handler(val) {
// console.log(val,'差点撒旦阿萨=============');
this.echartData = val;
// val.forEach((item) => {
// this.getDataNum.push(Number(item.ytdUvNew))
// this.getDataTime.push(moment(item.dt).format('YYYY-MM-DD'))
// })
this.$nextTick(() => {
//这里需要重新加载渲染
this.drawLine();
});
},
},
},
mounted() {
this.drawLine();
},
methods: {
drawLine() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("roboticRate"));
let value = "30%";
let title = "设备在线率";
var option = {
title: [
{
text: "{a|" + value + "}\n{c|" + title + "}",
x: "center",
top: "35%",
textStyle: {
rich: {
a: {
fontSize: 15,
color: "#ffffff",
},
c: {
fontSize: 10,
color: "#ffffff",
padding: [5, 0],
},
},
},
},
],
// backgroundColor: "#111",
polar: {
radius: ["70%", "95%"],
center: ["50%", "50%"],
},
angleAxis: {
max: 100,
show: false,
},
radiusAxis: {
type: "category",
show: true,
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
series: [
{
name: "",
type: "bar",
roundCap: true,
barWidth: 90,
showBackground: true,
backgroundStyle: {
color: "rgba(66, 66, 66, .3)",
},
data: [30],
coordinateSystem: "polar",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: "#717171",
},
{
offset: 1,
color: "#717171",
},
]),
},
},
},
// {
// name: '',
// type: 'pie',
// startAngle: 80,
// radius: ['6%'],
// hoverAnimation: false,
// center: ['50%', '50%'],
// itemStyle: {
// color: 'rgba(66, 66, 66, .1)',
// borderWidth: 1,
// borderColor: '#5269EE',
// },
// data: [100],
// },
{
name: "",
type: "pie",
startAngle: 80,
radius: ["100%"],
hoverAnimation: false,
center: ["50%", "50%"],
itemStyle: {
color: "rgba(66, 66, 66, .1)",
borderWidth: 1,
borderColor: "#5269EE",
},
data: [100],
},
],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
},
};
</script>
<style lang="scss" scoped>
.app-container {
padding: 0px !important;
min-height: calc(0vh - 0px) !important;
}
</style>

644
src/views/mes/dv/largeScreen/index.vue
View File

@ -1,3 +1,643 @@
<template>
<h1>123</h1>
</template>
<div class="shopping-classify">
<div class="right-menu" id="container">
<!-- 头 -->
<div style="height: 10%">
<el-row type="flex" justify="space-between" style="height: 100%">
<el-col :span="10">
<div
class="grid-content bg-purple"
style="display: flex; flex-direction: row-reverse"
>
<!-- <svg-icon
:icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
style="
width: 20px;
height: 20px;
color: #f4deb0;
margin: 0% -70% 1% 0%;
"
@click="buttoncli"
/> -->
<img
@click="buttoncli"
style="height: 40px; margin: 5% 4.3% 0% 0%"
src="../../../../assets/images/return.png"
/></div
></el-col>
<el-col
:span="5"
style="
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
"
><div style="color: #fff; font-size: 30px; font-weight: 700">
{{ this.title }}
</div>
<div
style="color: rgb(9 207 255); font-size: 21px; margin-bottom: 4%"
>
2024.01.11 09:18:18
</div>
</el-col>
<el-col :span="10"
><div class="grid-content bg-purple" style="display: flex">
<img
style="height: 40px; margin: 5% 0% 0% 4%"
src="../../../../assets/images/biaotixiugai.png"
@click="handleChange"
/>
</div>
</el-col>
</el-row>
</div>
<!-- 第一部分 -->
<div style="height: 10%">
<el-row type="flex" class="row-bg-1" justify="space-between">
<el-col :span="8"
><div class="grid-content bg-purple">
<el-row
:gutter="8"
style="display: flex; justify-content: center"
>
<el-col :span="3"
><div class="grid-content bg-purple" style="width: 70px">
<online :message="this.barquantity" /></div
></el-col>
<el-col :span="4"
><div class="grid-content bg-purple" style="margin-top: 10%">
<div style="font-size: 25px">12</div>
<div>当前在线</div>
</div></el-col
>
</el-row>
</div></el-col
>
<el-col :span="8"
><div class="grid-content bg-purple">
<el-row
:gutter="8"
style="display: flex; justify-content: center"
>
<el-col :span="3"
><div class="grid-content bg-purple" style="width: 70px">
<offline :message="this.offlineData" /></div
></el-col>
<el-col :span="4"
><div class="grid-content bg-purple" style="margin-top: 10%">
<div style="font-size: 25px">12</div>
<div>当前离线</div>
</div></el-col
>
</el-row>
</div></el-col
>
<el-col :span="8"
><div class="grid-content bg-purple">
<el-row
:gutter="8"
style="display: flex; justify-content: center"
>
<el-col :span="3"
><div class="grid-content bg-purple" style="width: 70px">
<fault :message="this.faultData" /></div
></el-col>
<el-col :span="4"
><div class="grid-content bg-purple" style="margin-top: 10%">
<div style="font-size: 25px">12</div>
<div>当前故障</div>
</div></el-col
>
</el-row>
</div></el-col
>
</el-row>
</div>
<!-- 第二部分 -->
<div style="height: 80%">
<el-row type="flex" class="row-bg-3" justify="space-between">
<el-col :span="8"
><div style="display: flex; flex-direction: column; height: 100%">
<div style="height: 10%">
<el-radio-group
size="mini"
v-model="radio1"
style="
display: flex;
justify-content: flex-end;
margin: 2% 5% 0% 0%;
"
>
<el-radio-button :label="1">当前</el-radio-button>
<el-radio-button :label="2">本月</el-radio-button>
</el-radio-group>
</div>
<div style="height: 20%">
<div style="height: 100%">
<el-row :gutter="20">
<el-col :span="6"
><div style="margin-left: 28%">
<onlineRate :message="this.onlineRateData" /></div
></el-col>
<el-col :span="6"
><div style="margin: 45% 0% 0% 17%">2</div></el-col
>
<el-col :span="6"
><div style="margin: 45% 27% 0% 0%; color: #2cc195">
3
</div></el-col
>
<el-col :span="6"
><div style="margin: 45% 55% 0% 0%; color: #ec1821">
4
</div></el-col
>
</el-row>
</div>
</div>
<div style="height: 25%">
<div style="height: 100%">
<el-row :gutter="24">
<el-col :span="8"
><div style="margin: 40% 0% 0% 3%">2</div></el-col
>
<el-col :span="8"
><div style="margin: 40% 7% 0% 0%; color: #f5c959">
3
</div></el-col
>
<el-col :span="8"
><div style="margin: 40% 18% 0% 0%">4</div></el-col
>
</el-row>
</div>
</div>
<div style="height: 45%">
<div style="height: 100%">
<el-row :gutter="20">
<el-col :span="6"
><div style="margin: 25% 0% 0% 33%">1</div></el-col
>
<el-col :span="6"
><div style="margin: 25% 0% 0% 5%; color: #f5c959">
2
</div></el-col
>
<el-col :span="6"
><div style="margin: 25% 27% 0% 0%; color: #ec1821">
3
</div></el-col
>
<el-col :span="6"
><div style="margin: 25% 60% 0% 0%; color: #2cc195">
4
</div></el-col
>
</el-row>
</div>
</div>
</div>
</el-col>
<el-col :span="8">
<div style="display: flex; flex-direction: column; height: 100%">
<div style="height: 10%">
<el-radio-group
size="mini"
v-model="radio1"
style="
display: flex;
justify-content: flex-end;
margin: 2% 5% 0% 0%;
"
>
<el-radio-button :label="1">当前</el-radio-button>
<el-radio-button :label="2">本月</el-radio-button>
</el-radio-group>
</div>
<div style="height: 20%">
<div style="height: 100%">
<el-row :gutter="20">
<el-col :span="6"
><div style="margin-left: 28%">
<roboticRate :message="this.roboticRateData" /></div
></el-col>
<el-col :span="6"
><div style="margin: 45% 0% 0% 30%">2</div></el-col
>
<el-col :span="6"
><div style="margin: 45% 15% 0% 0%; color: #2cc195">
3
</div></el-col
>
<el-col :span="6"
><div style="margin: 45% 40% 0% 0%; color: #ec1821">
4
</div></el-col
>
</el-row>
</div>
</div>
<div style="height: 25%">
<div style="height: 100%">
<el-row :gutter="24">
<el-col :span="8"
><div style="margin: 40% 0% 0% 12%">2</div></el-col
>
<el-col :span="8"
><div style="margin: 40% 0% 0% 2%; color: #f5c959">
3
</div></el-col
>
<el-col :span="8"
><div style="margin: 40% 10% 0% 0%">4</div></el-col
>
</el-row>
</div>
</div>
<div style="height: 45%">
<div style="height: 100%">
<el-row :gutter="20">
<el-col :span="6"
><div style="margin: 25% 0% 0% 46%">1</div></el-col
>
<el-col :span="6"
><div style="margin: 25% 0% 0% 17%; color: #f5c959">
2
</div></el-col
>
<el-col :span="6"
><div style="margin: 25% 17% 0% 0%; color: #ec1821">
3
</div></el-col
>
<el-col :span="6"
><div style="margin: 25% 50% 0% 0%; color: #2cc195">
4
</div></el-col
>
</el-row>
</div>
</div>
</div>
</el-col>
<el-col :span="8">
<div style="display: flex; flex-direction: column; height: 100%">
<div style="height: 10%">
<el-radio-group
size="mini"
v-model="radio1"
style="
display: flex;
justify-content: flex-end;
margin: 2% 5% 0% 0%;
"
>
<el-radio-button :label="1">当前</el-radio-button>
<el-radio-button :label="2">本月</el-radio-button>
</el-radio-group>
</div>
<div style="height: 20%">
<div style="height: 100%">
<el-row :gutter="20">
<el-col :span="6"
><div style="margin-left: 28%">
<AGVrate :message="this.AGVrateData" /></div
></el-col>
<el-col :span="6"
><div style="margin: 45% 0% 0% 32%">2</div></el-col
>
<el-col :span="6"
><div style="margin: 45% 0% 0% 0%; color: #2cc195">
3
</div></el-col
>
<el-col :span="6"
><div style="margin: 45% 40% 0% 0%; color: #ec1821">
4
</div></el-col
>
</el-row>
</div>
</div>
<div style="height: 25%">
<div style="height: 100%">
<el-row :gutter="24">
<el-col :span="8"
><div style="margin: 40% 0% 0% 17%">2</div></el-col
>
<el-col :span="8"
><div style="margin: 40% 0% 0% 6%; color: #f5c959">
3
</div></el-col
>
<el-col :span="8"
><div style="margin: 40% 4% 0% 0%">4</div></el-col
>
</el-row>
</div>
</div>
<div style="height: 45%">
<div style="height: 100%"></div>
</div></div
></el-col>
</el-row>
</div>
<!--标题修改-->
<el-dialog :visible.sync="titleVisible" append-to-body width="30%">
<el-form ref="installForm" :model="installForm" label-width="80px">
<el-form-item label="标题修改">
<el-input
maxlength="11"
show-word-limit
v-model="installForm.name"
></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="titleVisible = false">取消</el-button>
<el-button type="primary" @click="sumitInstall">确认</el-button>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
// import * as statisServer from "@/api/statistics";
// import { getInfo } from "@/api/user";
import screenfull from "screenfull";
import online from "./components/online.vue";
import offline from "./components/offline.vue";
import fault from "./components/fault.vue";
import onlineRate from "./components/onlineRate.vue";
import roboticRate from "./components/roboticRate.vue";
import AGVrate from "./components/AGVrate.vue";
export default {
components: { online, offline, fault, onlineRate, roboticRate, AGVrate },
data() {
return {
screenfull: false,
title: "设备监控分析",
titleVisible: false,
installForm: { name: "" },
taskForm: {
total_num: 0, // 采样任务百分比 （完成/总数量）
completed_num: 0,
incompleted_num: 0,
},
lineChartData: {},
totalarr: 0, // 求和
month: "", //获取当月合同
Contracts: "",
barquantity: [],
offlineData: [],
faultData: [],
onlineRateData: [],
roboticRateData: [],
AGVrateData: [],
signarr: [],
detection: [],
reports: "",
issue: "1",
accumulation: true,
thisYear: false,
isFullscreen: false,
radio1: 1,
};
},
created() {
// 监听事件
window.addEventListener("resize", this.onresize);
this.getList();
this.findTasks();
this.findContactList();
this.findSampleClass();
this.findvalid();
this.findSortContNumList();
this.NumberReports();
this.factorNumber();
},
// beforeDestroy() {
// // 取消监听事件
// window.removeEventListener("resize", this.onresize);
// },
methods: {
// 监听是否全屏状态
onresize(event) {
// 利用屏幕分辨率和window对象的内高度来判断兼容IE
let winFlag = window.innerHeight === window.screen.height;
// 利用window全屏标识来判断 -- IE无效
let isFull = window.fullScreen || document.webkitIsFullScreen;
if (isFull === undefined) {
this.isFullscreen = winFlag;
} else {
this.isFullscreen = winFlag || isFull;
}
// console.log(winFlag); // true全屏 false不是全屏
},
buttoncli() {
const element = document.getElementById("container");
if (!screenfull) {
this.$message({
message: "浏览器不能全屏，安装其他版本试试",
type: "warning",
});
return false;
}
screenfull.toggle(element);
this.findSampleClass();
this.findSortContNumList();
this.factorNumber();
},
buttoncliArr() {
const element = document.getElementById("container");
if (!screenfull) {
this.$message({
message: "浏览器不能全屏，安装其他版本试试",
type: "warning",
});
return false;
}
screenfull.toggle(element);
},
getList() {
// getInfo().then(res => {
// this.title = res.result.screenName;
// });
},
// 任务
findTasks() {
// statisServer.findCompleteTask({ type: 1 }).then(res => {
// if (res.code === 200) {
// const taskForm = res.result.find(i => i.name === "报告编制任务");
// this.taskForm.total_num = taskForm.totalCnt;
// this.taskForm.completed_num = Number(
// taskForm.totalCnt - taskForm.completeCnt
// ).toFixed(0);
// this.taskForm.incompleted_num = taskForm.completeCnt;
// }
// });
},
//合同总数
findContactList() {
// statisServer.findValidContractsForPass11Month().then(res => {
// if (res.code === 200) {
// this.lineChartData = res.result || [];
// // 求和
// this.lineChartData.contactNum.forEach(item => {
// this.totalarr += item;
// });
// //获取当月合同
// this.month = this.lineChartData.contactNum.pop();
// }
// });
},
//样品类别
findSampleClass() {
// statisServer.findStoredSampleClassificationCnt({ limit: 6 }).then(res => {
// if (res.code === 200) {
// var arr = [];
// var barData = res.result.xNameData;
// var barquantity = res.result.xValData;
// //
// barData.forEach((item, i) => {
// arr.push({
// name: item,
// value: barquantity[i]
// });
// });
// this.barquantity = arr;
// }
// });
},
findvalid() {
// statisServer.findValidContracts({ type: 0 }).then(res => {
// if (res.code === 200) {
// this.Contracts = res.result.cusSum;
// }
// });
},
//签合同排名
findSortContNumList() {
// statisServer.findSortContNum({ type: 1, limit: 5 }).then(res => {
// if (res.code === 200) {
// var arr = [];
// var barData = res.result.xNameData;
// var barquantity = res.result.xValData;
// //
// barData.forEach((item, i) => {
// arr.push({
// code: item,
// fundPost: barquantity[i]
// });
// });
// arr.sort((a, b) => {
// return b.fundPost - a.fundPost;
// }); //升序
// this.signarr = arr.slice(0, 10);
// }
// });
},
//签发报告数
NumberReports() {
// statisServer.getReport({ type: this.issue }).then(res => {
// if (res.code === 200) {
// this.reports = res.result;
// }
// });
},
//因子数
factorNumber() {
// statisServer.detectorFactor().then(res => {
// if (res.code === 200) {
// var arr = res.result;
// arr.sort((a, b) => {
// return b.value - a.value;
// }); //升序
// this.detection = arr.slice(0, 10);
// }
// });
},
handleChange() {
this.titleVisible = true;
},
//修改确认
sumitInstall() {
// statisServer.updateName(this.installForm).then(res => {
// if (res.code === 200) {
// this.$notify({
// title: "修改成功",
// message: res.message,
// type: "success"
// });
// this.titleVisible = false;
// this.getList();
// }
// });
},
accumulationClick() {
this.issue = 2;
this.accumulation = false;
this.thisYear = true;
this.NumberReports();
},
thisYearClick() {
this.issue = 1;
this.accumulation = true;
this.thisYear = false;
this.NumberReports();
},
},
};
</script>
<style lang="scss" scoped>
#container {
display: flex;
flex-direction: column;
width: 100%;
height: 100vh;
background: url("../../../../assets/images/zhubeijing.png") center center
no-repeat;
background-size: 100% 100%;
}
.row-bg-1 {
height: 70px;
color: #fff;
text-align: center;
}
.row-bg-3 {
height: 100%;
text-align: center;
color: #fff;
font-size: 20px;
font-weight: 700;
}
.row-bg-4 {
color: #8bdbe6;
font-size: 25px;
margin-top: 27%;
font-weight: 500;
}
.row-bg-5 {
height: 365px;
text-align: center;
color: #fff;
font-size: 20px;
font-weight: 700;
}
</style>