479 lines
16 KiB
Vue
479 lines
16 KiB
Vue
<template>
|
|
<div class="box">
|
|
<div class="l">
|
|
<div class="top">
|
|
<!-- <warnDetail v-if="showWarnDeatil" @off="showWarnDeatil = false"></warnDetail>
|
|
<scrollTable @click="hdClick3" :config="config3" style="width:100%;height:100%"></scrollTable> -->
|
|
<leftTop></leftTop>
|
|
</div>
|
|
<div class="center top">
|
|
<div>监控设备总数: <span class="num color-font">1528</span> 台</div>
|
|
<div class="cont">
|
|
<div style="display: flex;justify-content: space-between;align-items: center;margin-top: 3vh;">
|
|
<img src="/static/index/JYZ.png" style="width: 2.8vw; height: 4vw;" alt="">
|
|
<div class="circle">
|
|
<img src="/static/detail/bk.png" class="act-img" alt="">
|
|
<div style="width: 110px;height: 110px;" class="online" id="online"></div>
|
|
</div>
|
|
<div class="circle">
|
|
<img src="/static/detail/bk.png" class="act-img" alt="">
|
|
<div style="width: 110px;height: 110px;" class="online" id="offline"></div>
|
|
</div>
|
|
<img src="/static/index/JTY.png" style="width: 2.8vw; height: 4vw;" alt="">
|
|
</div>
|
|
<div class="eqNum">
|
|
<div>
|
|
<img src="/static/index/Q.png" alt="" style="transform: translateY(2px);"> 在线设备统计：<span
|
|
class="num color-font" style="margin-left: 10px;">1418</span> 台
|
|
</div>
|
|
<div>
|
|
<img src="/static/index/Q.png" style="transform: translateY(2px);"> 离线设备统计：<span
|
|
class="num color-font" style="margin-left: 10px;">1418</span>
|
|
台
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bottom top">
|
|
<scrollTable :config="config2" style="width:100%;height:100%"></scrollTable>
|
|
</div>
|
|
</div>
|
|
<div class="c">
|
|
<div class="top">
|
|
<div class="c-top-tit">
|
|
<div class="c-top-li">种植面积 <span class="color-font"
|
|
style="font-size: 18px;margin-left: 1vw; ">45454</span> m</div>
|
|
<div class="c-top-li">种植种类 <span class="color-font"
|
|
style="font-size: 18px;margin-left: 1vw; ">45454</span> 种</div>
|
|
<div class="c-top-li">地块数量 <span class="color-font"
|
|
style="font-size: 18px;margin-left: 1vw; ">45454</span> 块</div>
|
|
</div>
|
|
<div class="map">
|
|
<areaMap></areaMap>
|
|
</div>
|
|
</div>
|
|
<div class="bottom">
|
|
<warnPop v-if="showWarnPop" ref="ChildsDom" @off="showWarnPop = false"></warnPop>
|
|
<scrollTable :config="config" @click="hdClick" style="width:100%;height:100%"></scrollTable>
|
|
</div>
|
|
</div>
|
|
<div class="r">
|
|
<div class="top">
|
|
<div class="content" id="eq">
|
|
<div class="eq" v-for="item in 10" :key="item">
|
|
<img :src="u" style="width:8vw;height: 100%;border-radius: 1vh;" alt="">
|
|
<div
|
|
style="display: flex;flex-direction: column;justify-content: space-between;margin-left: 1vw;color: #CAD5E5;">
|
|
<div style="display: flex;align-items: center;">
|
|
<img src="/static/index/MC.png" style="width:1.7vw;height: 1.5vw;margin-right: 5px; "
|
|
alt="">
|
|
张伟
|
|
</div>
|
|
<div style="display: flex;align-items: center;">
|
|
<img src="/static/index/JS.png" style="width:1.7vw;height: 1.5vw;margin-right: 5px; "
|
|
alt="">
|
|
这是一名后端开发
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bottom">
|
|
<div style="height: 35%;">
|
|
<div class="lands">
|
|
<div class="land" v-for="(item, index) in 16" @click="test" :key="index">地块</div>
|
|
</div>
|
|
</div>
|
|
<div class="video" style="height: 65%;">
|
|
<div class="video-tit"> 实时监测影像 </div>
|
|
<!-- <JessibucaDemo style="height: 80%;" :url="a"></JessibucaDemo> -->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
// import flvjs from "flv.js"
|
|
import { ref, reactive, onMounted } from "vue"
|
|
import leftTop from "@/components/index/leftTop.vue"
|
|
import scrollTable from "@/components/scrollTable.vue"
|
|
import options from "./option"
|
|
import * as echarts from 'echarts';
|
|
import warnPop from "@/components/warnPop.vue"
|
|
import JessibucaDemo from "@/components/videoFlv.vue"
|
|
import { useRouter } from "vue-router";
|
|
import areaMap from "@/components/areaMap.vue"
|
|
const a=ref( 'http://192.168.1.27/live/test.live.flv?secret=gqig2yFKkDpIMic1uWZY1L5MsIo0eflm')
|
|
|
|
|
|
const router = useRouter()
|
|
const u = ref('https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231129\/202311291816106120a4034.png')
|
|
const alignFn = (num) => {
|
|
let arr = []
|
|
for (let i = 0; i < num; i++) {
|
|
arr.push('center')
|
|
}
|
|
return arr
|
|
}
|
|
const config = reactive({
|
|
header: ['地块名称', '土壤温度', '土壤湿度', '土壤PH值', '土壤氮磷钾', '风速', '环境温度', '环境湿度', '二氧化碳', '历史预警数据'],
|
|
headerBGC: "#092757",
|
|
headerStyle: "background-image: url('/static/index/tableHead.png');font-family: FZCYJ;background-size: 100% 100%;",
|
|
oddRowBGC: "#0C2045",
|
|
align: alignFn(10),
|
|
data: [
|
|
['行1列1', '行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1', '行1列2', '行1列3', `<span style='color:#2562AD' > 查看<span>`],
|
|
['行1列1', '行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1', '行1列2', '行1列3', `<span style='color:#2562AD' > 查看<span>`],
|
|
['行1列1', '行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1', '行1列2', '行1列3', `<span style='color:#2562AD' > 查看<span>`],
|
|
['行1列1', '行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1', '行1列2', '行1列3', `<span style='color:#2562AD' > 查看<span>`],
|
|
['行1列1', '行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1', '行1列2', '行1列3', `<span style='color:#2562AD' > 查看<span>`],
|
|
['行1列1', '行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1', '行1列2', '行1列3', `<span style='color:#2562AD' > 查看<span>`],
|
|
['行1列1', '行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1', '行1列2', '行1列3', `<span style='color:#2562AD' > 查看<span>`],
|
|
|
|
]
|
|
})
|
|
const config2 = reactive({
|
|
header: ['产品名称', '溯源码', '产品名称', '溯源码',],
|
|
headerBGC: "#092757",
|
|
oddRowBGC: "#0C2045",
|
|
headerStyle: "background:#0E316B",
|
|
|
|
align: alignFn(4),
|
|
data: [
|
|
['行1列1', '行1列2', '行1列3', '行1列1',],
|
|
['行1列1', '行1列2', '行1列3', '行1列1',],
|
|
['行1列1', '行1列2', '行1列3', '行1列1',],
|
|
['行1列1', '行1列2', '行1列3', '行1列1',],
|
|
['行1列1', '行1列2', '行1列3', '行1列1',],
|
|
['行1列1', '行1列2', '行1列3', '行1列1',],
|
|
['行1列1', '行1列2', '行1列3', '行1列1',],
|
|
|
|
]
|
|
})
|
|
|
|
const config3 = reactive({
|
|
header: ['设备名称', '设备编号', '告警时间', '操作',],
|
|
headerBGC: "#092757",
|
|
oddRowBGC: "#0C2045",
|
|
headerStyle: "background-image: url('/static/index/SBGJBG.png');font-family: FZCYJ;background-size: 100% 100%;",
|
|
align: alignFn(4),
|
|
data: [
|
|
['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
|
|
['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
|
|
['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
|
|
['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
|
|
['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
|
|
['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
|
|
['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
|
|
|
|
]
|
|
})
|
|
// 图表
|
|
const initCharts = (tag, option) => {
|
|
var chartDom = document.getElementById(tag);
|
|
var myChart = echarts.init(chartDom);
|
|
myChart.setOption(option);
|
|
}
|
|
const ChildsDom = ref(null);
|
|
const showWarnPop = ref(false)
|
|
const hdClick = (e) => {
|
|
// console.log(e)
|
|
if (e.ceil) {
|
|
if (e.columnIndex == 9) {
|
|
showWarnPop.value = true
|
|
}
|
|
}
|
|
}
|
|
const showWarnDeatil = ref(false)
|
|
const hdClick3 = (e) => {
|
|
if (e.ceil) {
|
|
if (e.columnIndex == 3) {
|
|
// showWarnPop.value = true
|
|
showWarnDeatil.value = true
|
|
}
|
|
}
|
|
}
|
|
|
|
const test = () => {
|
|
router.replace('/detail')
|
|
}
|
|
const scrollTableFn = () => {
|
|
const tag = document.getElementById('eq')
|
|
const height = tag.scrollHeight
|
|
setInterval(() => {
|
|
tag.scrollTop += 1
|
|
if ((tag.scrollTop + tag.clientHeight) >= height - 50) {
|
|
tag.scrollTop = 0
|
|
|
|
}
|
|
}, 50)
|
|
|
|
|
|
}
|
|
|
|
onMounted(() => {
|
|
document.getElementById("online").removeAttribute('_echarts_instance_');
|
|
document.getElementById("offline").removeAttribute('_echarts_instance_');
|
|
scrollTableFn()
|
|
initCharts('online', options.onLine)
|
|
initCharts('offline', options.offLine)
|
|
// liveFn()
|
|
})
|
|
|
|
</script>
|
|
<style lang="scss">
|
|
.box {
|
|
width: 100vw;
|
|
height: 93vh;
|
|
margin-top: 1vh;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.l {
|
|
width: 25vw;
|
|
height: 93vh;
|
|
|
|
.top {
|
|
width: 25vw;
|
|
height: 30vh;
|
|
background-size: 100% 100%;
|
|
// background-color: pink;
|
|
background-image: url('/static/index/SBGJTJ.png');
|
|
margin-top: 1vh;
|
|
box-sizing: border-box;
|
|
padding: 6vh 2vh 1vh 2vh;
|
|
color: white;
|
|
font-size: 14px;
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.center {
|
|
background-image: url('/static/index/JCSBSLTJ.png');
|
|
|
|
.num {
|
|
|
|
font-size: 20px;
|
|
// font-family: FZCYJ;
|
|
// color: #E5EFFF;
|
|
// background: linear-gradient(to bottom, #DAE8FE 30%, #53A0FF 100%);
|
|
// -webkit-background-clip: text;
|
|
// -webkit-text-fill-color: transparent;
|
|
// margin-left: 30px;
|
|
}
|
|
|
|
.cont {
|
|
height: 70%;
|
|
|
|
.eqNum {
|
|
margin-top: 2vh;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
font-size: 11px;
|
|
background-image: url('/static/index/BTBG.png');
|
|
background-size: 100% 100%;
|
|
|
|
// text-align: ;
|
|
|
|
}
|
|
|
|
.circle {
|
|
width: 120px;
|
|
height: 120px;
|
|
position: relative;
|
|
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.act-img {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
animation: spin 2s linear infinite;
|
|
left: -0%;
|
|
top: 0%;
|
|
}
|
|
|
|
}
|
|
|
|
.online {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.bottom {
|
|
background-image: url('/static/index/SYCPTJ.png');
|
|
|
|
|
|
}
|
|
}
|
|
|
|
.c {
|
|
width: 49vw;
|
|
height: 93vh;
|
|
|
|
.top {
|
|
margin-top: 1vh;
|
|
width: 49vw;
|
|
height: 61vh;
|
|
// background-color: RED;
|
|
background-image: url('/static/index/ZBK.png');
|
|
background-size: 100% 100%;
|
|
box-sizing: border-box;
|
|
padding: 2vh 2vw;
|
|
|
|
.c-top-tit {
|
|
display: flex;
|
|
color: white;
|
|
justify-content: space-between;
|
|
font-size: 12px;
|
|
line-height: 2vh;
|
|
|
|
.c-top-li {
|
|
padding: 2vh 3vw;
|
|
// background-color: #fff;
|
|
background-image: url('/static/index/DBTC.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
.map {
|
|
width: 100%;
|
|
height: 50vh;
|
|
// background-color: #fff;
|
|
// border: 1px solid red;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.bottom {
|
|
width: 49vw;
|
|
height: 30vh;
|
|
margin-top: 1vh;
|
|
background-image: url('/static/index/ZNYJ.png');
|
|
background-size: 100% 100%;
|
|
box-sizing: border-box;
|
|
padding: 6vh 1vh 1vh 2vh;
|
|
position: relative;
|
|
|
|
}
|
|
}
|
|
|
|
.r {
|
|
width: 25vw;
|
|
height: 93vh;
|
|
|
|
.bottom {
|
|
width: 25vw;
|
|
box-sizing: border-box;
|
|
padding-top: 6vh;
|
|
padding: 6vh 1vh 0;
|
|
height: 61vh;
|
|
background-size: 100% 100%;
|
|
|
|
background-image: url('/static/index/MQ.png');
|
|
margin-top: 1vh;
|
|
|
|
.lands {
|
|
display: flex;
|
|
// justify-content: ;
|
|
flex-wrap: wrap;
|
|
height: 100%;
|
|
justify-content: space-between;
|
|
font-size: 14px;
|
|
|
|
.land {
|
|
width: 5vw;
|
|
height: 3vh;
|
|
// background-color: #fff;
|
|
background-image: url('/static/index/DK.png');
|
|
background-size: 100% 100%;
|
|
color: white;
|
|
text-align: center;
|
|
line-height: 3vh;
|
|
|
|
}
|
|
}
|
|
|
|
.video {
|
|
.video-tit {
|
|
color: white;
|
|
width: 110px;
|
|
text-align: center;
|
|
line-height: 30px;
|
|
height: 30px;
|
|
background-image: url('/static/index/JKBT.png');
|
|
background-size: cover;
|
|
font-size: 15px;
|
|
margin-bottom: 3vh;
|
|
}
|
|
}
|
|
}
|
|
|
|
.top {
|
|
width: 25vw;
|
|
height: 30vh;
|
|
padding: 2vh;
|
|
box-sizing: border-box;
|
|
background-size: 100% 100%;
|
|
background-image: url('/static/index/YJCP.png');
|
|
margin-top: 1vh;
|
|
padding-top: 6vh;
|
|
|
|
.content {
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: 1s;
|
|
// background-color: #fff;
|
|
overflow-y: auto;
|
|
font-size: 14px;
|
|
|
|
.eq {
|
|
width: 100%;
|
|
height: 10vh;
|
|
// background-color: #fff;
|
|
margin-bottom: 1vh;
|
|
background-color: #092049;
|
|
box-sizing: border-box;
|
|
padding: 1vh;
|
|
display: flex;
|
|
}
|
|
|
|
}
|
|
|
|
.content::-webkit-scrollbar {
|
|
width: 10px;
|
|
background-color: #153041;
|
|
}
|
|
|
|
.content::-webkit-scrollbar-track {
|
|
background-color: #153041;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: #1581DC;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
|
|
|
|
}
|
|
}
|
|
}
|
|
</style> |