更新大屏
This commit is contained in:
@ -1,74 +0,0 @@
|
||||
<template>
|
||||
|
||||
<div ref="vehicleChartRef" id="bar-main"></div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted ,onUnmounted} from 'vue';
|
||||
import * as echarts from 'echarts'
|
||||
let myChart = null
|
||||
const getLine = async () => {
|
||||
var chartDom = document.getElementById('bar-main');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'Direct',
|
||||
type: 'bar',
|
||||
barWidth: '60%',
|
||||
data: [10, 52, 200, 334, 390, 330, 220]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
}
|
||||
|
||||
const handleResize = () => {
|
||||
myChart?.resize()
|
||||
}
|
||||
onMounted(() => {
|
||||
getLine()
|
||||
window.addEventListener('resize', handleResize)
|
||||
})
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', handleResize)
|
||||
myChart?.dispose()
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#bar-main{
|
||||
z-index:999;
|
||||
}
|
||||
</style>
|
||||
@ -1,57 +0,0 @@
|
||||
<template>
|
||||
|
||||
<div ref="vehicleChartRef" id="chart-container"></div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted ,onUnmounted} from 'vue';
|
||||
import * as echarts from 'echarts'
|
||||
let myChart = null
|
||||
const getLine = async () => {
|
||||
var chartDom = document.getElementById('chart-container');
|
||||
console.log("chartDom")
|
||||
myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
|
||||
option = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||||
type: 'line',
|
||||
areaStyle: {}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
console.log("option", option);
|
||||
}
|
||||
|
||||
const handleResize = () => {
|
||||
myChart?.resize()
|
||||
}
|
||||
onMounted(() => {
|
||||
getLine()
|
||||
window.addEventListener('resize', handleResize)
|
||||
})
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', handleResize)
|
||||
myChart?.dispose()
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#chart-container{
|
||||
z-index:999;
|
||||
}
|
||||
</style>
|
||||
@ -1,73 +0,0 @@
|
||||
<template>
|
||||
|
||||
<div ref="vehicleChartRef" id="pei-main"></div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted ,onUnmounted} from 'vue';
|
||||
import * as echarts from 'echarts'
|
||||
let myChart = null
|
||||
const getLine = async () => {
|
||||
var chartDom = document.getElementById('pei-main');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
|
||||
option = {
|
||||
title: {
|
||||
text: 'Referer of a Website',
|
||||
subtext: 'Fake Data',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: [
|
||||
{ value: 1048, name: 'Search Engine' },
|
||||
{ value: 735, name: 'Direct' },
|
||||
{ value: 580, name: 'Email' },
|
||||
{ value: 484, name: 'Union Ads' },
|
||||
{ value: 300, name: 'Video Ads' }
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
}
|
||||
|
||||
const handleResize = () => {
|
||||
myChart?.resize()
|
||||
}
|
||||
onMounted(() => {
|
||||
getLine()
|
||||
window.addEventListener('resize', handleResize)
|
||||
})
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', handleResize)
|
||||
myChart?.dispose()
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#pei-main{
|
||||
z-index:999;
|
||||
}
|
||||
</style>
|
||||
@ -1,49 +0,0 @@
|
||||
<template>
|
||||
<div class="top-icon-container">
|
||||
<div v-for="(item, index) in list" :key="`list${index}`" class="top-icon-item">
|
||||
<img :src="item.icon" alt="">
|
||||
<div>
|
||||
<div>{{ item.title }}</div>
|
||||
<div style="font-size:10px">{{ item.desc }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="yjbk"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
const list = ref([{
|
||||
icon: require("@/assets/images/databi/tianqi.png"),
|
||||
title: "多云转小雨",
|
||||
desc: "无持续风向微风",
|
||||
},
|
||||
{
|
||||
icon: require("@/assets/images/databi/wendu.png"),
|
||||
title: "36°",
|
||||
desc: "11°~26°",
|
||||
},
|
||||
{
|
||||
icon: require("@/assets/images/databi/time.png"),
|
||||
title: "20:30:59",
|
||||
desc: "星期二 2024-12-17",
|
||||
}
|
||||
|
||||
|
||||
])
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.top-icon-container{
|
||||
gap: 10px;
|
||||
display: flex;
|
||||
.top-icon-item{
|
||||
display: flex;
|
||||
|
||||
}
|
||||
.yjbk{
|
||||
background: url("~@/assets/images/databi/head-1.png") no-repeat center center;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
103
src/views/home/components/yjItem.vue
Normal file
103
src/views/home/components/yjItem.vue
Normal file
@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div class="warning-card flex align-center" :class="changeBG(item.yjjb)">
|
||||
<div class="warning-image">
|
||||
<img :src="item.image" alt="预警图片" />
|
||||
</div>
|
||||
<div class="warning-info">
|
||||
<div class="flex just-between align-center">
|
||||
<div class="flex align-center mt4">
|
||||
<span>{{ item.name }}</span>
|
||||
<span class="gapline mr10 ml10"></span>
|
||||
<span>{{ item.gender }}</span>
|
||||
<span class="gapline mr10 ml10"></span>
|
||||
<span>{{ item.age }}</span>
|
||||
<span class="gapline mr10 ml10"></span>
|
||||
<span>{{ item.mz }}</span>
|
||||
</div>
|
||||
<span class="tag">涉警人员</span>
|
||||
</div>
|
||||
<div class="mt4">身份证：{{ item.sfzh }}</div>
|
||||
<div class="mt4 one_text_detail">户籍地址：{{ item.location }}</div>
|
||||
<div class="mt4 one_text_detail">居住地址：{{ item.location }}</div>
|
||||
<div class="mt4 two_text_detail">预警内容：{{ item.yjnr }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { de } from "element-plus/es/locale.mjs";
|
||||
import { cs } from "element-plus/es/locale.mjs";
|
||||
import { reactive, ref } from "vue";
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
});
|
||||
|
||||
const changeBG = (str) => {
|
||||
switch(str){
|
||||
case "10":
|
||||
return "red";
|
||||
case "20":
|
||||
return "orange";
|
||||
case "30":
|
||||
return "yellow";
|
||||
default:
|
||||
return "blue";
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.warning-card {
|
||||
background: url("~@/assets/images/GroupBlue.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
gap: 12px;
|
||||
margin-bottom: 4px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
.warning-image {
|
||||
width: 80px;
|
||||
height: 100px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.warning-info {
|
||||
flex: 1;
|
||||
.tag{
|
||||
padding: 1px 6px;
|
||||
background: #0072FF;
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.gapline{
|
||||
width: 2px;
|
||||
height: 14px;
|
||||
background: #e9e9e9;
|
||||
}
|
||||
}
|
||||
}
|
||||
.red {
|
||||
background: url("~@/assets/images/GroupRed.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.orange {
|
||||
background: url("~@/assets/images/GroupOrange.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.yellow {
|
||||
background: url("~@/assets/images/GroupYellow.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.blue {
|
||||
background: url("~@/assets/images/GroupBlue.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user