Skip to content

D
digital-construction
Commit f76910a0 authored by 张牧越's avatar 张牧越
Browse files
Options

styleFix

parent e5dc7d2e
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1201 additions and 645 deletions
dist.zip
View file @ f76910a0
No preview for this file type
src/assets/nodata.png
View replaced file @ e5dc7d2e View file @ f76910a0
src/assets/nodata.png

84.8 KB | W: | H:

src/assets/nodata.png

25.3 KB | W: | H:

src/assets/nodata.png
src/assets/nodata.png
src/assets/nodata.png
src/assets/nodata.png
  • 2-up
  • Swipe
  • Onion skin
src/components/Index.vue
View file @ f76910a0
...@@ -179,7 +179,7 @@ export default { ...@@ -179,7 +179,7 @@ export default {
// var documentHeight = // var documentHeight =
// document.getElementsByTagName("html")[0].offsetHeight; // document.getElementsByTagName("html")[0].offsetHeight;
// console.log(windowHeight - documentHeight); // console.log(windowHeight - documentHeight);
var deviceHeight = window.screen.height; var deviceHeight = window.innerHeight;
var scale = deviceHeight / 1080; var scale = deviceHeight / 1080;
document.body.style.zoom = scale; document.body.style.zoom = scale;
document.body.style.height = (1 / scale) * 100 + "vh"; document.body.style.height = (1 / scale) * 100 + "vh";
...@@ -369,6 +369,7 @@ a, ...@@ -369,6 +369,7 @@ a,
line-height: 24px; line-height: 24px;
vertical-align: top; vertical-align: top;
margin-top: 8px; margin-top: 8px;
margin-right: 50px;
.weather-text { .weather-text {
color: #fff; color: #fff;
font-size: 18px; font-size: 18px;
...@@ -391,7 +392,7 @@ a, ...@@ -391,7 +392,7 @@ a,
background: none; background: none;
a { a {
margin-right: 0; margin-right: 0;
width: 80px; width: 86px;
} }
.el-dropdown-menu__item:focus, .el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover { .el-dropdown-menu__item:not(.is-disabled):hover {
......
src/components/construction/Index.vue
View file @ f76910a0
...@@ -35,7 +35,12 @@ ...@@ -35,7 +35,12 @@
<div class="divider-text">·参建单位·</div> <div class="divider-text">·参建单位·</div>
<div class="divider-line"></div> <div class="divider-line"></div>
</div> </div>
<div class="table-scroll" id="table-scroll"> <div
class="table-scroll"
id="table-scroll"
@mouseenter="clearScroll"
@mouseleave="reScroll"
>
<table> <table>
<tr> <tr>
<td width="60"> <td width="60">
...@@ -182,6 +187,7 @@ ...@@ -182,6 +187,7 @@
<Title text="工程进度" type="long"></Title> <Title text="工程进度" type="long"></Title>
<ShadowContainer class="short-container"> <ShadowContainer class="short-container">
<div class="progress-contains"> <div class="progress-contains">
<div style="width: 100%">
<div class="progress"> <div class="progress">
<div class="progress-container"> <div class="progress-container">
<div class="progress-day"> <div class="progress-day">
...@@ -221,6 +227,7 @@ ...@@ -221,6 +227,7 @@
</el-steps> </el-steps>
</div> </div>
</div> </div>
</div>
</ShadowContainer> </ShadowContainer>
</div> </div>
<div class="side-area"> <div class="side-area">
...@@ -315,6 +322,7 @@ export default { ...@@ -315,6 +322,7 @@ export default {
}, },
aiwarningData: [], aiwarningData: [],
AIwarningTotal: 0, AIwarningTotal: 0,
interval1: null,
}; };
}, },
methods: { methods: {
...@@ -412,11 +420,11 @@ export default { ...@@ -412,11 +420,11 @@ export default {
mouseLeaveEvent() {}, mouseLeaveEvent() {},
mouseOverEvent() {}, mouseOverEvent() {},
autoScroll(stepLength, speed, delay, element) { autoScroll(stepLength, speed, delay, element) {
let interval;
//let step = 1 //let step = 1
element.scrollTop = 0; // element.scrollTop = 0;
var that = this;
function start() { function start() {
interval = setInterval(scrolling, speed); that.interval1 = setInterval(scrolling, speed);
element.scrollTop += stepLength; element.scrollTop += stepLength;
} }
function scrolling() { function scrolling() {
...@@ -428,7 +436,7 @@ export default { ...@@ -428,7 +436,7 @@ export default {
element.scrollTop === element.scrollHeight - element.offsetHeight element.scrollTop === element.scrollHeight - element.offsetHeight
) { ) {
stepLength *= -1; // 转换方向 stepLength *= -1; // 转换方向
clearInterval(interval); clearInterval(that.interval1);
setTimeout(start, delay); setTimeout(start, delay);
} }
} }
...@@ -437,7 +445,17 @@ export default { ...@@ -437,7 +445,17 @@ export default {
setTimeout(start, delay); setTimeout(start, delay);
} }
}, },
clearScroll() {
clearInterval(this.interval1);
}, },
reScroll() {
this.$nextTick(() => {
const element = document.getElementById("table-scroll");
this.autoScroll(1, 50, 1500, element);
});
},
},
mounted() { mounted() {
this.getBaseData(); this.getBaseData();
}, },
...@@ -634,7 +652,6 @@ table { ...@@ -634,7 +652,6 @@ table {
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: column;
height: 100%; height: 100%;
} }
.progress { .progress {
......
src/components/earlywarning/Index.vue
View file @ f76910a0
...@@ -47,7 +47,12 @@ ...@@ -47,7 +47,12 @@
<div class="today-warning"> <div class="today-warning">
<Title type="long" text="今日预警"></Title> <Title type="long" text="今日预警"></Title>
<ShadowContainer class="long-container"> <ShadowContainer class="long-container">
<div class="warp" id="warning-list"> <div
class="warp"
id="warning-list"
@mouseenter="clearScroll"
@mouseleave="reScroll"
>
<div <div
class="person-check" class="person-check"
v-for="(warns, index) in warningList" v-for="(warns, index) in warningList"
...@@ -88,9 +93,87 @@ ...@@ -88,9 +93,87 @@
<div class="right-container"> <div class="right-container">
<Title type="long" text="整改统计"></Title> <Title type="long" text="整改统计"></Title>
<ShadowContainer class="short-container"> <ShadowContainer class="short-container">
<div class="total-chart"> <div
style="
display: flex;
height: 100%;
flex-wrap: wrap;
align-items: center;
justify-content: center;
flex-direction: column;
"
>
<div
style="
display: flex;
width: calc(50% - 2px);
justify-content: center;
border-right: 4px solid #114e70;
"
>
<div class="chart-container">
<div ref="todayChart" id="today-chart"></div> <div ref="todayChart" id="today-chart"></div>
<div class="title">
<div class="main-title">
{{ todayTotal }}
</div>
<div class="sub-title">今日整改</div>
</div>
</div>
<div class="chart-legends">
<div
v-for="(legend, index) in todayPieChartData"
:key="index"
:style="{
color: legend.name == '未处理' ? '#FFAF51' : '#0CDEE3',
}"
>
<span
class="rect"
:style="{
background:
legend.name == '未处理' ? '#FFAF51' : '#0CDEE3',
}"
></span>
{{ legend.name }} {{ legend.value }}
</div>
</div>
</div>
<div
style="
display: flex;
width: calc(50% - 2px);
justify-content: center;
"
>
<div class="chart-container">
<div ref="historyChart" id="history-chart"></div> <div ref="historyChart" id="history-chart"></div>
<div class="title">
<div class="main-title">
{{ historyTotal }}
</div>
<div class="sub-title">历史整改</div>
</div>
</div>
<div class="chart-legends">
<div
v-for="(legend, index) in historyChartData"
:key="index"
:style="{
color: legend.name == '未处理' ? '#FCFF11' : '#2980FF',
}"
>
<span
class="rect"
:style="{
background:
legend.name == '未处理' ? '#FCFF11' : '#2980FF',
}"
></span>
{{ legend.name }} {{ legend.value }}
</div>
</div>
</div>
</div> </div>
</ShadowContainer> </ShadowContainer>
<Title type="long" text="本月报警趋势"></Title> <Title type="long" text="本月报警趋势"></Title>
...@@ -121,6 +204,8 @@ export default { ...@@ -121,6 +204,8 @@ export default {
todayPieChartData: [], todayPieChartData: [],
historyChartData: [], historyChartData: [],
intervalTimer: null, intervalTimer: null,
todayTotal: 0,
historyTotal: 0,
}; };
}, },
methods: { methods: {
...@@ -223,68 +308,15 @@ export default { ...@@ -223,68 +308,15 @@ export default {
chartData.map((item) => { chartData.map((item) => {
total += item.value; total += item.value;
}); });
this.todayTotal = total;
const option = { const option = {
title: {
x: "27%", //X坐标
y: "34%",
text: total,
subtext: "今日整改",
textAlign: "center",
textStyle: {
//标题样式
fontSize: 30,
fontWeight: "bolder",
color: "#00fcff",
},
subtextStyle: {
//副标题样式
fontSize: 16,
fontWeight: "bolder",
color: "rgba(255,255,255,0.7)",
},
},
tooltip: { tooltip: {
trigger: "item", trigger: "item",
}, },
legend: {
itemHeight: 12,
itemWidth: 12,
icon: "rect",
right: "0%",
top: "30%",
orient: "vertical",
itemGap: 40,
textStyle: {
color: "inherit",
rich: {
a: {
fontSize: 14,
align: "left",
},
b: {
fontSize: 20,
align: "left",
lineHeight: 25,
},
},
},
formatter: (name) => {
let data = chartData;
let target;
for (let i = 0, l = data.length; i < l; i++) {
if (data[i].name == name) {
target = data[i].value;
}
}
let arr = [`{a|${name}}`, `{b|${target}} 条`];
return arr.join(" ");
},
},
series: [ series: [
{ {
type: "pie", type: "pie",
radius: ["60%", "70%"], radius: ["60%", "70%"],
center: ["28%", "50%"],
avoidLabelOverlap: false, avoidLabelOverlap: false,
itemStyle: { itemStyle: {
borderRadius: 20, borderRadius: 20,
...@@ -323,69 +355,17 @@ export default { ...@@ -323,69 +355,17 @@ export default {
chartData.map((item) => { chartData.map((item) => {
total += item.value; total += item.value;
}); });
this.historyTotal = total;
const chart = this.$echarts.init(this.$refs.historyChart); const chart = this.$echarts.init(this.$refs.historyChart);
const option = { const option = {
title: {
x: "27%", //X坐标
y: "34%",
text: total,
subtext: "历史整改",
textAlign: "center",
textStyle: {
//标题样式
fontSize: 30,
fontWeight: "bolder",
color: "#00fcff",
},
subtextStyle: {
//副标题样式
fontSize: 16,
fontWeight: "bolder",
color: "rgba(255,255,255,0.7)",
},
},
tooltip: { tooltip: {
trigger: "item", trigger: "item",
}, },
legend: {
itemHeight: 12,
itemWidth: 12,
icon: "rect",
right: "0%",
top: "30%",
orient: "vertical",
itemGap: 40,
textStyle: {
color: "inherit",
rich: {
a: {
fontSize: 14,
align: "left",
},
b: {
fontSize: 20,
align: "left",
lineHeight: 25,
},
},
},
formatter: (name) => {
let data = chartData;
let target;
for (let i = 0, l = data.length; i < l; i++) {
if (data[i].name == name) {
target = data[i].value;
}
}
let arr = [`{a|${name}}`, `{b|${target}} 条`];
return arr.join(" ");
},
},
series: [ series: [
{ {
type: "pie", type: "pie",
radius: ["60%", "70%"], radius: ["60%", "70%"],
center: ["28%", "50%"],
avoidLabelOverlap: false, avoidLabelOverlap: false,
itemStyle: { itemStyle: {
borderRadius: 20, borderRadius: 20,
...@@ -466,11 +446,11 @@ export default { ...@@ -466,11 +446,11 @@ export default {
}); });
}, },
autoScroll(stepLength, speed, delay, element) { autoScroll(stepLength, speed, delay, element) {
let interval; var that = this;
//let step = 1 //let step = 1
element.scrollTop = 0; element.scrollTop = 0;
function start() { function start() {
interval = setInterval(scrolling, speed); that.interval1 = setInterval(scrolling, speed);
element.scrollTop += stepLength; element.scrollTop += stepLength;
} }
function scrolling() { function scrolling() {
...@@ -482,7 +462,7 @@ export default { ...@@ -482,7 +462,7 @@ export default {
element.scrollTop === element.scrollHeight - element.offsetHeight element.scrollTop === element.scrollHeight - element.offsetHeight
) { ) {
element.scrollTop = 0; element.scrollTop = 0;
clearInterval(interval); clearInterval(that.interval1);
setTimeout(start, delay); setTimeout(start, delay);
} }
} }
...@@ -491,6 +471,15 @@ export default { ...@@ -491,6 +471,15 @@ export default {
setTimeout(start, delay); setTimeout(start, delay);
} }
}, },
clearScroll() {
clearInterval(this.interval1);
},
reScroll() {
this.$nextTick(() => {
const element = document.getElementById("warning-list");
this.autoScroll(1, 50, 1500, element);
});
},
}, },
mounted() { mounted() {
...@@ -623,16 +612,15 @@ export default { ...@@ -623,16 +612,15 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.total-chart {
#today-chart,
#history-chart {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; margin: 0 auto;
justify-content: space-between; background: url("@/assets/chart.png") no-repeat;
#today-chart, background-size: 50% 50%;
#history-chart { background-position: center center;
width: calc(50% - 20px);
height: 100%;
}
} }
.no-data { .no-data {
position: absolute; position: absolute;
...@@ -654,4 +642,48 @@ export default { ...@@ -654,4 +642,48 @@ export default {
.short-container { .short-container {
height: calc(50% - 106px); height: calc(50% - 106px);
} }
.chart-legends {
display: flex;
flex-wrap: wrap;
align-items: center;
flex-direction: column;
justify-content: center;
& > div {
padding: 0 20px;
font-size: 14px;
line-height: 36px;
width: 100%;
text-align: left;
white-space: nowrap;
}
.rect {
width: 14px;
height: 14px;
display: inline-block;
vertical-align: middle;
}
}
.chart-container {
position: relative;
width: 200px;
height: 200px;
.title {
position: absolute;
top: 50%;
left: 50%;
text-align: center;
transform: translateX(-50%) translateY(-50%);
.main-title {
font-size: 30px;
font-weight: bold;
color: #00fcff;
}
.sub-title {
font-size: 16px;
font-weight: bold;
color: rgba(255, 255, 255, 0.7);
}
}
}
</style> </style>
\ No newline at end of file
src/components/elevator/Index.vue
View file @ f76910a0
...@@ -84,6 +84,8 @@ ...@@ -84,6 +84,8 @@
v-infinite-scroll="load" v-infinite-scroll="load"
:infinite-scroll-distance="1" :infinite-scroll-distance="1"
id="table-scroll" id="table-scroll"
@mouseenter="clearScroll"
@mouseleave="reScroll"
> >
<div <div
class="warning-table-column" class="warning-table-column"
...@@ -280,6 +282,7 @@ export default { ...@@ -280,6 +282,7 @@ export default {
currentElevatorTower: {}, currentElevatorTower: {},
leftBottom: 0, leftBottom: 0,
rightBottom: 0, rightBottom: 0,
interval1: null,
}; };
}, },
methods: { methods: {
...@@ -307,11 +310,9 @@ export default { ...@@ -307,11 +310,9 @@ export default {
} }
}, },
autoScroll(stepLength, speed, delay, element) { autoScroll(stepLength, speed, delay, element) {
let interval; var that = this;
//let step = 1
element.scrollTop = 0;
function start() { function start() {
interval = setInterval(scrolling, speed); that.interval1 = setInterval(scrolling, speed);
element.scrollTop += stepLength; element.scrollTop += stepLength;
} }
function scrolling() { function scrolling() {
...@@ -323,7 +324,7 @@ export default { ...@@ -323,7 +324,7 @@ export default {
element.scrollTop === element.scrollHeight - element.offsetHeight element.scrollTop === element.scrollHeight - element.offsetHeight
) { ) {
element.scrollTop = 0; element.scrollTop = 0;
clearInterval(interval); clearInterval(that.interval1);
setTimeout(start, delay); setTimeout(start, delay);
} }
} }
...@@ -332,6 +333,15 @@ export default { ...@@ -332,6 +333,15 @@ export default {
setTimeout(start, delay); setTimeout(start, delay);
} }
}, },
clearScroll() {
clearInterval(this.interval1);
},
reScroll() {
this.$nextTick(() => {
const element = document.getElementById("table-scroll");
this.autoScroll(1, 50, 1500, element);
});
},
getCurrentElevatorStatus(tower) { getCurrentElevatorStatus(tower) {
this.leftBottom = 0; this.leftBottom = 0;
this.rightBottom = 0; this.rightBottom = 0;
...@@ -523,8 +533,8 @@ export default { ...@@ -523,8 +533,8 @@ export default {
} }
.warning-info-img { .warning-info-img {
position: relative; position: relative;
transform: translateY(-40px); transform: translateY(-60px);
margin-bottom: -40px; margin-bottom: -60px;
img { img {
width: 80%; width: 80%;
margin: 0 auto; margin: 0 auto;
......
src/components/fallprotection/Index.vue
View file @ f76910a0
...@@ -125,6 +125,8 @@ ...@@ -125,6 +125,8 @@
v-infinite-scroll="load" v-infinite-scroll="load"
:infinite-scroll-distance="1" :infinite-scroll-distance="1"
id="table-scroll" id="table-scroll"
@mouseenter="clearScroll"
@mouseleave="reScroll"
> >
<div <div
class="warning-table-column" class="warning-table-column"
...@@ -195,6 +197,7 @@ export default { ...@@ -195,6 +197,7 @@ export default {
buildingWindowVisible: false, buildingWindowVisible: false,
windowData: {}, windowData: {},
page: 1, page: 1,
interval1: null,
}; };
}, },
methods: { methods: {
...@@ -369,11 +372,11 @@ export default { ...@@ -369,11 +372,11 @@ export default {
} }
}, },
autoScroll(stepLength, speed, delay, element) { autoScroll(stepLength, speed, delay, element) {
let interval; var that = this;
//let step = 1 //let step = 1
element.scrollTop = 0;
function start() { function start() {
interval = setInterval(scrolling, speed); that.interval1 = setInterval(scrolling, speed);
element.scrollTop += stepLength; element.scrollTop += stepLength;
} }
function scrolling() { function scrolling() {
...@@ -385,7 +388,7 @@ export default { ...@@ -385,7 +388,7 @@ export default {
element.scrollTop === element.scrollHeight - element.offsetHeight element.scrollTop === element.scrollHeight - element.offsetHeight
) { ) {
element.scrollTop = 0; element.scrollTop = 0;
clearInterval(interval); clearInterval(that.interval1);
setTimeout(start, delay); setTimeout(start, delay);
} }
} }
...@@ -394,6 +397,15 @@ export default { ...@@ -394,6 +397,15 @@ export default {
setTimeout(start, delay); setTimeout(start, delay);
} }
}, },
clearScroll() {
clearInterval(this.interval1);
},
reScroll() {
this.$nextTick(() => {
const element = document.getElementById("table-scroll");
this.autoScroll(1, 50, 1500, element);
});
},
}, },
mounted() { mounted() {
getBaseInfo().then((res) => { getBaseInfo().then((res) => {
...@@ -578,8 +590,8 @@ export default { ...@@ -578,8 +590,8 @@ export default {
} }
.warning-info-img { .warning-info-img {
position: relative; position: relative;
transform: translateY(-40px); transform: translateY(-60px);
margin-bottom: -40px; margin-bottom: -60px;
img { img {
width: 80%; width: 80%;
margin: 0 auto; margin: 0 auto;
...@@ -610,6 +622,7 @@ export default { ...@@ -610,6 +622,7 @@ export default {
} }
.warning-table-run-time { .warning-table-run-time {
width: 40%; width: 40%;
white-space: pre-wrap;
} }
.warning-table-device, .warning-table-device,
.warning-table-info { .warning-table-info {
...@@ -652,6 +665,7 @@ export default { ...@@ -652,6 +665,7 @@ export default {
width: 50%; width: 50%;
} }
.building-description { .building-description {
margin-bottom: 20px;
line-height: 32px; line-height: 32px;
font-size: 18px; font-size: 18px;
color: #c6def9; color: #c6def9;
......
src/components/noise/Index.vue
View file @ f76910a0
This diff is collapsed.
src/components/projectcheck/Index.vue
View file @ f76910a0
This diff is collapsed.
src/components/realname/Index.vue
View file @ f76910a0
...@@ -85,7 +85,12 @@ ...@@ -85,7 +85,12 @@
<div class="mid-area"> <div class="mid-area">
<Title text="实时考勤"></Title> <Title text="实时考勤"></Title>
<ShadowContainer class="long-container"> <ShadowContainer class="long-container">
<div class="warp" id="warp-list"> <div
class="warp"
id="warp-list"
@mouseenter="clearScroll1"
@mouseleave="reScroll1"
>
<div <div
class="person-check" class="person-check"
v-for="(person, index) in checkList" v-for="(person, index) in checkList"
...@@ -123,7 +128,55 @@ ...@@ -123,7 +128,55 @@
</ShadowContainer> </ShadowContainer>
<Title text="人员地域分布"></Title> <Title text="人员地域分布"></Title>
<ShadowContainer class="short-container"> <ShadowContainer class="short-container">
<div
style="
display: flex;
height: 100%;
flex-wrap: wrap;
align-items: center;
justify-content: center;
flex-direction: column;
"
>
<div style="display: flex">
<div class="chart-container">
<div ref="areaChart" id="area-chart"></div> <div ref="areaChart" id="area-chart"></div>
<div class="title">
<div class="main-title">
{{ areaTotal }}
</div>
<div class="sub-title">总人数</div>
</div>
</div>
<div class="chart-legends">
<div
v-for="(legend, index) in personAreaDetail"
:key="index"
:style="{
color:
legend.name == '绍兴市'
? '#FEBA01'
: legend.name == '省内市外'
? '#03D2FF'
: '#00FFDE',
}"
>
<span
class="rect"
:style="{
background:
legend.name == '绍兴市'
? '#FEBA01'
: legend.name == '省内市外'
? '#03D2FF'
: '#00FFDE',
}"
></span>
{{ legend.name }} {{ legend.value }}
</div>
</div>
</div>
</div>
</ShadowContainer> </ShadowContainer>
</div> </div>
<div class="rt-area" id="reset-area1"> <div class="rt-area" id="reset-area1">
...@@ -144,7 +197,12 @@ ...@@ -144,7 +197,12 @@
<div> <div>
<Title text="工种分布"></Title> <Title text="工种分布"></Title>
<ShadowContainer> <ShadowContainer>
<div class="work-types" id="table-scroll"> <div
class="work-types"
id="table-scroll"
@mouseenter="clearScroll2"
@mouseleave="reScroll2"
>
<div <div
v-for="(iType, index) in industryTypes" v-for="(iType, index) in industryTypes"
:key="index" :key="index"
...@@ -209,6 +267,9 @@ export default { ...@@ -209,6 +267,9 @@ export default {
industryTypesTotal: 0, industryTypesTotal: 0,
date: "", date: "",
intervalTimer: null, intervalTimer: null,
areaTotal: 0,
interval1: null,
interval2: null,
}; };
}, },
methods: { methods: {
...@@ -230,68 +291,16 @@ export default { ...@@ -230,68 +291,16 @@ export default {
areaData.map((item) => { areaData.map((item) => {
total += item.value; total += item.value;
}); });
this.areaTotal = total;
const option = { const option = {
title: {
x: "26.5%", //X坐标
y: "36%",
text: total,
subtext: "总人数",
textAlign: "center",
textStyle: {
//标题样式
fontSize: 30,
fontWeight: "bolder",
color: "#00fcff",
},
subtextStyle: {
//副标题样式
fontSize: 16,
fontWeight: "bolder",
color: "rgba(255,255,255,0.7)",
},
},
tooltip: { tooltip: {
trigger: "item", trigger: "item",
}, },
legend: {
itemHeight: 12,
itemWidth: 12,
icon: "rect",
right: "0%",
top: "20%",
orient: "vertical",
itemGap: 40,
textStyle: {
color: "inherit",
rich: {
a: {
fontSize: 12,
align: "left",
},
b: {
fontSize: 12,
align: "left",
lineHeight: 25,
},
},
},
formatter: (name) => {
let data = areaData;
let target;
for (let i = 0, l = data.length; i < l; i++) {
if (data[i].name == name) {
target = data[i].value;
}
}
let arr = [`{a|${name}}`, `{b|${target}} 人`];
return arr.join(" ");
},
},
series: [ series: [
{ {
type: "pie", type: "pie",
radius: ["50%", "60%"], radius: ["58%", "70%"],
center: ["28%", "50%"],
avoidLabelOverlap: false, avoidLabelOverlap: false,
itemStyle: { itemStyle: {
borderRadius: 20, borderRadius: 20,
...@@ -302,7 +311,19 @@ export default { ...@@ -302,7 +311,19 @@ export default {
position: "center", position: "center",
}, },
data: areaData, data: areaData.map((item) => {
return {
...item,
itemStyle: {
color:
item.name == "绍兴市"
? "#FEBA01"
: item.name == "省内市外"
? "#03D2FF"
: "#00FFDE",
},
};
}),
}, },
], ],
}; };
...@@ -646,6 +667,10 @@ export default { ...@@ -646,6 +667,10 @@ export default {
this.checkList = [...res.data]; this.checkList = [...res.data];
}); });
}, 60000); }, 60000);
this.$nextTick(() => {
const element = document.getElementById("warp-list");
this.autoScroll1(1, 50, 1500, element);
});
}); });
getPersonAreaStatus().then((res) => { getPersonAreaStatus().then((res) => {
...@@ -675,16 +700,38 @@ export default { ...@@ -675,16 +700,38 @@ export default {
); );
this.$nextTick(() => { this.$nextTick(() => {
const element = document.getElementById("table-scroll"); const element = document.getElementById("table-scroll");
this.autoScroll(1, 50, 1500, element); this.autoScroll2(1, 50, 1500, element);
}); });
}); });
}, },
autoScroll(stepLength, speed, delay, element) { autoScroll1(stepLength, speed, delay, element) {
let interval; var that = this;
//let step = 1 function start() {
that.interval1 = setInterval(scrolling, speed);
element.scrollTop += stepLength;
}
function scrolling() {
var sTop = element.scrollTop;
element.scrollTop += stepLength;
if (
sTop === element.scrollTop ||
sTop == 0 ||
element.scrollTop === element.scrollHeight - element.offsetHeight
) {
element.scrollTop = 0; element.scrollTop = 0;
clearInterval(that.interval1);
setTimeout(start, delay);
}
}
if (element.offsetHeight !== element.scrollHeight) {
// 元素内容没有溢出时，不触发
setTimeout(start, delay);
}
},
autoScroll2(stepLength, speed, delay, element) {
var that = this;
function start() { function start() {
interval = setInterval(scrolling, speed); that.interval2 = setInterval(scrolling, speed);
element.scrollTop += stepLength; element.scrollTop += stepLength;
} }
function scrolling() { function scrolling() {
...@@ -696,7 +743,7 @@ export default { ...@@ -696,7 +743,7 @@ export default {
element.scrollTop === element.scrollHeight - element.offsetHeight element.scrollTop === element.scrollHeight - element.offsetHeight
) { ) {
element.scrollTop = 0; element.scrollTop = 0;
clearInterval(interval); clearInterval(that.interval2);
setTimeout(start, delay); setTimeout(start, delay);
} }
} }
...@@ -705,6 +752,24 @@ export default { ...@@ -705,6 +752,24 @@ export default {
setTimeout(start, delay); setTimeout(start, delay);
} }
}, },
clearScroll1() {
clearInterval(this.interval1);
},
reScroll1() {
this.$nextTick(() => {
const element = document.getElementById("warp-list");
this.autoScroll1(1, 50, 1500, element);
});
},
clearScroll2() {
clearInterval(this.interval2);
},
reScroll2() {
this.$nextTick(() => {
const element = document.getElementById("table-scroll");
this.autoScroll2(1, 50, 1500, element);
});
},
}, },
mounted() { mounted() {
this.getTime(); this.getTime();
...@@ -832,6 +897,10 @@ export default { ...@@ -832,6 +897,10 @@ export default {
#area-chart { #area-chart {
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0 auto;
background: url("@/assets/chart.png") no-repeat;
background-size: 50% 50%;
background-position: center center;
} }
.chart-title { .chart-title {
background: rgba(40, 137, 195, 0.2); background: rgba(40, 137, 195, 0.2);
...@@ -936,4 +1005,49 @@ export default { ...@@ -936,4 +1005,49 @@ export default {
margin: 8px 0; margin: 8px 0;
background: #114e70; background: #114e70;
} }
.chart-legends {
display: flex;
flex-wrap: wrap;
align-items: center;
flex-direction: column;
justify-content: center;
width: calc(100% - 200px);
& > div {
padding: 0 20px;
font-size: 14px;
line-height: 36px;
width: 100%;
text-align: left;
}
.rect {
width: 14px;
height: 14px;
display: inline-block;
vertical-align: middle;
}
}
.chart-container {
position: relative;
width: 200px;
height: 200px;
.title {
position: absolute;
top: 50%;
left: 50%;
text-align: center;
transform: translateX(-50%) translateY(-50%);
.main-title {
font-size: 30px;
font-weight: bold;
color: #00fcff;
}
.sub-title {
font-size: 16px;
font-weight: bold;
color: rgba(255, 255, 255, 0.7);
}
}
}
</style> </style>
\ No newline at end of file
src/components/safecap/mapDialog.vue
View file @ f76910a0
...@@ -120,6 +120,33 @@ export default { ...@@ -120,6 +120,33 @@ export default {
strokeColor: "#3366bb", strokeColor: "#3366bb",
strokeWeight: 8, strokeWeight: 8,
}); });
var startcircleMarker = new this.AMap.CircleMarker({
center: paths[0],
radius: 8, //3D视图下，CircleMarker半径不要超过64px
strokeColor: "green",
strokeWeight: 2,
strokeOpacity: 0.5,
fillColor: "green",
zIndex: 10,
bubble: true,
cursor: "pointer",
clickable: true,
});
startcircleMarker.setMap(this.map);
var endcircleMarker = new this.AMap.CircleMarker({
center: paths[paths.length - 1],
radius: 8, //3D视图下，CircleMarker半径不要超过64px
strokeColor: "red",
strokeWeight: 2,
strokeOpacity: 0.5,
fillColor: "red",
zIndex: 10,
bubble: true,
cursor: "pointer",
clickable: true,
});
endcircleMarker.setMap(this.map);
}); });
}, },
}, },
......
src/components/tower/Index.vue
View file @ f76910a0
...@@ -3,7 +3,46 @@ ...@@ -3,7 +3,46 @@
<div class="side-area"> <div class="side-area">
<Title text="设备总览"></Title> <Title text="设备总览"></Title>
<ShadowContainer class="short-container"> <ShadowContainer class="short-container">
<div
style="
display: flex;
height: 100%;
flex-wrap: wrap;
align-items: center;
justify-content: center;
flex-direction: column;
"
>
<div style="display: flex">
<div class="chart-container">
<div ref="deviceChart" id="device-chart"></div> <div ref="deviceChart" id="device-chart"></div>
<div class="title">
<div class="main-title">
{{ deviceTotal }}
</div>
<div class="sub-title">总数</div>
</div>
</div>
<div class="chart-legends">
<div
v-for="(legend, index) in pieChartData"
:key="index"
:style="{
color: legend.name == '在线总数' ? '#2980FF' : '#AEE4F8',
}"
>
<span
class="rect"
:style="{
background:
legend.name == '在线总数' ? '#2980FF' : '#AEE4F8',
}"
></span>
{{ legend.name }} {{ legend.value }}
</div>
</div>
</div>
</div>
</ShadowContainer> </ShadowContainer>
<Title text="各塔吊24h力矩百分比统计"></Title> <Title text="各塔吊24h力矩百分比统计"></Title>
<ShadowContainer class="short-container"> <ShadowContainer class="short-container">
...@@ -17,7 +56,7 @@ ...@@ -17,7 +56,7 @@
<div id="mid-area"> <div id="mid-area">
<div class="cover-area"></div> <div class="cover-area"></div>
<div class="towerwindow" v-if="towerWindowVisible"> <div class="towerwindow" v-if="towerWindowVisible">
<div class="tower-description"> <div class="tower-description" @click="openDetailDialog">
<img <img
:src=" :src="
windowData.is_online == 1 windowData.is_online == 1
...@@ -34,14 +73,6 @@ ...@@ -34,14 +73,6 @@
]" ]"
>{{ windowData.is_online_text }}</span >{{ windowData.is_online_text }}</span
> >
<span @click="openDetailDialog" class="name" style="cursor: pointer"
>详情
<img
style="width: 20px; vertical-align: top; margin-top: 4px"
src="@/assets/tower/arrow.png"
alt=""
/>
</span>
</div> </div>
<!-- <div class="recent-open">最近使用:{{ windowData.log_time }}</div> --> <!-- <div class="recent-open">最近使用:{{ windowData.log_time }}</div> -->
</div> </div>
...@@ -95,6 +126,8 @@ ...@@ -95,6 +126,8 @@
v-infinite-scroll="load" v-infinite-scroll="load"
:infinite-scroll-distance="1" :infinite-scroll-distance="1"
id="table-scroll" id="table-scroll"
@mouseenter="clearScroll"
@mouseleave="reScroll"
> >
<div <div
class="warning-table-column" class="warning-table-column"
...@@ -174,6 +207,8 @@ export default { ...@@ -174,6 +207,8 @@ export default {
deviceData: {}, deviceData: {},
markerArray: [], markerArray: [],
page: 1, page: 1,
deviceTotal: 0,
interval1: null,
}; };
}, },
methods: { methods: {
...@@ -184,68 +219,15 @@ export default { ...@@ -184,68 +219,15 @@ export default {
pieData.map((item) => { pieData.map((item) => {
total += item.value; total += item.value;
}); });
this.deviceTotal = total;
const option = { const option = {
title: {
x: "27%", //X坐标
y: "30%",
text: total,
subtext: "总数",
textAlign: "center",
textStyle: {
//标题样式
fontSize: 30,
fontWeight: "bolder",
color: "#00fcff",
},
subtextStyle: {
//副标题样式
fontSize: 16,
fontWeight: "bolder",
color: "rgba(255,255,255,0.7)",
},
},
tooltip: { tooltip: {
trigger: "item", trigger: "item",
}, },
legend: {
itemHeight: 12,
itemWidth: 12,
icon: "rect",
right: "10%",
top: "25%",
orient: "vertical",
itemGap: 40,
textStyle: {
color: "inherit",
rich: {
a: {
fontSize: 14,
align: "left",
},
b: {
fontSize: 20,
align: "left",
lineHeight: 25,
},
},
},
formatter: (name) => {
let data = pieData;
let target;
for (let i = 0, l = data.length; i < l; i++) {
if (data[i].name == name) {
target = data[i].value;
}
}
let arr = [`{a|${name}}`, `{b|${target}} 台`];
return arr.join(" ");
},
},
series: [ series: [
{ {
type: "pie", type: "pie",
radius: ["60%", "70%"], radius: ["58%", "70%"],
center: ["28%", "50%"],
avoidLabelOverlap: false, avoidLabelOverlap: false,
itemStyle: { itemStyle: {
borderRadius: 20, borderRadius: 20,
...@@ -682,11 +664,9 @@ export default { ...@@ -682,11 +664,9 @@ export default {
} }
}, },
autoScroll(stepLength, speed, delay, element) { autoScroll(stepLength, speed, delay, element) {
let interval; var that = this;
//let step = 1
element.scrollTop = 0;
function start() { function start() {
interval = setInterval(scrolling, speed); that.interval1 = setInterval(scrolling, speed);
element.scrollTop += stepLength; element.scrollTop += stepLength;
} }
function scrolling() { function scrolling() {
...@@ -698,7 +678,7 @@ export default { ...@@ -698,7 +678,7 @@ export default {
element.scrollTop === element.scrollHeight - element.offsetHeight element.scrollTop === element.scrollHeight - element.offsetHeight
) { ) {
element.scrollTop = 0; element.scrollTop = 0;
clearInterval(interval); clearInterval(that.interval1);
setTimeout(start, delay); setTimeout(start, delay);
} }
} }
...@@ -707,6 +687,15 @@ export default { ...@@ -707,6 +687,15 @@ export default {
setTimeout(start, delay); setTimeout(start, delay);
} }
}, },
clearScroll() {
clearInterval(this.interval1);
},
reScroll() {
this.$nextTick(() => {
const element = document.getElementById("table-scroll");
this.autoScroll(1, 50, 1500, element);
});
},
}, },
mounted() { mounted() {
this.getTowerData(); this.getTowerData();
...@@ -771,19 +760,13 @@ export default { ...@@ -771,19 +760,13 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.chart-container {
position: relative;
.custom-chart {
position: absolute;
width: 25%;
top: 50%;
transform: translateY(-50%);
left: 15.5%;
}
}
#device-chart { #device-chart {
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0 auto;
background: url("@/assets/chart.png") no-repeat;
background-size: 50% 50%;
background-position: center center;
} }
.tower-name { .tower-name {
background: rgba(255, 175, 81, 0.1); background: rgba(255, 175, 81, 0.1);
...@@ -968,6 +951,7 @@ export default { ...@@ -968,6 +951,7 @@ export default {
} }
.warning-table-run-time { .warning-table-run-time {
width: 40%; width: 40%;
white-space: pre-wrap;
} }
.warning-table-device, .warning-table-device,
.warning-table-info { .warning-table-info {
...@@ -996,4 +980,48 @@ export default { ...@@ -996,4 +980,48 @@ export default {
box-shadow: #1f81ef 0px 0px 8px inset; box-shadow: #1f81ef 0px 0px 8px inset;
pointer-events: none; pointer-events: none;
} }
.chart-legends {
display: flex;
flex-wrap: wrap;
align-items: center;
flex-direction: column;
justify-content: center;
width: calc(100% - 200px);
& > div {
padding: 0 20px;
font-size: 14px;
line-height: 36px;
width: 100%;
text-align: left;
}
.rect {
width: 14px;
height: 14px;
display: inline-block;
vertical-align: middle;
}
}
.chart-container {
position: relative;
width: 200px;
height: 200px;
.title {
position: absolute;
top: 50%;
left: 50%;
text-align: center;
transform: translateX(-50%) translateY(-50%);
.main-title {
font-size: 30px;
font-weight: bold;
color: #00fcff;
}
.sub-title {
font-size: 16px;
font-weight: bold;
color: rgba(255, 255, 255, 0.7);
}
}
}
</style> </style>
\ No newline at end of file
src/components/tower/deviceDialog.vue
View file @ f76910a0
...@@ -488,7 +488,7 @@ export default { ...@@ -488,7 +488,7 @@ export default {
} }
} }
.base-info { .base-info {
margin-bottom: 20px; margin-bottom: 30px;
} }
#video-container { #video-container {
width: 100%; width: 100%;
......
src/components/tower/deviceDialog2.vue
View file @ f76910a0
...@@ -255,7 +255,7 @@ export default { ...@@ -255,7 +255,7 @@ export default {
.base-info { .base-info {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 20px; margin-bottom: 30px;
} }
#video-container { #video-container {
width: calc(40% - 20px); width: calc(40% - 20px);
......
src/components/unloadingplatform/Index.vue
View file @ f76910a0
...@@ -113,6 +113,8 @@ ...@@ -113,6 +113,8 @@
v-infinite-scroll="load" v-infinite-scroll="load"
:infinite-scroll-distance="1" :infinite-scroll-distance="1"
id="table-scroll" id="table-scroll"
@mouseenter="clearScroll"
@mouseleave="reScroll"
> >
<div <div
class="warning-table-column" class="warning-table-column"
...@@ -185,6 +187,7 @@ export default { ...@@ -185,6 +187,7 @@ export default {
batteryChart: null, batteryChart: null,
weightChart: null, weightChart: null,
page: 1, page: 1,
interval1: null,
}; };
}, },
methods: { methods: {
...@@ -447,11 +450,9 @@ export default { ...@@ -447,11 +450,9 @@ export default {
} }
}, },
autoScroll(stepLength, speed, delay, element) { autoScroll(stepLength, speed, delay, element) {
let interval; var that = this;
//let step = 1
element.scrollTop = 0;
function start() { function start() {
interval = setInterval(scrolling, speed); that.interval1 = setInterval(scrolling, speed);
element.scrollTop += stepLength; element.scrollTop += stepLength;
} }
function scrolling() { function scrolling() {
...@@ -463,7 +464,7 @@ export default { ...@@ -463,7 +464,7 @@ export default {
element.scrollTop === element.scrollHeight - element.offsetHeight element.scrollTop === element.scrollHeight - element.offsetHeight
) { ) {
element.scrollTop = 0; element.scrollTop = 0;
clearInterval(interval); clearInterval(that.interval1);
setTimeout(start, delay); setTimeout(start, delay);
} }
} }
...@@ -472,6 +473,15 @@ export default { ...@@ -472,6 +473,15 @@ export default {
setTimeout(start, delay); setTimeout(start, delay);
} }
}, },
clearScroll() {
clearInterval(this.interval1);
},
reScroll() {
this.$nextTick(() => {
const element = document.getElementById("table-scroll");
this.autoScroll(1, 50, 1500, element);
});
},
}, },
mounted() { mounted() {
...@@ -655,8 +665,8 @@ export default { ...@@ -655,8 +665,8 @@ export default {
} }
.warning-info-img { .warning-info-img {
position: relative; position: relative;
transform: translateY(-40px); transform: translateY(-60px);
margin-bottom: -40px; margin-bottom: -60px;
img { img {
width: 80%; width: 80%;
margin: 0 auto; margin: 0 auto;
...@@ -686,11 +696,12 @@ export default { ...@@ -686,11 +696,12 @@ export default {
} }
} }
.warning-table-run-time { .warning-table-run-time {
width: 40%; width: 30%;
white-space: pre-wrap;
} }
.warning-table-device, .warning-table-device,
.warning-table-info { .warning-table-info {
width: 20%; width: 25%;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
...@@ -733,6 +744,7 @@ export default { ...@@ -733,6 +744,7 @@ export default {
font-size: 18px; font-size: 18px;
color: #c6def9; color: #c6def9;
padding-bottom: 16px; padding-bottom: 16px;
margin-bottom: 20px;
border-bottom: 1px solid #7a8fad; border-bottom: 1px solid #7a8fad;
img { img {
width: 32px; width: 32px;
......
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