shenzhen-dev #2
BIN
src/assets/images/toxicGasMonitor/gasBg.png
Normal file
BIN
src/assets/images/toxicGasMonitor/gasBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 606 B |
BIN
src/assets/images/toxicGasMonitor/lineIcon.png
Normal file
BIN
src/assets/images/toxicGasMonitor/lineIcon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 428 B |
BIN
src/assets/images/toxicGasMonitor/lineIcon2.png
Normal file
BIN
src/assets/images/toxicGasMonitor/lineIcon2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 420 B |
@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<Card title="历史告警趋势">
|
||||
<div class="topLeftBox">
|
||||
<div class="ai-top-left">
|
||||
<div class="history-content">
|
||||
<div class="selectRight">
|
||||
<div class="rightHeader">
|
||||
<div class="day Selected" @click="getNowData(1)" :class="checked == 1 ? 'active' : ''">24时</div>
|
||||
<div class="week Selected" @click="getWeekData(2)" :class="checked == 2 ? 'active' : ''">7日</div>
|
||||
<div class="month Selected" @click="getMonthData(3)" :class="checked == 3 ? 'active' : ''">30日</div>
|
||||
<div>
|
||||
<div class="select-right">
|
||||
<div class="day selected" @click="getNowData(1)" :class="checked == 1 ? 'active' : ''">24时</div>
|
||||
<div class="week selected" @click="getWeekData(2)" :class="checked == 2 ? 'active' : ''">7日</div>
|
||||
<div class="month selected" @click="getMonthData(3)" :class="checked == 3 ? 'active' : ''">30日</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="AIHistoryTrend" ref="AIHistoryTrend" style="width: 100%; height: 100%"></div>
|
||||
@ -250,7 +250,7 @@ onBeforeUnmount(async () => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.topLeftBox {
|
||||
.ai-top-left {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.title {
|
||||
@ -271,7 +271,7 @@ onBeforeUnmount(async () => {
|
||||
// background: url("@/assets/images/cardImg.png") no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
position: relative;
|
||||
.rightHeader {
|
||||
.select-right {
|
||||
width: 20%;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
@ -282,7 +282,7 @@ onBeforeUnmount(async () => {
|
||||
line-height: 20px;
|
||||
right: -1%;
|
||||
top: 5%;
|
||||
.Selected {
|
||||
.selected {
|
||||
height: 5%;
|
||||
background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<Card title="今日告警">
|
||||
<div class="bottomBox">
|
||||
<div class="ai-bottom-right">
|
||||
<div class="list-content">
|
||||
<div class="tabList">
|
||||
<div class="tab-list">
|
||||
<div>序号</div>
|
||||
<div>抓拍照片</div>
|
||||
<div style="margin-right: 1%">设备名称</div>
|
||||
@ -11,8 +11,8 @@
|
||||
<div>操作</div>
|
||||
</div>
|
||||
|
||||
<div class="listBox">
|
||||
<div v-for="(item, index) in list" class="listStyle" :key="item.id">
|
||||
<div class="list-box">
|
||||
<div v-for="(item, index) in list" class="list-style" :key="item.id">
|
||||
<div>{{ index + 1 }}</div>
|
||||
<div class="list-img">
|
||||
<img src="@/assets/images/vehicleManagement/car.png" alt="" />
|
||||
@ -23,7 +23,7 @@
|
||||
<div>{{ item.warnTime }}</div>
|
||||
<div style="color: #65d7f9; cursor: pointer" @click="showDialog = !showDialog">查看详情</div>
|
||||
</div>
|
||||
<div class="notoDta" v-if="list.length == 0">
|
||||
<div class="not-data" v-if="list.length == 0">
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
@ -266,7 +266,7 @@ onMounted(async () => {});
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottomBox {
|
||||
.ai-bottom-right {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.title {
|
||||
@ -288,7 +288,7 @@ onMounted(async () => {});
|
||||
margin-top: 10px;
|
||||
// background: url("@/assets/images/cardImg.png") no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
.tabList {
|
||||
.tab-list {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
@ -305,10 +305,10 @@ onMounted(async () => {});
|
||||
width: 16%;
|
||||
}
|
||||
}
|
||||
.listBox {
|
||||
.list-box {
|
||||
height: 95%;
|
||||
overflow: scroll;
|
||||
.listStyle {
|
||||
.list-style {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
@ -330,13 +330,13 @@ onMounted(async () => {});
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.listStyle:hover {
|
||||
.list-style:hover {
|
||||
background: #091f3f;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.notoDta {
|
||||
.not-data {
|
||||
top: 73%;
|
||||
width: 12%;
|
||||
left: 44%;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<Card title="实时监测">
|
||||
<div class="centerBottom">
|
||||
<div class="ai-center-bottom">
|
||||
<div class="today-warn"><i>今日告警:94</i></div>
|
||||
<div class="icon"></div>
|
||||
<div class="week-warn">
|
||||
@ -20,7 +20,7 @@ import Card from "@/components/card.vue";
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.centerBottom {
|
||||
.ai-center-bottom {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<Card title="今日告警趋势">
|
||||
<div class="topLeftBox">
|
||||
<div class="top-left-box">
|
||||
<div class="today-content">
|
||||
<!-- <div class="selectRight">
|
||||
<el-select v-model="value" class="m-2" placeholder="Select" size="small" @change="selectChange">
|
||||
@ -248,7 +248,7 @@ onBeforeUnmount(async () => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.topLeftBox {
|
||||
.top-left-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.title {
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<Card title="告警统计">
|
||||
<div class="box">
|
||||
<div class="selectRight">
|
||||
<div class="rightHeader">
|
||||
<div class="day Selected" @click="getNowData(1)" :class="checked == 1 ? 'active' : ''">24时</div>
|
||||
<div class="week Selected" @click="getWeekData(2)" :class="checked == 2 ? 'active' : ''">7日</div>
|
||||
<div class="month Selected" @click="getMonthData(3)" :class="checked == 3 ? 'active' : ''">30日</div>
|
||||
<div class="ai-top-right">
|
||||
<div>
|
||||
<div class="select-right">
|
||||
<div class="day selected" @click="getNowData(1)" :class="checked == 1 ? 'active' : ''">24时</div>
|
||||
<div class="week selected" @click="getWeekData(2)" :class="checked == 2 ? 'active' : ''">7日</div>
|
||||
<div class="month selected" @click="getMonthData(3)" :class="checked == 3 ? 'active' : ''">30日</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="AIWarnTotal" ref="AIWarnTotal" style="width: 100%; height: 100%"></div>
|
||||
@ -203,12 +203,12 @@ onMounted(async () => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box {
|
||||
.ai-top-right {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.rightHeader {
|
||||
.select-right {
|
||||
width: 25%;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
@ -219,7 +219,7 @@ onMounted(async () => {
|
||||
line-height: 20px;
|
||||
right: -1%;
|
||||
top: 5%;
|
||||
.Selected {
|
||||
.selected {
|
||||
height: 5%;
|
||||
background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<Card title="过磅记录">
|
||||
<div class="bottom-box">
|
||||
<div class="content">
|
||||
<div class="tabList">
|
||||
<div class="loadometer-bottom-center">
|
||||
<div class="loadometer-content">
|
||||
<div class="tab-list">
|
||||
<div>序号</div>
|
||||
<div>流水号</div>
|
||||
<div>车牌号</div>
|
||||
@ -11,8 +11,8 @@
|
||||
<div style="width: 20%">皮重时间</div>
|
||||
<div style="width: 23%">毛重时间</div>
|
||||
</div>
|
||||
<div class="listBox">
|
||||
<div v-for="(item, index) in list" class="listStyle" :key="item.id">
|
||||
<div class="list-box">
|
||||
<div v-for="(item, index) in list" class="list-style" :key="item.id">
|
||||
<div>{{ index + 1 }}</div>
|
||||
<div>{{ item.waterNum }}</div>
|
||||
<div>{{ item.carNum }}</div>
|
||||
@ -21,7 +21,7 @@
|
||||
<div style="width: 20%">{{ item.tareTime }}</div>
|
||||
<div style="width: 18%; text-align: right">{{ item.grossTime }}</div>
|
||||
</div>
|
||||
<div class="notoDta" v-if="list.length == 0">
|
||||
<div class="not-data" v-if="list.length == 0">
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
@ -153,7 +153,7 @@ onMounted(async () => {});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bottom-box {
|
||||
.loadometer-bottom-center {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.title {
|
||||
@ -169,13 +169,13 @@ onMounted(async () => {});
|
||||
font-family: OPPOSansH;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
.loadometer-content {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
background: url("@/assets/images/cardImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.tabList {
|
||||
.tab-list {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
@ -194,10 +194,10 @@ onMounted(async () => {});
|
||||
width: 11.5%;
|
||||
}
|
||||
}
|
||||
.listBox {
|
||||
.list-box {
|
||||
height: 90%;
|
||||
overflow: scroll;
|
||||
.listStyle {
|
||||
.list-style {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
@ -209,13 +209,13 @@ onMounted(async () => {});
|
||||
width: 11.5%;
|
||||
}
|
||||
}
|
||||
.listStyle:hover {
|
||||
.list-style:hover {
|
||||
background: #091f3f;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.notoDta {
|
||||
.not-data {
|
||||
top: 73%;
|
||||
width: 12%;
|
||||
left: 44%;
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<Card title="预约趋势">
|
||||
<div class="topLeftBox">
|
||||
<div class="content">
|
||||
<div class="selectRight">
|
||||
<div class="rightHeader">
|
||||
<div class="day Selected" @click="getNowData(1)" :class="checked == 1 ? 'active' : ''">今日</div>
|
||||
<div class="week Selected" @click="getWeekData(2)" :class="checked == 2 ? 'active' : ''">7日</div>
|
||||
<div class="month Selected" @click="getMonthData(3)" :class="checked == 3 ? 'active' : ''">30日</div>
|
||||
<div class="loadometer-top-left">
|
||||
<div class="loadometer-content">
|
||||
<div>
|
||||
<div class="right-header">
|
||||
<div class="day selected" @click="getNowData(1)" :class="checked == 1 ? 'active' : ''">今日</div>
|
||||
<div class="week selected" @click="getWeekData(2)" :class="checked == 2 ? 'active' : ''">7日</div>
|
||||
<div class="month selected" @click="getMonthData(3)" :class="checked == 3 ? 'active' : ''">30日</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="appointmentTrend" ref="appointmentTrend" style="width: 100%; height: 100%"></div>
|
||||
@ -250,15 +250,15 @@ onBeforeUnmount(async () => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.topLeftBox {
|
||||
.loadometer-top-left {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.content {
|
||||
.loadometer-content {
|
||||
height: 100%;
|
||||
background: url("@/assets/images/cardImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
.rightHeader {
|
||||
.right-header {
|
||||
width: 30%;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
@ -269,7 +269,7 @@ onBeforeUnmount(async () => {
|
||||
line-height: 20px;
|
||||
right: 1%;
|
||||
top: 6%;
|
||||
.Selected {
|
||||
.selected {
|
||||
height: 5%;
|
||||
background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<Card title="过磅统计">
|
||||
<div class="topLeftBox">
|
||||
<div class="content">
|
||||
<div class="selectRight">
|
||||
<div class="rightHeader">
|
||||
<div class="day Selected" @click="getNowData(1)" :class="checked == 1 ? 'active' : ''">今日</div>
|
||||
<div class="week Selected" @click="getWeekData(2)" :class="checked == 2 ? 'active' : ''">7日</div>
|
||||
<div class="month Selected" @click="getMonthData(3)" :class="checked == 3 ? 'active' : ''">30日</div>
|
||||
<div class="loadometer-top-left">
|
||||
<div class="loadometer-content">
|
||||
<div>
|
||||
<div class="right-header">
|
||||
<div class="day selected" @click="getNowData(1)" :class="checked == 1 ? 'active' : ''">今日</div>
|
||||
<div class="week selected" @click="getWeekData(2)" :class="checked == 2 ? 'active' : ''">7日</div>
|
||||
<div class="month selected" @click="getMonthData(3)" :class="checked == 3 ? 'active' : ''">30日</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="weighStatist" ref="weighStatist" style="width: 100%; height: 100%"></div>
|
||||
@ -250,15 +250,15 @@ onBeforeUnmount(async () => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.topLeftBox {
|
||||
.loadometer-top-left {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.content {
|
||||
.loadometer-content {
|
||||
height: 100%;
|
||||
background: url("@/assets/images/cardImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
.rightHeader {
|
||||
.right-header {
|
||||
width: 30%;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
@ -269,7 +269,7 @@ onBeforeUnmount(async () => {
|
||||
line-height: 20px;
|
||||
right: 1%;
|
||||
top: 5%;
|
||||
.Selected {
|
||||
.selected {
|
||||
height: 5%;
|
||||
background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<Card title="实时过磅">
|
||||
<div class="center-bottom">
|
||||
<div class="load-top-center">
|
||||
<div class="realtime-data">
|
||||
<div class="realtime-box" v-for="item in list" :key="item.id">
|
||||
<div class="text">今日过磅</div>
|
||||
@ -55,7 +55,7 @@ const list = reactive([
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.center-bottom {
|
||||
.load-top-center {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.realtime-data {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<Card title="供应商排名">
|
||||
<div class="box">
|
||||
<div class="load-top-left">
|
||||
<div id="supplierRank" ref="supplierRank" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</Card>
|
||||
@ -284,7 +284,7 @@ onMounted(async () => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box {
|
||||
.load-top-left {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-left: 3%;
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<Card title="物料统计">
|
||||
<div class="leftBottomBox">
|
||||
<div class="selectRight">
|
||||
<div class="rightHeader">
|
||||
<div class="day Selected" @click="getNowData(1)" :class="checked == 1 ? 'active' : ''">今日</div>
|
||||
<div class="week Selected" @click="getWeekData(2)" :class="checked == 2 ? 'active' : ''">7日</div>
|
||||
<div class="month Selected" @click="getMonthData(3)" :class="checked == 3 ? 'active' : ''">30日</div>
|
||||
<div class="load-top-right">
|
||||
<div>
|
||||
<div class="select-right">
|
||||
<div class="day selected" @click="getNowData(1)" :class="checked == 1 ? 'active' : ''">今日</div>
|
||||
<div class="week selected" @click="getWeekData(2)" :class="checked == 2 ? 'active' : ''">7日</div>
|
||||
<div class="month selected" @click="getMonthData(3)" :class="checked == 3 ? 'active' : ''">30日</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="materialStatistics" style="width: 100%; height: 100%"></div>
|
||||
@ -350,7 +350,7 @@ function drawEchart() {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.leftBottomBox {
|
||||
.load-top-right {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
@ -375,7 +375,7 @@ function drawEchart() {
|
||||
// background: url("@/assets/images/dustNoise/motionEffect.webp") no-repeat;
|
||||
// background-size: cover;
|
||||
// }
|
||||
.rightHeader {
|
||||
.select-right {
|
||||
width: 35%;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
@ -386,7 +386,7 @@ function drawEchart() {
|
||||
line-height: 20px;
|
||||
right: -1%;
|
||||
top: 5%;
|
||||
.Selected {
|
||||
.selected {
|
||||
height: 5%;
|
||||
background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
@ -2,21 +2,21 @@
|
||||
<Card title="今日告警">
|
||||
<div class="bottom-left">
|
||||
<div class="left-content">
|
||||
<div class="tabList">
|
||||
<div class="tab-list">
|
||||
<div>序号</div>
|
||||
<div>报警设备</div>
|
||||
<div>报警时间</div>
|
||||
<div>报警类型</div>
|
||||
</div>
|
||||
<div class="listBox">
|
||||
<div v-for="(item, index) in list" class="listStyle" :key="item.id">
|
||||
<div class="list-box">
|
||||
<div v-for="(item, index) in list" class="list-style" :key="item.id">
|
||||
<div>{{ index + 1 }}</div>
|
||||
<!-- <div>{{ item.dev }}</div> -->
|
||||
<div>{{ item.devName }}</div>
|
||||
<div style="margin-right: 0.5%">{{ item.warnTime }}</div>
|
||||
<div>{{ item.warnType }}</div>
|
||||
</div>
|
||||
<div class="notoDta" v-if="list.length == 0">
|
||||
<div class="not-data" v-if="list.length == 0">
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
@ -148,7 +148,7 @@ onMounted(async () => {});
|
||||
width: 100%;
|
||||
// background: url("@/assets/images/cardImg.png") no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
.tabList {
|
||||
.tab-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
@ -166,10 +166,10 @@ onMounted(async () => {});
|
||||
width: 24%;
|
||||
}
|
||||
}
|
||||
.listBox {
|
||||
.list-box {
|
||||
height: 90%;
|
||||
overflow: scroll;
|
||||
.listStyle {
|
||||
.list-style {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
@ -190,13 +190,13 @@ onMounted(async () => {});
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.listStyle:hover {
|
||||
.list-style:hover {
|
||||
background: #091f3f;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.notoDta {
|
||||
.not-data {
|
||||
top: 73%;
|
||||
width: 12%;
|
||||
left: 44%;
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<Card title="监测记录">
|
||||
<div class="topLeftBox">
|
||||
<div class="bottom-right-box">
|
||||
<div class="history-content">
|
||||
<div class="selectRight">
|
||||
<div class="rightHeader">
|
||||
<div class="day Selected" @click="getNowData(1)" :class="checked == 1 ? 'active' : ''">温度</div>
|
||||
<div class="week Selected" @click="getWeekData(2)" :class="checked == 2 ? 'active' : ''">湿度</div>
|
||||
<div>
|
||||
<div class="select-right">
|
||||
<div class="day selected" @click="getNowData(1)" :class="checked == 1 ? 'active' : ''">温度</div>
|
||||
<div class="week selected" @click="getWeekData(2)" :class="checked == 2 ? 'active' : ''">湿度</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="monitorRecord" ref="monitorRecord" style="width: 100%; height: 100%"></div>
|
||||
@ -273,7 +273,7 @@ onBeforeUnmount(async () => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.topLeftBox {
|
||||
.bottom-right-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.title {
|
||||
@ -294,7 +294,7 @@ onBeforeUnmount(async () => {
|
||||
background: url("@/assets/images/cardImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
.rightHeader {
|
||||
.select-right {
|
||||
width: 20%;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
@ -305,7 +305,7 @@ onBeforeUnmount(async () => {
|
||||
line-height: 20px;
|
||||
right: -5%;
|
||||
top: 5%;
|
||||
.Selected {
|
||||
.selected {
|
||||
height: 5%;
|
||||
background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
@ -1,23 +1,66 @@
|
||||
<template>
|
||||
<Card title="今日报警">
|
||||
<div class="centerBottom">
|
||||
<div class="top-center">
|
||||
<div class="today-warn">
|
||||
<div class="warn-num">24</div>
|
||||
<div class="warn-text">今日报警次数</div>
|
||||
</div>
|
||||
<div class="select-right">
|
||||
<el-select v-model="selectDay" style="width: 85%" size="small">
|
||||
<el-option v-for="(item, index) in dayList" :key="index" :label="item.dayType" :value="item.value" />
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Card from "@/components/card.vue";
|
||||
import { ref } from "vue";
|
||||
// 当前对应的种类
|
||||
let selectDay = ref(1);
|
||||
let dayList = ref([
|
||||
{
|
||||
value: 1,
|
||||
dayType: "标养室1"
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
dayType: "标养室2"
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
dayType: "标养室3"
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
dayType: "标养室4"
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.centerBottom {
|
||||
:deep(.el-input__wrapper) {
|
||||
background: #112d59;
|
||||
padding-left: 10%;
|
||||
}
|
||||
:deep(.el-input__inner) {
|
||||
color: #fff;
|
||||
}
|
||||
:deep(.el-select .el-input .el-select__caret) {
|
||||
color: #fff;
|
||||
}
|
||||
.top-center {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.select-right {
|
||||
position: absolute;
|
||||
right: -2%;
|
||||
width: 15%;
|
||||
top: -9%;
|
||||
z-index: 9;
|
||||
}
|
||||
.today-warn {
|
||||
font-size: calc(100vw * 20 / 1920);
|
||||
font-family: OPPOSansH;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<Card title="实时温度监测">
|
||||
<div class="box">
|
||||
<div class="top-left-box">
|
||||
<div class="humidity-pic">
|
||||
<img src="@/assets/images/standardCureRoom/yuanZhu.png" alt="" />
|
||||
</div>
|
||||
@ -442,7 +442,7 @@ onMounted(async () => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box {
|
||||
.top-left-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<Card title="实时湿度监测">
|
||||
<div class="box">
|
||||
<div class="top-right-box">
|
||||
<div class="humidity-pic">
|
||||
<img src="@/assets/images/standardCureRoom/yuanZhu.png" alt="" />
|
||||
</div>
|
||||
@ -442,7 +442,7 @@ onMounted(async () => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box {
|
||||
.top-right-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
@ -140,13 +140,13 @@ let menuList = ref([
|
||||
menuName: "安全管理",
|
||||
companyPath: "/securityManagement"
|
||||
},
|
||||
{
|
||||
menuName: "有毒气体监测",
|
||||
companyPath: "/toxicGasMonitor"
|
||||
},
|
||||
{
|
||||
menuName: "临边防护",
|
||||
companyPath: "/edgeProtection"
|
||||
},
|
||||
{
|
||||
menuName: "有毒气体监测",
|
||||
companyPath: "/toxicGasMonitor"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<Card title="实时数据">
|
||||
<div class="bottom-box">
|
||||
<div class="edge-bottom-left">
|
||||
<div class="list-content">
|
||||
<div class="tabList">
|
||||
<div class="tab-list">
|
||||
<div>序号</div>
|
||||
<div style="width: 25%">上报时间</div>
|
||||
<div>设备名称</div>
|
||||
@ -11,8 +11,8 @@
|
||||
<div>防翻越</div>
|
||||
<div>人员靠近</div>
|
||||
</div>
|
||||
<div class="listBox">
|
||||
<div v-for="(item, index) in list" class="listStyle" :key="item.id">
|
||||
<div class="list-box">
|
||||
<div v-for="(item, index) in list" class="list-style" :key="item.id">
|
||||
<div>{{ index + 1 }}</div>
|
||||
<div style="width: 25%">{{ item.reportTime }}</div>
|
||||
<div>{{ item.devName }}</div>
|
||||
@ -25,7 +25,7 @@
|
||||
{{ item.personApproachType == 0 ? "正常" : "报警" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="notoDta" v-if="list.length == 0">
|
||||
<div class="not-data" v-if="list.length == 0">
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
@ -172,7 +172,7 @@ onMounted(async () => {});
|
||||
color: #ccc;
|
||||
font-size: 10px;
|
||||
}
|
||||
.bottom-box {
|
||||
.edge-bottom-left {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
@ -199,7 +199,7 @@ onMounted(async () => {});
|
||||
width: 100%;
|
||||
background: url("@/assets/images/cardImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.tabList {
|
||||
.tab-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
@ -219,10 +219,10 @@ onMounted(async () => {});
|
||||
width: 11.5%;
|
||||
}
|
||||
}
|
||||
.listBox {
|
||||
.list-box {
|
||||
height: 90%;
|
||||
overflow: scroll;
|
||||
.listStyle {
|
||||
.list-style {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
@ -234,13 +234,13 @@ onMounted(async () => {});
|
||||
width: 11.5%;
|
||||
}
|
||||
}
|
||||
.listStyle:hover {
|
||||
.list-style:hover {
|
||||
background: #091f3f;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.notoDta {
|
||||
.not-data {
|
||||
top: 73%;
|
||||
width: 12%;
|
||||
left: 44%;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<Card title="报警数据">
|
||||
<div class="bottom-box">
|
||||
<div class="edge-bottom-right">
|
||||
<div class="time-range">
|
||||
<el-date-picker
|
||||
v-model="rangeTime"
|
||||
@ -32,7 +32,7 @@
|
||||
<div>{{ item.warnType }}</div>
|
||||
<div>{{ item.warnTime }}</div>
|
||||
</div>
|
||||
<div class="notoDta" v-if="list.length == 0">
|
||||
<div class="not-data" v-if="list.length == 0">
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
@ -179,7 +179,7 @@ onMounted(async () => {});
|
||||
color: #ccc;
|
||||
font-size: 10px;
|
||||
}
|
||||
.bottom-box {
|
||||
.edge-bottom-right {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 4%;
|
||||
@ -249,7 +249,7 @@ onMounted(async () => {});
|
||||
}
|
||||
}
|
||||
}
|
||||
.notoDta {
|
||||
.not-data {
|
||||
top: 73%;
|
||||
width: 12%;
|
||||
left: 44%;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<Card title="报警统计(次)">
|
||||
<div class="top-left">
|
||||
<div class="edge-top-left">
|
||||
<div class="warn-box">
|
||||
<div class="warn-icon" style="margin-top: 5%">
|
||||
<img src="@/assets/images/edgeProtection/warn1.png" alt="" />
|
||||
@ -46,7 +46,7 @@ import Card from "@/components/card.vue";
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.top-left {
|
||||
.edge-top-left {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-left: 3%;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<Card title="近7日趋势(次)">
|
||||
<div class="top-right-box">
|
||||
<div class="edge-top-right">
|
||||
<div class="history-content">
|
||||
<div id="edgeWeekTrend" ref="edgeWeekTrend" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
@ -173,7 +173,7 @@ function initOption() {
|
||||
showAllSymbol: true,
|
||||
symbol: `image://${symbolIcon}`,
|
||||
// symbol: "circle",
|
||||
smooth: 0.8,
|
||||
smooth: 0.3,
|
||||
symbolSize: 30,
|
||||
label: {
|
||||
show: false,
|
||||
@ -267,7 +267,7 @@ onBeforeUnmount(async () => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.top-right-box {
|
||||
.edge-top-right {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.title {
|
||||
|
||||
@ -0,0 +1,305 @@
|
||||
<template>
|
||||
<Card title="甲烷含量监测">
|
||||
<div class="gas-bottom-center">
|
||||
<div class="methane-content">
|
||||
<div class="select-right">
|
||||
<el-select v-model="selectDay" style="width: 85%" size="small">
|
||||
<el-option v-for="(item, index) in dayList" :key="index" :label="item.dayType" :value="item.value" />
|
||||
</el-select>
|
||||
</div>
|
||||
<div id="methaneMonitoring" ref="methaneMonitoring" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Card from "@/components/card.vue";
|
||||
import symbolIcon from "@/assets/images/toxicGasMonitor/lineIcon.png";
|
||||
import symbolIcon2 from "@/assets/images/toxicGasMonitor/lineIcon2.png";
|
||||
|
||||
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
// import { getSelectDataListApi } from "@/api/modules/distribution";
|
||||
// import Card from "@/components/card.vue";
|
||||
import { GlobalStore } from "@/stores";
|
||||
import mitts from "@/utils/bus"; //兄弟组件传值
|
||||
const store = GlobalStore();
|
||||
// x轴
|
||||
let twenty_four_time = ref([
|
||||
"00:00",
|
||||
"02:00",
|
||||
"04:00",
|
||||
"06:00",
|
||||
"08:00",
|
||||
"10:00",
|
||||
"12:00",
|
||||
"14:00",
|
||||
"16:00",
|
||||
"18:00",
|
||||
"20:00",
|
||||
"22:00",
|
||||
"24:00"
|
||||
] as any);
|
||||
// Y轴单位
|
||||
let unit = ref("%LEL" as any);
|
||||
// Y轴数据
|
||||
let yData1 = ref([0.22, 0.22, 0.191, 0.234, 0.34, 0.33, 0.31, 0.22, 0.182, 0.191, 0.234, 0.29, 0.251] as any);
|
||||
let yData2 = ref([0.12, 0.132, 0.101, 0.134, 0.2, 0.23, 0.21, 0.12, 0.132, 0.101, 0.134, 0.21, 0.17] as any);
|
||||
|
||||
// 图表数据项
|
||||
let option = ref(null as any);
|
||||
// 选中
|
||||
let selectDay = ref(1);
|
||||
// 当前对应的种类
|
||||
// let nowType = ref("温度");
|
||||
let dayList = ref([
|
||||
{
|
||||
value: 1,
|
||||
dayType: "全部"
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
dayType: "本周"
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
dayType: "本月"
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
dayType: "本年"
|
||||
}
|
||||
]);
|
||||
|
||||
function initOption() {
|
||||
option.value = {
|
||||
// backgroundColor: '#071c3a',
|
||||
title: {
|
||||
// text: '日用气量分析',
|
||||
textStyle: {
|
||||
align: "center",
|
||||
color: "#fff",
|
||||
fontSize: 20
|
||||
},
|
||||
top: "2%",
|
||||
left: "center"
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "rgba(0, 0, 0, 0.9)",
|
||||
borderColor: "#010306",
|
||||
textStyle: {
|
||||
color: "#FFFFFF"
|
||||
},
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(0, 255, 233,0)"
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "rgba(255, 255, 255,1)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(0, 255, 233,0)"
|
||||
}
|
||||
],
|
||||
global: false
|
||||
}
|
||||
}
|
||||
}
|
||||
// formatter: function (params) {
|
||||
// // console.log("tooltip", params);
|
||||
// return (
|
||||
// params[0].name +
|
||||
// "<br/>" +
|
||||
// params[0].marker +
|
||||
// " " +
|
||||
// params[0].seriesName +
|
||||
// ": " +
|
||||
// params[0].value +
|
||||
// "<br/>" +
|
||||
// params[1].marker +
|
||||
// " " +
|
||||
// params[1].seriesName +
|
||||
// ": " +
|
||||
// params[1].value
|
||||
// );
|
||||
// }
|
||||
},
|
||||
grid: {
|
||||
top: "20%",
|
||||
left: "10%",
|
||||
right: "8%",
|
||||
bottom: "12%"
|
||||
// containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#14346C"
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
// show: true,
|
||||
color: "#f00",
|
||||
lineStyle: {
|
||||
color: "#f00"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff"
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
boundaryGap: false,
|
||||
data: twenty_four_time.value
|
||||
}
|
||||
],
|
||||
|
||||
yAxis: [
|
||||
{
|
||||
name: unit.value,
|
||||
nameGap: 30,
|
||||
nameTextStyle: {
|
||||
align: "right", // 将 Y 轴名称文字右对齐
|
||||
verticalAlign: "middle", // 将 Y 轴名称文字垂直居中
|
||||
padding: [0, 15, 0, 0], // 设置名称文字的内边距，调整位置
|
||||
color: "#fff",
|
||||
nameLocation: "start"
|
||||
},
|
||||
type: "value",
|
||||
min: 0,
|
||||
// max: 140,
|
||||
splitNumber: 3,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#14346C"
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#14346C"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
margin: 20,
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
showAllSymbol: true,
|
||||
symbol: `image://${symbolIcon2}`,
|
||||
// symbol: "circle",
|
||||
symbolSize: 8,
|
||||
smooth: true, //是否平滑
|
||||
name: "青岛滨海新区海底隧道左洞-甲烷含量监测",
|
||||
type: "line",
|
||||
color: "#4AC0F3",
|
||||
data: yData1.value
|
||||
},
|
||||
{
|
||||
showAllSymbol: true,
|
||||
symbol: `image://${symbolIcon}`,
|
||||
// symbol: "circle",
|
||||
symbolSize: 8,
|
||||
smooth: true, //是否平滑
|
||||
name: "青岛滨海新区海底隧道左洞-甲烷含量监测01",
|
||||
type: "line",
|
||||
color: "#81F279",
|
||||
data: yData2.value
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
function drawChart() {
|
||||
initOption();
|
||||
// console.log("绘制前数据", yData.value);
|
||||
let methaneMonitoring = echarts.init(document.getElementById("methaneMonitoring"));
|
||||
methaneMonitoring.setOption(option.value);
|
||||
}
|
||||
|
||||
//获取当前时间-24小时
|
||||
// function generateTimes() {
|
||||
// let timeArrays = new Array(24).fill("");
|
||||
// timeArrays.forEach((item, index) => (timeArrays[index] = (index < 10 ? "0" + index : index) + ":00"));
|
||||
// return timeArrays;
|
||||
// }
|
||||
|
||||
onMounted(async () => {
|
||||
drawChart();
|
||||
});
|
||||
|
||||
// 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP
|
||||
onBeforeUnmount(async () => {
|
||||
mitts.off("devSn");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.gas-bottom-center {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.title {
|
||||
height: 10%;
|
||||
line-height: 33px;
|
||||
text-align: left;
|
||||
font-size: calc(100vw * 18 / 1920);
|
||||
color: #ffffff;
|
||||
background: url("@/assets/images/titleBig.webp") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
i {
|
||||
font-family: OPPOSansH;
|
||||
margin-left: 6%;
|
||||
}
|
||||
}
|
||||
.methane-content {
|
||||
height: 100%;
|
||||
background: url("@/assets/images/cardImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
.select-right {
|
||||
position: absolute;
|
||||
right: 0%;
|
||||
width: 20%;
|
||||
top: 5%;
|
||||
z-index: 9;
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-input__wrapper) {
|
||||
background: #112d59;
|
||||
padding-left: 10%;
|
||||
}
|
||||
:deep(.el-input__inner) {
|
||||
color: #fff;
|
||||
}
|
||||
:deep(.el-select .el-input .el-select__caret) {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,467 @@
|
||||
<template>
|
||||
<Card title="气体含量报警统计">
|
||||
<div class="gas-bottom-left">
|
||||
<div class="select-right">
|
||||
<el-select v-model="gasName" style="width: 38%; margin-right: 14%" size="small">
|
||||
<el-option v-for="(item, index) in noiseList" :key="index" :label="item.gasType" :value="item.value" />
|
||||
</el-select>
|
||||
<el-select v-model="selectDay" style="width: 38%" size="small">
|
||||
<el-option v-for="(item, index) in dayList" :key="index" :label="item.dayType" :value="item.value" />
|
||||
</el-select>
|
||||
</div>
|
||||
<div id="gasBottomLeft" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import Card from "@/components/card.vue";
|
||||
import { GlobalStore } from "@/stores";
|
||||
const store = GlobalStore();
|
||||
const airType = ref(1);
|
||||
let gasName = ref(1 as any);
|
||||
let selectDay = ref(1 as any);
|
||||
|
||||
let noiseList = ref([
|
||||
{
|
||||
value: 1,
|
||||
gasType: "全部气体"
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
gasType: "氨气"
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
gasType: "甲烷"
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
gasType: "硫化氢"
|
||||
}
|
||||
]);
|
||||
|
||||
let dayList = ref([
|
||||
{
|
||||
value: 1,
|
||||
dayType: "今天"
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
dayType: "本周"
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
dayType: "本月"
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
dayType: "本年"
|
||||
}
|
||||
]);
|
||||
let dataList = ref([
|
||||
{
|
||||
value: 37,
|
||||
show: true,
|
||||
name: "氨气",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#82FBEA",
|
||||
borderWidth: 20
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 46,
|
||||
show: true,
|
||||
name: "甲烷",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#EEA959",
|
||||
borderWidth: 20
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 30,
|
||||
show: true,
|
||||
name: "硫化氢",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#4CC4F8"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 30,
|
||||
show: true,
|
||||
name: "氢气",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#E0D838"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 8,
|
||||
show: true,
|
||||
name: "氧气",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#EC6266"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 32,
|
||||
show: true,
|
||||
name: "一氧化碳",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#6375C7"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 15,
|
||||
show: true,
|
||||
name: "二氧化碳",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#81F279"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 20,
|
||||
show: true,
|
||||
name: "PM10",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#94A2B6"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 7,
|
||||
show: true,
|
||||
name: "二氧化硫",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#E17CD1"
|
||||
}
|
||||
}
|
||||
}
|
||||
]);
|
||||
function Pie() {
|
||||
let dataArr = [];
|
||||
for (let i = 0; i < 150; i++) {
|
||||
if (i % 2 === 0) {
|
||||
dataArr.push({
|
||||
name: (i + 1).toString(),
|
||||
value: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#7cf4f1",
|
||||
borderWidth: 0,
|
||||
borderColor: "#7f6546"
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
dataArr.push({
|
||||
name: (i + 1).toString(),
|
||||
value: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(0,0,0,0)",
|
||||
borderWidth: 0,
|
||||
borderColor: "rgba(0,0,0,0)"
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
return dataArr;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
drawEchart();
|
||||
});
|
||||
|
||||
function drawEchart() {
|
||||
let max = 0;
|
||||
dataList.value.map(item => {
|
||||
max = max + item.value;
|
||||
});
|
||||
let echartsTest = echarts.init(document.getElementById("gasBottomLeft"));
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
backgroundColor: "#000000",
|
||||
borderColor: "#000000",
|
||||
formatter: function (params) {
|
||||
// console.log(params.seriesName, "当前图例");
|
||||
let result = " " + params.marker + params.name + " : " + params.value;
|
||||
if (params.seriesName == "数据主体") {
|
||||
return result;
|
||||
}
|
||||
},
|
||||
textStyle: {
|
||||
color: "#FFFFFF"
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: max,
|
||||
subtext: "预警总数",
|
||||
x: "20%",
|
||||
y: "center",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 22,
|
||||
fontWeight: "normal",
|
||||
align: "center",
|
||||
fontFamily: "sadigitalNumber",
|
||||
lineHeight: 30
|
||||
},
|
||||
subtextStyle: {
|
||||
color: "#ccc",
|
||||
fontSize: 14,
|
||||
fontWeight: "normal",
|
||||
align: "center"
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
selectedMode: false, // 取消图例上的点击事件
|
||||
icon: "rect",
|
||||
type: "plain",
|
||||
orient: "vertical",
|
||||
left: "55%",
|
||||
top: "20%",
|
||||
align: "left",
|
||||
itemGap: 16,
|
||||
itemWidth: 8, // 设置宽度
|
||||
itemHeight: 7, // 设置高度
|
||||
symbolKeepAspect: false,
|
||||
textStyle: {
|
||||
color: "#000",
|
||||
rich: {
|
||||
name: {
|
||||
width: 130,
|
||||
verticalAlign: "right",
|
||||
fontSize: 14,
|
||||
color: "#FFFFFF",
|
||||
padding: [0, 0, 0, 10]
|
||||
},
|
||||
value: {
|
||||
align: "left",
|
||||
fontSize: 14,
|
||||
color: "#FFFFFF"
|
||||
}
|
||||
}
|
||||
},
|
||||
data: dataList.value.map(item => {
|
||||
if (item.show) {
|
||||
return item.name;
|
||||
}
|
||||
}),
|
||||
formatter: function (data) {
|
||||
if (dataList.value && dataList.value.length) {
|
||||
for (let i = 0; i < dataList.value.length; i++) {
|
||||
if (data === dataList.value[i].name) {
|
||||
let value = dataList.value[i].value;
|
||||
return "{name|" + data + "}" + "{value|" + value + "}";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
// 外侧光线
|
||||
{
|
||||
name: "",
|
||||
type: "gauge",
|
||||
center: ["25%", "55%"],
|
||||
radius: "60%",
|
||||
startAngle: 235,
|
||||
endAngle: -50,
|
||||
min: 0,
|
||||
max: 100,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: [
|
||||
[
|
||||
100 / 100,
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#526277"
|
||||
},
|
||||
{
|
||||
offset: 0.25,
|
||||
color: "rgba(4, 14, 54,0.4)"
|
||||
},
|
||||
{
|
||||
offset: 0.7,
|
||||
color: "rgba(4, 14, 54,0.4)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#526277"
|
||||
}
|
||||
])
|
||||
],
|
||||
[1, "rgba(255,255,255,0)"]
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: 0
|
||||
},
|
||||
splitLine: {
|
||||
show: 0
|
||||
},
|
||||
axisLabel: {
|
||||
show: 0
|
||||
},
|
||||
pointer: {
|
||||
show: 0
|
||||
},
|
||||
detail: {
|
||||
show: 0
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
type: "gauge",
|
||||
center: ["25%", "55%"],
|
||||
radius: "52%",
|
||||
startAngle: 245,
|
||||
endAngle: -115,
|
||||
min: 0,
|
||||
max: 100,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: [
|
||||
[
|
||||
200 / 100,
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: "#52bef0"
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: "#13356b"
|
||||
}
|
||||
])
|
||||
],
|
||||
[1, "rgba(255,255,255,0)"]
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: 0
|
||||
},
|
||||
splitLine: {
|
||||
show: 0
|
||||
},
|
||||
axisLabel: {
|
||||
show: 0
|
||||
},
|
||||
pointer: {
|
||||
show: 0
|
||||
},
|
||||
detail: {
|
||||
show: 0
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "数据主体",
|
||||
type: "pie",
|
||||
radius: ["41%", "44%"],
|
||||
center: ["25%", "55%"],
|
||||
hoverAnimation: true,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderWidth: 10
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: "center"
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: dataList.value
|
||||
},
|
||||
{
|
||||
name: "最内圆",
|
||||
type: "pie",
|
||||
radius: ["34%", "36%"],
|
||||
center: ["25%", "55%"],
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
|
||||
data: Pie()
|
||||
}
|
||||
]
|
||||
};
|
||||
echartsTest.setOption(option, true);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.gas-bottom-left {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.select-right {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
right: 1%;
|
||||
width: 44%;
|
||||
top: 5%;
|
||||
z-index: 9;
|
||||
}
|
||||
}
|
||||
.num {
|
||||
width: 66px;
|
||||
text-align: center;
|
||||
font-family: sadigitalNumber;
|
||||
font-size: calc(100vw * 24 / 1920);
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 45%;
|
||||
left: 18%;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
background: #112d59;
|
||||
}
|
||||
|
||||
:deep(.el-input__inner) {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
padding: 5%;
|
||||
}
|
||||
|
||||
:deep(.el-select .el-input .el-select__caret) {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,292 @@
|
||||
<template>
|
||||
<Card title="一氧化碳含量监测">
|
||||
<div class="gas-bottom-right">
|
||||
<div class="carbon-content">
|
||||
<div class="select-right">
|
||||
<el-select v-model="selectDay" style="width: 85%" size="small">
|
||||
<el-option v-for="(item, index) in dayList" :key="index" :label="item.dayType" :value="item.value" />
|
||||
</el-select>
|
||||
</div>
|
||||
<div id="carbonMonoxide" ref="carbonMonoxide" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Card from "@/components/card.vue";
|
||||
import symbolIcon2 from "@/assets/images/toxicGasMonitor/lineIcon2.png";
|
||||
|
||||
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
// import { getSelectDataListApi } from "@/api/modules/distribution";
|
||||
// import Card from "@/components/card.vue";
|
||||
import { GlobalStore } from "@/stores";
|
||||
import mitts from "@/utils/bus"; //兄弟组件传值
|
||||
const store = GlobalStore();
|
||||
// x轴
|
||||
let twenty_four_time = ref([
|
||||
"00:00",
|
||||
"02:00",
|
||||
"04:00",
|
||||
"06:00",
|
||||
"08:00",
|
||||
"10:00",
|
||||
"12:00",
|
||||
"14:00",
|
||||
"16:00",
|
||||
"18:00",
|
||||
"20:00",
|
||||
"22:00",
|
||||
"24:00"
|
||||
] as any);
|
||||
// Y轴单位
|
||||
let unit = ref("Ppm" as any);
|
||||
// Y轴数据
|
||||
let yData1 = ref([3, 3, 5, 4, 2, 4.5, 5, 2, 4.5, 5, 3.8, 2.9, 2.5] as any);
|
||||
|
||||
// 图表数据项
|
||||
let option = ref(null as any);
|
||||
// 选中
|
||||
let selectDay = ref(1);
|
||||
// 当前对应的种类
|
||||
// let nowType = ref("温度");
|
||||
let dayList = ref([
|
||||
{
|
||||
value: 1,
|
||||
dayType: "全部"
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
dayType: "本周"
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
dayType: "本月"
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
dayType: "本年"
|
||||
}
|
||||
]);
|
||||
|
||||
function initOption() {
|
||||
option.value = {
|
||||
// backgroundColor: '#071c3a',
|
||||
title: {
|
||||
// text: '日用气量分析',
|
||||
textStyle: {
|
||||
align: "center",
|
||||
color: "#fff",
|
||||
fontSize: 20
|
||||
},
|
||||
top: "2%",
|
||||
left: "center"
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "rgba(0, 0, 0, 0.9)",
|
||||
borderColor: "#010306",
|
||||
textStyle: {
|
||||
color: "#FFFFFF"
|
||||
},
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(0, 255, 233,0)"
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "rgba(255, 255, 255,1)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(0, 255, 233,0)"
|
||||
}
|
||||
],
|
||||
global: false
|
||||
}
|
||||
}
|
||||
}
|
||||
// formatter: function (params) {
|
||||
// // console.log("tooltip", params);
|
||||
// return (
|
||||
// params[0].name +
|
||||
// "<br/>" +
|
||||
// params[0].marker +
|
||||
// " " +
|
||||
// params[0].seriesName +
|
||||
// ": " +
|
||||
// params[0].value +
|
||||
// "<br/>" +
|
||||
// params[1].marker +
|
||||
// " " +
|
||||
// params[1].seriesName +
|
||||
// ": " +
|
||||
// params[1].value
|
||||
// );
|
||||
// }
|
||||
},
|
||||
grid: {
|
||||
top: "20%",
|
||||
left: "10%",
|
||||
right: "8%",
|
||||
bottom: "12%"
|
||||
// containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#14346C"
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
// show: true,
|
||||
color: "#f00",
|
||||
lineStyle: {
|
||||
color: "#f00"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff"
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
boundaryGap: false,
|
||||
data: twenty_four_time.value
|
||||
}
|
||||
],
|
||||
|
||||
yAxis: [
|
||||
{
|
||||
name: unit.value,
|
||||
nameGap: 30,
|
||||
nameTextStyle: {
|
||||
align: "right", // 将 Y 轴名称文字右对齐
|
||||
verticalAlign: "middle", // 将 Y 轴名称文字垂直居中
|
||||
padding: [0, 15, 0, 0], // 设置名称文字的内边距，调整位置
|
||||
color: "#fff",
|
||||
nameLocation: "start"
|
||||
},
|
||||
type: "value",
|
||||
min: 0,
|
||||
// max: 140,
|
||||
splitNumber: 3,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#14346C"
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#14346C"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
margin: 20,
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
showAllSymbol: true,
|
||||
symbol: `image://${symbolIcon2}`,
|
||||
// symbol: "circle",
|
||||
symbolSize: 8,
|
||||
smooth: true, //是否平滑
|
||||
name: "青岛滨海新区海底隧道左洞-一氧化碳含量监测",
|
||||
type: "line",
|
||||
color: "#4AC0F3",
|
||||
data: yData1.value
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
function drawChart() {
|
||||
initOption();
|
||||
// console.log("绘制前数据", yData.value);
|
||||
let carbonMonoxide = echarts.init(document.getElementById("carbonMonoxide"));
|
||||
carbonMonoxide.setOption(option.value);
|
||||
}
|
||||
|
||||
//获取当前时间-24小时
|
||||
// function generateTimes() {
|
||||
// let timeArrays = new Array(24).fill("");
|
||||
// timeArrays.forEach((item, index) => (timeArrays[index] = (index < 10 ? "0" + index : index) + ":00"));
|
||||
// return timeArrays;
|
||||
// }
|
||||
|
||||
onMounted(async () => {
|
||||
drawChart();
|
||||
});
|
||||
|
||||
// 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP
|
||||
onBeforeUnmount(async () => {
|
||||
mitts.off("devSn");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.gas-bottom-right {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.title {
|
||||
height: 10%;
|
||||
line-height: 33px;
|
||||
text-align: left;
|
||||
font-size: calc(100vw * 18 / 1920);
|
||||
color: #ffffff;
|
||||
background: url("@/assets/images/titleBig.webp") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
i {
|
||||
font-family: OPPOSansH;
|
||||
margin-left: 6%;
|
||||
}
|
||||
}
|
||||
.carbon-content {
|
||||
height: 100%;
|
||||
background: url("@/assets/images/cardImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
.select-right {
|
||||
position: absolute;
|
||||
right: 0%;
|
||||
width: 20%;
|
||||
top: 5%;
|
||||
z-index: 9;
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-input__wrapper) {
|
||||
background: #112d59;
|
||||
padding-left: 10%;
|
||||
}
|
||||
:deep(.el-input__inner) {
|
||||
color: #fff;
|
||||
}
|
||||
:deep(.el-select .el-input .el-select__caret) {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<div class="distributionBox">
|
||||
<div class="top">
|
||||
<div class="topLeft">
|
||||
<TopLeft></TopLeft>
|
||||
</div>
|
||||
<div class="topCenter">
|
||||
<TopCenter></TopCenter>
|
||||
</div>
|
||||
<div class="topRight">
|
||||
<TopRight></TopRight>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="bottomLeft">
|
||||
<BottomLeft></BottomLeft>
|
||||
</div>
|
||||
<div class="bottomCenter">
|
||||
<BottomCenter></BottomCenter>
|
||||
</div>
|
||||
<div class="bottomRight">
|
||||
<BottomRight></BottomRight>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TopLeft from "@/views/sevenLargeScreen/safetyManagement/toxicGasMonitor/topLeft.vue";
|
||||
import TopCenter from "@/views/sevenLargeScreen/safetyManagement/toxicGasMonitor/topCenter.vue";
|
||||
import TopRight from "@/views/sevenLargeScreen/safetyManagement/toxicGasMonitor/topRight.vue";
|
||||
import BottomLeft from "@/views/sevenLargeScreen/safetyManagement/toxicGasMonitor/bottomLeft.vue";
|
||||
import BottomCenter from "@/views/sevenLargeScreen/safetyManagement/toxicGasMonitor/bottomCenter.vue";
|
||||
import BottomRight from "@/views/sevenLargeScreen/safetyManagement/toxicGasMonitor/bottomRight.vue";
|
||||
export default {
|
||||
components: { TopLeft, TopCenter, TopRight, BottomLeft, BottomRight, BottomCenter }
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.distributionBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.top {
|
||||
width: 100%;
|
||||
height: 49%;
|
||||
display: flex;
|
||||
margin-bottom: 1%;
|
||||
.topLeft {
|
||||
width: 33%;
|
||||
// background-color: orchid;
|
||||
}
|
||||
.topCenter {
|
||||
margin: 0% 1%;
|
||||
width: 33%;
|
||||
}
|
||||
.topRight {
|
||||
width: 33%;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
width: 100%;
|
||||
height: 48%;
|
||||
display: flex;
|
||||
.bottomLeft {
|
||||
width: 33%;
|
||||
}
|
||||
.bottomCenter {
|
||||
margin: 0% 1%;
|
||||
width: 33%;
|
||||
}
|
||||
.bottomRight {
|
||||
width: 33%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,305 @@
|
||||
<template>
|
||||
<Card title="氧气含量监测">
|
||||
<div class="gas-top-center">
|
||||
<div class="oxygen-content">
|
||||
<div class="select-right">
|
||||
<el-select v-model="selectDay" style="width: 85%" size="small">
|
||||
<el-option v-for="(item, index) in dayList" :key="index" :label="item.dayType" :value="item.value" />
|
||||
</el-select>
|
||||
</div>
|
||||
<div id="oxygenMonitoring" ref="oxygenMonitoring" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Card from "@/components/card.vue";
|
||||
import symbolIcon from "@/assets/images/toxicGasMonitor/lineIcon.png";
|
||||
import symbolIcon2 from "@/assets/images/toxicGasMonitor/lineIcon2.png";
|
||||
|
||||
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
// import { getSelectDataListApi } from "@/api/modules/distribution";
|
||||
// import Card from "@/components/card.vue";
|
||||
import { GlobalStore } from "@/stores";
|
||||
import mitts from "@/utils/bus"; //兄弟组件传值
|
||||
const store = GlobalStore();
|
||||
// x轴
|
||||
let twenty_four_time = ref([
|
||||
"00:00",
|
||||
"02:00",
|
||||
"04:00",
|
||||
"06:00",
|
||||
"08:00",
|
||||
"10:00",
|
||||
"12:00",
|
||||
"14:00",
|
||||
"16:00",
|
||||
"18:00",
|
||||
"20:00",
|
||||
"22:00",
|
||||
"24:00"
|
||||
] as any);
|
||||
// Y轴单位
|
||||
let unit = ref("%" as any);
|
||||
// Y轴数据
|
||||
let yData1 = ref([22, 22, 19, 23, 34, 33, 31, 22, 18, 19, 24, 29, 25] as any);
|
||||
let yData2 = ref([12, 12, 10, 13, 20, 23, 21, 12, 13, 10, 13, 21, 17] as any);
|
||||
|
||||
// 图表数据项
|
||||
let option = ref(null as any);
|
||||
// 选中
|
||||
let selectDay = ref(1);
|
||||
// 当前对应的种类
|
||||
// let nowType = ref("温度");
|
||||
let dayList = ref([
|
||||
{
|
||||
value: 1,
|
||||
dayType: "全部"
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
dayType: "本周"
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
dayType: "本月"
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
dayType: "本年"
|
||||
}
|
||||
]);
|
||||
|
||||
function initOption() {
|
||||
option.value = {
|
||||
// backgroundColor: '#071c3a',
|
||||
title: {
|
||||
// text: '日用气量分析',
|
||||
textStyle: {
|
||||
align: "center",
|
||||
color: "#fff",
|
||||
fontSize: 20
|
||||
},
|
||||
top: "2%",
|
||||
left: "center"
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "rgba(0, 0, 0, 0.9)",
|
||||
borderColor: "#010306",
|
||||
textStyle: {
|
||||
color: "#FFFFFF"
|
||||
},
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(0, 255, 233,0)"
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "rgba(255, 255, 255,1)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(0, 255, 233,0)"
|
||||
}
|
||||
],
|
||||
global: false
|
||||
}
|
||||
}
|
||||
}
|
||||
// formatter: function (params) {
|
||||
// // console.log("tooltip", params);
|
||||
// return (
|
||||
// params[0].name +
|
||||
// "<br/>" +
|
||||
// params[0].marker +
|
||||
// " " +
|
||||
// params[0].seriesName +
|
||||
// ": " +
|
||||
// params[0].value +
|
||||
// "<br/>" +
|
||||
// params[1].marker +
|
||||
// " " +
|
||||
// params[1].seriesName +
|
||||
// ": " +
|
||||
// params[1].value
|
||||
// );
|
||||
// }
|
||||
},
|
||||
grid: {
|
||||
top: "20%",
|
||||
left: "10%",
|
||||
right: "8%",
|
||||
bottom: "12%"
|
||||
// containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#14346C"
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
// show: true,
|
||||
color: "#f00",
|
||||
lineStyle: {
|
||||
color: "#f00"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff"
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
boundaryGap: false,
|
||||
data: twenty_four_time.value
|
||||
}
|
||||
],
|
||||
|
||||
yAxis: [
|
||||
{
|
||||
name: unit.value,
|
||||
nameGap: 30,
|
||||
nameTextStyle: {
|
||||
align: "right", // 将 Y 轴名称文字右对齐
|
||||
verticalAlign: "middle", // 将 Y 轴名称文字垂直居中
|
||||
padding: [0, 15, 0, 0], // 设置名称文字的内边距，调整位置
|
||||
color: "#fff",
|
||||
nameLocation: "start"
|
||||
},
|
||||
type: "value",
|
||||
min: 0,
|
||||
// max: 140,
|
||||
splitNumber: 3,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#14346C"
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#14346C"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
margin: 20,
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
showAllSymbol: true,
|
||||
symbol: `image://${symbolIcon2}`,
|
||||
// symbol: "circle",
|
||||
symbolSize: 8,
|
||||
smooth: true, //是否平滑
|
||||
name: "青岛滨海新区海底隧道左洞-氧气含量监测",
|
||||
type: "line",
|
||||
color: "#4AC0F3",
|
||||
data: yData1.value
|
||||
},
|
||||
{
|
||||
showAllSymbol: true,
|
||||
symbol: `image://${symbolIcon}`,
|
||||
// symbol: "circle",
|
||||
symbolSize: 8,
|
||||
smooth: true, //是否平滑
|
||||
name: "青岛滨海新区海底隧道左洞-氧气含量监测01",
|
||||
type: "line",
|
||||
color: "#81F279",
|
||||
data: yData2.value
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
function drawChart() {
|
||||
initOption();
|
||||
// console.log("绘制前数据", yData.value);
|
||||
let oxygenMonitoring = echarts.init(document.getElementById("oxygenMonitoring"));
|
||||
oxygenMonitoring.setOption(option.value);
|
||||
}
|
||||
|
||||
//获取当前时间-24小时
|
||||
// function generateTimes() {
|
||||
// let timeArrays = new Array(24).fill("");
|
||||
// timeArrays.forEach((item, index) => (timeArrays[index] = (index < 10 ? "0" + index : index) + ":00"));
|
||||
// return timeArrays;
|
||||
// }
|
||||
|
||||
onMounted(async () => {
|
||||
drawChart();
|
||||
});
|
||||
|
||||
// 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP
|
||||
onBeforeUnmount(async () => {
|
||||
mitts.off("devSn");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.gas-top-center {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.title {
|
||||
height: 10%;
|
||||
line-height: 33px;
|
||||
text-align: left;
|
||||
font-size: calc(100vw * 18 / 1920);
|
||||
color: #ffffff;
|
||||
background: url("@/assets/images/titleBig.webp") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
i {
|
||||
font-family: OPPOSansH;
|
||||
margin-left: 6%;
|
||||
}
|
||||
}
|
||||
.oxygen-content {
|
||||
height: 100%;
|
||||
background: url("@/assets/images/cardImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
.select-right {
|
||||
position: absolute;
|
||||
right: 0%;
|
||||
width: 20%;
|
||||
top: 5%;
|
||||
z-index: 9;
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-input__wrapper) {
|
||||
background: #112d59;
|
||||
padding-left: 10%;
|
||||
}
|
||||
:deep(.el-input__inner) {
|
||||
color: #fff;
|
||||
}
|
||||
:deep(.el-select .el-input .el-select__caret) {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<Card title="气体含量异常通知">
|
||||
<div class="gas-top-left">
|
||||
<div class="notice-list">
|
||||
<div class="notice-box">
|
||||
<!-- <el-scrollbar style="height: 100%"> -->
|
||||
<div class="notice-item" v-for="item in list" :key="item.id">
|
||||
<div class="notice-type-big" v-if="item.noticeType === 0" @click="openDialog(item)">
|
||||
<div style="background: #ec6266"></div>
|
||||
</div>
|
||||
<div class="notice-type-small" v-if="item.noticeType === 1" @click="openDialog(item)">
|
||||
<div style="background: #eea959"></div>
|
||||
</div>
|
||||
<div class="notice-text" :title="item.text" @click="openDialog(item)">{{ item.text }}</div>
|
||||
<div class="notice-time" @click="openDialog(item)">{{ item.time }}</div>
|
||||
|
||||
<div class="item-dialog" v-if="item.id === currentIndex && showDialog" @click="closeDialog">
|
||||
<div class="triangle"></div>
|
||||
<div class="dialog-title">气体含量异常通知</div>
|
||||
<div class="dialog-time">{{ item.time }}</div>
|
||||
<div class="dialog-text">{{ item.text }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </el-scrollbar> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Card from "@/components/card.vue";
|
||||
import { reactive, ref, onMounted } from "vue";
|
||||
let currentIndex = ref(1 as any);
|
||||
let showDialog = ref(false as any);
|
||||
const list = reactive([
|
||||
{
|
||||
id: 1,
|
||||
time: "2023-09-05",
|
||||
text: "青岛滨海新区海底隧道左洞-氨气含量监测:氨气含量高于报警值,请注意!",
|
||||
noticeType: 0
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
time: "2023-09-04",
|
||||
text: "青岛滨海新区海底隧道左洞-甲烷含量监测-甲烷含量偏高,请注意!",
|
||||
noticeType: 1
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
time: "2023-09-03",
|
||||
text: "青岛滨海新区海底隧道左洞-硫化氢含量监测-硫化氢含量高于报警,请注意!",
|
||||
noticeType: 1
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
time: "2023-09-02",
|
||||
text: "青岛滨海新区海底隧道左洞-氢气含量监测-氢气含量偏高,请注意!",
|
||||
noticeType: 0
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
time: "2023-09-01",
|
||||
text: "青岛滨海新区海底隧道左洞-氢气含量监测-氢气含量偏高,请注意!",
|
||||
noticeType: 0
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
time: "2023-08-29",
|
||||
text: "青岛滨海新区海底隧道左洞-氢气含量监测-氢气含量偏高,请注意!",
|
||||
noticeType: 0
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
time: "2023-08-28",
|
||||
text: "青岛滨海新区海底隧道左洞-氢气含量监测-氢气含量偏高,请注意!",
|
||||
noticeType: 0
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
time: "2023-08-27",
|
||||
text: "青岛滨海新区海底隧道左洞-氢气含量监测-氢气含量偏高,请注意!",
|
||||
noticeType: 0
|
||||
}
|
||||
]);
|
||||
function openDialog(item: any) {
|
||||
currentIndex.value = item.id;
|
||||
showDialog.value = true;
|
||||
}
|
||||
function closeDialog() {
|
||||
showDialog.value = false;
|
||||
console.log("点击");
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.item-dialog {
|
||||
width: 50%;
|
||||
height: 270%;
|
||||
padding: 2%;
|
||||
right: -45%;
|
||||
top: 7%;
|
||||
z-index: 10;
|
||||
font-size: 12px;
|
||||
opacity: 0.8;
|
||||
background-color: #000000;
|
||||
position: absolute;
|
||||
.dialog-title {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
padding-bottom: 2%;
|
||||
}
|
||||
.dialog-time {
|
||||
margin-top: 4%;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
.dialog-text {
|
||||
margin-top: 5%;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.triangle {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
left: -4%;
|
||||
top: 5%;
|
||||
border-top: 8px solid transparent;
|
||||
border-bottom: 8px solid transparent;
|
||||
border-right: 12px solid #000000;
|
||||
}
|
||||
}
|
||||
.gas-top-left {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.notice-list {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.notice-box {
|
||||
width: 100%;
|
||||
height: 98%;
|
||||
padding-top: 1%;
|
||||
.notice-item {
|
||||
position: relative;
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 3%;
|
||||
margin-top: 1%;
|
||||
margin-left: 3%;
|
||||
font-size: 14px;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
color: #ffffff;
|
||||
background: url("@/assets/images/toxicGasMonitor/gasBg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.notice-type-big {
|
||||
width: 3%;
|
||||
height: 40%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid rgba(236, 98, 102, 0.4);
|
||||
div {
|
||||
width: 47%;
|
||||
height: 50%;
|
||||
box-sizing: border-box;
|
||||
padding: 10%;
|
||||
}
|
||||
}
|
||||
.notice-type-small {
|
||||
width: 3%;
|
||||
height: 40%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid rgba(238, 169, 89, 0.4);
|
||||
div {
|
||||
width: 47%;
|
||||
height: 50%;
|
||||
box-sizing: border-box;
|
||||
padding: 10%;
|
||||
}
|
||||
}
|
||||
.notice-text {
|
||||
width: 75%;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap; //单行
|
||||
}
|
||||
.notice-time {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,292 @@
|
||||
<template>
|
||||
<Card title="硫化氢含量监测">
|
||||
<div class="gas-top-right">
|
||||
<div class="hydrogen-content">
|
||||
<div class="select-right">
|
||||
<el-select v-model="selectDay" style="width: 85%" size="small">
|
||||
<el-option v-for="(item, index) in dayList" :key="index" :label="item.dayType" :value="item.value" />
|
||||
</el-select>
|
||||
</div>
|
||||
<div id="hydrogenSulfide" ref="hydrogenSulfide" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Card from "@/components/card.vue";
|
||||
import symbolIcon2 from "@/assets/images/toxicGasMonitor/lineIcon2.png";
|
||||
|
||||
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
// import { getSelectDataListApi } from "@/api/modules/distribution";
|
||||
// import Card from "@/components/card.vue";
|
||||
import { GlobalStore } from "@/stores";
|
||||
import mitts from "@/utils/bus"; //兄弟组件传值
|
||||
const store = GlobalStore();
|
||||
// x轴
|
||||
let twenty_four_time = ref([
|
||||
"00:00",
|
||||
"02:00",
|
||||
"04:00",
|
||||
"06:00",
|
||||
"08:00",
|
||||
"10:00",
|
||||
"12:00",
|
||||
"14:00",
|
||||
"16:00",
|
||||
"18:00",
|
||||
"20:00",
|
||||
"22:00",
|
||||
"24:00"
|
||||
] as any);
|
||||
// Y轴单位
|
||||
let unit = ref("Ppm" as any);
|
||||
// Y轴数据
|
||||
let yData1 = ref([3, 3, 5, 4, 2, 4.5, 5, 2, 4.5, 5, 3.8, 2.9, 2.5] as any);
|
||||
|
||||
// 图表数据项
|
||||
let option = ref(null as any);
|
||||
// 选中
|
||||
let selectDay = ref(1);
|
||||
// 当前对应的种类
|
||||
// let nowType = ref("温度");
|
||||
let dayList = ref([
|
||||
{
|
||||
value: 1,
|
||||
dayType: "全部"
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
dayType: "本周"
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
dayType: "本月"
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
dayType: "本年"
|
||||
}
|
||||
]);
|
||||
|
||||
function initOption() {
|
||||
option.value = {
|
||||
// backgroundColor: '#071c3a',
|
||||
title: {
|
||||
// text: '日用气量分析',
|
||||
textStyle: {
|
||||
align: "center",
|
||||
color: "#fff",
|
||||
fontSize: 20
|
||||
},
|
||||
top: "2%",
|
||||
left: "center"
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "rgba(0, 0, 0, 0.9)",
|
||||
borderColor: "#010306",
|
||||
textStyle: {
|
||||
color: "#FFFFFF"
|
||||
},
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(0, 255, 233,0)"
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "rgba(255, 255, 255,1)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(0, 255, 233,0)"
|
||||
}
|
||||
],
|
||||
global: false
|
||||
}
|
||||
}
|
||||
}
|
||||
// formatter: function (params) {
|
||||
// // console.log("tooltip", params);
|
||||
// return (
|
||||
// params[0].name +
|
||||
// "<br/>" +
|
||||
// params[0].marker +
|
||||
// " " +
|
||||
// params[0].seriesName +
|
||||
// ": " +
|
||||
// params[0].value +
|
||||
// "<br/>" +
|
||||
// params[1].marker +
|
||||
// " " +
|
||||
// params[1].seriesName +
|
||||
// ": " +
|
||||
// params[1].value
|
||||
// );
|
||||
// }
|
||||
},
|
||||
grid: {
|
||||
top: "20%",
|
||||
left: "10%",
|
||||
right: "8%",
|
||||
bottom: "12%"
|
||||
// containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#14346C"
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
// show: true,
|
||||
color: "#f00",
|
||||
lineStyle: {
|
||||
color: "#f00"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff"
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
boundaryGap: false,
|
||||
data: twenty_four_time.value
|
||||
}
|
||||
],
|
||||
|
||||
yAxis: [
|
||||
{
|
||||
name: unit.value,
|
||||
nameGap: 30,
|
||||
nameTextStyle: {
|
||||
align: "right", // 将 Y 轴名称文字右对齐
|
||||
verticalAlign: "middle", // 将 Y 轴名称文字垂直居中
|
||||
padding: [0, 15, 0, 0], // 设置名称文字的内边距，调整位置
|
||||
color: "#fff",
|
||||
nameLocation: "start"
|
||||
},
|
||||
type: "value",
|
||||
min: 0,
|
||||
// max: 140,
|
||||
splitNumber: 3,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#14346C"
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#14346C"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
margin: 20,
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
showAllSymbol: true,
|
||||
symbol: `image://${symbolIcon2}`,
|
||||
// symbol: "circle",
|
||||
symbolSize: 8,
|
||||
smooth: true, //是否平滑
|
||||
name: "青岛滨海新区海底隧道左洞-硫化氢含量监测",
|
||||
type: "line",
|
||||
color: "#4AC0F3",
|
||||
data: yData1.value
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
function drawChart() {
|
||||
initOption();
|
||||
// console.log("绘制前数据", yData.value);
|
||||
let hydrogenSulfide = echarts.init(document.getElementById("hydrogenSulfide"));
|
||||
hydrogenSulfide.setOption(option.value);
|
||||
}
|
||||
|
||||
//获取当前时间-24小时
|
||||
// function generateTimes() {
|
||||
// let timeArrays = new Array(24).fill("");
|
||||
// timeArrays.forEach((item, index) => (timeArrays[index] = (index < 10 ? "0" + index : index) + ":00"));
|
||||
// return timeArrays;
|
||||
// }
|
||||
|
||||
onMounted(async () => {
|
||||
drawChart();
|
||||
});
|
||||
|
||||
// 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP
|
||||
onBeforeUnmount(async () => {
|
||||
mitts.off("devSn");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.gas-top-right {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.title {
|
||||
height: 10%;
|
||||
line-height: 33px;
|
||||
text-align: left;
|
||||
font-size: calc(100vw * 18 / 1920);
|
||||
color: #ffffff;
|
||||
background: url("@/assets/images/titleBig.webp") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
i {
|
||||
font-family: OPPOSansH;
|
||||
margin-left: 6%;
|
||||
}
|
||||
}
|
||||
.hydrogen-content {
|
||||
height: 100%;
|
||||
background: url("@/assets/images/cardImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
.select-right {
|
||||
position: absolute;
|
||||
right: 0%;
|
||||
width: 20%;
|
||||
top: 5%;
|
||||
z-index: 9;
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-input__wrapper) {
|
||||
background: #112d59;
|
||||
padding-left: 10%;
|
||||
}
|
||||
:deep(.el-input__inner) {
|
||||
color: #fff;
|
||||
}
|
||||
:deep(.el-select .el-input .el-select__caret) {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user