Skip to content

G
gassafety-progress
Commit de0e9e68 authored by 纪泽龙's avatar 纪泽龙
Browse files
Options

配置大屏左侧

parent 808643ca
Show whitespace changes
Inline Side-by-side
Showing with 793 additions and 9 deletions
gassafetyprogress-web/src/components/bigWindow/leftBarZ.vue 0 → 100644
View file @ de0e9e68
<template>
<div class="left-wrapper">
<!-- 基本信息 -->
<div>
<div class="item1">
<span class="dot">
<span class="dot-inner"></span>
</span>
<span style="letter-spacing: 3px; color: #cddbe4">基本信息</span>
<div
class="fong-div"
style="
width: 8px;
height: 12px;
background-color: #2c888899;
float: right;
margin-top: 10px;
transform: skewX(-25deg);
"
></div>
<div
class="fong-div"
style="
width: 8px;
height: 12px;
background-color: #24b1b1b3;
float: right;
margin-top: 10px;
margin-right: 10px;
transform: skewX(-25deg);
"
></div>
<div
class="fong-div"
style="
width: 8px;
height: 12px;
background-color: #11e9e9b3;
float: right;
margin-top: 10px;
margin-right: 10px;
transform: skewX(-25deg);
"
></div>
</div>
</div>
<div
class="left-top"
style="
margin-top: 15px;
width: 100%;
margin-left: 10px;
display: flex;
justify-content: space-around;
"
>
<div style="width: 40%; text-align: center; color: #339cc9">
<div class="div-p" @click="$router.push('/regulation/supervise')">
从业人员数
</div>
<div
style="
font-family: 'arialbd';
font-size: 25px;
margin-left: 20px;
background-image: -webkit-linear-gradient(bottom, #f0c41b, #e4dbb7);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
"
>
{{ allNum.peopleNum }}
</div>
</div>
<div style="width: 40%; text-align: center; color: #339cc9">
<div class="div-p" @click="$router.push('/regulation/pipe')">
管道长度(m)
</div>
<div
style="
font-family: 'arialbd';
margin-left: 20px;
font-size: 25px;
background-image: -webkit-linear-gradient(bottom, #f86742, #f0c41b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
"
>
{{ allNum.allPipeLength }}
</div>
</div>
</div>
<!-- 安全监管 -->
<div>
<div class="item1" style="margin-top: 10px">
<span class="dot">
<span class="dot-inner"></span>
</span>
<span style="letter-spacing: 3px; color: #cddbe4">安全监管</span>
<div
class="fong-div"
style="
width: 8px;
height: 12px;
background-color: #2c888899;
float: right;
margin-top: 10px;
transform: skewX(-25deg);
"
></div>
<div
class="fong-div"
style="
width: 8px;
height: 12px;
background-color: #24b1b1b3;
float: right;
margin-top: 10px;
margin-right: 10px;
transform: skewX(-25deg);
"
></div>
<div
class="fong-div"
style="
width: 8px;
height: 12px;
background-color: #11e9e9b3;
float: right;
margin-top: 10px;
margin-right: 10px;
transform: skewX(-25deg);
"
></div>
</div>
</div>
<div id="main1" style="width: 100%; height: 200px"></div>
<!-- 任务完成率 -->
<div>
<div class="item1" style="margin-top: 25px">
<span class="dot">
<span class="dot-inner"></span>
</span>
<span
style="letter-spacing: 3px; color: #cddbe4; cursor: pointer"
@click="$router.push('/operationMonitor/workOrder')"
>任务完成率</span
>
<div
class="fong-div"
style="
width: 8px;
height: 12px;
background-color: #2c888899;
float: right;
margin-top: 10px;
transform: skewX(-25deg);
"
></div>
<div
class="fong-div"
style="
width: 8px;
height: 12px;
background-color: #24b1b1b3;
float: right;
margin-top: 10px;
margin-right: 10px;
transform: skewX(-25deg);
"
></div>
<div
class="fong-div"
style="
width: 8px;
height: 12px;
background-color: #11e9e9b3;
float: right;
margin-top: 10px;
margin-right: 10px;
transform: skewX(-25deg);
"
></div>
</div>
</div>
<div class="pieone">
<div
id="myChartpieone"
:style="{ width: '150px', height: '250px' }"
></div>
<div class="titleTex">
<div>
<span :style="{ color: '#00ffff' }">
● 已完成:{{ allNum.typeOne }}</span
>
<span :style="{ color: '#0099ff' }">
● 未完成:{{ allNum.typeTwo }}</span
>
</div>
</div>
</div>
<div class="pietwo">
<div
id="myChartpietwo"
:style="{ width: '150px', height: '250px' }"
></div>
<div class="titleTex">
<div>
<span :style="{ color: '#00ffff' }"> ● 已完成:0</span>
<span :style="{ color: '#0099ff' }"> ● 未完成:0</span>
</div>
</div>
</div>
<!-- <div class="echarts-two" style="margin-top: 30px;width: 430px;margin-left: 10px;"> -->
<!-- <div class="div-el">
<div class="el-left">入户安检</div>
<el-progress class="el-progress_text" :text-inside="true" :stroke-width="18" :percentage="allNum.typeOne*100"></el-progress>
</div>
<div class="div-el">
<div class="el-left">巡查</div>
<el-progress class="el-progress_text" :text-inside="true" :stroke-width="18" :percentage="allNum.typeTwo*100" status="success"></el-progress>
</div>
<div class="div-el">
<div class="el-left">报警巡查</div>
<el-progress class="el-progress_text" :text-inside="true" :stroke-width="18" :percentage="allNum.typeThree*100" status="warning"></el-progress>
</div>
<div class="div-el">
<div class="el-left">其他</div>
<el-progress class="el-progress_text" :text-inside="true" :stroke-width="18" :percentage="allNum.typeFor*100" status="exception"></el-progress>
</div> -->
<!-- </div> -->
</div>
</template>
<script>
import { selectWorkOrderNum } from "@/api/operationMonitor/order";
// 引入基本模板
let echarts = require("echarts/lib/echarts");
// 引入柱状图组件
require("echarts/lib/chart/bar");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
export default {
data() {
return {
allNum: {},
zeroNum: {
allPipeLength: 0,
peopleNum: 0,
typeFor: 0,
typeOne: 0,
typeThree: 0,
typeTwo: 0,
},
enterpriseIds: {
enterpriseId: "",
},
dataAll: {
congyeNum: 1544,
guandaoNum: 3658495,
shigu1: [
820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290,
],
shigu2: [452, 786, 456, 732, 458, 165, 198, 489, 158, 358, 345, 675],
shigu3: [932, 901, 198, 489, 158, 358, 345, 675, 901, 934, 1290, 888],
renwu: [50, 92],
renwuzong: 142,
},
dataone: {
congyeNum: 521,
guandaoNum: 1254848,
shigu1: [223, 44, 332, 321, 458, 456, 653, 122, 345, 133, 421, 123],
shigu2: [123, 234, 456, 567, 235, 12, 89, 158, 158, 145, 175, 224],
shigu3: [432, 301, 108, 189, 18, 158, 145, 175, 401, 334, 590, 388],
renwu: [4, 27],
renwuzong: 31,
},
datatwo: {
congyeNum: 488,
guandaoNum: 1244495,
shigu1: [653, 122, 345, 133, 456, 653, 122, 345, 133, 421, 123, 500],
shigu2: [432, 301, 456, 567, 235, 12, 145, 175, 401, 334, 590, 388],
shigu3: [123, 234, 108, 189, 18, 158, 123, 234, 456, 567, 235, 12],
renwu: [8, 25],
renwuzong: 33,
},
datathree: {
congyeNum: 535,
guandaoNum: 1189492,
shigu1: [653, 122, 345, 133, 456, 653, 122, 345, 133, 421, 123, 500],
shigu2: [432, 301, 456, 567, 456, 653, 122, 175, 401, 334, 590, 388],
shigu3: [334, 590, 388, 133, 456, 123, 234, 653, 122, 345, 133],
renwu: [38, 40],
renwuzong: 78,
},
datanow: {
renwu: [0, 0],
},
};
},
mounted() {
this.datanow = this.dataAll;
this.drawLine(this.datanow);
//this.getNum(null)
},
methods: {
choice(val) {
// if(index==0){
// this.datanow = this.dataAll;
// this.drawLine(this.datanow);
// this.getNum(index);
// }else
this.getNum(val);
// if(index==1){
// this.datanow = this.dataone;
// this.drawLine(this.datanow);
// }else if(index==2){
// this.datanow = this.datatwo;
// this.drawLine(this.datanow);
// }else if(index==3){
// this.datanow = this.datathree;
// this.drawLine(this.datanow);
// }
},
getNum(val) {
if (val != null && val != "") {
this.enterpriseIds.enterpriseId = val.toString();
selectWorkOrderNum(this.enterpriseIds).then((response) => {
console.log(response);
this.allNum = response.data;
this.initdata();
});
} else {
this.allNum = this.zeroNum;
this.initdata();
}
},
initdata() {
// 基于准备好的dom，初始化echarts实例
//console.log(data.renwu[0]+"=-=-=-"+data.renwu[1])
let pieone = this.$echarts.init(document.getElementById("myChartpieone"));
let pietwo = this.$echarts.init(document.getElementById("myChartpietwo"));
// 绘制图表
pieone.setOption({
title: {
text:
"巡检任务数(个) : " + (this.allNum.typeOne + this.allNum.typeTwo),
left: "center",
top: 20,
textStyle: {
color: "#00ffff",
fontSize: "16",
},
},
grid: {
bottom: "7%",
containLabel: true,
},
tooltip: {
show: false,
trigger: "item",
},
series: [
{
name: "任务概况",
type: "pie",
radius: "55%",
center: ["50%", "58%"],
data: [
{
value: this.allNum.typeTwo,
name: "未完成",
itemStyle: { color: "#09f", fontSize: "10px" },
},
{
value: this.allNum.typeOne,
name: "已完成",
itemStyle: { color: "#00ffff", fontSize: "10px" },
},
],
labelLine: {
length: 25,
length2: 25,
},
label: {
color: "#fff",
fontSize: 14,
// formatter:"{b}\n\n",
// padding:[0,-55],
normal: {
show: true,
position: "outer",
// formatter: '{d}%, {c} \n\n',
//模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。
formatter: "{a_set|{b}}\n{b_set|{d}%}\n\n\n",
// formatter: "{a_set|{b}}\n{c_set|{d}%}\n{b|}\n\n",
borderWidth: 10,
borderRadius: 4,
padding: [0, -55],
rich: {
a_set: {
color: "#cddbe4",
lineHeight: 20,
align: "center",
padding: [55, -40, -15, -40],
},
b_set: {
color: "auto",
},
},
},
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
],
});
pietwo.setOption({
title: {
text: "隐患整治数(个) : 0",
left: "center",
top: 20,
textStyle: {
color: "#00ffff",
fontSize: "16",
},
},
grid: {
bottom: "7%",
containLabel: true,
},
tooltip: {
show: false,
trigger: "item",
},
series: [
{
name: "任务概况",
type: "pie",
radius: "55%",
center: ["50%", "58%"],
data: [
{
value: 0,
name: "未完成",
itemStyle: { color: "#09f" },
},
{
value: 0,
name: "已完成",
itemStyle: { color: "#00ffff" },
},
],
labelLine: {
length: 25,
length2: 25,
},
label: {
color: "#fff",
fontSize: 14,
// formatter:"{b}\n\n",
// padding:[0,-55],
normal: {
show: true,
position: "outer",
// formatter: '{d}%, {c} \n\n',
//模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。
formatter: "{a_set|{b}}\n{b_set|{d}%}\n\n\n",
// formatter: "{a_set|{b}}\n{c_set|{d}%}\n{b|}\n\n",
borderWidth: 20,
borderRadius: 4,
padding: [0, -55],
rich: {
a_set: {
color: "#cddbe4",
lineHeight: 20,
align: "center",
padding: [55, -40, -15, -40],
},
b_set: {
color: "auto",
},
},
},
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
],
});
},
//折线图
drawLine(data) {
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById("main1"));
// 绘制图表
myChart.setOption({
legend: {
top: 20,
textStyle: {
color: "#cddbe4",
fontSize: "11px",
},
},
grid: {
left: "5%",
right: "7%",
bottom: "4%",
containLabel: true,
},
xAxis: {
axisLine: {
show: true,
lineStyle: {
color: "#bbb6b6",
},
},
axisTick: {
//去掉坐标轴刻线
show: false,
},
type: "category",
data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
},
yAxis: {
axisLine: {
show: true,
lineStyle: {
color: "#bbb6b6",
},
},
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "#bbb6b6",
},
},
type: "value",
},
series: [
{
name: "事故数量",
data: data.shigu1,
type: "line",
smooth: true,
areaStyle: {
normal: {
// 渐变填充色（线条下半部分）
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#5470c6" },
{ offset: 1, color: "#5470c600" },
]),
},
},
},
{
data: data.shigu2,
type: "line",
smooth: true,
name: "隐患整治数",
areaStyle: {
normal: {
// 渐变填充色（线条下半部分）
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#91cc75" },
{ offset: 1, color: "#91cc7500" },
]),
},
},
},
{
data: data.shigu3,
type: "line",
smooth: true,
name: "预警数量",
areaStyle: {
normal: {
// 渐变填充色（线条下半部分）
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#e7bc5e" },
{ offset: 1, color: "#e7bc5e00" },
]),
},
},
},
],
});
},
},
};
</script>
<style lang="scss" scoped>
/* @font-face {
font-family: 'arialbd';
} */
.left-wrapper {
width: 100%;
overflow: hidden;
}
.item1 {
width: 95%;
height: 30px;
font-size: 18px;
line-height: 30px;
padding-left: 10px;
font-weight: 700;
font-style: italic;
margin-left: 10px;
background-image: linear-gradient(
to left,
#112238,
rgb(49 151 195 / 70%) 50%,
#112238
);
}
.dot {
display: inline-block;
position: relative;
width: 10px;
height: 10px;
background: rgb(30, 185, 190);
border-radius: 50%;
margin-right: 10px;
margin-left: 10px;
margin-bottom: 2px;
}
.dot-inner {
background: #44d7dc;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
-webkit-animation: vabDot 1.2s ease-in-out infinite;
animation: vabDot 1.2s ease-in-out infinite;
}
@-webkit-keyframes vabDot {
0% {
opacity: 0.6;
transform: scale(0.8);
}
to {
opacity: 0;
transform: scale(2.4);
}
}
@keyframes vabDot {
0% {
opacity: 0.6;
transform: scale(0.8);
}
to {
opacity: 0;
transform: scale(2.4);
}
}
.div-p {
// width: 60%;
// height: 35px;
line-height: 35px;
margin-left: 20%;
margin-bottom: 20px;
background: url("../../assets/mapImages/div-p.png");
background-repeat: no-repeat;
background-size: 100% 100%;
font-size: 9px;
cursor: pointer;
}
.div-el {
margin-top: 30px;
width: 100%;
height: 18px;
}
.el-left {
color: #96a4ad;
width: 20%;
height: 100%;
float: left;
font-size: 14px;
text-align: right;
}
::v-deep .el-progress {
width: 65%;
float: left;
margin-left: 25px;
}
::v-deep .el-progress-bar__outer {
height: 6px;
border-radius: 0px;
background-color: #1e506e80;
background: linear-gradient(to left, #123456, #112238);
}
::v-deep .el-progress-bar__inner {
position: absolute;
left: 0;
top: 0;
height: 100%;
/* background-color: #198EF0; */
background: linear-gradient(to left, #198ef0, #112238);
text-align: right;
border-radius: 0px 5px 5px 0px;
line-height: 1;
white-space: nowrap;
-webkit-transition: width 0.6s ease;
transition: width 0.6s ease;
}
::v-deep .el-progress.is-success .el-progress-bar__inner {
/* background-color: #00FFFF; */
background: linear-gradient(to left, #00ffff, #112238);
}
::v-deep .el-progress.is-warning .el-progress-bar__inner {
background-color: #198ef0;
background: linear-gradient(to left, #198ef0, #112238);
}
::v-deep .el-progress.is-exception .el-progress-bar__inner {
/* background-color: #00FFFF; */
background: linear-gradient(to left, #00ffff, #112238);
}
::v-deep .el-progress-bar__innerText {
color: #1e516f;
}
.titleTex {
width: 100%;
height: 20px;
margin-top: 0px;
font-size: 10px;
display: flex;
justify-content: space-around;
align-items: center;
padding: 0px 30px;
position: relative;
> div {
position: absolute;
top: -10px;
}
}
.pieone {
width: 50%;
height: 50%;
float: left;
}
.pietwo {
width: 50%;
height: 50%;
float: right;
}
</style>
gassafetyprogress-web/src/views/bigWindow/index.vue
View file @ de0e9e68
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2022-01-11 13:44:17 * @Date: 2022-01-11 13:44:17
* @LastEditTime: 2022-08-22 14:15:59 * @LastEditTime: 2022-08-23 17:04:59
* @LastEditors: 纪泽龙 jizelong@qq.com * @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/views/Home.vue * @FilePath: /test/hello-world/src/views/Home.vue
...@@ -85,8 +85,10 @@ ...@@ -85,8 +85,10 @@
</div> </div>
<!-- 左边 --> <!-- 左边 -->
<div class="leftbar"> <div class="leftbar" :style="{width:windowInnerWidth>1024?'470px':'300px'}">
<leftBar ref="mychild2"></leftBar> <leftBar v-if="windowInnerWidth>1024" ref="mychild2"></leftBar>
<leftBarZ v-else ref="mychild2"></leftBarZ>
</div> </div>
<!-- 右边 --> <!-- 右边 -->
<div class="rightbar"> <div class="rightbar">
...@@ -179,11 +181,13 @@ import PipeColor from "@/components/bigWindow/PipeColor.vue"; ...@@ -179,11 +181,13 @@ import PipeColor from "@/components/bigWindow/PipeColor.vue";
// import markerInfoWindow from './components/markerInfoWindow.vue' // import markerInfoWindow from './components/markerInfoWindow.vue'
import leftBar from "@/components/bigWindow/leftBar.vue"; import leftBar from "@/components/bigWindow/leftBar.vue";
import leftBarZ from "@/components/bigWindow/leftBarZ.vue";
import rightBar from "@/components/bigWindow/rightBar.vue"; import rightBar from "@/components/bigWindow/rightBar.vue";
export default { export default {
name: "Home", name: "Home",
components: { components: {
leftBar, leftBar,
leftBarZ,
rightBar, rightBar,
// Center, // Center,
UserCenter, UserCenter,
...@@ -268,6 +272,7 @@ export default { ...@@ -268,6 +272,7 @@ export default {
// 报警轮询timer // 报警轮询timer
alarmTimer: null, alarmTimer: null,
windowInnerWidth:0,
}; };
}, },
...@@ -285,6 +290,9 @@ export default { ...@@ -285,6 +290,9 @@ export default {
} }
}, },
}, },
created() {
this.windowInnerWidth = window.innerWidth;
},
async mounted() { async mounted() {
// console.log(99999999999999) // console.log(99999999999999)
// getPipe().then(res=>{ // getPipe().then(res=>{
...@@ -293,7 +301,6 @@ export default { ...@@ -293,7 +301,6 @@ export default {
// console.log(123) // console.log(123)
// }) // })
// return; // return;
const path = eval(this.systemSetting.map_center); const path = eval(this.systemSetting.map_center);
this.map = new EditorMap( this.map = new EditorMap(
"map", "map",
...@@ -351,11 +358,11 @@ export default { ...@@ -351,11 +358,11 @@ export default {
}), }),
// 管道上图 // 管道上图
addPipeLine(data, component) { addPipeLine(data, component) {
console.log('zzzzzzsssssxxxxzxzxzxzxzxzxz') console.log("zzzzzzsssssxxxxzxzxzxzxzxzxz");
for (let comp in data) { for (let comp in data) {
data[comp].forEach((pipe) => { data[comp].forEach((pipe) => {
console.log(pipe) console.log(pipe);
this.map.addPipeLine(pipe, component); this.map.addPipeLine(pipe, component);
}); });
} }
...@@ -587,8 +594,9 @@ export default { ...@@ -587,8 +594,9 @@ export default {
} }
.leftbar { .leftbar {
width: 450px; width: 300px;
height: 90%; overflow: hidden;
height: calc(100vh - 85px);
position: fixed; position: fixed;
top: 10%; top: 10%;
left: 0; left: 0;
...@@ -711,7 +719,7 @@ export default { ...@@ -711,7 +719,7 @@ export default {
box-shadow: inset 0px 1px 2px 1px #125c9b; box-shadow: inset 0px 1px 2px 1px #125c9b;
font-size: 14px; font-size: 14px;
} }
.list img{ .list img {
width: 22px; width: 22px;
} }
</style> </style>
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