Skip to content

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

Merge branch 'develop_jzl'

parents 8f0f589b 9660d88c
Show whitespace changes
Inline Side-by-side
Showing with 4174 additions and 536 deletions
gassafetyprogress-web/src/assets/styles/zehong.scss
View file @ 5dbe58b3
......@@ -4,61 +4,78 @@
*/
/** 基础通用 **/
.pt5 {
.pt5 {
padding-top: 5px;
}
.pr5 {
}
.pr5 {
padding-right: 5px;
}
.pb5 {
}
.pb5 {
padding-bottom: 5px;
}
.mt5 {
}
.mt5 {
margin-top: 5px;
}
.mr5 {
}
.mr5 {
margin-right: 5px;
}
.mb5 {
}
.mb5 {
margin-bottom: 5px;
}
.mb8 {
}
.mb8 {
margin-bottom: 8px;
}
.ml5 {
}
.ml5 {
margin-left: 5px;
}
.mt10 {
}
.mt10 {
margin-top: 10px;
}
.mr10 {
}
.mr10 {
margin-right: 10px;
}
.mb10 {
}
.mb10 {
margin-bottom: 10px;
}
.ml0 {
}
.ml0 {
margin-left: 10px;
}
.mt20 {
}
.mt20 {
margin-top: 20px;
}
.mr20 {
}
.mr20 {
margin-right: 20px;
}
.mb20 {
}
.mb20 {
margin-bottom: 20px;
}
.m20 {
}
.m20 {
margin-left: 20px;
}
}
.el-dialog:not(.is-fullscreen){
.el-dialog:not(.is-fullscreen) {
margin-top: 6vh !important;
}
}
.el-table {
.el-table {
.el-table__header-wrapper, .el-table__fixed-header-wrapper {
.el-table__header-wrapper,
.el-table__fixed-header-wrapper {
th {
word-break: break-word;
background-color: #f8f8f9;
......@@ -67,155 +84,156 @@
font-size: 13px;
}
}
.el-table__body-wrapper {
.el-button [class*="el-icon-"] + span {
.el-button [class*="el-icon-"]+span {
margin-left: 1px;
}
}
}
}
/** 表单布局 **/
.form-header {
font-size:15px;
color:#6379bb;
border-bottom:1px solid #ddd;
margin:8px 10px 25px 10px;
padding-bottom:5px
}
/** 表单布局 **/
.form-header {
font-size: 15px;
color: #6379bb;
border-bottom: 1px solid #ddd;
margin: 8px 10px 25px 10px;
padding-bottom: 5px
}
/** 表格布局 **/
.pagination-container {
/** 表格布局 **/
.pagination-container {
position: relative;
height: 25px;
margin-bottom: 10px;
margin-top: 15px;
padding: 10px 20px !important;
}
}
/* tree border */
.tree-border {
/* tree border */
.tree-border {
margin-top: 5px;
border: 1px solid #e5e6e7;
background: #FFFFFF none;
border-radius:4px;
}
border-radius: 4px;
}
.pagination-container .el-pagination {
.pagination-container .el-pagination {
right: 0;
position: absolute;
}
}
.el-table .fixed-width .el-button--mini {
.el-table .fixed-width .el-button--mini {
padding-left: 0;
padding-right: 0;
width: inherit;
}
}
.el-tree-node__content > .el-checkbox {
.el-tree-node__content>.el-checkbox {
margin-right: 8px;
}
}
.list-group-striped > .list-group-item {
.list-group-striped>.list-group-item {
border-left: 0;
border-right: 0;
border-radius: 0;
padding-left: 0;
padding-right: 0;
}
}
.list-group {
.list-group {
padding-left: 0px;
list-style: none;
}
}
.list-group-item {
.list-group-item {
border-bottom: 1px solid #e7eaec;
border-top: 1px solid #e7eaec;
margin-bottom: -1px;
padding: 11px 0px;
font-size: 13px;
}
}
.pull-right {
.pull-right {
float: right !important;
}
}
.el-card__header {
.el-card__header {
padding: 14px 15px 7px;
min-height: 40px;
}
}
.el-card__body {
.el-card__body {
padding: 15px 20px 20px 20px;
}
}
.card-box {
.card-box {
padding-right: 15px;
padding-left: 15px;
margin-bottom: 10px;
}
}
/* button color */
.el-button--cyan.is-active,
.el-button--cyan:active {
/* button color */
.el-button--cyan.is-active,
.el-button--cyan:active {
background: #20B2AA;
border-color: #20B2AA;
color: #FFFFFF;
}
}
.el-button--cyan:focus,
.el-button--cyan:hover {
.el-button--cyan:focus,
.el-button--cyan:hover {
background: #48D1CC;
border-color: #48D1CC;
color: #FFFFFF;
}
}
.el-button--cyan {
.el-button--cyan {
background-color: #20B2AA;
border-color: #20B2AA;
color: #FFFFFF;
}
}
/* text color */
.text-navy {
/* text color */
.text-navy {
color: #1ab394;
}
}
.text-primary {
.text-primary {
color: inherit;
}
}
.text-success {
.text-success {
color: #1c84c6;
}
}
.text-info {
.text-info {
color: #23c6c8;
}
}
.text-warning {
.text-warning {
color: #f8ac59;
}
}
.text-danger {
.text-danger {
color: #ed5565;
}
}
.text-muted {
.text-muted {
color: #888888;
}
}
/* image */
.img-circle {
/* image */
.img-circle {
border-radius: 50%;
}
}
.img-lg {
.img-lg {
width: 120px;
height: 120px;
}
}
.avatar-upload-preview {
.avatar-upload-preview {
position: absolute;
top: 50%;
transform: translate(50%, -50%);
......@@ -224,16 +242,23 @@
border-radius: 50%;
box-shadow: 0 0 4px #ccc;
overflow: hidden;
}
}
/* 拖拽列样式 */
.sortable-ghost{
/* 拖拽列样式 */
.sortable-ghost {
opacity: .8;
color: #fff!important;
background: #42b983!important;
}
color: #fff !important;
background: #42b983 !important;
}
.top-right-btn {
.top-right-btn {
position: relative;
float: right;
}
}
@media (max-width: 1100px) {
.amap-info {
transform-origin: 5% -100% !important;
transform: scale(.6) !important;
}
}
\ No newline at end of file
gassafetyprogress-web/src/components/bigWindow/leftBarZ.vue 0 → 100644
View file @ 5dbe58b3
<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/components/bigWindow/rightBarZ.vue 0 → 100644
View file @ 5dbe58b3
<template>
<div style="height: 100%">
<!-- 预警信息 -->
<div>
<div class="item1">
<span class="dot">
<span class="dot-inner"></span>
</span>
<span
style="letter-spacing: 3px; color: #cddbe4; cursor: pointer"
@click="$router.push('/operationMonitor/operationMonitor')"
>预警信息</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="" style="padding: 0px 10px">
<div class="yujingleft yujing">
<div class="yujingtop">
<img src="@/assets/mapinages/group786.png" alt="" />
</div>
<div class="yujingbottom">
<div>设备预警</div>
<span>0</span>
</div>
</div>
<div class="yujingcenter yujing">
<div class="yujingtop">
<img src="@/assets/mapinages/group787.png" alt="" />
</div>
<div class="yujingbottom">
<div>事件情况</div>
<span>0</span>
</div>
</div>
<div class="yujingright yujing">
<div class="yujingtop">
<img src="@/assets/mapinages/group788.png" alt="" />
</div>
<div class="yujingbottom">
<div>隐患数量</div>
<span>0</span>
</div>
</div>
</div>
<div class="left">
<div
class="bottom right-bottom-data-left"
@mouseover="mouseover"
@mouseout="mouseout"
>
<el-table
size="mini"
:data="tableData"
:height="tableHeight"
class="el-bottom"
ref="table"
>
<el-table-column prop="unitName" label="所在单位" width="80">
<template slot-scope="scope">
<div class="zzz" :title="scope.row.unitName">
{{ scope.row.unitName }}
</div>
</template>
</el-table-column>
<el-table-column prop="detectorType" label="设备类型" width="80">
<template slot-scope="scope">
<div class="zzz" :title="scope.row.detectorType">
{{ scope.row.detectorType }}
</div>
</template>
</el-table-column>
<el-table-column prop="statusName" label="预警信息" width="80">
<template slot-scope="scope">
<div class="zzz" :title="scope.row.statusName">
{{ scope.row.statusName }}
</div>
</template>
</el-table-column>
<el-table-column prop="alarmTime" label="预警时间" width="80">
</el-table-column>
<el-table-column prop="handledStatus" label="状态">
<template slot-scope="scope">
<div class="zzz" :title="scope.row.handledStatus">
{{ scope.row.handledStatus }}
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
<!-- 用户安全监控设备 -->
<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="inuser">
<div class="outuserleft">
<div class="outuserone">
<p>燃气用户数量</p>
<!-- <span class="outuserspan">{{ diviceNum.userNum }}</span> -->
</div>
<div id="huanleft" style="width: 150px; height: 120px"></div>
<div class="inyuan">
<div style="letter-spacing: 2px">用户总数</div>
<span
style="
font-family: 'arialbd';
letter-spacing: 2px;
color: #00ffff;
font-size: 18px;
"
>{{
diviceNum.juminNum + diviceNum.shangNum + diviceNum.gongNum
}}</span
>
</div>
<div class="usernum">
<div class="usernumin in4">
<span> ● </span>
<span style="color: #cddbe4">居民用户 </span>
<span style="font-family: 'arialbd'; letter-spacing: 2px">
: {{ diviceNum.juminNum }}</span
>
</div>
<div class="usernumin in5">
<span> ● </span>
<span style="color: #cddbe4">商业用户 </span>
<span style="font-family: 'arialbd'; letter-spacing: 2px">
: {{ diviceNum.shangNum }}</span
>
</div>
<div class="usernumin in6">
<span> ● </span>
<span style="color: #cddbe4">工业用户 </span>
<span style="font-family: 'arialbd'; letter-spacing: 2px">
: {{ diviceNum.gongNum }}</span
>
</div>
</div>
</div>
<div class="outuserright">
<div class="outusertwo">
<p>安全设备数量</p>
<!-- <span class="outuserspan">{{
diviceNum.baoNum + diviceNum.changNum + diviceNum.liNum
}}</span> -->
</div>
<div id="huanright" style="width: 150px; height: 120px"></div>
<div class="inyuan">
<div style="letter-spacing: 2px">设备总数</div>
<span
style="
font-family: 'arialbd';
letter-spacing: 2px;
color: #00ffff;
font-size: 18px;
"
>{{ diviceNum.baoNum + diviceNum.changNum + diviceNum.liNum }}</span
>
</div>
<div class="usernum">
<div class="usernumin in1">
<span> ● </span>
<span style="color: #cddbe4">在线 </span>
<span style="font-family: 'arialbd'; letter-spacing: 2px">
: {{ diviceNum.changNum }}</span
>
</div>
<div class="usernumin in2">
<span> ● </span>
<span style="color: #cddbe4">离线 </span>
<span style="font-family: 'arialbd'; letter-spacing: 2px">
: {{ diviceNum.liNum }}</span
>
</div>
<div class="usernumin in3">
<span> ● </span>
<span style="color: #cddbe4">报警 </span>
<span style="font-family: 'arialbd'; letter-spacing: 2px">
: {{ diviceNum.baoNum }}</span
>
</div>
</div>
</div>
</div>
<!-- 资源统计 -->
<div>
<div class="item1" style="margin-top: 15px">
<span class="dot">
<span class="dot-inner"></span>
</span>
<span
style="letter-spacing: 3px; color: #cddbe4; cursor: pointer"
@click="$router.push('/regulation/station')"
>资源统计</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="echarts-one"
style="margin-top: 10px; width: 430px; margin-left: 10px"
>
<div id="myChartone" :style="{ width: '300px', height: '180px' }"></div>
</div>
</div>
</template>
<script>
// 引入基本模板
import * as echarts from "echarts";
import { alarmData, selectDeviceNum } from "@/api/detector/detectorInfo";
// 当不轮播时候的刷新时间
import { alarmtime } from "@/utils/mapClass/config";
export default {
// components: {
// RightPic,
// },
data() {
return {
allNum: {},
diviceNum: {
baoNum: 0,
changNum: 0,
liNum: 0,
userNum: 0,
},
zeroNum: {
fajing: 0,
stationNum: 0,
tiaoya: 0,
videoNum: 0,
},
enterpriseIds: {
enterpriseId: "",
},
timer: null,
// 与bigwindow的报警同步的定时器
alarmTimer: null,
// 滚动功能的容器大还是列表大
changeTimer: false,
repeatFinshed: false,
tableHeight: 135,
tableData: [],
scrollHeight: 0,
};
},
mounted() {
// this.$nextTick(()=>{
// this.getScrollHeight();
// })
this.getAlarm();
selectDeviceNum(this.enterpriseIds).then((response) => {
this.diviceNum = response.data;
this.drawLine3();
});
},
beforeDestroy() {
console.log("清空定时器");
clearInterval(this.alarmTimer);
},
methods: {
getAlarm() {
return alarmData().then((response) => {
this.tableData = response.data.pageData;
// console.log(response.data)
// this.user = response.data;
this.$nextTick(() => {
this.getScrollHeight();
});
});
},
getScrollHeight() {
const selectWrap = this.$refs.table.$el.querySelector(
".el-table__body-wrapper"
);
// 列表
const select = this.$refs.table.$el
?.querySelector(".el-table__body-wrapper")
.querySelector(".el-table__body");
setTimeout(() => {
// 列表容器高度
const { height: heightWrapper } = selectWrap.getBoundingClientRect();
// 列表高度
const { height: heightSelect } = select.getBoundingClientRect();
// 滚动条的高度 = 列表高度-列表容器高度
this.scrollHeight = heightSelect - heightWrapper;
// 如果列表高度大于列表容器高度，就让轮播到底重新调接口，否则就跟bigwindow同步调取接口
if (heightSelect > heightWrapper) {
this.timerAni();
console.log("滚动");
} else {
this.alarmTimerAni();
console.log("不滚动-----------------------------");
}
// 列表大的时候鼠标移入移出就会触发暂停，否则就return
this.changeTimer = heightSelect > heightWrapper;
}, 1);
},
timerAni() {
const selectWrap = this.$refs.table.$el.querySelector(
".el-table__body-wrapper"
);
clearInterval(this.timer);
this.timer = setInterval(async () => {
if (selectWrap.scrollTop == this.scrollHeight) {
clearInterval(this.timer);
await this.getAlarm();
selectWrap.scrollTop = 0;
} else {
selectWrap.scrollTop += 1;
}
}, 100);
},
// 与外界报警同步
alarmTimerAni() {
this.alarmTimer = setTimeout(() => {
this.getAlarm();
}, alarmtime);
},
tableEnter() {
clearInterval(this.timer);
},
// 列表大的时候鼠标移入移出就会触发暂停，否则就啥也不干
mouseover() {
this.changeTimer && this.tableEnter();
},
mouseout() {
this.changeTimer && this.timerAni();
},
choice(val) {
this.getNum(val);
},
getNum(val) {
if (val != null && val != "") {
this.enterpriseIds.enterpriseId = val.toString();
selectDeviceNum(this.enterpriseIds).then((response) => {
console.log(response);
this.allNum = response.data;
this.drawLine();
});
} else {
this.allNum = this.zeroNum;
this.drawLine();
}
},
drawLine() {
// 基于准备好的dom，初始化echarts实例
let myChart1 = this.$echarts.init(document.getElementById("myChartone"));
// 绘制图表
myChart1.setOption({
tooltip: {
trigger: "item",
},
grid: {
top: "8%",
left: "8%",
right: "4%",
bottom: "10%",
containLabel: true,
},
xAxis: {
data: ["阀井", "调压箱", "场站", "监控"],
type: "category",
// data: category,
splitLine: { show: false },
axisLine: {
show: false,
lineStyle: {
color: "#bbb6b6",
},
},
axisTick: {
show: false,
},
offset: 10,
nameTextStyle: {
fontSize: 15,
},
},
yAxis: {
type: "value",
axisLine: {
show: false,
lineStyle: {
color: "#688AB6",
},
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "#464646",
},
},
},
series: [
{
name: "资源数量统计",
type: "bar",
showSymbol: false,
hoverAnimation: false,
data: [
this.allNum.fajing,
this.allNum.tiaoya,
this.allNum.stationNum,
this.allNum.videoNum,
],
barWidth: 18, //柱图宽度
// barCategoryGap:'60%',
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: "top", //在上方显示
textStyle: {
//数值样式
color: "#688AB6",
fontSize: 12,
},
},
barBorderRadius: [5, 5, 0, 0], //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
color: function (params) {
//我这边就两个柱子，大体就两个柱子颜色渐变，所以数组只有两个值，多个颜色就多个值
var colorList = [
["#00ffff", "#00fbfb80", "#112238"],
["#198EF0", "#198ef099", "#112238"],
];
var index = params.dataIndex;
if (params.dataIndex >= colorList.length) {
index = params.dataIndex - colorList.length;
}
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: colorList[index][0] },
{ offset: 0.5, color: colorList[index][1] },
{ offset: 1, color: colorList[index][2] },
]);
},
},
},
},
{
name: "资源数量统计",
tooltip: {
show: true,
},
type: "bar",
barWidth: 10,
},
{
name: "b",
tooltip: {
show: false,
},
},
{
name: "d",
tooltip: {
show: false,
},
},
],
});
},
drawLine3() {
// 基于准备好的dom，初始化echarts实例
let myChart31 = echarts.init(document.getElementById("huanleft"));
let myChart32 = echarts.init(document.getElementById("huanright"));
// 绘制图表
myChart31.setOption({
color: ["#91cc75", "#5470c6", "#fa8167"],
grid: {
left: 0,
// right: 0,
bottom: 0,
top: 0,
containLabel: true,
},
// grid: {
// bottom: 150,
// left: 100,
// right: '10%'
// },
series: [
// 主要展示层的
{
radius: ["75%", "65%"],
center: ["50%", "50%"],
type: "pie",
itemStyle: {
borderRadius: 20,
},
label: {
normal: {
show: false,
textStyle: {
fontSize: 13,
},
position: "outside",
},
emphasis: {
show: false,
},
},
labelLine: {
normal: {
show: false,
length: 20,
length2: 35,
},
emphasis: {
show: true,
},
},
name: "民警训练总量",
data: [
{ name: "居民用户", value: this.diviceNum.juminNum },
{ name: "商业用户", value: this.diviceNum.shangNum },
{ name: "工业用户", value: this.diviceNum.gongNum },
],
},
// 边框的设置
{
name: "外边框",
type: "pie",
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
center: ["50%", "50%"],
radius: ["80%", "80%"],
label: {
normal: {
show: false,
},
},
data: [
{
value: 9,
name: "",
itemStyle: {
normal: {
borderWidth: 2,
borderColor: "#61bad3",
},
},
},
],
},
],
});
myChart32.setOption({
color: ["#FF4040", "#F0C41B", "#188DF0"],
grid: {
left: 0,
// right: 0,
bottom: 0,
top: 0,
containLabel: true,
},
// grid: {
// bottom: 150,
// left: 100,
// right: '10%'
// },
series: [
// 主要展示层的
{
radius: ["75%", "65%"],
center: ["50%", "50%"],
type: "pie",
itemStyle: {
borderRadius: 20,
},
label: {
normal: {
show: false,
textStyle: {
fontSize: 13,
},
position: "outside",
},
emphasis: {
show: false,
},
},
labelLine: {
normal: {
show: false,
length: 20,
length2: 35,
},
emphasis: {
show: true,
},
},
name: "民警训练总量",
data: [
{ name: "报警数量", value: this.diviceNum.baoNum },
{ name: "离线数量", value: this.diviceNum.liNum },
{ name: "在线数量", value: this.diviceNum.changNum },
],
},
// 边框的设置
{
name: "外边框",
type: "pie",
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
center: ["50%", "50%"],
radius: ["80%", "80%"],
label: {
normal: {
show: false,
},
},
data: [
{
value: 9,
name: "",
itemStyle: {
normal: {
borderWidth: 2,
borderColor: "#61bad3",
},
},
},
],
},
],
});
// myChart32.setOption({
// title: {
// text: '设备数量:'+data.deviceNum,
// left: 'center',
// textStyle: {
// color: "#0ff"
// }
// },
// tooltip: {
// trigger: 'item'
// },
// series: [
// {
// name: '设备概况',
// type: 'pie',
// radius: ['50%', '70%'],
// center: ['50%', '60%'],
// avoidLabelOverlap: false,
// label: {
// show: false,
// position: 'center'
// },
// emphasis: {
// label: {
// show: true,
// fontSize: '40',
// fontWeight: 'bold'
// }
// },
// labelLine: {
// show: false
// },
// data:data.divice,
// color:["#188df0","#ffff00","#FF4040"]
// }
// ]
// });
},
},
};
</script>
<style lang="scss" scoped>
.titleTex {
height: 30px;
width: 100%;
color: aqua;
text-align: center;
line-height: 30px;
margin-top: 10px;
}
.divall {
height: 100%;
width: 100%;
}
.divfen {
display: flex;
justify-content: center;
align-items: center;
}
.numdiv {
background: #47aed5;
color: white;
width: 27px;
font-size: 30px;
}
.item1 {
width: 93%;
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);
}
}
.inuser {
width: 100%;
height: 200px;
}
.outuserleft {
width: 50%;
height: 100%;
float: left;
}
.outuserright {
width: 50%;
height: 100%;
float: right;
}
.outuserone {
width: 100%;
height: 20px;
text-align: center;
color: #cddbe4;
font-size: 10px;
}
.outusertwo {
width: 100%;
height: 20px;
font-size: 10px;
text-align: center;
color: #cddbe4;
}
.outuserspan {
font-family: "arialbd";
font-size: 28px;
color: #00ffff;
letter-spacing: 8px;
}
.usernum {
width: 100%;
text-align: center;
}
.usernumin {
font-size: 12px;
}
.in1 {
color: #188df0;
}
.in2 {
color: #f0c41b;
}
.in3 {
color: #ff4040;
}
.in4 {
color: #91cc75;
}
.in5 {
color: #5470c6;
}
.in6 {
color: #fa8167;
}
.inyuan {
width: 80px;
height: 80px;
border-radius: 50%;
border: 2px solid #125c9b;
position: fixed;
margin-bottom: 10px;
margin-top: -100px;
margin-left: 36px;
font-size: 10px;
color: #cddbe4;
text-align: center;
line-height: 25px;
padding: 14px 0px 0px 0px;
background-image: linear-gradient(to left, #112238, #003e8d, #112238);
}
.b_list {
height: 100%;
overflow: hidden;
}
.left {
margin-top: 50px;
width: 440px;
transform-origin: 0 0;
transform: scale(0.65, 1);
margin-left: 10px;
}
.yj {
padding: 0px 10px;
}
.yujing {
width: 33%;
height: 50px;
float: left;
}
.yujingtop {
// width: 70px;
// height: 90px;
float: left;
margin-top: 15px;
margin-left: 10px;
text-align: right;
> img {
width: 20px;
height: 20px;
}
}
.yujingbottom {
float: left;
color: #cddbe4;
font-size: 10px;
margin-left: 10px;
// line-height: 35px;
padding: 10px 0 0 0;
}
.yujingbottom span {
font-family: "arialbd";
font-size: 15px;
background-image: -webkit-linear-gradient(bottom, #f0c41b, #e4dbb7);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
gassafetyprogress-web/src/views/bigWindow/index.vue
View file @ 5dbe58b3
<!--
* @Author: your name
* @Date: 2022-01-11 13:44:17
* @LastEditTime: 2022-08-22 14:15:59
* @LastEditTime: 2022-08-24 13:43:01
* @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/views/Home.vue
......@@ -54,7 +54,12 @@
</div>
<!-- 设备按钮 -->
<div class="typelist-div">
<div
:class="{
'typelist-div': windowInnerWidth > 1100,
'typelist-divZ': windowInnerWidth < 1100,
}"
>
<div
class="list"
v-for="(item, index) in arr"
......@@ -79,18 +84,26 @@
</div>
<!-- 头部 -->
<div class="banner-test">
<div class="banner-test" :style="{height:windowInnerWidth>1100?'85px':'70px'}">
<!-- <dv-decoration-5 style="width:100%;height:100%;" /> -->
<img src="@/assets/mapinages/tb.png" alt="" />
</div>
<!-- 左边 -->
<div class="leftbar">
<leftBar ref="mychild2"></leftBar>
<div
class="leftbar"
:style="{ width: windowInnerWidth > 1024 ? '470px' : '300px' }"
>
<leftBar v-if="windowInnerWidth > 1024" ref="mychild2"></leftBar>
<leftBarZ v-else ref="mychild2"></leftBarZ>
</div>
<!-- 右边 -->
<div class="rightbar">
<rightBar ref="mychild"></rightBar>
<div
class="rightbar"
:style="{ width: windowInnerWidth > 1024 ? '470px' : '300px' }"
>
<rightBar v-if="windowInnerWidth > 1024" ref="mychild"></rightBar>
<rightBarZ v-else ref="mychild"></rightBarZ>
</div>
<!-- 左上角天气 -->
......@@ -179,12 +192,16 @@ import PipeColor from "@/components/bigWindow/PipeColor.vue";
// import markerInfoWindow from './components/markerInfoWindow.vue'
import leftBar from "@/components/bigWindow/leftBar.vue";
import leftBarZ from "@/components/bigWindow/leftBarZ.vue";
import rightBar from "@/components/bigWindow/rightBar.vue";
import rightBarZ from "@/components/bigWindow/rightBarZ.vue";
export default {
name: "Home",
components: {
leftBar,
leftBarZ,
rightBar,
rightBarZ,
// Center,
UserCenter,
OtherCenter,
......@@ -268,6 +285,7 @@ export default {
// 报警轮询timer
alarmTimer: null,
windowInnerWidth: 0,
};
},
......@@ -285,6 +303,9 @@ export default {
}
},
},
created() {
this.windowInnerWidth = window.innerWidth;
},
async mounted() {
// console.log(99999999999999)
// getPipe().then(res=>{
......@@ -293,7 +314,6 @@ export default {
// console.log(123)
// })
// return;
const path = eval(this.systemSetting.map_center);
this.map = new EditorMap(
"map",
......@@ -351,11 +371,11 @@ export default {
}),
// 管道上图
addPipeLine(data, component) {
console.log('zzzzzzsssssxxxxzxzxzxzxzxzxz')
console.log("zzzzzzsssssxxxxzxzxzxzxzxzxz");
for (let comp in data) {
data[comp].forEach((pipe) => {
console.log(pipe)
console.log(pipe);
this.map.addPipeLine(pipe, component);
});
}
......@@ -587,18 +607,21 @@ export default {
}
.leftbar {
width: 450px;
height: 90%;
width: 300px;
overflow: hidden;
height: calc(100vh - 85px);
position: fixed;
top: 10%;
top: 85px;
left: 0;
background: #112238;
}
.rightbar {
width: 470px;
height: 90%;
height: calc(100vh - 85px);
position: fixed;
top: 10%;
top: 85px;
right: 0;
background: #112238;
}
......@@ -690,8 +713,7 @@ export default {
top: 0;
margin-top: 120px;
right: 470px;
}
.list {
.list {
z-index: 9999;
float: left;
margin-left: 15px;
......@@ -704,14 +726,45 @@ export default {
padding: 5px 7px;
cursor: pointer;
line-height: 26px;
}
.list.active {
}
.list.active {
background: linear-gradient(86deg, #112238 0%, #32a3d3 62%, #112238 100%);
box-shadow: inset 0px 1px 2px 1px #125c9b;
font-size: 14px;
}
.list img{
}
.list img {
width: 22px;
}
}
.typelist-divZ {
width: 400px;
// height: 30px;
z-index: 9998;
position: fixed;
top: 85px;
left: 50%;
margin-left: -200px;
.list {
float: left;
margin-left: 15px;
color: #fff;
line-height: auto;
text-align: center;
background: linear-gradient(86deg, #112238 0%, #086187 62%, #112238 100%);
box-shadow: inset 0px 1px 2px 1px #125c9b;
font-size: 10px;
padding: 5px 7px;
cursor: pointer;
margin-bottom: 5px;
// line-height: 30px;
}
.list.active {
background: linear-gradient(86deg, #112238 0%, #32a3d3 62%, #112238 100%);
box-shadow: inset 0px 1px 2px 1px #125c9b;
font-size: 10px;
}
.list img {
width: 15px;
}
}
</style>
gassafetyprogress-web/src/views/examine/index.vue
View file @ 5dbe58b3
1111
<template>
<div class="exa">
<div class="exaone">
......@@ -6,34 +6,73 @@
<div class="exaleft">
<div style="color: #188df0">优秀</div>
<div>考核级别</div>
<div style="width: 30px;border-bottom: 1px solid #188df0;margin-top: 10px"></div>
<div
style="
width: 30px;
border-bottom: 1px solid #188df0;
margin-top: 10px;
"
></div>
</div>
<div class="exacenter" id="myChartpieone" :style="{width: '250px', height: '100%'}"></div>
<div
class="exacenter"
id="myChartpieone"
:style="{ width: '250px', height: '100%' }"
></div>
<div class="exaright">
<div style="color: #188df0">
<span>3</span>
<img src="../../assets/up.png" style="width: 15px;height: 12px;margin-bottom: 3px">
<img
src="../../assets/up.png"
style="width: 15px; height: 12px; margin-bottom: 3px"
/>
</div>
<div>排名</div>
<div style="width: 30px;border-bottom: 1px solid #188df0;margin-top: 10px"></div>
<div
style="
width: 30px;
border-bottom: 1px solid #188df0;
margin-top: 10px;
"
></div>
</div>
</div>
<div class="topright">
<div class="exatop">2021年度全县共处置<span style="color: #b65bff;font-size: 20px;">367件</span>燃气事故，事故办结率<span style="color: red;font-size: 20px;">100%</span>,平均办结时效<span style="color: #1c84c6;font-size: 20px;">24小时</span>;</div>
<div class="exatop">共组织燃气取暖专项排查、检查任务<span style="color: #2934ff;font-size: 20px;">256次</span>，燃气企业日常巡查<span style="color: #ffbc00;font-size: 20px;">566次</span>，整改<span style="color: red;font-size: 20px;">765次</span>安全隐患。</div>
<div class="exatop">共寄到投诉<span style="color: #1c84c6;font-size: 20px;">271次</span>，已全部处置完成。</div>
<div class="exatop">
2021年度全县共处置<span style="color: #b65bff; font-size: 20px"
>367件</span
>燃气事故，事故办结率<span style="color: red; font-size: 20px"
>100%</span
>,平均办结时效<span style="color: #1c84c6; font-size: 20px"
>24小时</span
>;
</div>
<div class="exatop">
共组织燃气取暖专项排查、检查任务<span
style="color: #2934ff; font-size: 20px"
>256次</span
>，燃气企业日常巡查<span style="color: #ffbc00; font-size: 20px"
>566次</span
>，整改<span style="color: red; font-size: 20px">765次</span
>安全隐患。
</div>
<div class="exatop">
共寄到投诉<span style="color: #1c84c6; font-size: 20px">271次</span
>，已全部处置完成。
</div>
<div class="exabottom">
<div class="bottoml">全年燃气总结：</div>
<div class="bottomr">
燃气监管由排名、区域、企业名称、经营类别、燃气事故(件)，隐患整治(次)，投诉处置(件)、考核得分、考核结果组成。
共组织燃区隐患装箱排查、检查任务677次，燃气企业日常巡查344次；
2021年度全县共处置367件燃气事故，事故办结率100%，平均办结时效24小时；共组织燃气隐患专项排查、检查任务256次，燃气企业日常巡查566次，整改765次安全隐患。共接到投诉271次，已经全部处置完成。</div>
2021年度全县共处置367件燃气事故，事故办结率100%，平均办结时效24小时；共组织燃气隐患专项排查、检查任务256次，燃气企业日常巡查566次，整改765次安全隐患。共接到投诉271次，已经全部处置完成。
</div>
</div>
</div>
</div>
<div class="exatwo">
<div class="exatwobanner">
<div style="font-size: 22px;margin-left: 5%;">企业排名</div>
<div style="font-size: 22px; margin-left: 5%">企业排名</div>
</div>
<div class="exatwoul">
<div>
......@@ -52,16 +91,16 @@
</tr>
</thead>
<tbody>
<tr v-for="(user,index) in stu">
<td>{{index+1}}</td>
<td>{{user.name}}</td>
<td>{{user.type}}</td>
<td>{{user.num}}</td>
<td>{{user.price}}</td>
<td>{{user.yh}}</td>
<td>{{user.ts}}</td>
<td>{{user.kh}}</td>
<td>{{user.jg}}</td>
<tr v-for="(user, index) in stu" :key="index + 1">
<td>{{ index + 1 }}</td>
<td>{{ user.name }}</td>
<td>{{ user.type }}</td>
<td>{{ user.num }}</td>
<td>{{ user.price }}</td>
<td>{{ user.yh }}</td>
<td>{{ user.ts }}</td>
<td>{{ user.kh }}</td>
<td>{{ user.jg }}</td>
</tr>
</tbody>
</table>
......@@ -72,62 +111,218 @@
</template>
<script>
export default {
export default {
components: {},
data() {
return{
user:{name:'',type:'',num:'',price:''},
stu:[
{'name': '河北省石家庄平山县', 'type': '中燃翔科','num':'管道燃气','price':'0件','yh':'50次','ts':'20次','kh': 100,'jg':'优秀'},
{'name': '河北省石家庄平山县', 'type': '中诚燃气','num':'管道燃气','price':'0件','yh':'42次','ts':'10次','kh': 100,'jg':'优秀'},
{'name': '河北省石家庄平山县', 'type': '敬业集团','num':'瓶装燃气','price':'0件','yh':'30次','ts':'20次','kh': 100,'jg':'优秀'},
{'name': '河北省石家庄平山县', 'type': '盈德气体','num':'瓶装燃气','price':'0件','yh':'70次','ts':'18次','kh': 90,'jg':'良好'},
{'name': '河北省石家庄平山县', 'type': '石家庄柏坡正元化肥有限公司','num':'瓶装燃气','price':'0件','yh':'46次','ts':'10次','kh': 100,'jg':'优秀'},
{'name': '河北省石家庄平山县', 'type': '平山县顺诚燃气有限公司 -','num':'城镇燃气','price':'0件','yh':'50次','ts':'10次','kh': 100,'jg':'优秀'},
{'name': '河北省石家庄平山县', 'type': '河北玺竑能源有限公司','num':'汽车加气','price':'0件','yh':'43次','ts':'25次','kh': 100,'jg':'优秀'},
{'name': '河北省石家庄平山县', 'type': '石家庄新捷燃气运输有限公司','num':'瓶装燃气','price':'0件','yh':'71次','ts':'20次','kh': 100,'jg':'优秀'},
{'name': '河北省石家庄平山县', 'type': '中裕燃气公司','num':'天然气经营','price':'0件','yh':'56次','ts':'14次','kh': 100,'jg':'优秀'},
{'name': '河北省石家庄平山县', 'type': '石家庄华玉燃气有限公司汽车天然气加气站','num':'汽车加气','price':'0件','yh':'33次','ts':'20次','kh': 100,'jg':'优秀'},
{'name': '河北省石家庄平山县', 'type': '河北天然气华建CNG加气站','num':'汽车加气','price':'0件','yh':'43次','ts':'29次','kh': 100,'jg':'优秀'},
{'name': '河北省石家庄平山县', 'type': '顺诚燃气加气站','num':'汽车加气','price':'0件','yh':'54次','ts':'27次','kh': 100,'jg':'优秀'},
{'name': '河北省石家庄平山县', 'type': '平山博闵加气站','num':'汽车加气','price':'0件','yh':'38次','ts':'16次','kh': 100,'jg':'优秀'},
{'name': '河北省石家庄平山县', 'type': '平山县平安天然气有限公司','num':'汽车加气','price':'0件','yh':'54次','ts':'11次','kh': 100,'jg':'优秀'},
{'name': '河北省石家庄平山县', 'type': '平山县烟堡村','num':'管道燃气','price':'0件','yh':'26次','ts':'10次','kh': 100,'jg':'优秀'},
{'name': '河北省石家庄平山县', 'type': '平山县西石桥','num':'管道燃气','price':'0件','yh':'19次','ts':'11次','kh': 92,'jg':'良好'},
{'name': '河北省石家庄平山县', 'type': '河北泽宏科技股份有限公司','num':'管道燃气','price':'0件','yh':'10次','ts':'0次','kh': 100,'jg':'优秀'},
],}
return {
user: { name: "", type: "", num: "", price: "" },
stu: [
{
name: "河北省石家庄平山县",
type: "中燃翔科",
num: "管道燃气",
price: "0件",
yh: "50次",
ts: "20次",
kh: 100,
jg: "优秀",
},
{
name: "河北省石家庄平山县",
type: "中诚燃气",
num: "管道燃气",
price: "0件",
yh: "42次",
ts: "10次",
kh: 100,
jg: "优秀",
},
{
name: "河北省石家庄平山县",
type: "敬业集团",
num: "瓶装燃气",
price: "0件",
yh: "30次",
ts: "20次",
kh: 100,
jg: "优秀",
},
{
name: "河北省石家庄平山县",
type: "盈德气体",
num: "瓶装燃气",
price: "0件",
yh: "70次",
ts: "18次",
kh: 90,
jg: "良好",
},
{
name: "河北省石家庄平山县",
type: "石家庄柏坡正元化肥有限公司",
num: "瓶装燃气",
price: "0件",
yh: "46次",
ts: "10次",
kh: 100,
jg: "优秀",
},
{
name: "河北省石家庄平山县",
type: "平山县顺诚燃气有限公司 -",
num: "城镇燃气",
price: "0件",
yh: "50次",
ts: "10次",
kh: 100,
jg: "优秀",
},
{
name: "河北省石家庄平山县",
type: "河北玺竑能源有限公司",
num: "汽车加气",
price: "0件",
yh: "43次",
ts: "25次",
kh: 100,
jg: "优秀",
},
{
name: "河北省石家庄平山县",
type: "石家庄新捷燃气运输有限公司",
num: "瓶装燃气",
price: "0件",
yh: "71次",
ts: "20次",
kh: 100,
jg: "优秀",
},
{
name: "河北省石家庄平山县",
type: "中裕燃气公司",
num: "天然气经营",
price: "0件",
yh: "56次",
ts: "14次",
kh: 100,
jg: "优秀",
},
{
name: "河北省石家庄平山县",
type: "石家庄华玉燃气有限公司汽车天然气加气站",
num: "汽车加气",
price: "0件",
yh: "33次",
ts: "20次",
kh: 100,
jg: "优秀",
},
{
name: "河北省石家庄平山县",
type: "河北天然气华建CNG加气站",
num: "汽车加气",
price: "0件",
yh: "43次",
ts: "29次",
kh: 100,
jg: "优秀",
},
{
name: "河北省石家庄平山县",
type: "顺诚燃气加气站",
num: "汽车加气",
price: "0件",
yh: "54次",
ts: "27次",
kh: 100,
jg: "优秀",
},
{
name: "河北省石家庄平山县",
type: "平山博闵加气站",
num: "汽车加气",
price: "0件",
yh: "38次",
ts: "16次",
kh: 100,
jg: "优秀",
},
{
name: "河北省石家庄平山县",
type: "平山县平安天然气有限公司",
num: "汽车加气",
price: "0件",
yh: "54次",
ts: "11次",
kh: 100,
jg: "优秀",
},
mounted () {
{
name: "河北省石家庄平山县",
type: "平山县烟堡村",
num: "管道燃气",
price: "0件",
yh: "26次",
ts: "10次",
kh: 100,
jg: "优秀",
},
{
name: "河北省石家庄平山县",
type: "平山县西石桥",
num: "管道燃气",
price: "0件",
yh: "19次",
ts: "11次",
kh: 92,
jg: "良好",
},
{
name: "河北省石家庄平山县",
type: "河北泽宏科技股份有限公司",
num: "管道燃气",
price: "0件",
yh: "10次",
ts: "0次",
kh: 100,
jg: "优秀",
},
],
};
},
mounted() {
this.drawLine();
},
methods: {
drawLine() {
// 基于准备好的dom，初始化echarts实例
let myChart1 = this.$echarts.init(document.getElementById("myChartpieone"));
let myChart1 = this.$echarts.init(
document.getElementById("myChartpieone")
);
// 绘制图表
myChart1.setOption({
color:['#5ff76a','#1890ff'],
color: ["#5ff76a", "#1890ff"],
grid: {
bottom: "2%",
containLabel: true,
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['60%', '80%'],
name: "Access From",
type: "pie",
radius: ["60%", "80%"],
avoidLabelOverlap: false,
hoverAnimation: false,
silent: true,
itemStyle: {
borderRadius: 5,
borderColor: '#fff',
borderWidth: 2
borderColor: "#fff",
borderWidth: 2,
},
label: {
show: false,
position: 'center',
position: "center",
normal: {
show: true,
formatter: "{c}分",
......@@ -137,25 +332,25 @@
},
},
labelLine: {
show: false
show: false,
},
data: [
{ value: 15, name: 'Search Engine' },
{ value: 85, name: 'Direct' },
]
}
]
{ value: 15, name: "Search Engine" },
{ value: 85, name: "Direct" },
],
},
],
});
}
},
}
},
};
</script>
<style lang="scss" scoped>
.exa{
.exa {
width: 100%;
height: 100%;
}
.exaone{
}
.exaone {
width: 100%;
height: 250px;
background: url(../../assets/exa2.png);
......@@ -163,15 +358,26 @@
background-size: 100% 100%;
display: flex;
justify-content: space-around;
}
@media (max-width: 1100px) {
.exaone {
overflow: hidden !important;
}
.exatop{
margin-top:5px !important;
}
.topleft{
.bottomr{
width: 100% !important;
}
}
.topleft {
width: 40%;
height: 100%;
display: flex;
justify-content: space-around;
padding: 0 6% 0 4%;
}
.exaleft{
}
.exaleft {
width: 100px;
height: 30%;
display: flex;
......@@ -180,8 +386,8 @@
align-items: center;
margin-top: 80px;
font-size: 20px;
}
.exaright{
}
.exaright {
width: 100px;
height: 30%;
display: flex;
......@@ -190,97 +396,98 @@
align-items: center;
margin-top: 80px;
font-size: 20px;
}
.exaline{
}
.exaline {
width: 40px;
height: 1px;
background: #00c3f1;
margin-top: 10px;
}
.topright{
}
.topright {
width: 60%;
height: 100%;
padding: 0 30px 0 0;
}
.exatop{
}
.exatop {
text-align: right;
margin-top: 15px;
}
.exabottom{
}
.exabottom {
width: 100%;
padding: 10px 30px;
}
.bottoml{
}
.bottoml {
font-size: 20px;
float: left;
}
.bottomr{
}
.bottomr {
width: 80%;
height: 100px;
overflow: auto;
float: left;
}
.exatwo{
}
.exatwo {
width: 100%;
height: 600px;
margin-bottom: 10px;
margin-top: 20px;
}
.exatwobanner{
}
.exatwobanner {
width: 92%;
height: 35px;
margin-left: 4%;
background: url(../../assets/exa1.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
.exatwoul{
}
.exatwoul {
width: 100%;
height: 525px;
overflow: auto;
padding: 0 30px;
margin-top: 25px;
}
.table{
table-layout:fixed;
}
.table {
table-layout: fixed;
border: none;
border-collapse: collapse;
background: white;
text-align: center;
margin-top: 10px;
thead{
tr{
thead {
tr {
color: white;
height: 50px;
th{
th {
color: #383737;
background: #fff;
font-size: 20px;
min-width: 100px;
position:-webkit-sticky;
position:sticky;
top:0;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 3;
}
}
}
tbody{
tr{
tbody {
tr {
height: 30px;
color: black;
td{
td {
width: 12%;
font-size: 14px;
position:-webkit-sticky; position:sticky;
position: -webkit-sticky;
position: sticky;
}
}
tr:nth-child(odd){
tr:nth-child(odd) {
background: #ededed;
color: #188df0;
}
tr:nth-child(even){
tr:nth-child(even) {
height: 40px;
}
}
}
}
</style>
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzCardZ.vue 0 → 100644
View file @ 5dbe58b3
<!--
* @Author: your name
* @Date: 2022-03-25 17:15:31
* @LastEditTime: 2022-03-29 10:09:52
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzCard.vue
-->
<template>
<div class="czcard">
<my-collapse
title="场站"
ref="myCollapse"
:listNum="czList.filter((item) => item.show).length"
>
<template v-slot:chackbox>
<FilterVue
:filterList="filterList"
@fliterTypeChange="fliterTypeChange"
/>
</template>
<template #container>
<div class="container" :class="{ start: getShowNum }">
<div
v-for="(item, index) in czList"
:key="item.deviceName + index"
v-show="item.show"
>
<CzItem ref="czItem" :list="item" v-if="item.show" />
</div>
</div>
</template>
</my-collapse>
</div>
</template>
<script>
import MyCollapse from "./MyCollapse";
import CzItem from "./CzItem";
import FilterVue from "./FilterVue";
export default {
// 场站
components: {
MyCollapse,
CzItem,
FilterVue,
},
data() {
return {
carHide: true,
addStartNum: 3,
filterList: [
{ value: "全部", count: 6, type: "all" },
{ value: "加气站", count: 2, type: 1 },
{ value: "门站", count: 0, type: 2 },
{ value: "调压站", count: 0, type: 3 },
{ value: "储备站", count: 0, type: 4 },
{ value: "气化站", count: 4, type: 5 },
],
deviceTypeArr: [1, 2, 3, 4],
czList: [
{
deviceName: "中诚燃气门站",
state: 1,
a: 12,
b: 57.7,
c: 0.46,
d: 54.2,
// e: 56,
image: "",
show: true,
type: 1,
},
{
deviceName: "平山中燃气站",
state: 1,
a: 13.1,
b: 64.3,
c: 0.51,
d: 48.2,
// e: 56,
image: "",
show: true,
type: 1,
},
// {
// deviceName: "门站",
// state: 2,
// a: 25,
// b: 56,
// c: 54,
// d: 15,
// e: 56,
// image: "",
// show: true,
// type: 2,
// },
// {
// deviceName: "调压站",
// state: 1,
// a: 25,
// b: 56,
// c: 54,
// d: 15,
// e: 56,
// image: "",
// show: true,
// type: 3,
// },
// {
// deviceName: "储备站",
// state: 1,
// a: 25,
// b: 56,
// c: 54,
// d: 15,
// e: 56,
// image: "",
// show: true,
// type: 4,
// },
{
deviceName: "隆和气化站",
state: 1,
a: 15.2,
b: 52.9,
c: 0.49,
d: 54,
// e: 56,
image: "",
show: true,
type: 5,
},
{
deviceName: "温塘气化站",
state: 1,
a: 12.6,
b: 61.8,
c: 0.47,
d: 49,
// e: 56,
image: "",
show: true,
type: 5,
},
{
deviceName: "93701部队气化站",
state: 1,
a: 14.6,
b: 56.5,
c: 0.58,
d: 47.6,
// e: 56,
image: "",
show: true,
type: 5,
},
{
deviceName: "隆城绿都气化站",
state: 1,
a: 12.5,
b: 54,
c: 0.52,
d: 50,
// e: 56,
image: "",
show: true,
type: 5,
},
// {
// deviceName: "储备站",
// state: 1,
// a: 25,
// b: 56,
// c: 54,
// d: 15,
// e: 56,
// image: "",
// show: true,
// type: 4,
// },
],
};
},
computed: {
// 计算有多少个展示的对象,如果小于3个,就把justify-content: space-between;取消
getShowNum() {
return this.czList.filter((item) => item.show).length < this.addStartNum;
},
},
mounted() {
this.changeAddStartNum();
},
methods: {
hide() {
this.carHide = !this.carHide;
// this.myCollapse();
},
// 根据父子元素自动计算是否需要添加值start
changeAddStartNum() {
const czItem = this.$refs.czItem;
let czItemWidth;
// 组件有可能是一个数组，所以要这样判断
if (Array.isArray(czItem)) {
const { width } = czItem[0].$el.getBoundingClientRect();
czItemWidth = width;
} else {
const { width } = czItem.$el.getBoundingClientRect();
czItemWidth = width;
}
// 取出collap的宽
const { width: CollapseWidth } =
this.$refs.myCollapse.$el.getBoundingClientRect();
// 得到最小的承载数量
this.addStartNum = Math.floor(CollapseWidth / czItemWidth);
},
//过滤选择
fliterTypeChange(data) {
this.filter([...data]);
// 改变大小,因为动画原因加个延迟
// this.$nextTick(() => {
// setTimeout(()=>{
// this.myCollapse()
// }, 300);
// });
},
myCollapse() {
// this.$refs.myCollapse.getHeight();
},
// 过滤对象
filter(arr) {
this.czList.forEach((item) => {
const { type } = item;
if (arr.includes(type)) {
item.show = true;
} else {
item.show = false;
}
});
},
},
};
</script>
<style lang="scss" scoped>
.container {
width: 100%;
flex-wrap: wrap;
display: flex;
&.start {
justify-content: flex-start;
& > div {
// margin-right: 50px;
}
}
& > div {
margin-bottom: 20px;
margin-left: 1%;
width: 24%;
min-width: 295px;
border: 1px solid #e6ebf5;
border-radius: 4px;
box-sizing: border-box;
}
}
.flex {
display: flex;
justify-content: space-between;
}
</style>
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/FilterVue.vue
View file @ 5dbe58b3
<!--
* @Author: your name
* @Date: 2022-03-29 09:41:23
* @LastEditTime: 2022-03-29 11:08:25
* @LastEditors: Please set LastEditors
* @LastEditTime: 2022-08-25 17:06:40
* @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/Filter.vue
-->
......@@ -14,7 +14,7 @@
<span
class="text"
:class="{
active: deviceTypeArr.length == filterList.length - 1
active: deviceTypeArr.length == filterList.length - 1,
}"
@click="fliterTypeChange(item)"
>{{ item.value }}
......@@ -83,6 +83,11 @@ export default {
.fliter-vue {
display: flex;
}
@media (max-width: 1100px) {
.filter {
margin-right: 20px !important;
}
}
.filter {
margin-right: 30px;
margin-top: 5px;
......@@ -112,7 +117,7 @@ export default {
font-size: 10px;
position: absolute;
left: -12px;
color: rgba(0, 0, 0, .5);
color: rgba(0, 0, 0, 0.5);
}
}
&.active {
......
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/TopCard.vue
View file @ 5dbe58b3
<!--
* @Author: your name
* @Date: 2022-03-25 13:46:23
* @LastEditTime: 2022-04-28 15:59:44
* @LastEditors: Please set LastEditors
* @LastEditTime: 2022-08-25 15:32:17
* @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData.vue
-->
......
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/TopCardZ.vue 0 → 100644
View file @ 5dbe58b3
<!--
* @Author: your name
* @Date: 2022-03-25 13:46:23
* @LastEditTime: 2022-08-25 16:27:49
* @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData.vue
-->
<template>
<div class="">
<div class="top-card flex">
<div
class="box-card"
v-for="(item, index) in cardList"
:key="item.deviceName"
>
<div class="top flex">
<div class="top-left">
<span
class="iconfont"
:class="`icon-` + deviceIconList[index]"
></span>
<span class="text">{{ item.deviceName }}</span>
</div>
<div class="top-right flex">
<span class="text">总数</span>
<span class="count">{{ item.count }}</span>
</div>
</div>
<div class="middle flex">
<div class="first">正常</div>
<!-- 2是探测器，探测器只有报警，没有高低报 -->
<template v-if="index != 2">
<div>高报</div>
<div>低报</div>
</template>
<template v-else>
<div>报警</div>
</template>
<div class="last">离线数</div>
</div>
<div class="bottom flex">
<div class="first" v-if="index != 2">8</div>
<div class="first" v-if="index == 2">1238</div>
<!-- 2是探测器，探测器只有报警，没有高低报 -->
<template v-if="index == 0">
<div>2</div>
<div>1</div>
</template>
<template v-if="index == 1">
<div>0</div>
<div>0</div>
</template>
<template v-if="index == 2">
<div>0</div>
</template>
<div class="last" v-if="index != 1">0</div>
<div class="last" v-if="index == 1">1</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "charsData",
props: {
cardList: {
type: Array,
},
},
data() {
return {
deviceIconList: ["ylb", "llj", "tcq"],
};
},
};
</script>
<style lang="scss" scoped>
.top-card {
margin-bottom: 22px;
& > div {
flex: 1;
margin-right: 20px;
height: 212px;
background: #ffffff;
box-shadow: 2px 0px 12px 1px rgba(0, 0, 0, 0.1);
border-radius: 4px 4px 4px 4px;
border: 1px solid #e6ebf5;
box-sizing: border-box;
// padding: 34px 40px 38px;
padding: 34px 0 38px;
.top {
font-size: 15px;
margin-bottom: 46px;
padding: 0 30px;
// justify-content:space-between;
.top-left {
color: #1890ff;
.iconfont {
font-size: 20px;
margin-right: 4px;
}
.text {
font-weight: 500;
}
}
.top-right {
// padding-top: 5px;
font-size: 15px;
.text {
font-size: 16px;
font-weight: 500;
margin-right: 2px;
padding-top: 3px;
}
.count {
color: #1890ff;
font-size: 22px;
letter-spacing: 1px;
}
}
}
&:last-child {
margin-right: 0;
}
}
.middle,
.bottom {
// justify-content: space-around;
& > div {
// flex: 1;
text-align: center;
font-size: 16px;
flex: 1;
&.first {
// text-align: left;
}
&.last {
// text-align: right;
}
}
}
.middle {
margin-bottom: 20px;
& > div {
font-weight: 500;
}
}
}
.flex {
display: flex;
justify-content: space-between;
}
</style>
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/index.vue
View file @ 5dbe58b3
<!--
* @Author: your name
* @Date: 2022-03-25 13:46:23
* @LastEditTime: 2022-03-28 15:05:04
* @LastEditors: Please set LastEditors
* @LastEditTime: 2022-08-25 17:02:07
* @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData.vue
-->
<template>
<div class="chars-data">
<TopCard :cardList="cardList"/>
<CzCard/>
<TopCard v-if="windowInnerWidth>1100" :cardList="cardList"/>
<TopCardZ v-else :cardList="cardList"/>
<CzCard v-if="windowInnerWidth>1100" />
<CzCardZ v-else />
<Cg/>
<Fmj/>
<Tyx/>
......@@ -18,7 +20,9 @@
<script>
import TopCard from "./TopCard";
import TopCardZ from "./TopCardZ";
import CzCard from "./CzCard";
import CzCardZ from "./CzCardZ";
import Cg from "./Cg";
import Fmj from "./Fmj";
import Tyx from "./Tyx";
......@@ -26,7 +30,9 @@ export default {
name: "charsData",
components: {
TopCard,
TopCardZ,
CzCard,
CzCardZ,
Cg,
Fmj,
Tyx
......@@ -39,8 +45,12 @@ export default {
{ deviceName: "探测器", count: 1238 },
],
deviceIconList: ["ylb", "llj", "tcq"],
windowInnerWidth:0,
};
},
created() {
this.windowInnerWidth = window.innerWidth;
},
};
</script>
......
gassafetyprogress-web/src/views/operationMonitor/monitorData/index.vue
View file @ 5dbe58b3
<!--
* @Author: your name
* @Date: 2022-03-08 17:28:57
* @LastEditTime: 2022-03-28 17:20:55
* @LastEditors: Please set LastEditors
* @LastEditTime: 2022-08-25 15:29:31
* @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/index.vue
-->
......@@ -37,7 +37,7 @@ export default {
},
computed: {
currentTabComponent() {
return this.isCom == 0 ? tabledata : charsData;
return this.isCom === 0 ? tabledata : charsData;
},
},
methods: {
......
gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/components/LeftZ.vue 0 → 100644
View file @ 5dbe58b3
<!--
* @Author: your name
* @Date: 2022-04-11 15:07:47
* @LastEditTime: 2022-08-25 11:04:17
* @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/topChars/left.vue
-->
<template>
<div class="charsCom all-flex-h">
<div class="title">巡检巡查计划</div>
<div class="two all-flex">
<div class="left">
<div class="first">
<span class="text">巡检年度计划</span>
<span>23次</span>
</div>
<div class="second all-flex">
<div class="left">泄露监测</div>
<div class="right">防腐层监测</div>
</div>
<div class="third all-flex">
<div class="left">15次</div>
<div class="right">8次</div>
</div>
<div class="first fourth">
<div class="">泄漏检测完成比例</div>
</div>
<div class="fifth">
<div class="contant">
<Chars></Chars>
</div>
</div>
</div>
<div class="right">
<div class="first">
<span class="text">巡检完成情况</span>
<span>18次</span>
</div>
<div class="second all-flex">
<div class="left">泄露监测</div>
<div class="right">防腐层监测</div>
</div>
<div class="third all-flex">
<div class="left">10次</div>
<div class="right">8次</div>
</div>
<div class="first fourth">
<div class="">防腐层检测完成比例</div>
</div>
<div class="fifth">
<div class="contant">
<Chars color="#00C3F1"></Chars>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Chars from "@/components/allCharsCom/Chars";
export default {
components: {
Chars,
},
};
</script>
<style lang="scss" scoped>
.charsCom {
width: 100%;
height: 100%;
color: #333333;
}
.title {
text-align: center;
font-size: 18px;
margin-bottom: 7px;
}
.two {
flex: 1;
> .left {
// margin-right: 70px;
}
> .right {
}
> div {
font-size: 10px;
width: 50%;
flex: 1;
overflow: hidden;
// display: flex;
// flex-direction: column;
}
.left,
.right {
display: flex;
flex-direction: column;
justify-content: space-between;
.first {
margin-bottom: 6px;
text-align: left;
.text {
display: inline-block;
margin-right: 8px;
}
}
.second {
width: 100%;
height: 20px;
line-height: 20px;
box-sizing: border-box;
box-shadow: 0px 0px 3px 1px #dddddd;
margin-bottom: 10px;
> div {
// flex: 1;
text-align: center;
font-size: 10px;
&.left {
color: #1d8cf3;
}
&.right {
color: #00c3f1;
}
}
}
.third {
text-align: center;
// width: 213px;
width: 100%;
margin-bottom: 10px;
}
.fifth {
flex: 1;
// background: red;
padding-top: 5px;
.contant {
width: 120px;
height: 94px;
margin: 0 auto;
}
}
}
}
</style>
gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/components/MapBottomZ.vue 0 → 100644
View file @ 5dbe58b3
<!--
* @Author: your name
* @Date: 2022-04-13 10:27:33
* @LastEditTime: 2022-08-25 15:25:15
* @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/components/Bottom.vue
-->
<template>
<div class="map-bottom-wrapper">
<div id="xjxcmap" class="map"></div>
<div class="left-box all-flex-h">
<div class="top">
<div class="title">巡检任务查看</div>
<div class="wrapper">
<div class="top-wrapper flex">
<div class="input-wrapper">
<el-input
v-model="searchData.task"
placeholder="点击输入任务名称"
suffix-icon="el-icon-search"
size="mini"
>
</el-input>
</div>
<div class="enter">
<el-button size="mini" @click="enter"
><span class="text">确认</span></el-button
>
</div>
<div class="reset">
<el-button size="mini" @click="reset">
<span class="text">重置</span>
<i class="el-icon-refresh el-icon--right"></i>
</el-button>
</div>
</div>
<div class="middle-wrapper flex">
<div class="left">
<el-select
v-model="searchData.unt"
placeholder="执行单位"
size="mini"
>
<el-option
size="mini"
v-for="item in unt"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="middle">
<el-select
v-model="searchData.type"
placeholder="任务类型"
size="mini"
>
<el-option
v-for="item in type"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="right">
<el-select
v-model="searchData.state"
placeholder="任务状态"
size="mini"
>
<el-option
v-for="item in state"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</div>
<div class="bottom-wrapper">
<el-date-picker
style="width: 100%"
v-model="searchData.value"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="['00:00:00', '23:59:59']"
size="mini"
value-format="yyyy-MM-dd"
>
</el-date-picker>
</div>
</div>
</div>
<div class="bottom all-flex-h">
<div ref="table" class="table">
<el-table
v-loading="loading"
:data="
tableData.filter((item, index) => {
return index >= (page - 1) * limit && index < page * limit;
})
"
style="width: 100%"
:height="tableScrollH"
ref="t"
class="t"
>
<el-table-column fixed prop="name" label="任务名称" width="90">
<template v-slot="scope">
<div :title="scope.row.name" class="zzz">
{{ scope.row.name }}
</div>
</template>
</el-table-column>
<el-table-column prop="unt" label="执行单位" width="90">
<template v-slot="scope">
<div :title="scope.row.unt" class="zzz">
{{ unt[scope.row.unt - 1].label }}
</div>
</template>
</el-table-column>
<el-table-column prop="type" label="任务类型" width="90">
<template v-slot="scope">
<div :title="scope.row.type" class="zzz">
{{ type[scope.row.type - 1].label }}
</div>
</template>
</el-table-column>
<el-table-column prop="state" label="任务状态" width="90">
<template v-slot="scope">
<div :title="scope.row.state" class="zzz">
{{ state[scope.row.state - 1].label }}
</div>
</template>
</el-table-column>
<el-table-column prop="handle" label="操作" width="90">
<template v-slot="scope">
<el-button @click="mapDo(scope.row)" type="text"
><span :class="{ target: target == scope.row.id }"
>巡检信息</span
></el-button
>
</template>
</el-table-column>
</el-table>
</div>
<div class="page">
<pagination
style="width: 100%; padding: 0px !important"
:small="true"
:total="tableData.length"
:page="page"
:limit.sync="limit"
@pagination="getList"
layout="prev, pager, next, jumper"
/>
</div>
</div>
</div>
</div>
</template>
<script>
import { XjxcMap } from "@/utils/mapClass/xjxcmap";
import Null from "@/components/bigWindow/Null";
import moment from "moment";
import Pipe from "./Pipe.vue";
let arr = [
{
id: 1,
name: "燃气检测",
unt: 1,
type: 2,
state: 3,
utl: 2,
value: ["2022-4-1", "2022-4-12"],
path: "[[114.210488,38.257287],[114.21087,38.257218],[114.210664,38.25583],[114.213991,38.255507],[114.213962,38.256362],[114.213962,38.254397],[114.213962,38.255553],[114.213991,38.25412],[114.212137,38.254189],[114.212137,38.254836],[114.210812,38.254767],[114.212107,38.254836],[114.212166,38.254212],[114.213874,38.25412],[114.213991,38.255553],[114.218261,38.255137],[114.219291,38.254952],[114.218585,38.254698],[114.219321,38.254952],[114.224355,38.254605],[114.224355,38.252432],[114.224385,38.254628],[114.22306,38.254698],[114.22462,38.255091],[114.228566,38.254628],[114.224532,38.255091],[114.224385,38.256986],[114.218938,38.257287],[114.224385,38.25701],[114.224296,38.258882]]",
},
{
id: 2,
name: "燃气泄漏检测",
unt: 1,
type: 2,
state: 2,
utl: 3,
value: ["2022-4-1", "2022-4-12"],
path: "[[114.183586,38.264945],[114.181374,38.264866],[114.181441,38.265655],[114.181374,38.264866],[114.177487,38.265471],[114.177554,38.265997],[114.176851,38.265997],[114.176851,38.26626],[114.176717,38.265708],[114.169353,38.267055],[114.169793,38.272073],[114.169353,38.267038],[114.169333,38.267038],[114.165557,38.267697]]",
},
{
id: 3,
name: "入户安检",
unt: 2,
type: 3,
state: 1,
utl: 2,
value: ["2022-4-1", "2022-4-12"],
path: "[[114.206628,38.25932],[114.206688,38.259038],[114.205715,38.258193],[114.206695,38.259009],[114.206493,38.256513],[114.206194,38.256466],[114.206013,38.254239],[114.204974,38.254364],[114.205972,38.254258],[114.205511,38.250257],[114.196482,38.250445],[114.205491,38.250257],[114.21296,38.24977],[114.205511,38.250257],[114.205089,38.246589],[114.20471,38.24654],[114.204289,38.243749],[114.204709,38.243733],[114.207324,38.243577],[114.204669,38.243718],[114.204528,38.242402],[114.204208,38.240535],[114.204549,38.242449],[114.204649,38.243689],[114.20509,38.246606]]",
},
{
id: 4,
name: "探测器报警",
unt: 2,
type: 1,
state: 3,
utl: 1,
value: ["2022-4-1", "2022-4-12"],
},
{
id: 5,
name: "安装家用气体探测器",
unt: 1,
type: 3,
state: 3,
utl: 3,
value: ["2022-4-1", "2022-4-12"],
},
{
id: 6,
name: "入户安检",
unt: 1,
type: 2,
state: 3,
utl: 3,
value: ["2022-4-1", "2022-4-12"],
},
{
id: 7,
name: "探测器消警",
unt: 1,
type: 1,
state: 2,
utl: 2,
value: ["2022-4-1", "2022-4-12"],
},
{
id: 8,
name: "燃气泄漏",
unt: 1,
type: 3,
state: 2,
utl: 3,
},
{
id: 9,
name: "家用探测器报警",
unt: 1,
type: 2,
state: 3,
utl: 2,
},
{
id: 10,
name: "气体泄漏",
unt: 1,
type: 2,
state: 3,
utl: 3,
},
{
id: 11,
name: "火灾报警",
unt: 1,
type: 2,
state: 1,
utl: 2,
},
{
id: 12,
name: "入户安检",
unt: 1,
type: 1,
state: 3,
utl: 3,
},
{
id: 13,
name: "入户安检",
unt: 1,
type: 3,
state: 3,
utl: 4,
},
{
id: 14,
name: "气体泄漏",
unt: 1,
type: 3,
state: 1,
utl: 2,
},
{
id: 15,
name: "爆炸",
unt: 1,
type: 2,
state: 2,
utl: 4,
},
{
id: 16,
name: "爆炸",
unt: 1,
type: 3,
state: 3,
utl: 1,
},
{
id: 17,
name: "有毒气体泄漏",
unt: 1,
type: 3,
state: 1,
utl: 3,
},
{
id: 18,
name: "火灾",
unt: 1,
type: 3,
state: 4,
utl: 3,
},
{
id: 19,
name: "报警",
unt: 1,
type: 1,
state: 3,
utl: 3,
},
];
export default {
data() {
return {
map: null,
loading: false,
// 点击巡检信息的选中状态
target: null,
// 任务类型选项
unt: [
{ value: 1, label: "中燃翔科技" },
{ value: 2, label: "中诚燃气" },
],
type: [
{ value: 1, label: "入户安检" },
{ value: 2, label: "巡检" },
{ value: 3, label: "其他" },
],
state: [
{ value: 1, label: "派发中" },
{ value: 2, label: "已接单" },
{ value: 3, label: "已反馈" },
{ value: 4, label: "已归档" },
],
searchData: {
// 任务名称
task: "",
unt: "",
type: "",
state: "",
value: [],
},
tableScrollH: 100,
// 表格数据
tableData: arr,
page: 1,
limit: 10,
};
},
mounted() {
this.mapInit();
this.$nextTick(() => {
const dom = document.getElementsByClassName("t")[0];
dom.style.height = this.$refs.table.getBoundingClientRect().height + "px";
});
console.log(moment("2022-11-29").valueOf());
},
methods: {
mapInit() {
this.map = new XjxcMap("xjxcmap", {}, this);
},
reset() {
this.searchData = {
// 任务名称
task: "",
unt: "",
type: "",
state: "",
value: [],
};
this.enter();
},
enter() {
this.loading = true;
this.map.infowindowClose();
this.target = null;
this.map.remove();
setTimeout(() => {
this.page = 1;
const { task, unt, type, state, value } = this.searchData;
this.tableData = arr.filter((item) => {
const a = item.name.indexOf(task) >= 0;
const b = unt ? item.unt == unt : true;
const c = type ? item.type == type : true;
const d = state ? item.state == state : true;
const e =
value.length > 0
? Array.isArray(item.value) &&
moment(value[0]).valueOf() <= moment(item.value[0]).valueOf()
: true;
const f =
value.length > 0
? Array.isArray(item.value) &&
moment(value[1]).valueOf() >= moment(item.value[1]).valueOf()
: true;
return a && b && c && d && e && f;
});
this.loading = false;
}, 200);
},
getList(e) {
console.log(e);
this.loading = true;
setTimeout(() => {
this.page = e.page;
this.loading = false;
}, 200);
},
mapDo(data) {
// 暂无信息
if (!Array.isArray(eval(data.path))) {
this.msgError("暂无巡检信息");
return;
}
this.target = data.id;
this.map.remove();
this.map.create(data, Null, Pipe);
},
},
};
</script>
<style lang="scss" scoped>
.map-bottom-wrapper {
height: 100%;
position: relative;
& > .map {
height: 100%;
}
& > .left-box {
width: 320px;
position: absolute;
top: 0;
bottom: 0;
> .top {
width: 100%;
// height: 143px;
padding-bottom: 10px;
margin-bottom: 9px;
border-radius: 3px;
box-shadow: 2px 0px 10px 1px rgba(0, 0, 0, 0.1);
background: #fff;
.title {
padding: 8px 0 4px 15px;
border-bottom: 1px solid rgba(231, 231, 231, 1);
font-size: 21px;
font-weight: 400;
}
.wrapper {
padding: 6px 12px 0px 12px;
.top-wrapper {
margin-bottom: 6px;
div {
&.input-wrapper {
width: 337px;
margin-right: 3px;
}
&.enter,
&.reset {
// flex:1;
span.text {
font-size: 12px;
color: #333333;
}
}
}
}
.middle-wrapper {
width: 100%;
margin-bottom: 6px;
> div {
width: 150px;
// background: red;
}
}
}
}
> .bottom {
flex: 1;
border-radius: 3px;
box-shadow: 2px 0px 10px 1px rgba(0, 0, 0, 0.1);
background: #fff;
box-sizing: border-box;
padding: 12px 20px;
padding-bottom: 0;
justify-content: space-between;
.table {
flex: 1;
background-color: red;
.target {
color: #ffc337;
font-weight: 600;
}
}
.page {
// height: 100px;
width: 100%;
}
}
}
}
</style>
\ No newline at end of file
gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/components/MiddleZ.vue 0 → 100644
View file @ 5dbe58b3
<!--
* @Author: your name
* @Date: 2022-04-11 15:07:47
* @LastEditTime: 2022-08-25 15:07:26
* @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/topChars/left.vue
-->
<template>
<div class="charsCom all-flex-h">
<div class="title">隐患整改</div>
<div class="two all-flex">
<div class="left">
<div class="first">
<span class="text">隐患发现情况</span>
<span>20次</span>
</div>
<div class="second all-flex">
<div class="left">隐患总数</div>
<div class="right">隐患已整改数</div>
</div>
<div class="third all-flex">
<div class="left">13次</div>
<div class="right">7次</div>
</div>
</div>
<div class="right">
<div class="first">
<span class="text">隐患整改率</span>
</div>
<div class="chars-box">
<Chars color="#604AFF"></Chars>
</div>
</div>
</div>
<div class="three all-flex-h">
<div class="first">隐患原因</div>
<div ref="myChartWidth" class="chars-box">
<Chars :options="bottomOptions()" />
</div>
</div>
</div>
</template>
<script>
import Chars from "@/components/allCharsCom/Chars";
export default {
components: {
Chars,
},
data() {
return {
bottomData: [
[
{ name: "裂缝", value: 8, color: "#604AFF" },
{ name: "管道称重", value: 16, color: "#FFC337" },
{ name: "其他", value: 13, color: "#86FF5B" },
{ name: "腐蚀", value: 7, color: "#03C4F1" },
{ name: "漏气", value: 5, color: "#1F8DF3" },
],
],
};
},
methods: {
bottomOptions() {
return {
series: this.bottomData.map((data, idx) => {
const rich = {};
data
.map((item) => ({
fontsize: 12,
color: item.color,
}))
.forEach((item, index) => {
rich[`dataIndex${index}`] = item;
});
return {
type: "pie",
radius: ["68%", "80%"],
color: data.map((item) => item.color),
itemStyle: {
borderWidth: 2,
borderRadius: 10,
borderColor: "#fff",
},
label: {
alignTo: "edge",
// formatter: "{name|{b}}\n{num|{c} 个}",
formatter: (parm) => {
return `{dataIndex${parm.dataIndex}|${parm.data.name}}\n{dataIndex${parm.dataIndex}|${parm.data.value}}`;
},
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,
rich,
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80,
},
labelLayout: (params) => {
const { width } = this.$refs.myChartWidth.getBoundingClientRect();
const isLeft = params.labelRect.x < width / 2;
const points = params.labelLinePoints;
console.log("points",points)
// Update the end point.
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points,
};
},
data: data,
};
}),
};
},
},
};
</script>
<style lang="scss" scoped>
.charsCom {
width: 100%;
height: 100%;
color: #333333;
}
.title {
text-align: center;
font-size: 18px;
margin-bottom: 7px;
}
.two {
// flex: 1;
> .left {
// margin-right: 70px;
margin-left:10px;
.first {
margin-bottom: 6px;
width: 150px;
font-size: 10px;
}
.second {
width: 140px;
height: 20px;
line-height: 20px;
box-sizing: border-box;
box-shadow: 0px 0px 3px 1px #dddddd;
margin-bottom: 10px;
font-size: 10px;
> div {
// flex: 1;
text-align: center;
&.left {
color: #1d8cf3;
}
&.right {
color: #00c3f1;
}
}
}
.third {
text-align: center;
width: 150px;
margin-bottom: 10px;
font-size: 10px;
}
}
> .right {
.first {
text-align: center !important;
font-size: 10px;
}
.chars-box {
width: 70px;
height: 70px;
margin: 0 auto;
}
}
> div {
font-size: 16px;
flex: 1;
// display: flex;
// flex-direction: column;
}
.left,
.right {
// display: flex;
// flex-direction: column;
// justify-content: space-between;
.first {
text-align: left;
.text {
display: inline-block;
margin-right: 8px;
}
}
}
}
.three {
font-size: 16px;
flex: 1;
// background: red;
.chars-box {
flex: 1;
}
}
</style>
gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/components/RightZ.vue 0 → 100644
View file @ 5dbe58b3
<!--
* @Author: your name
* @Date: 2022-04-11 15:07:47
* @LastEditTime: 2022-08-25 15:15:32
* @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/topChars/left.vue
-->
<template>
<div class="charsCom all-flex-h">
<div class="title">第三方施工情况</div>
<div class="two flex">
<div class="left">已备案</div>
<div class="middle">已完成</div>
<div class="right">进行中</div>
</div>
<div class="three flex">
<div class="left zzz">6</div>
<div class="middle zzz">4</div>
<div class="right zzz">2</div>
</div>
<div class="four all-flex-h">
<div class="top flex">
<div>施工单位</div>
<div>备案时间</div>
<div>施工描述</div>
</div>
<div class="scroll-wrapper">
<Scroll :dataList="arr">
<template v-slot="{ dataList }">
<ScroItem v-for="(item,index) in dataList" :key="item.companyName+index" :data="item" :index="index"/>
</template>
</Scroll>
</div>
</div>
</div>
</template>
<script>
import Scroll from "./Scroll";
import ScroItem from "./ScroItem";
export default {
components: {
Scroll,
ScroItem
},
data() {
return {
arr: [
{
companyName: "中燃祥科",
time: "2022-01-11 07:29",
text: "安装探头",
},
{
companyName: "河北泽宏",
time: "2022-01-13 07:29",
text: "安装管道",
},
{
companyName: "河北泽宏科技股份有限公司",
time: "2022-01-14 07:29",
text: "气体报警器",
},
{
companyName: "政府部门",
time: "2022-01-15 07:29",
text: "安装设备监控",
},
{
companyName: "中诚然气",
time: "2022-01-17 07:29",
text: "安装管道",
},
{
companyName: "中诚然气",
time: "2022-02-20 07:29",
text: "轻工路1号施工",
},
{
companyName: "中燃祥科",
time: "2022-02-21 07:29",
text: "轻工路1号施工",
},
{
companyName: "河北泽宏",
time: "2022-03-11 07:29",
text: "安装管道",
},
{
companyName: "河北泽宏",
time: "2022-04-16 07:29",
text: "安装设备监控",
},
// {
// companyName: 123,
// time: "2022-04-09 07:29",
// text: "大师傅阿斯蒂芬阿斯蒂芬Î",
// },
// {
// companyName: 123,
// time: "2022-04-09 07:29",
// text: "大师傅阿斯蒂芬阿斯蒂芬Î",
// },
// {
// companyName: 123,
// time: "2022-04-09 07:29",
// text: "大师傅阿斯蒂芬阿斯蒂芬Î",
// },
// {
// companyName: 123,
// time: "2022-04-09 07:29",
// text: "大师傅阿斯蒂芬阿斯蒂芬Î",
// },
// {
// companyName: 123,
// time: "2022-04-09 07:29",
// text: "大师傅阿斯蒂芬阿斯蒂芬Î",
// },
],
};
},
mounted() {},
};
</script>
<style lang="scss" scoped>
.charsCom {
width: 100%;
height: 100%;
}
.title {
text-align: center;
font-size: 18px;
margin-bottom: 22px;
}
.two {
box-shadow: 0px 0px 3px 1px #dddddd;
height: 20px;
font-size: 10px;
margin-bottom: 10px;
> div {
line-height: 20px;
flex: 1;
text-align: center;
&.left {
color: #1f8df3;
}
&.middle {
flex: 1;
color: #03c4f1;
}
&.right {
color: #ffc337;
}
}
}
.three {
font-size: 10px;
margin-bottom: 5px;
> div {
flex: 1;
line-height: 24px;
text-align: center;
}
}
.four {
flex: 1;
font-size: 10px;
// 这个解决子元素overhidden失效问题
min-height: 0;
>.top {
background: rgba(24, 144, 255, 0.1);
height: 29px;
line-height: 29px;
> div {
flex: 1;
text-align: center;
}
}
.scroll-wrapper {
// font-size: 14px;
flex: 1;
// 这个解决子元素overhidden失效问题
min-height: 0;
// background: red;
// overflow: hidden;
// position:relative;
}
}
</style>
gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/index.vue
View file @ 5dbe58b3
<!--
* @Author: your name
* @Date: 2022-04-11 14:11:04
* @LastEditTime: 2022-04-14 10:45:52
* @LastEditors: Please set LastEditors
* @LastEditTime: 2022-08-25 15:24:33
* @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/index.vue
-->
......@@ -11,18 +11,22 @@
<div class="wrapper flex-h">
<div class="top flex">
<div class="left">
<Left />
<Left v-if="windowInnerWidth > 1100" />
<LeftZ v-else />
</div>
<div class="middle">
<Middle />
<div class="middle" :class="{ z: windowInnerWidth < 1100 }">
<Middle v-if="windowInnerWidth > 1100" />
<MiddleZ v-else />
</div>
<div class="right">
<Right />
<div class="right" :class="{ z: windowInnerWidth < 1100 }">
<Right v-if="windowInnerWidth > 1100" />
<RightZ v-else />
</div>
</div>
<div class="middle"></div>
<div class="bottom">
<MapBottom/>
<MapBottom v-if="windowInnerWidth > 1100" />
<MapBottomZ v-else />
</div>
</div>
</div>
......@@ -30,24 +34,33 @@
<script>
import Left from "./components/Left";
import LeftZ from "./components/LeftZ";
import Middle from "./components/Middle";
import MiddleZ from "./components/MiddleZ";
import Right from "./components/Right";
import RightZ from "./components/RightZ";
import MapBottom from "./components/MapBottom";
import MapBottomZ from "./components/MapBottomZ";
export default {
components: {
Left,
LeftZ,
Middle,
MiddleZ,
Right,
MapBottom
RightZ,
MapBottom,
MapBottomZ
},
data() {
return {
windowInnerWidth: 0,
};
},
mounted(){
}
created() {
this.windowInnerWidth = window.innerWidth;
},
mounted() {},
};
</script>
......@@ -72,14 +85,24 @@ export default {
.left {
width: 36.5%;
padding: 15px 24px 19px;
overflow: hidden;
}
.middle {
width: 35.3%;
padding: 15px 80px 19px 71px;
// padding: 15px 24px 19px;
overflow: hidden;
&.z {
padding: 15px 24px 19px;
}
}
.right {
width: 25.2%;
padding: 15px 29px;
overflow: hidden;
&.z {
padding: 15px 10px;
}
}
> div {
// box-shadow: 2px 0px 13px 1px rgba(0, 0, 0, 0.1);
......@@ -87,15 +110,20 @@ export default {
border-radius: 3px;
}
}
>.middle {
> .middle {
margin: 5px 0;
background: repeating-linear-gradient(135deg, transparent, transparent 3px, #D6D6D6 3px, #D6D6D6 8px);
background: repeating-linear-gradient(
135deg,
transparent,
transparent 3px,
#d6d6d6 3px,
#d6d6d6 8px
);
height: 2px;
}
.bottom {
flex: 1;
background-color: red;
}
> div {
// height: 50%;
......
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