mkm/plantScreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
plantScreen/src/view/detail.vue

560 lines
15 KiB
Vue
Raw Normal View History

u耳麦
2023-12-01 18:22:09 +08:00
<template>
<div class="box">
<div class="l">
<div class="top">
<div style="display: flex;justify-content: space-between;align-items: center;">
<span>种植总面积：</span>
<div>
<span class="area-num "><span class="color-font">2</span> </span>
<span class="area-num "><span class="color-font">2</span> </span>
<span class="area-num "><span class="color-font">2</span> </span>
<span class="area-num "><span class="color-font">2</span> </span>
</div>
</div>
<div style="">种植种类：</div>
<div>
<div class="lands">
<div class="land" v-for="(item, index) in 33" :key="index">地块</div>
</div>
</div>
</div>
<div class="bottom top">
<warnDetail v-if="showWarnDeatil" @off="showWarnDeatil = false"></warnDetail>
<scrollTable @click="hdClick3" :config="config3" style="width:100%;height:100%"></scrollTable>
</div>
<div class="top center">
<video style="margin-top: 1vh;width: 100%;height: 100%;" autoplay muted
src="http://192.168.1.27/live/test.live.mp4?secret=gqig2yFKkDpIMic1uWZY1L5MsIo0eflm">
</video>
</div>
</div>
<div class="c">
<div class="top">
shit
2023-12-02 18:36:12 +08:00
<div style="display: flex;justify-content: space-between;">
c
2023-12-14 20:08:53 +08:00
<div class=" c-top-tits"><span class="color-font" @click="router.push('/')">返回首页</span></div>
shit
2023-12-02 18:36:12 +08:00
<div class=" c-top-tits"><span class="color-font">同谭政地块</span> </div>
<!-- <img src="/static/detail/FHSY.png" alt=""> -->
</div>
<farmerMap></farmerMap>
u耳麦
2023-12-01 18:22:09 +08:00
</div>
<div class="bottom">
<div class="bottom-li" :class="(item.flag) ? 'act' : ''" v-for="(item, index) in environmentData">
<span class="color-font">{{ item.name }}</span>
<span>{{ item.value }}{{ item.unit }}</span>
<span v-if="item.flag">状态正常</span>
<span v-else>状态正常</span>
</div>
</div>
</div>
<div class="r">
<div class="center top">
<div>监控设备总数: <span class="num">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" style="margin-left: 10px;">1418</span> 台
</div>
<div>
<img src="/static/index/Q.png" style="transform: translateY(2px);"> 离线设备统计：<span class="num"
style="margin-left: 10px;">1418</span>
台
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="r-b-li" :class="item.flag ? '' : 'act'" v-for="(item, index) in MoistureData" :key="index">
<span style="color: azure;">{{ item.name }}</span>
<span>{{ item.value }} {{ item.unit }}</span>
<span v-if="item.flag">状态正常</span>
<span v-else>状态异常</span>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue"
import scrollTable from "@/components/scrollTable.vue"
import options from "./option"
import * as echarts from 'echarts';
import warnDetail from "@/components/warnDetail.vue"
import { useRouter } from "vue-router";
shit
2023-12-02 18:36:12 +08:00
import farmerMap from "../components/farmerMap.vue";
u耳麦
2023-12-01 18:22:09 +08:00
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 environmentData = reactive([
{
name: "风速",
value: 10,
unit: "m/s",
flag: true
},
{
name: "风向",
value: 10,
unit: "",
flag: false
},
{
name: "环境湿度",
value: 10,
unit: "%",
flag: false
},
{
name: "环境温度",
value: 10,
unit: "℃",
flag: false
},
{
name: "二氧化碳",
value: 10,
unit: "ppm",
flag: true
},
{
name: "环境气压",
value: 10,
unit: "pa",
flag: true
},
{
name: "雨量",
value: 10,
unit: "mm/h",
flag: false
},
{
name: "环境光照",
value: 10,
unit: "%",
flag: true
},
])
const MoistureData = reactive([
{
name: "土壤温度",
value: 12,
unit: "℃",
flag: true
}, {
name: "土壤湿度",
value: 12,
unit: "℃",
flag: false
}, {
name: "土壤电导率",
value: 12,
unit: "ps/cm",
flag: true
}, {
name: "土壤PH值",
value: 4,
unit: "",
flag: true
}, {
name: "土壤含氮量",
value: 12,
unit: "",
flag: false
}, {
name: "土壤含磷量",
value: 12,
unit: "",
flag: false
},
{
name: "土壤含钾量",
value: 12,
unit: "",
flag: true
},
])
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 showWarnDeatil = ref(false)
const hdClick3 = (e) => {
if (e.ceil) {
if (e.columnIndex == 3) {
showWarnDeatil.value = true
}
}
}
// 图表
const initCharts = (tag, option) => {
var chartDom = document.getElementById(tag);
var myChart = echarts.init(chartDom);
myChart.setOption(option);
}
const test = () => {
router.replace('/detail')
}
onMounted(() => {
shit
2023-12-04 18:22:08 +08:00
document.getElementById("online").removeAttribute('_echarts_instance_');
document.getElementById("offline").removeAttribute('_echarts_instance_');
u耳麦
2023-12-01 18:22:09 +08:00
initCharts('online', options.onLine)
initCharts('offline', options.offLine)
})
</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: #E5EFFF;
.area-num {
margin-right: 10px;
width: 35px;
height: 40px;
background-image: url("/static/detail/numbg.png");
display: inline-block;
background-size: 100% 100%;
font-size: 30px;
text-align: center;
}
.lands {
display: flex;
flex-wrap: wrap;
height: 100%;
justify-content: space-between;
font-size: 14px;
overflow-y: auto;
margin-top: 1vh;
height: 15vh;
.land {
width: 5vw;
height: 3vh;
// background-color: #fff;
background-image: url('/static/detail/ZL.png');
background-size: 100% 100%;
color: white;
text-align: center;
line-height: 3vh;
}
}
.lands::-webkit-scrollbar {
width: 10px;
background-color: #153041;
}
.lands::-webkit-scrollbar-track {
background-color: #153041;
}
::-webkit-scrollbar-thumb {
background-color: #15A1DC;
border-radius: 5px;
}
}
.center {
background-image: url("/static/detail/MQJk.png");
}
.bottom {
position: relative;
}
}
.c {
width: 49vw;
height: 93vh;
.top {
margin-top: 1vh;
width: 49vw;
height: 61vh;
shit
2023-12-02 18:36:12 +08:00
// background-color: RED;
background-image: url('/static/index/ZBK.png');
background-size: 100% 100%;
box-sizing: border-box;
padding: 2vh 2vw;
.c-top-tits {
u耳麦
2023-12-01 18:22:09 +08:00
shit
2023-12-02 18:36:12 +08:00
padding: 1vh 1vw;
font-size: 20px;
// border: 1px solid red;
cursor: pointer;
background-image: url('/static/detail/FHSY.png');
background-size: 100% 100%;
}
u耳麦
2023-12-01 18:22:09 +08:00
}
.bottom {
width: 49vw;
height: 30vh;
margin-top: 1vh;
background-image: url('/static/detail/QXHJJC.png');
background-size: 100% 100%;
box-sizing: border-box;
padding: 6vh 1vh 1vh 2vh;
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.bottom-li {
// background-color: #fff;
width: 49%;
height: 4vh;
display: flex;
box-sizing: border-box;
justify-content: space-between;
// border: 1px solid red;
background-image: url('/static/detail/ZC.png');
background-size: 100% 100%;
align-items: center;
font-size: 16px;
color: #E5EFFF;
font-family: FZCYJ;
padding: 0 1VW;
}
.act {
background-image: url('/static/detail/YC.png');
color: #C65956;
}
}
}
.r {
width: 25vw;
height: 93vh;
.bottom {
width: 25vw;
box-sizing: border-box;
padding: 5vh 1vh 1.5vh;
height: 61vh;
background-size: 100% 100%;
background-image: url('/static/detail/TRSQ.png');
margin-top: 1vh;
display: flex;
justify-content: space-between;
flex-direction: column;
align-items: center;
.r-b-li {
width: 95%;
height: 7.5vh;
background-image: url('/static/detail/SQBG.png');
background-size: 100% 100%;
color: white;
font-family: FZCYJ;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
padding: 0 1.5VW;
font-size: 14PX;
}
.act {
color: #C55956;
}
}
.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;
color: #E5EFFF;
}
.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%;
}
.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%);
}
}
}
}
}
</style>
Reference in New Issue Copy Permalink