Skip to content

Z
zh-baseversion-project
Commit a7ddacbe authored by 纪泽龙's avatar 纪泽龙
Browse files
Options

Merge branch 'jzl'

parents 019b5da0 9a2b75e9
Hide whitespace changes
Inline Side-by-side
Showing with 478 additions and 351 deletions
zh-baseversion-web/src/assets/styles/all.scss
View file @ a7ddacbe
......@@ -77,6 +77,9 @@
}
.bigwindow {
.el-table__header {
width: 350px !important;
}
// 全局表格样式
.el-table {
......@@ -93,6 +96,23 @@
}
.el-table__body-wrapper {
.el-table__body {
border-spacing: 0 5px;
font-size: 14px;
td:nth-child(4) .cell {
text-align: center;
}
}
.el-table__row {
width: 100%;
// display: block;
vertical-align: 5px;
height: 36px;
width: 350px;
}
.el-table__row:nth-child(2n + 1) {
background-color: #e6e6e6;
......@@ -166,13 +186,21 @@
.el-table__header-wrapper,
.el-table__fixed-header-wrapper {
tr {
background-color: #213b52 !important;
// background-color: #213b52 !important;
background: rgba(9, 101, 172, 0.56) !important;
}
th {
word-break: break-word;
background-color: #213b52 !important;
color: rgba(123, 248, 244, 1);
// background-color: #213b52 !important;
// color: rgba(123, 248, 244, 1);
background: rgba(9, 101, 172, 0.56) !important;
box-sizing: border-box;
border: 1px solid rgba(54, 136, 255, 0.2392);
color: #fff;
height: 30px;
font-size: 13px;
padding: 0;
......@@ -184,8 +212,9 @@
}
.el-table__body-wrapper {
.el-table__row:nth-child(2n + 1) {
background-color: rgb(11 22 37);
background-color: #062A45;
&:hover td {
background-color: #7bf8f430 !important;
......@@ -194,13 +223,18 @@
td {
.cell {
// color: #525252;
color: rgba(123, 248, 244, 1);
// color: rgba(123, 248, 244, 1);
line-height: 14px;
color: #fff;
}
}
}
.el-table__row:nth-child(2n) {
background-color: #213b52;
// background-color: #213b52;
background-color: #062A45;
&:hover td {
background-color: #7bf8f430 !important;
......@@ -208,6 +242,7 @@
td {
.cell {
line-height: 14px;
color: #fff;
}
}
......@@ -610,6 +645,7 @@
}
.el-table__body-wrapper {
.el-table__row:nth-child(2n + 1) {
background-color: #e6e6e6;
......@@ -846,7 +882,7 @@
.gdt {
&::-webkit-scrollbar {
width: 10px;
background: #012a53;
......
zh-baseversion-web/src/components/bigWindow/leftBar.vue
View file @ a7ddacbe
......@@ -36,17 +36,10 @@
<div class="div-p" @click="$router.push('/regulation/supervise')">
从业人员数(人)
</div>
<span
style="
font-family: 'arialbd';
font-size: 35px;
color: rgb(255, 255, 255);
-webkit-background-clip: text;
"
>{{ allNum.peopleNum }}</span
>
<div class="div-p-value">
{{ allNum.peopleNum }}
</div>
<div></div>
</div>
</div>
<!-- <div style="width: 86%;margin-left: 4%;border-bottom: 1px dashed #094749;margin-top: 15px;margin-bottom: 15px;"></div> -->
......@@ -63,15 +56,7 @@
<div class="div-p" @click="$router.push('/regulation/pipe')">
管道长度(m)
</div>
<span
style="
font-family: 'arialbd';
font-size: 35px;
color: rgb(255, 255, 255);
-webkit-background-clip: text;
"
>{{ allNum.allPipeLength }}</span
>
<div class="div-p-value">{{ allNum.allPipeLength }}</div>
</div>
</div>
</div>
......@@ -90,30 +75,43 @@
<div class="rightline2"></div>
</div>
<div class="pieone">
<div
id="myChartpieone"
:style="{ width: '100%', height: '100%' }"
></div>
<div class="titleTex">
<div :style="{ color: '#5470c6' }">● 已完成:{{ allNum.typeOne }}</div>
<div :style="{ color: '#fa8167' }">● 未完成:{{ allNum.typeTwo }}</div>
<div class="pie-title">巡检任务数量(个)</div>
<div class="chars-wrapper">
<div id="myChartpieone"></div>
<div class="titleTex">
<div class="titleTex-item">
<span>已完成巡检</span>
<span class="b">{{ allNum.typeOne }}</span>
</div>
<div class="titleTex-item">
<span>未完成巡检</span>
<span class="b">{{ allNum.typeTwo }}</span>
</div>
</div>
</div>
</div>
<div class="pietwo">
<div
id="myChartpietwo"
:style="{ width: '100%', height: '100%' }"
></div>
<div class="titleTex">
<div :style="{ color: '#5470c6' }">● 已完成:{{this.allNum.hiddenBookFinish}}</div>
<div :style="{ color: '#fa8167' }">● 未完成:{{this.allNum.hiddenBookUnFinish}}</div>
<div class="pie-title">隐患整治数量(个)</div>
<div class="chars-wrapper">
<div id="myChartpietwo"></div>
<div class="titleTex">
<div class="titleTex-item">
<span>已完成整治</span>
<span class="b">{{ allNum.hiddenBookFinish }}</span>
</div>
<div class="titleTex-item">
<span>未完成整治</span>
<span class="b">{{ allNum.hiddenBookUnFinish }}</span>
</div>
</div>
</div>
</div>
</div>
<!-- 任务完成率 -->
<div class="leftbar3">
<div class="item1">
<div class="item3">
<!-- <div class="fong-div"></div>
<div class="fong-div" style="margin-left: 3px;"></div>
<div class="fong-div" style="margin-left: 3px;"></div> -->
......@@ -144,7 +142,12 @@ import { selectWorkOrderNum } from "@/api/operationMonitor/order";
// require("echarts/lib/component/title");
// let echarts = this.$echarts;
import { getQLJG,getSGSL, getYHZZ, getYHTJ } from "@/api/bigWindow/charsData.js";
import {
getQLJG,
getSGSL,
getYHZZ,
getYHTJ,
} from "@/api/bigWindow/charsData.js";
export default {
data() {
......@@ -158,7 +161,7 @@ export default {
typeThree: 0,
typeTwo: 0,
hiddenBookFinish: 0,
hiddenBookUnFinish: 0
hiddenBookUnFinish: 0,
},
enterpriseIds: {
enterpriseId: "",
......@@ -241,7 +244,7 @@ export default {
// this.drawLine(this.datanow);
// this.getNum(index);
// }else
console.log("===================>>>>>>>>>>>>>>>>>>",val)
console.log("===================>>>>>>>>>>>>>>>>>>", val);
this.getNum(val);
// if(index==1){
// this.datanow = this.dataone;
......@@ -275,162 +278,110 @@ export default {
// 绘制图表
pieone.setOption({
title: {
text:
"巡检任务数(个) : " + (this.allNum.typeOne + this.allNum.typeTwo),
text: "总量",
subtext: this.allNum.typeOne + this.allNum.typeTwo || "0",
left: "center",
top: 0,
top: 25,
textStyle: {
color: "#cddbe4",
fontSize: "16",
},
},
grid: {
bottom: "7%",
containLabel: true,
subtextStyle: {
color: "#cddbe4",
fontSize: "16",
},
},
tooltip: {
trigger: "item",
show: false,
},
legend: {
top: "50%",
left: "center",
show: false,
},
series: [
{
name: "任务概况",
color: ["#35A1FF", "#1EC9E3"],
name: "Access From",
type: "pie",
radius: "55%",
center: ["50%", "58%"],
data: [
{
value: this.allNum.typeTwo,
name: "未完成",
itemStyle: { color: "#fa8167" },
},
{
value: this.allNum.typeOne,
name: "已完成",
itemStyle: { color: "#5470c6" },
},
],
labelLine: {
length: 20,
length2: 50,
},
label: {
color: "#fff",
fontSize: 14,
// formatter:"{b}\n\n",
// padding:[0,-55],
normal: {
show: false,
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",
},
},
},
radius: ["70%", "90%"],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 0,
borderColor: "#fff",
borderWidth: 0,
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
label: {
show: false,
fontSize: 40,
fontWeight: "bold",
},
},
labelLine: {
show: false,
},
data: [
{ value: 1048, name: "Search Engine" },
{ value: 735, name: "Direct" },
],
},
],
});
pietwo.setOption({
title: {
text: "隐患整治数(个) : " +(this.allNum.hiddenBookFinish + this.allNum.hiddenBookUnFinish),
text: "总量",
subtext: this.allNum.hiddenBookFinish + this.allNum.hiddenBookUnFinish || "0",
left: "center",
top: 0,
top: 25,
textStyle: {
color: "#cddbe4",
fontSize: "16",
},
},
grid: {
bottom: "7%",
containLabel: true,
subtextStyle: {
color: "#cddbe4",
fontSize: "16",
},
},
tooltip: {
trigger: "item",
show: false,
},
legend: {
top: "50%",
left: "center",
show: false,
},
series: [
{
name: "任务概况",
color: ["#FEA754", "#D8583E"],
name: "Access From",
type: "pie",
radius: "55%",
center: ["50%", "58%"],
data: [
{
value: this.allNum.hiddenBookUnFinish,
name: "未完成",
itemStyle: { color: "#fa8167" },
},
{
value: this.allNum.hiddenBookFinish,
name: "已完成",
itemStyle: { color: "#5470c6" },
},
],
labelLine: {
length: 20,
length2: 50,
},
label: {
color: "#fff",
fontSize: 14,
// formatter:"{b}\n\n",
// padding:[0,-55],
normal: {
show: false,
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",
},
},
},
radius: ["70%", "90%"],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 0,
borderColor: "#fff",
borderWidth: 0,
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
label: {
show: false,
fontSize: 40,
fontWeight: "bold",
},
},
labelLine: {
show: false,
},
data: [
{ value: 1048, name: "Search Engine" },
{ value: 735, name: "Direct" },
],
},
],
});
......@@ -464,8 +415,8 @@ export default {
axisLabel: {
show: true,
interval: 0, //使x轴文字显示全
rotate:10,
fontSize:10
rotate: 10,
fontSize: 10,
},
axisTick: {
//去掉坐标轴刻线
......@@ -583,8 +534,8 @@ export default {
margin-left: 2%;
}
.leftbar1 {
width: 85%;
height: 20%;
width: 80%;
height: 25%;
padding-top: 10%;
pointer-events: auto;
}
......@@ -597,7 +548,7 @@ export default {
.leftbar3 {
width: 85%;
height: 32%;
padding-top: 15px;
padding-top: 20px;
padding-bottom: 35px;
pointer-events: auto;
}
......@@ -620,7 +571,16 @@ export default {
font-size: 16px;
font-weight: 700;
margin-left: 5%;
margin-top: 40px;
margin-top: 25px;
}
.item3 {
width: 85%;
height: 30px;
font-size: 16px;
font-weight: 700;
margin-left: 5%;
padding-top: 25px;
line-height: 10px;
}
.fong-div {
width: 4px;
......@@ -633,7 +593,7 @@ export default {
width: 85%;
height: 2px;
float: right;
background-image: linear-gradient(to left, #3bfafa, #ffffff00);
background-image: linear-gradient(to left, #47a0ff, #ffffff00);
margin-top: 10px;
margin-right: 50px;
}
......@@ -641,14 +601,16 @@ export default {
width: 92%;
height: 2px;
float: right;
background-image: linear-gradient(to left, #3bfafa, #ffffff00);
background-image: linear-gradient(to left, #47a0ff, #ffffff00);
margin-top: 10px;
}
.rightline3 {
width: 95%;
height: 2px;
float: right;
background-image: linear-gradient(to left, #3bfafa, #ffffff00);
background-image: linear-gradient(to left, #47a0ff, #ffffff00);
margin-top: 10px;
}
/* .dot {
......@@ -701,13 +663,25 @@ export default {
}
} */
.div-p {
width: 100%;
background: url("../../assets/ranqifirst/div-p.png");
// width: 100%;
width: 155px;
// background: url("../../assets/ranqifirst/div-p.png");
background-repeat: no-repeat;
background-size: 100% 100%;
cursor: pointer;
text-align: center;
padding: 7px 0px;
color: #0ff;
// color: #0ff;
}
.div-p-value {
width: 155px;
height: 77px;
text-align: center;
font-family: "arialbd";
font-size: 35px;
color: rgb(255, 255, 255);
-webkit-background-clip: text;
background: url("~@/assets/firstimage/left-top-img.png") center;
}
.div-el {
......@@ -756,15 +730,16 @@ export default {
color: #1e516f;
} */
.titleTex {
width: 100%;
height: 20px;
margin-top: 0px;
text-align: center;
/* font-size: 15px;
display: flex;
justify-content: space-around;
align-items: center; */
padding: 0px 30px;
flex: 1;
align-content: center;
.titleTex-item {
color: #fff;
margin-left: 40px;
margin-bottom: 10px;
.b {
margin-left: 40px;
}
}
}
.leftyj {
margin-top: 10px;
......@@ -790,16 +765,45 @@ export default {
line-height: 35px;
padding: 10px 0 0 0;
}
.pieone {
width: 50%;
height: 60%;
float: left;
width: 80%;
height: 40%;
// float: left;
margin-top: 30px;
margin-left: 40px;
.pie-title {
color: #fff;
margin-bottom: 10px;
}
.chars-wrapper {
width: 100%;
// height: 100%;
display: flex;
}
#myChartpieone {
width: 100px;
height: 100px;
}
}
.pietwo {
width: 50%;
height: 60%;
float: right;
margin-top: 30px;
width: 80%;
height: 40%;
margin-left: 40px;
.pie-title {
color: #fff;
margin-bottom: 10px;
}
.chars-wrapper {
width: 100%;
// height: 100%;
display: flex;
}
#myChartpietwo {
width: 100px;
height: 100px;
}
// float: right;
// margin-top: 30px;
}
</style>
zh-baseversion-web/src/components/bigWindow/rightBar.vue
View file @ a7ddacbe
......@@ -12,12 +12,12 @@
<span
style="letter-spacing: 1px; color: #fff; float: left; margin-left: 50px"
>
预警信息
资源统计
</span>
<div class="rightline1"></div>
</div>
<div class="rightbar1">
<div style="padding: 0px 10px; width: 100%; height: 40%">
<!-- <div style="padding: 0px 10px; width: 100%; height: 40%">
<div class="yujingleft yujing">
<div class="yujingtop">
<img
......@@ -57,53 +57,13 @@
<span>0</span>
</div>
</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="100">
</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
class="echarts-one"
style="margin-top: 10px; width: 100%; height: 90%; margin-left: 10px"
>
<div id="myChartone" :style="{ width: '100%', height: '100%' }"></div>
</div>
</div>
......@@ -129,14 +89,7 @@
<div id="huanleft" style="width: 100%; height: 150px"></div>
<div class="inyuan">
<div style="letter-spacing: 2px">用户总数</div>
<!-- <span
style="
font-family: 'arialbd';
letter-spacing: 2px;
color: #00ffff;
font-size: 20px;
"
>{{diviceNum.juminNum + diviceNum.shangNum + diviceNum.gongNum}}</span> -->
<span
style="
font-family: 'arialbd';
......@@ -144,7 +97,7 @@
color: #00ffff;
font-size: 20px;
"
>{{bingBottomData.totalNumberUsers}}</span
>{{ bingBottomData.totalNumberUsers }}</span
>
</div>
<div class="usernum">
......@@ -153,12 +106,8 @@
<span> ● </span>
<span style="color: #cddbe4">居民用户 </span>
</div>
<!-- <span style="font-family: 'arialbd'; letter-spacing: 2px">
: {{ diviceNum.juminNum }}</span
> -->
<span style="font-family: 'arialbd'; letter-spacing: 2px">
{{bingBottomData.residentUsers}}</span
{{ bingBottomData.residentUsers }}</span
>
</div>
<div class="usernumin in5">
......@@ -170,7 +119,7 @@
: {{ diviceNum.shangNum }}</span
> -->
<span style="font-family: 'arialbd'; letter-spacing: 2px">
{{bingBottomData.businessUser}}</span
{{ bingBottomData.businessUser }}</span
>
</div>
<div class="usernumin in6">
......@@ -182,19 +131,19 @@
: {{ diviceNum.gongNum }}</span
> -->
<span style="font-family: 'arialbd'; letter-spacing: 2px">
{{bingBottomData.industrialUsers}}</span
{{ bingBottomData.industrialUsers }}</span
>
</div>
<!-- <div class="usernumin in7">
<div class="usernumin in7">
<div class="titletu">
<span> ● </span>
<span style="color: #cddbe4">餐饮单位用户 </span>
<span style="color: #cddbe4">液化气 </span>
</div>
<span style="font-family: 'arialbd'; letter-spacing: 2px">
585</span
>
</div> -->
</div>
</div>
</div>
......@@ -227,7 +176,7 @@
>0
</span>
</div>
<div class="usernum" style="margin-left: 38px">
<div class="usernum" style="margin-left: 30px">
<div class="usernumin in4">
<!-- <span> ● </span>
<span style="color: #cddbe4">在线 </span>
......@@ -315,8 +264,7 @@
0</span
>
</div>
<!-- <div class="usernumin in7">
<div class="usernumin in7">
<span style="color: #cddbe4">在线 </span>
<span
style="
......@@ -339,7 +287,7 @@
>
67</span
>
</div> -->
</div>
</div>
</div>
</div>
......@@ -347,7 +295,7 @@
<!-- 资源统计 -->
<div class="rightbar3">
<div class="item1">
<div class="item3">
<!-- <div class="fong-div"></div>
<div class="fong-div" style="margin-left: 3px;"></div>
<div class="fong-div" style="margin-left: 3px;"></div> -->
......@@ -357,11 +305,52 @@
<!-- <img src="../../assets/second1/ti-bg.png" alt=""> -->
<div class="rightline3"></div>
</div>
<div
class="echarts-one"
style="margin-top: 30px; width: 100%; height: 90%; margin-left: 10px"
>
<div id="myChartone" :style="{ width: '100%', height: '100%' }"></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="handledStatus" label="状态" width="80">
<template slot-scope="scope">
<div class="zzz" :title="scope.row.handledStatus">
{{ scope.row.handledStatus }}
</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="100">
</el-table-column>
</el-table>
</div>
</div>
</div>
......@@ -435,8 +424,26 @@ export default {
changeTimer: false,
repeatFinshed: false,
tableHeight: 135,
tableData: [],
tableHeight: 185,
tableData: [
// {
// unitName: 123,
// handledStatus: 123,
// statusName: 345,
// alarmTime: "2014-11-11 10:10:10",
// },
// {
// unitName: 456,
// handledStatus: 123,
// statusName: 345,
// alarmTime: "2014-11-11 10:10:10",
// },
// { unitName: 45446, alarmTime: "2014-11-11 10:10:10" },
// { unitName: 45446, alarmTime: "2014-11-11 10:10:10" },
// { unitName: 45446, alarmTime: "2014-11-11 10:10:10" },
// { unitName: 45446, alarmTime: "2014-11-11 10:10:10" },
// { unitName: 45446, alarmTime: "2014-11-11 10:10:10" },
],
yujingdata: {
unitName: "省移动",
detectorType: "",
......@@ -508,6 +515,7 @@ export default {
cancel1() {},
getAlarm() {
return alarmData().then((response) => {
// return;
this.tableData = response.data.pageData;
if (this.tableData.length > 0) {
this.yujingdata = this.tableData[0];
......@@ -523,7 +531,7 @@ export default {
getYHTJ() {
getYHTJ().then((res) => {
console.log("cccccccc", res);
this.bingBottomData=res.data;
this.bingBottomData = res.data;
});
},
getScrollHeight() {
......@@ -560,7 +568,8 @@ export default {
);
clearInterval(this.timer);
this.timer = setInterval(async () => {
if (selectWrap.scrollTop == this.scrollHeight) {
// console.log(selectWrap.scrollTop,this.scrollHeight)
if (selectWrap.scrollTop >= this.scrollHeight) {
clearInterval(this.timer);
await this.getAlarm();
selectWrap.scrollTop = 0;
......@@ -730,6 +739,8 @@ export default {
// 绘制图表
myChart1.setOption({
legend: {
// top:"-10%",
right: "5%",
textStyle: {
fontSize: 12, //字体大小
color: "#ffffff", //字体颜色
......@@ -739,10 +750,10 @@ export default {
trigger: "item",
},
grid: {
top: "20%",
top: "25%",
left: "3%",
right: "4%",
bottom: "10%",
bottom: "5%",
containLabel: true,
},
dataset: {
......@@ -990,6 +1001,7 @@ export default {
{ name: "居民用户", value: 1121 },
{ name: "商业用户", value: 41 },
{ name: "工业用户", value: 0 },
{ name: "液化气", value: 10 },
// { name: "餐饮单位用户", value: 543 },
],
},
......@@ -1072,7 +1084,7 @@ export default {
// { name: "报警数量", value: this.diviceNum.baoNum },
// { name: "离线数量", value: 95 },
// { name: "在线数量", value: 1592 },
{ name: "报警数量", value: 0 },
{ name: "报警数量", value: 0 },
{ name: "离线数量", value: 0 },
{ name: "在线数量", value: 0 },
],
......@@ -1147,23 +1159,22 @@ export default {
};
</script>
<style scoped>
<style lang="scss" scoped>
.rightb {
width: 98%;
height: 100%;
}
.rightbar1 {
width: 90%;
height: 20%;
margin-left: 12%;
width: 80%;
height: 21%;
margin-left: 16%;
pointer-events: auto;
}
.rightbar2 {
width: 76%;
height: 37%;
height: 45%;
padding-top: 30px;
margin-left: 20%;
margin-left: 22%;
pointer-events: auto;
}
.rightbar3 {
......@@ -1178,7 +1189,8 @@ export default {
width: 85%;
height: 2px;
float: left;
background-image: linear-gradient(to right, #3bfafa, #ffffff00);
background-image: linear-gradient(to right, #47a0ff, #ffffff00);
margin-top: 10px;
margin-left: 50px;
}
......@@ -1186,14 +1198,16 @@ export default {
width: 92%;
height: 2px;
float: left;
background-image: linear-gradient(to right, #3bfafa, #ffffff00);
background-image: linear-gradient(to right, #47a0ff, #ffffff00);
margin-top: 10px;
}
.rightline3 {
width: 95%;
height: 2px;
float: left;
background-image: linear-gradient(to right, #3bfafa, #ffffff00);
background-image: linear-gradient(to right, #47a0ff, #ffffff00);
margin-top: 10px;
}
.titleTex {
......@@ -1224,8 +1238,8 @@ export default {
height: 30px;
font-size: 16px;
font-weight: 700;
margin-left: 14%;
padding-top: 25px;
margin-left: 5%;
margin-top: 15px;
line-height: 10px;
}
.item1 img {
......@@ -1237,7 +1251,16 @@ export default {
font-size: 16px;
font-weight: 700;
margin-left: 5%;
margin-top: 40px;
margin-top: 15px;
}
.item3 {
width: 85%;
height: 30px;
font-size: 16px;
font-weight: 700;
margin-left: 10%;
margin-top: 15px;
line-height: 10px;
}
.dot {
display: inline-block;
......@@ -1328,14 +1351,15 @@ export default {
display: flex;
flex-direction: row;
justify-content: flex-start;
margin-bottom: 5px;
}
.titletu {
margin-left: 50px;
margin-left: 40px;
width: 120px;
text-align: left;
}
titletu2 {
margin-left: 50px;
margin-left: 40px;
width: 70px;
text-align: left;
}
......@@ -1370,8 +1394,10 @@ titletu2 {
border: 2px solid #125c9b;
position: fixed;
margin-bottom: 10px;
/* margin-top: -122px;
margin-left: 62px; */
margin-top: -122px;
margin-left: 62px;
margin-left: 44px;
font-size: 15px;
color: #cddbe4;
text-align: center;
......@@ -1385,9 +1411,14 @@ titletu2 {
}
.left {
margin-top: 10px;
width: 400px;
height: 55%;
margin-left: 55px;
width: 350px;
height: 75%;
margin-left: 35px;
.right-bottom-data-left {
height: 100%;
// background: red;
}
}
.yj {
padding: 0px 10px;
......
zh-baseversion-web/src/utils/mapClass/config.js
View file @ a7ddacbe
/*
* @Author: your name
* @Date: 2022-01-26 10:47:44
* @LastEditTime: 2024-07-18 17:36:58
* @LastEditTime: 2024-07-19 10:38:10
* @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/utils/config.js
......@@ -37,6 +37,9 @@ export const svgUrl = {
6: require("@/assets/firstimage/device/jmUser.png"),
// 商业用户
61:require("@/assets/firstimage/device/syUser.png"),
// 工业用户
62:require("@/assets/firstimage/device/syUser.png"),
7: require("@/assets/image/zrxk.svg"),
8: require("@/assets/image/zcrq.svg"),
......
zh-baseversion-web/src/utils/mapClass/map.js
View file @ a7ddacbe
/*
* @Author: your name
* @Date: 2022-01-11 13:45:12
* @LastEditTime: 2024-07-18 17:07:55
* @LastEditTime: 2024-07-19 14:59:20
* @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/utils/mapClass.js
......@@ -167,31 +167,29 @@ export class EditorMap {
}
}
});
this.map.on("moveend", () => {
console.log("地图停止移动");
if (this.flag) {
console.log("弹框");
this.flag = false;
}
//居民用户
this.map.on("mousedown", () => {
console.log("mapONMousedown");
if (this.detectorUserlabelsLayer != null) {
const detectorUserHas = this.selarr.indexOf(6) >= 0;
if (detectorUserHas) {
this.detectorUserlabelsLayer.show();
this.detectorUserlabelsLayer.hide();
}
}
//商业用户
if (this.businessDetectorUserlabelsLayer != null) {
const businessDetectorUserHas = this.selarr.indexOf(61) >= 0;
if (businessDetectorUserHas) {
this.businessDetectorUserlabelsLayer.show();
this.businessDetectorUserlabelsLayer.hide();
}
}
// 调压箱
if (this.tyxlabelsLayer != null) {
const tyxHas = this.selarr.indexOf(2) >= 0;
if (tyxHas) {
this.tyxlabelsLayer.show();
this.tyxlabelsLayer.hide();
}
}
......@@ -199,7 +197,7 @@ export class EditorMap {
if (this.fmjlabelLayer != null) {
const fmjHas = this.selarr.indexOf(3) >= 0;
if (fmjHas) {
this.fmjlabelLayer.show();
this.fmjlabelLayer.hide();
}
}
......@@ -207,7 +205,7 @@ export class EditorMap {
if (this.czlabelLayer != null) {
const czHas = this.selarr.indexOf(4) >= 0;
if (czHas) {
this.czlabelLayer.show();
this.czlabelLayer.hide();
}
}
......@@ -215,7 +213,7 @@ export class EditorMap {
if (this.videolabelLayer != null) {
const videoHas = this.selarr.indexOf(5) >= 0;
if (videoHas) {
this.videolabelLayer.show();
this.videolabelLayer.hide();
}
}
......@@ -223,34 +221,31 @@ export class EditorMap {
if (this.deviceUserlableLayer != null) {
const deviceUserHas = this.selarr.indexOf(18) >= 0;
if (deviceUserHas) {
this.deviceUserlableLayer.show();
this.deviceUserlableLayer.hide();
}
}
});
this.map.on("movestart", () => {
console.log("地图开始移动");
this.map.on("mouseup", () => {
//居民用户
if (this.detectorUserlabelsLayer != null) {
const detectorUserHas = this.selarr.indexOf(6) >= 0;
if (detectorUserHas) {
this.detectorUserlabelsLayer.hide();
this.detectorUserlabelsLayer.show();
}
}
//商业用户
if (this.businessDetectorUserlabelsLayer != null) {
const businessDetectorUserHas = this.selarr.indexOf(61) >= 0;
if (businessDetectorUserHas) {
this.businessDetectorUserlabelsLayer.hide();
this.businessDetectorUserlabelsLayer.show();
}
}
// 调压箱
if (this.tyxlabelsLayer != null) {
const tyxHas = this.selarr.indexOf(2) >= 0;
if (tyxHas) {
this.tyxlabelsLayer.hide();
this.tyxlabelsLayer.show();
}
}
......@@ -258,7 +253,7 @@ export class EditorMap {
if (this.fmjlabelLayer != null) {
const fmjHas = this.selarr.indexOf(3) >= 0;
if (fmjHas) {
this.fmjlabelLayer.hide();
this.fmjlabelLayer.show();
}
}
......@@ -266,7 +261,7 @@ export class EditorMap {
if (this.czlabelLayer != null) {
const czHas = this.selarr.indexOf(4) >= 0;
if (czHas) {
this.czlabelLayer.hide();
this.czlabelLayer.show();
}
}
......@@ -274,7 +269,7 @@ export class EditorMap {
if (this.videolabelLayer != null) {
const videoHas = this.selarr.indexOf(5) >= 0;
if (videoHas) {
this.videolabelLayer.hide();
this.videolabelLayer.show();
}
}
......@@ -282,10 +277,22 @@ export class EditorMap {
if (this.deviceUserlableLayer != null) {
const deviceUserHas = this.selarr.indexOf(18) >= 0;
if (deviceUserHas) {
this.deviceUserlableLayer.hide();
this.deviceUserlableLayer.show();
}
}
});
this.map.on("moveend", () => {
console.log("地图停止移动");
if (this.flag) {
console.log("弹框");
this.flag = false;
}
});
this.map.on("movestart", () => {
console.log("地图开始移动");
return;
//居民用户
});
// this.map.on('zoomchange', () => {
// //获取当前最新的地图层级
// let Zoom = this.map.getZoom()
......@@ -1368,10 +1375,12 @@ export class EditorMap {
});
}
console.log(this.allDevice);
// return;
for (let deviceItem in this.allDevice) {
this.allDevice[deviceItem].forEach((device) => {
const data = device.filterData || device.getExtData();
console.log(data.iconType);
console.log("data", data.filterData);
// console.log(data.iconType);
// 设备过滤受到bigwindow页面的的两种制约，companyArr, typeArr 两个数组制约显示隐藏
// 燃气没有公司，所以没有device.companyType不收到公司的控制
const companyHas = companyArr.indexOf(data.companyType + "") >= 0;
......@@ -1382,8 +1391,10 @@ export class EditorMap {
// 必须设备存在数组里，才会显示设备 !data.companyType代表用户不受公司制约
if (enterprise || (deviceHas && (companyHas || !data.companyType))) {
device.show();
// console.log(data.iconType,companyHas,deviceHas,enterprise,'show')
} else {
device.hide();
// console.log(data.iconType,companyHas,deviceHas,enterprise,"hide")
}
});
}
......@@ -1409,7 +1420,7 @@ export class EditorMap {
}
}
//判断是否需要显示 调压箱
// 判断是否需要显示 调压箱
const tyxHas = typeArr.indexOf(2) >= 0;
if (this.tyxlabelsLayer != null) {
if (tyxHas) {
......@@ -1419,7 +1430,7 @@ export class EditorMap {
}
}
//判断是否需要显示 阀门井
// 判断是否需要显示 阀门井
const fmjHas = typeArr.indexOf(3) >= 0;
if (this.fmjlabelLayer != null) {
if (fmjHas) {
......
zh-baseversion-web/src/views/bigWindow/components/Top.vue
View file @ a7ddacbe
......@@ -47,13 +47,12 @@
<div
class="devie-item zzz"
v-for="item in searchList"
:key="item.id+''+item.type"
:key="item.id + '' + item.type"
@click="deviceItemClick(item)"
>
<!-- {{ item.NAME }} -->
<div class="a">{{ devviceData[item.type] }}</div>
<div class="b">{{ item.NAME }}</div>
</div>
</div>
</transition>
......@@ -138,11 +137,11 @@ export default {
}
},
searchClick() {
this.searchItemShow = true;
searchDevice({ name: this.searchVal }).then((res) => {
if (res.code == 200) {
this.searchList = Object.values(res.data).flat();
this.searchItemShow = true;
console.log(this.searchList);
}
});
......@@ -150,10 +149,28 @@ export default {
deviceItemClick(item) {
searchDeviceDetail({ type: item.type, id: item.id }).then((res) => {
if (res.code == 200) {
if (res.data.length == 0) return;
this.$emit("deviceSearchClick",item, res.data[0]);
let dataArr = null;
console.log(res)
// 1.阀井
// 2.调压箱
// 3.场站
// 4.居民用户
// 5.商业用户
// 6.工业用户
// 7.监控
// 8.餐饮单位液化气用户
// 9.管道
// 1,2,3的时候 是res.data.data才能获取数据，结构为数组。
// 4，5 是 res.data就能获取数据，结构为数组
// 7,8，9的时候，res.data能获取数据，结构为对象
// if (item.type == 1 || item.type == 2 || item.type == 3) {
// dataArr = res.data.data;
// }else if(item.type == 4 || item.type == 5 || item.type == 6){
// }
// if (dataArr.length == 0) return;
// this.$emit("deviceSearchClick", item, res);
}
console.log(res);
});
},
clearSearchContainer() {
......
zh-baseversion-web/src/views/bigWindow/index.vue
View file @ a7ddacbe
<!--
* @Author: your name
* @Date: 2022-01-11 13:44:17
* @LastEditTime: 2024-07-18 17:27:20
* @LastEditTime: 2024-07-19 16:18:43
* @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
......@@ -49,12 +49,13 @@
<!-- 头部 -->
<div class="banner-test">
<!-- <dv-decoration-5 style="width:100%;height:100%;" /> -->
<img
<!-- <img
v-if="this.enterpriseId == -2"
src="../../assets/images/zibk.png"
alt=""
/>
<img v-else src="../../assets/images/20230805152711.png" alt="" />
<img v-else src="../../assets/images/20230805152711.png" alt="" /> -->
智慧燃气安全监管平台
</div>
<!-- 左边 -->
......@@ -397,21 +398,27 @@ export default {
GetCompany: "bigWindowCompany/GetCompany",
}),
// 搜索设备上图功能
deviceSearchClick(device,deviceDetail){
console.log(device,deviceDetail)
deviceSearchClick(device, deviceDetail) {
console.log(device, deviceDetail);
// let Company =null;
// if(){
// }
// this.goMap(getEnterprise, this.addDevice, Company, true);
},
leftRightBarChange() {
const scale = window.innerHeight / 1080;
let right = 0;
if (scale >= 1) {
right = (585 / 2) * (scale - 1) - 20;
right = (482 / 2) * (scale - 1) - 20;
} else {
right = (585 / 2) * (scale - 1) - 20;
right = (482 / 2) * (scale - 1) - 20;
}
// console.log("right", right, "scale", scale);
this.changeRightBarStyle = [
{ right: right + "px" },
{ right: right + 20 + "px" },
{ transform: `scale(${scale})` },
];
this.changeLeftBarStyle = [
......@@ -492,6 +499,7 @@ export default {
) {
return httpFunc().then((res) => {
// 给用户加icontype
console.log("管道", res.data);
if (res.data && !res.data[0].iconType) {
res.data.forEach((item) => {
item.iconType = 6;
......@@ -518,29 +526,32 @@ export default {
labelsLayerMarksDeviceUserGoMap(httpFunc, component, show) {
return httpFunc().then((res) => {
const mapData = res.data;
console.log("用户用户",mapData)
console.log("液化气用户用户", mapData);
this.map.labelsLayerMarksDeviceUserGoMap(mapData, component, show);
});
},
labelsLayerMarksVideoGoMap(httpFunc, component, show) {
return httpFunc().then((res) => {
const mapData = res.data;
console.log('Video',mapData)
const mapData = res;
console.log("Video", mapData);
this.map.labelsLayerMarksVideoGoMap(mapData, component, show);
});
},
labelsLayerMarksCzGoMap(httpFunc, component, show) {
return httpFunc().then((res) => {
const mapData = res.data;
console.log("场站场站场站场站场站场站场站场站场站场站场站场站",mapData)
console.log(
"场站场站场站场站场站场站场站场站场站场站场站场站",
mapData
);
this.map.labelsLayerMarksCzGoMap(mapData, component, show);
});
},
labelsLayerMarksFmjGoMap(httpFunc, component, show) {
return httpFunc().then((res) => {
const mapData = res.data;
console.log("阀门井",mapData)
console.log("阀门井", mapData);
this.map.labelsLayerMarksFmjGoMap(mapData, component, show);
});
......@@ -548,14 +559,14 @@ export default {
labelsLayerMarksTysGoMap(httpFunc, component, show) {
return httpFunc().then((res) => {
const mapData = res.data;
console.log("调压箱",mapData)
console.log("调压箱", mapData);
this.map.labelsLayerMarksTysGoMap(mapData, component, show);
});
},
labelsLayerMarksDetectorUserGoMap(httpFunc, component, show) {
return httpFunc().then((res) => {
const mapData = res.data;
console.log("用户",mapData)
console.log("用户用户用户用户用户", mapData);
this.map.labelsLayerMarksDetectorUserList(mapData, component, show);
});
},
......@@ -661,7 +672,7 @@ export default {
// this.selarr1.push(item.val);
// }
this.selarr1 = [...selarr1];
console.log(this.selarr, this.selarr1)
console.log(this.selarr, this.selarr1);
this.map.allfilter(this.selarr, this.selarr1);
},
//用户的设备center
......@@ -772,7 +783,15 @@ export default {
.banner-test {
width: 100%;
height: 85px;
font-family: "YouSheBiaoTiHei";
font-size: 40px;
font-weight: normal;
line-height: normal;
letter-spacing: 0.08em;
position: relative;
color: #fff;
line-height: 85px;
top: -10px;
z-index: 998;
text-align: center;
......@@ -787,29 +806,35 @@ export default {
}
.leftbar {
width: 565px;
// width: 585px;
// height: 93%;
height: 1010px;
// height: 1010px;
height: 933px;
width: 482px;
position: fixed;
// top: 70px;
top: 50%;
margin-top: -470px;
margin-top: -450px;
z-index: 999;
background: url("../../assets/firstimage/le.png");
background-size: 105% 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left: -20px;
margin-left: 2px;
pointer-events: none;
}
.rightbar {
width: 585px;
height: 1010px;
// width: 585px;
// height: 1010px;
height: 933px;
width: 482px;
position: fixed;
top: 50%;
margin-top: -470px;
margin-top: -450px;
z-index: 999;
// right: 861px;
margin-right: 4px;
background: url("../../assets/firstimage/ri.png");
background-size: 100% 100%;
background-repeat: no-repeat;
......
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