zhanghan11/zfipc_master
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

看板大屏样式

Browse Source
This commit is contained in:
zhangjunwen 2024-07-23 17:09:15 +08:00
parent 33236bd0dd
commit f5a585d23e
9 changed files with 353 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
zfipc-ui/src/assets/images/bigscreen/overall/custom.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
zfipc-ui/src/assets/images/bigscreen/overall/equip.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
zfipc-ui/src/assets/images/bigscreen/overall/line.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
zfipc-ui/src/assets/images/bigscreen/overall/offline.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 159 B

BIN
zfipc-ui/src/assets/images/bigscreen/overall/online.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 163 B

BIN
zfipc-ui/src/assets/images/bigscreen/overall/world.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

22
zfipc-ui/src/layout/components/TagsView/index.vue
View File

@ -1,5 +1,8 @@
<template>
<div id="tags-view-container" class="tags-view-container">
<div
id="tags-view-container"
class="tags-view-container"
>
<scroll-pane
ref="scrollPane"
class="tags-view-wrapper"
@ -33,16 +36,25 @@
<li @click="refreshSelectedTag(selectedTag)">
<i class="el-icon-refresh-right"></i> 刷新页面
</li>
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">
<li
v-if="!isAffix(selectedTag)"
@click="closeSelectedTag(selectedTag)"
>
<i class="el-icon-close"></i> 关闭当前
</li>
<li @click="closeOthersTags">
<i class="el-icon-circle-close"></i> 关闭其他
</li>
<li v-if="!isFirstView()" @click="closeLeftTags">
<li
v-if="!isFirstView()"
@click="closeLeftTags"
>
<i class="el-icon-back"></i> 关闭左侧
</li>
<li v-if="!isLastView()" @click="closeRightTags">
<li
v-if="!isLastView()"
@click="closeRightTags"
>
<i class="el-icon-right"></i> 关闭右侧
</li>
<li @click="closeAllTags(selectedTag)">
@ -276,7 +288,7 @@ export default {
width: 100%;
// background: #fff;
// border-bottom: 1px solid #d8dce5;
// box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
// box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
.tags-view-wrapper {
.tags-view-item {
display: inline-block;

2
zfipc-ui/src/views/bigscreen/company/index.vue
View File

@ -1701,7 +1701,7 @@ export default {
},
};
</script>
<style lang="scss" scoped>
<style lang="scss" scoped>
.company-line-wrap {
display: grid;
grid-template-columns: 24% 50% 24%;

451
zfipc-ui/src/views/bigscreen/overall/index.vue
View File

@ -100,6 +100,24 @@
</div>
<div class="company-column">
<div class="main-bg">
<div class="middle-header">
<div class="worldwide-overall">
<div class="head-value">28家</div>
<div class="head-info">产品全球化</div>
</div>
<div class="custom-overall">
<div class="head-value">28家</div>
<div class="head-info">客户规模</div>
</div>
<div class="line-overall">
<div class="head-value">129条</div>
<div class="head-info">产线规模</div>
</div>
<div class="equip-overall">
<div class="head-value">1234台</div>
<div class="head-info">运行轴承</div>
</div>
</div>
<div
id="mapChart"
:style="{ height: height }"
@ -129,16 +147,7 @@
</div>
<div class="middle-wrap">
<div class="equ-item">
<div class="item-title">各厂区维修记录变化</div>
<div class="item-content">
<div
ref="chart3"
:style="{ height: height }"
></div>
</div>
</div>
<div class="equ-item">
<div class="item-title">厂区最新报警记录</div>
<div class="item-title">客户告警信息</div>
<div class="item-content alarm-lists">
<el-table
:data="alarmList"
@ -197,7 +206,7 @@
:key="index"
class="industry-des"
>
<div :class="changeMark(item.status)">
<div :class="changeIndustryMark(index)">
<span>{{ item.name }}</span>
</div>
<div :style="changeStyle(item.status)">{{ item.value }} | {{ item.rate }}</div>
@ -206,7 +215,7 @@
</div>
</div>
<div class="equ-item">
<div class="item-title">设备产线总览</div>
<div class="item-title">各公司维修统计</div>
<div class="item-content">
<div
ref="chart5"
@ -215,12 +224,60 @@
</div>
</div>
<div class="equ-item">
<div class="item-title">最近预警变化</div>
<div class="item-content">
<div
ref="chart6"
:style="{ height: height }"
></div>
<div class="item-title">设备及产线总览</div>
<div class="line-equ-overall">
<div class="line-title">
<div>产线</div>
<div>总览</div>
</div>
<div>
<div
id="echarts1"
:style="{ height: height }"
></div>
</div>
<div class="lines-total">
<div class="line-status">
<div style="display:flex">
<div class="online-label" />
<div style="font-size:18px;font-weight:bolder">{{ "正常" }}</div>
</div>
<div style="font-size:18px;margin-right: 20%;">80</div>
</div>
<div class="line-status">
<div style="display:flex">
<div class="offline-label" />
<div style="font-size:18px;font-weight:bolder">{{ "离线" }}</div>
</div>
<div style="font-size:18px;margin-right: 20%;">80</div>
</div>
</div>
<div class="line-title">
<div>设备</div>
<div>总数</div>
</div>
<div>
<div
id="echarts2"
:style="{ height: height }"
></div>
</div>
<div class="lines-total">
<div class="line-status">
<div style="display:flex">
<div class="online-label" />
<div style="font-size:18px;font-weight:bolder">{{ "正常" }}</div>
</div>
<div style="font-size:18px;margin-right: 20%;">70</div>
</div>
<div class="line-status">
<div style="display:flex">
<div class="offline-label" />
<div style="font-size:18px;font-weight:bolder">{{ "离线" }}</div>
</div>
<div style="font-size:18px;margin-right: 20%;">10</div>
</div>
</div>
</div>
</div>
</div>
@ -246,15 +303,26 @@ export default {
],
echartList: [
{
name: "产线1",
value: "10",
name: "正常",
value: "80",
},
{
name: "产线2",
value: "12",
name: "异常",
value: "20",
},
],
totalEquNum: 10,
echartList2: [
{
name: "正常",
value: "70",
},
{
name: "异常",
value: "30",
},
],
totalEquNum: 100,
totalLineNum: 100,
eqpLineNum: [
{
name: "运行中",
@ -337,18 +405,20 @@ export default {
alarmList: [],
myChart: "",
series: [],
showPanel: true,
showPanel: false,
firstMark: false,
};
},
computed: {},
mounted() {
// this.initChart();
this.initLineChart();
this.initEquNumChart();
this.initChart1();
this.initChart2();
this.initChart3();
// this.initChart2();
// this.initChart3();
// this.initChart4();
this.initChart5();
this.initChart6();
// this.initChart6();
// this.initMapChart();
// const data = JSON.parse(chinaMap);
// const data = chinaMap.features; //过滤得到坐标信息
@ -360,15 +430,28 @@ export default {
// );
this.mapRender();
},
created() {
document.addEventListener("click", (event) => {
console.log("event:", event);
var popup = document.getElementById("popPanel");
console.log("pop:", popup);
console.log("aaaa:", popup.contains(event.target));
if (this.firstMark) {
this.showPanel = true;
this.firstMark = false;
} else {
var isOut = popup.contains(event.target);
this.showPanel = isOut && this.showPanel;
}
});
},
methods: {
mapRender() {
const _this = this;
// let mapDom = document.querySelector(".map-wrapper");
// this.myChart = this.$echarts.init(mapDom);
echarts.registerMap("china", { geoJSON: chinaMap });
this.myChart = echarts.init(document.getElementById("mapChart"));
let data = [
{ name: "上海", value: "90" },
{ name: "上海", value: 100 },
{ name: "武汉", value: 90 },
];
let geoCoordMap = {
@ -385,6 +468,7 @@ export default {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
num: data[i].value,
});
}
}
@ -393,14 +477,14 @@ export default {
_this.series.push([
{
name: "项目分布",
type: "effectScatter",
type: "scatter",
roam: true, // 可缩放
// geoIndex: 'geoMap',
z: 2,
coordinateSystem: "geo",
symbolSize: 10, //点的大小
symbol: "emptyCircle",
color: "orange",
symbolSize: 50, //点的大小
symbol: "pin",
color: "red",
showEffectOn: "render",
effectType: "ripple",
rippleEffect: {
@ -410,80 +494,24 @@ export default {
},
label: {
normal: {
formatter: "{b}",
position: "right",
formatter: (params) => {
return params.data.num;
},
show: true,
color: "#fff",
borderRadius: 24,
padding: 4,
width: 16,
lineHeight: 16,
align: "center",
},
},
itemStyle: {
borderType: "solid",
borderColor: "#fff",
},
data: convertData(data),
},
{
// type: "scatter",
// z: 5,
// roam: false, // 可缩放
// coordinateSystem: "geo",
// symbolSize: [20, 30], //点的大小
// symbolOffset: [0, -15],
// color: "#e1ebe3",
// showEffectOn: "render",
// effectType: "ripple",
// itemStyle: {
// color: "red",
// },
// label: {
// normal: {
// show: false, //是否显示省份
// textStyle: {
// color: "#00a0c9",
// size: "10",
// },
// },
// },
// markLine: {
// smooth: true,
// symbol: ["pin", "circle"],
// symbolSize: 1,
// itemStyle: {
// normal: {
// color: "#ff0",
// borderWidth: 1,
// borderColor: "rgba(0,0,0,0)",
// },
// },
// data: [],
// },
// data: convertData(data),
},
{
// type: "map",
// map: "china",
// geoIndex: 0,
// aspectScale: 0.75, //长宽比
// showLegendSymbol: false, // 存在legend时显示
// label: {
// normal: {
// show: false,
// },
// emphasis: {
// show: false,
// textStyle: {
// color: "#fff",
// },
// },
// },
// roam: true,
// itemStyle: {
// normal: {
// areaColor: "#031525",
// borderColor: "#FFFFFF",
// },
// emphasis: {
// areaColor: "#2B91B7",
// },
// },
// animation: false,
},
]);
// 指定相关的配置项和数据
let mapBoxOption = {
@ -559,9 +587,10 @@ export default {
this.myChart.setOption(mapBoxOption);
// this.myChart.off("click");
this.myChart.on("click", function (e) {
console.log("999:", e);
this.myChart.on("click", (e) => {
console.log("charts:", e);
this.showPanel = true;
this.firstMark = true;
let dx = e.event.offsetX;
let dy = e.event.offsetY;
var panel = document.getElementById("popPanel");
@ -638,26 +667,31 @@ export default {
changeMark(order) {
return "main-status-mark" + order;
},
initChart() {
const machart = echarts.init(document.getElementById("echarts1"));
changeIndustryMark(index) {
return "industry-mark" + (index + 1);
},
initEquNumChart() {
const machart = echarts.init(document.getElementById("echarts2"));
//init初始化接口，返回ECharts实例，其中dom为图表所在节点
var option = {
// title 标题
title: {
show: true, //显示策略，默认值true,可选为：true（显示） | false（隐藏）
text: this.totalEquNum + "台", //主标题文本，'\n'指定换行
subtext: "总数", //副标题文本，'\n'指定换行
text: this.totalEquNum, //主标题文本，'\n'指定换行
subtext: "设备总数", //副标题文本，'\n'指定换行
left: "center",
top: "32%",
textStyle: {
fontSize: 24,
fontFamily: "BIAOTI",
color: "#fff",
align: "center",
},
subtextStyle: {
fontFamily: "微软雅黑",
fontSize: 14,
fontSize: 18,
color: "#2BCAFF",
align: "center",
},
},
//tooltip 提示框，鼠标悬浮交互时的信息提示
@ -666,8 +700,74 @@ export default {
},
// 颜色
color: [
"#004BFF",
"#1FBBFF",
"#1F8ED5",
"#FF473E",
"#00A8D6",
"#7340FE",
"#F49D00",
"#EED742 ",
"#E8494D",
],
// 系列列表,每个系列通过 type 决定自己的图表类型
series: [
{
name: "",
type: "pie",
radius: [50, 60],
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
},
labelLine: {
show: false,
},
data: this.echartList2,
},
],
};
machart.setOption(option); // 为echarts对象加载数据
setTimeout(() => {
window.addEventListener("resize", resizeFn);
}, 100);
// 窗口大小改变时 自适应
const resizeFn = () => {
return machart.resize();
};
},
initLineChart() {
const machart = echarts.init(document.getElementById("echarts1"));
//init初始化接口，返回ECharts实例，其中dom为图表所在节点
var option = {
// title 标题
title: {
show: true, //显示策略，默认值true,可选为：true（显示） | false（隐藏）
text: this.totalLineNum, //主标题文本，'\n'指定换行
subtext: "产线总数", //副标题文本，'\n'指定换行
left: "center",
top: "32%",
textStyle: {
fontSize: 24,
fontFamily: "BIAOTI",
color: "#fff",
align: "center",
},
subtextStyle: {
fontFamily: "微软雅黑",
fontSize: 18,
color: "#2BCAFF",
align: "center",
},
},
//tooltip 提示框，鼠标悬浮交互时的信息提示
tooltip: {
trigger: "item",
},
// 颜色
color: [
"#1F8ED5",
"#FF473E",
"#00A8D6",
"#7340FE",
"#F49D00",
@ -1804,7 +1904,7 @@ export default {
},
};
</script>
<style lang="scss" scoped>
<style lang="scss" scoped>
.company-line-wrap {
display: grid;
grid-template-columns: 24% 50% 24%;
@ -1833,11 +1933,10 @@ export default {
padding: 0;
border: none;
display: grid;
grid-template-columns: repeat(2, 49%);
grid-gap: 2%;
> div {
padding: 6px;
border: 1px solid;
border: 1px;
}
}
}
@ -2049,6 +2148,25 @@ export default {
no-repeat left center;
text-align: center;
}
.industry-mark1 {
background: url(../../../assets/images/bigscreen/overall/industry_mark1.png)
no-repeat left center;
text-align: center;
}
.industry-mark2 {
background: url(../../../assets/images/bigscreen/overall/industry_mark2.png)
no-repeat left center;
text-align: center;
}
.industry-mark3 {
background: url(../../../assets/images/bigscreen/overall/industry_mark3.png)
no-repeat left center;
text-align: center;
}
.mainPanel {
background: url(../../../assets/images/bigscreen/company/pop_back.png)
no-repeat center center;
@ -2069,7 +2187,7 @@ export default {
}
.contentPanel {
display: grid;
grid-template-rows: 1fr 1rf;
grid-template-rows: 1fr 1fr;
height: 35px;
line-height: 35px;
margin-bottom: 4px;
@ -2095,10 +2213,111 @@ export default {
height: 15px;
width: 30px;
}
.online-label {
background: url(../../../assets/images/bigscreen/overall/online.png) no-repeat
center center;
text-align: center;
height: 18px;
width: 30px;
}
.offline-label {
background: url(../../../assets/images/bigscreen/overall/offline.png)
no-repeat center center;
text-align: center;
height: 18px;
width: 30px;
}
.table-label {
display: flex;
align-items: center;
justify-content: center;
}
.line-status {
display: flex;
align-items: center;
justify-content: space-between;
}
.line-equ-overall {
height: 100%;
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: 1fr 1fr 2fr;
gap: 10px;
}
.line-title {
height: 100%;
width: 70%;
display: grid;
font-size: 24px;
font-weight: lighter;
text-align: center;
align-items: center;
align-content: center;
background: rgba(202, 238, 254, 0.1);
}
.lines-total {
background: linear-gradient(to right, rgba(202, 238, 254, 0.1), #031623);
display: grid;
grid-template-rows: 1fr 1fr;
}
.middle-header {
height: 15%;
display: flex;
}
.worldwide-overall {
display: flex;
justify-content: center;
text-align: center;
align-items: center;
flex-direction: column;
background: url(../../../assets/images/bigscreen/overall/world.png) no-repeat
center center;
height: 100%;
flex: 1;
}
.custom-overall {
display: flex;
justify-content: center;
text-align: center;
align-items: center;
flex-direction: column;
background: url(../../../assets/images/bigscreen/overall/custom.png) no-repeat
center center;
height: 100%;
flex: 1;
}
.line-overall {
display: flex;
justify-content: center;
text-align: center;
align-items: center;
flex-direction: column;
background: url(../../../assets/images/bigscreen/overall/line.png) no-repeat
center center;
height: 100%;
flex: 1;
}
.equip-overall {
display: flex;
justify-content: center;
text-align: center;
align-items: center;
flex-direction: column;
background: url(../../../assets/images/bigscreen/overall/equip.png) no-repeat
center center;
height: 100%;
flex: 1;
}
.head-value {
font-family: BIAOTI;
font-size: 20px;
padding-left: 10%;
}
.head-info {
font-size: 18px;
font-weight: lighter;
padding-left: 10%;
}
</style>