新增晴雨台
This commit is contained in:
du
parent
6739c5d295
commit
7291d33ddc
BIN
src/assets/images/home-page/left/barometer.png
Normal file
BIN
src/assets/images/home-page/left/barometer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/assets/images/home-page/left/lightRain.png
Normal file
BIN
src/assets/images/home-page/left/lightRain.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 609 B |
BIN
src/assets/images/title/icon.png
Normal file
BIN
src/assets/images/title/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 486 B |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 5.2 KiB |
BIN
src/assets/images/top/menuNotSelected.png
Normal file
BIN
src/assets/images/top/menuNotSelected.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 707 B |
BIN
src/assets/images/top/menuSelection.png
Normal file
BIN
src/assets/images/top/menuSelection.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 57 KiB |
|
|
@ -1,11 +1,12 @@
|
|||
<template>
|
||||
<div class="title-bg bg">
|
||||
<img class="title_img" src="@/assets/images/title/icon.png" alt="" />
|
||||
<span class="title">{{ title }}</span>
|
||||
<slot></slot>
|
||||
<div v-if="swshow">
|
||||
<!-- <div v-if="swshow">
|
||||
<span class="sw-tip">点位</span>
|
||||
<el-switch v-model="status" @change="changeStatus" />
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -40,17 +41,21 @@ const changeStatus = (e: Boolean) => {
|
|||
.title-bg {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 53px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding-left: 10px;
|
||||
|
||||
.title {
|
||||
flex: 1;
|
||||
font-size: 20px;
|
||||
color: #ffffff;
|
||||
margin-left: 10%;
|
||||
font-family: YouSheBiaoTiHei;
|
||||
margin-left: 12px;
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
font-family: Source Han Sans SC, Source Han Sans SC;
|
||||
font-weight: 500;
|
||||
color: #f3f9ff;
|
||||
}
|
||||
|
||||
.sw-tip {
|
||||
|
|
@ -66,4 +71,8 @@ const changeStatus = (e: Boolean) => {
|
|||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.title_img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
57
src/components/global-register/title-d/index.vue
Normal file
57
src/components/global-register/title-d/index.vue
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<template>
|
||||
<div class="title-bg" :style="'width:' + props.width + '%'">
|
||||
<span class="title_icon"></span>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, ref, watchEffect } from "vue";
|
||||
export default defineComponent({
|
||||
name: "TitleD",
|
||||
});
|
||||
</script>
|
||||
|
||||
<script lang='ts' setup>
|
||||
const emits = defineEmits(["switch:change"]);
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
|
||||
swshow: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: "100",
|
||||
},
|
||||
});
|
||||
|
||||
const status = ref(true);
|
||||
const changeStatus = (e: Boolean) => {
|
||||
emits("switch:change", e);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.title-bg {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
background-color: rgba(72, 77, 86, 0.66);
|
||||
margin: 5px 0;
|
||||
}
|
||||
.title_icon {
|
||||
width: 4px;
|
||||
height: 2px;
|
||||
background: #ff6200;
|
||||
opacity: 1;
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -22,7 +22,7 @@ const onClickOutside = () => {
|
|||
<h1 class="top-title">{{ title }}</h1>
|
||||
<div class="top_option">
|
||||
<!-- 图层控制 -->
|
||||
<!-- <TopOption></TopOption> -->
|
||||
<TopOption></TopOption>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
|
@ -35,21 +35,20 @@ const onClickOutside = () => {
|
|||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
|
||||
.top-title {
|
||||
position: relative;
|
||||
margin-block: 0;
|
||||
color: #fff;
|
||||
letter-spacing: 4px;
|
||||
font-size: 18px;
|
||||
top: 40%;
|
||||
transform: translateY(-50%);
|
||||
width: 30%;
|
||||
font-size: 27px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
color: #cfe6ff;
|
||||
}
|
||||
}
|
||||
.top_option {
|
||||
margin-top: 15px;
|
||||
padding-left: 25px;
|
||||
// margin-top: 15px;
|
||||
// padding-left: 25px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -49,8 +49,8 @@
|
|||
--el-table-bg-color: transparent;
|
||||
--el-table-current-row-background-color: transparent;
|
||||
--el-table-header-bg-color: transparent;
|
||||
// --el-border-color-lighter: #0080b200;
|
||||
--el-border-color-lighter: #0081b2;
|
||||
--el-border-color-lighter: #0080b200;
|
||||
// --el-border-color-lighter: #0081b2;
|
||||
--el-fill-color-lighter: #00c0ff44;
|
||||
--el-table-header-text-color: #00ffff !important;
|
||||
|
||||
|
|
@ -100,16 +100,19 @@
|
|||
color: #08dcf0;
|
||||
}
|
||||
|
||||
//table头部背景颜色
|
||||
.el-table__header-wrapper {
|
||||
background-color: rgba(21, 47, 97, 1);
|
||||
background-color: rgba(2, 49, 100, 1);
|
||||
border-radius: 4px 4px 0 0;
|
||||
height: 35px;
|
||||
margin-top: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
//table内容背景颜色
|
||||
.el-table__row {
|
||||
background-color: rgba(21, 48, 97, 0.407) !important;
|
||||
background-color: rgba(0, 61, 123, 0.353) !important;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.el-table td {
|
||||
|
|
@ -178,15 +181,16 @@
|
|||
}
|
||||
|
||||
table tr td {
|
||||
border: 2px solid #152F61 !important;
|
||||
// border: 2px solid #152F61 !important;
|
||||
}
|
||||
|
||||
//table边框
|
||||
table tr td:not(:nth-last-child(1)) {
|
||||
border-right: none !important;
|
||||
}
|
||||
|
||||
table tr td:not(:nth-child(1)) {
|
||||
// border-left: none !important;
|
||||
border-left: none !important;
|
||||
}
|
||||
|
||||
table tr:not(:nth-child(1)) td {
|
||||
|
|
|
|||
|
|
@ -115,14 +115,14 @@ ul {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
padding: 0 10px 10px 10px;
|
||||
height: 260px;
|
||||
border: 2px solid;
|
||||
background: linear-gradient(0deg, #07193a 0%, rgba(9, 24, 56, 0.3) 100%);
|
||||
// padding: 0 10px 10px 10px;
|
||||
// height: 260px;
|
||||
// border: 2px solid;
|
||||
// background: linear-gradient(0deg, #07193a 0%, rgba(9, 24, 56, 0.3) 100%);
|
||||
|
||||
border-image: linear-gradient(180deg,
|
||||
rgba(15, 37, 77, 0) 0%,
|
||||
rgba(64, 98, 165, 1) 100%) 2 2 2 2;
|
||||
// border-image: linear-gradient(180deg,
|
||||
// rgba(15, 37, 77, 0) 0%,
|
||||
// rgba(64, 98, 165, 1) 100%) 2 2 2 2;
|
||||
margin-bottom: 31px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@ $designWidth: 1920;
|
|||
$designHeight: 1080;
|
||||
|
||||
//侧边菜单宽度
|
||||
$sideWidth: 25%;
|
||||
$sideWidth: 33%;
|
||||
|
||||
@use "sass:math";
|
||||
|
||||
|
|
@ -97,5 +97,10 @@ $sideWidth: 25%;
|
|||
|
||||
//按钮
|
||||
.details {
|
||||
color: #E19F35;
|
||||
color: rgba(102, 225, 223, 1);
|
||||
}
|
||||
|
||||
.conBox {
|
||||
background-color: rgba(0, 61, 123, 0.5);
|
||||
border-radius: 0px 0px 10px 10px;
|
||||
}
|
||||
127
src/views/home-page/left-side/components/basicInformation.vue
Normal file
127
src/views/home-page/left-side/components/basicInformation.vue
Normal file
|
|
@ -0,0 +1,127 @@
|
|||
<!-- 晴雨台 -->
|
||||
<template>
|
||||
<div class="side-bg">
|
||||
<TitleC title="晴雨台" :swshow="false"></TitleC>
|
||||
<div class="con_box conBox">
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, ref, watchEffect } from "vue";
|
||||
export default defineComponent({
|
||||
name: "weather",
|
||||
});
|
||||
</script>
|
||||
<script setup lang='ts'>
|
||||
// import * as echarts from "echarts";
|
||||
// const airTenementRef = ref();
|
||||
// let airOption = {
|
||||
// series: [
|
||||
// {
|
||||
// type: "gauge",
|
||||
// startAngle: 180,
|
||||
// endAngle: 0,
|
||||
// center: ["50%", "75%"],
|
||||
// radius: "90%",
|
||||
// min: 0,
|
||||
// max: 1,
|
||||
// splitNumber: 8,
|
||||
// axisLine: {
|
||||
// lineStyle: {
|
||||
// width: 6,
|
||||
// color: [
|
||||
// [0.25, "#FF6E76"],
|
||||
// [0.5, "#FDDD60"],
|
||||
// [0.75, "#58D9F9"],
|
||||
// [1, "#7CFFB2"],
|
||||
// ],
|
||||
// },
|
||||
// },
|
||||
// pointer: {
|
||||
// icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
|
||||
// length: "12%",
|
||||
// width: 20,
|
||||
// offsetCenter: [0, "-60%"],
|
||||
// itemStyle: {
|
||||
// color: "auto",
|
||||
// },
|
||||
// },
|
||||
// axisTick: {
|
||||
// length: 12,
|
||||
// lineStyle: {
|
||||
// color: "auto",
|
||||
// width: 2,
|
||||
// },
|
||||
// },
|
||||
// splitLine: {
|
||||
// length: 20,
|
||||
// lineStyle: {
|
||||
// color: "auto",
|
||||
// width: 5,
|
||||
// },
|
||||
// },
|
||||
// axisLabel: {
|
||||
// color: "#fff",
|
||||
// fontSize: 20,
|
||||
// distance: -60,
|
||||
// rotate: "tangential",
|
||||
// formatter: function (value: number) {
|
||||
// if (value === 0.875) {
|
||||
// return "差";
|
||||
// } else if (value === 0.625) {
|
||||
// return "合格";
|
||||
// } else if (value === 0.375) {
|
||||
// return "良";
|
||||
// } else if (value === 0.125) {
|
||||
// return "优";
|
||||
// }
|
||||
// return "";
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// offsetCenter: [0, "10%"],
|
||||
// fontSize: 20,
|
||||
// color: "yellow",
|
||||
// },
|
||||
// detail: {
|
||||
// fontSize: 30,
|
||||
// offsetCenter: [0, "-20%"],
|
||||
// valueAnimation: true,
|
||||
// formatter: function (value: number) {
|
||||
// return Math.round(value * 100) + "";
|
||||
// },
|
||||
// color: "inherit",
|
||||
// },
|
||||
// data: [
|
||||
// {
|
||||
// value: 0.7,
|
||||
// name: "良",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// ],
|
||||
// };
|
||||
// const getData = () => {
|
||||
// //空气情况仪表盘
|
||||
// const airTenementChart = echarts.init(airTenementRef.value);
|
||||
// airTenementChart.setOption(airOption);
|
||||
// };
|
||||
// onMounted(() => {
|
||||
// getData();
|
||||
// });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.side-bg {
|
||||
// height: 45%;
|
||||
}
|
||||
.con_box {
|
||||
height: 213px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,181 +0,0 @@
|
|||
<!-- 应急事件统计 -->
|
||||
<template>
|
||||
<div class="side-bg">
|
||||
<div><TitleC title="应急事件统计 已处理：30，待处理：1"></TitleC></div>
|
||||
|
||||
<div class="manage_body">
|
||||
<div class="input_div">
|
||||
<span> 关键词 </span>
|
||||
<el-input
|
||||
class="custom-input inputDeep"
|
||||
v-model="search"
|
||||
placeholder="请输入关键词"
|
||||
>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<div class="manage_table">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
max-height="32vh"
|
||||
style="width: 100%"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
<el-table-column prop="date" label="事件名" align="center" />
|
||||
<el-table-column prop="status" label="状态" align="center">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.status == 0">已处理</span>
|
||||
<span v-else style="color: red">待处理</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="处理人" align="center" />
|
||||
<el-table-column prop="address" label="联系地址" align="center" />
|
||||
</el-table>
|
||||
<el-pagination
|
||||
background
|
||||
small
|
||||
v-model:currentPage="currentPage"
|
||||
v-model:page-size="pageSize"
|
||||
layout="total, prev, pager, next"
|
||||
:total="total"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, ref, watchEffect } from "vue";
|
||||
export default defineComponent({
|
||||
name: "event-statistics",
|
||||
});
|
||||
</script>
|
||||
|
||||
<script lang='ts' setup>
|
||||
const tableData = [
|
||||
{
|
||||
date: "某某事件",
|
||||
name: "某某人",
|
||||
status: 0,
|
||||
address: "某某地址",
|
||||
},
|
||||
{
|
||||
date: "某某事件",
|
||||
name: "某某人",
|
||||
status: 1,
|
||||
address: "某某地址",
|
||||
},
|
||||
{
|
||||
date: "某某事件",
|
||||
name: "某某人",
|
||||
status: 1,
|
||||
address: "某某地址",
|
||||
},
|
||||
{
|
||||
date: "某某事件",
|
||||
name: "某某人",
|
||||
status: 1,
|
||||
address: "某某地址",
|
||||
},
|
||||
{
|
||||
date: "某某事件",
|
||||
name: "某某人",
|
||||
status: 1,
|
||||
address: "某某地址",
|
||||
},
|
||||
];
|
||||
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(5);
|
||||
const total = ref(10);
|
||||
const search = ref("");
|
||||
const visible = ref(false);
|
||||
const clickvisible = () => {
|
||||
visible.value = true;
|
||||
};
|
||||
const close = () => {
|
||||
visible.value = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.side-bg {
|
||||
height: 37%;
|
||||
}
|
||||
.manage_body {
|
||||
padding: 10px;
|
||||
}
|
||||
.manage_body_top_icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-top: 4px;
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
> img {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
.manage_body_top_icon_left {
|
||||
background-image: url("@/assets/images/emergency-map/left/cm_left_bg_1.png");
|
||||
}
|
||||
.manage_body_top_icon_right {
|
||||
background-image: url("@/assets/images/emergency-map/left/cm_right_bg_1.png");
|
||||
}
|
||||
|
||||
.demo-pagination-block + .demo-pagination-block {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.demo-pagination-block .demonstration {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.el-pagination {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
border-radius: 0% !important;
|
||||
border: 1px solid #2fdbff;
|
||||
color: #2fdbff !important;
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner::selection {
|
||||
color: #2fdbff !important;
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner::placeholder {
|
||||
color: #2fdbff !important;
|
||||
}
|
||||
.manage_table {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.inputDeep {
|
||||
:deep(.el-input__wrapper) {
|
||||
box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color))
|
||||
inset;
|
||||
cursor: default;
|
||||
.el-input__inner {
|
||||
cursor: default !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.input_div {
|
||||
width: 300px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
> span {
|
||||
line-height: 30px;
|
||||
padding: 0px 10px;
|
||||
border: 1px solid #2fdbff;
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
}
|
||||
> .el-input {
|
||||
width: 60%;
|
||||
margin-left: -13px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,241 +0,0 @@
|
|||
<!-- 风险池 -->
|
||||
<template>
|
||||
<div class="side-bg">
|
||||
<div>
|
||||
<TitleC title="风险池" :swshow="false">
|
||||
<el-radio-group
|
||||
v-model="recordRadio"
|
||||
size="large"
|
||||
text-color="#00FFFF"
|
||||
@change="recordChange"
|
||||
>
|
||||
<el-radio-button label="1">重点人员</el-radio-button>
|
||||
<el-radio-button label="2">重点场所</el-radio-button>
|
||||
</el-radio-group></TitleC
|
||||
>
|
||||
</div>
|
||||
<div class="rP_body">
|
||||
<div></div>
|
||||
<div v-if="recordRadio == '1'">
|
||||
<el-table
|
||||
:data="personnelTableData"
|
||||
max-height="32vh"
|
||||
style="width: 100%"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="姓名"
|
||||
align="center"
|
||||
width="100"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="gender"
|
||||
label="性别"
|
||||
align="center"
|
||||
width="70"
|
||||
/>
|
||||
<el-table-column prop="typesOf" label="类型" align="center" />
|
||||
<el-table-column prop="address" label="地址" align="center" />
|
||||
<el-table-column label="操作" align="center" width="80">
|
||||
<template #default="scope">
|
||||
<span @click="clickvisible">
|
||||
<span class="pointer details">预警</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
background
|
||||
small
|
||||
v-model:currentPage="personnelCurrentPage"
|
||||
v-model:page-size="personnelageSize"
|
||||
layout="total, prev, pager, next"
|
||||
:total="personnelTotal"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="recordRadio == '2'">
|
||||
<el-table
|
||||
:data="placeTableData"
|
||||
max-height="32vh"
|
||||
style="width: 100%"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
<el-table-column
|
||||
prop="place"
|
||||
label="场所"
|
||||
align="center"
|
||||
width="100"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="classification"
|
||||
label="分类"
|
||||
align="center"
|
||||
width="100"
|
||||
/>
|
||||
<el-table-column prop="address" label="地址" align="center" />
|
||||
<el-table-column
|
||||
prop="address"
|
||||
label="操作"
|
||||
align="center"
|
||||
width="80"
|
||||
>
|
||||
<template #default="scope">
|
||||
<span @click="clickvisible">
|
||||
<span class="pointer details">预警</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
background
|
||||
small
|
||||
v-model:currentPage="placeCurrentPage"
|
||||
v-model:page-size="placePageSize"
|
||||
layout="total, prev, pager, next"
|
||||
:total="placeTotal"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 弹窗 -->
|
||||
<RiskPool :visible="visible" @close="close"></RiskPool>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, ref, watchEffect } from "vue";
|
||||
export default defineComponent({
|
||||
name: "risk-pool",
|
||||
});
|
||||
</script>
|
||||
<script setup lang='ts'>
|
||||
import RiskPool from "../dialog/risk-pool.vue";
|
||||
|
||||
const visible = ref(false);
|
||||
|
||||
const recordRadio = ref("1");
|
||||
//重点人员
|
||||
const personnelCurrentPage = ref(1);
|
||||
const personnelageSize = ref(5);
|
||||
const personnelTotal = ref(10);
|
||||
|
||||
const personnelTableData = [
|
||||
{
|
||||
name: "某某人",
|
||||
address: "某某某地址",
|
||||
gender: "男",
|
||||
typesOf: "防火“六类人员",
|
||||
},
|
||||
{
|
||||
name: "某某人",
|
||||
address: "某某某地址",
|
||||
gender: "男",
|
||||
typesOf: "防汛隐患点",
|
||||
},
|
||||
{
|
||||
name: "某某人",
|
||||
address: "某某某地址",
|
||||
gender: "男",
|
||||
typesOf: "重点关注人员",
|
||||
},
|
||||
{
|
||||
name: "某某人",
|
||||
address: "某某某地址",
|
||||
gender: "男",
|
||||
typesOf: "火灾隐患点",
|
||||
},
|
||||
{
|
||||
name: "某某人",
|
||||
address: "某某某地址",
|
||||
gender: "男",
|
||||
typesOf: "防汛隐患点",
|
||||
},
|
||||
{
|
||||
name: "某某人",
|
||||
address: "某某某地址",
|
||||
gender: "男",
|
||||
typesOf: "防汛隐患点",
|
||||
},
|
||||
{
|
||||
name: "某某人",
|
||||
address: "某某某地址",
|
||||
gender: "男",
|
||||
typesOf: "防汛隐患点",
|
||||
},
|
||||
];
|
||||
//重点场所
|
||||
const placeCurrentPage = ref(1);
|
||||
const placePageSize = ref(5);
|
||||
const placeTotal = ref(10);
|
||||
const placeTableData = [
|
||||
{
|
||||
place: "某某场所",
|
||||
classification: "火灾隐患点",
|
||||
address: "99999999999",
|
||||
},
|
||||
{
|
||||
place: "某某场所",
|
||||
classification: "火灾隐患点",
|
||||
address: "11111111111",
|
||||
},
|
||||
{
|
||||
place: "某某场所",
|
||||
classification: "火灾隐患点",
|
||||
address: "11111111111",
|
||||
},
|
||||
{
|
||||
place: "某某场所",
|
||||
classification: "火灾隐患点",
|
||||
address: "11111111111",
|
||||
},
|
||||
{
|
||||
place: "某某场所",
|
||||
classification: "火灾隐患点",
|
||||
address: "11111111111",
|
||||
},
|
||||
];
|
||||
//切换table
|
||||
const recordChange = () => {};
|
||||
const clickvisible = () => {
|
||||
visible.value = true;
|
||||
};
|
||||
const close = () => {
|
||||
visible.value = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.side-bg {
|
||||
height: 39%;
|
||||
}
|
||||
.rP_body {
|
||||
> div:nth-child(1) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
> div:nth-child(2) {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
//单选框样式
|
||||
|
||||
::v-deep .el-radio-button__original-radio:checked + .el-radio-button__inner {
|
||||
background: #031838;
|
||||
}
|
||||
|
||||
::v-deep .el-radio-button:first-child .el-radio-button__inner {
|
||||
background: #031838;
|
||||
border-radius: 10px 0 0 10px !important;
|
||||
}
|
||||
|
||||
::v-deep .el-radio-button__inner {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
::v-deep .el-radio-button:last-child .el-radio-button__inner {
|
||||
background: #031838;
|
||||
border-radius: 0 10px 10px 0 !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,27 +2,75 @@
|
|||
<template>
|
||||
<div class="side-bg">
|
||||
<div>
|
||||
<TitleC title="晴雨台" :swshow="false">
|
||||
<div @click="visible = true" class="release_buttom">发布预警</div>
|
||||
</TitleC>
|
||||
</div>
|
||||
<div class="weather_body">
|
||||
<TitleC title="晴雨台" :swshow="false"></TitleC>
|
||||
<div class="weather_data">
|
||||
<div>
|
||||
<div><span>温度：</span><span>15°C</span></div>
|
||||
<div><span>湿度：</span><span>55%</span></div>
|
||||
<div><span>气压：</span><span>30P</span></div>
|
||||
<div><span>降水量：</span><span>50ml</span></div>
|
||||
<div><span>天气状况：</span><span>多云</span></div>
|
||||
<TitleD width="100">
|
||||
<div class="weather_data_title">气象实时数据</div>
|
||||
</TitleD>
|
||||
<div class="weather_data_left">
|
||||
<div>
|
||||
<div>
|
||||
<img
|
||||
src="../../../../assets/images/home-page/left/lightRain.png"
|
||||
alt=""
|
||||
/>
|
||||
<span>15°</span>
|
||||
</div>
|
||||
<div>
|
||||
<div v-for="(item, index) in 7" :key="index">
|
||||
<span>2023年12月15日</span>
|
||||
<span>多云</span>
|
||||
<span>1°C~11°C</span>
|
||||
<div>雨 东南风：＜3级</div>
|
||||
<div>10~17℃</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div>湿度：48.0%</div>
|
||||
<div>降雨量：240mm</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>空气质量：良</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<RiskPool :visible="visible" @close="visible = false"></RiskPool>
|
||||
</div>
|
||||
<div>
|
||||
<TitleD width="100">
|
||||
<div class="weather_data_title">未来7天气象数据</div>
|
||||
</TitleD>
|
||||
<div class="weather_data_right conBox"></div>
|
||||
</div>
|
||||
</div>
|
||||
<TitleD width="100">
|
||||
<div class="weather_data_title">气象预警信息</div>
|
||||
</TitleD>
|
||||
<el-table :data="tableData" height="180" style="width: 100%">
|
||||
<el-table-column type="index" label="序号" align="center" width="60" />
|
||||
<el-table-column
|
||||
prop="type"
|
||||
label="预警类型"
|
||||
align="center"
|
||||
width="120"
|
||||
/>
|
||||
<el-table-column prop="info" label="预警信息" align="center" />
|
||||
<el-table-column
|
||||
prop="time"
|
||||
label="预警时间"
|
||||
align="center"
|
||||
width="140"
|
||||
>
|
||||
<template #default="scope">
|
||||
<span class="time">{{ scope.row.time }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="60">
|
||||
<template #default="scope">
|
||||
<span @click="clickDetails">
|
||||
<span class="pointer details">详情</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -33,71 +81,99 @@ export default defineComponent({
|
|||
});
|
||||
</script>
|
||||
<script setup lang='ts'>
|
||||
import RiskPool from "../dialog/risk-pool.vue";
|
||||
const visible = ref(false);
|
||||
const tableData = [
|
||||
{
|
||||
type: "暴雨黄色预警",
|
||||
info: "xxxx气象台发布暴雨黄色预警信号：xx区xx街道、xx街道、xx镇未来连续三天降雨量将达到150ml以上，请注意防范。",
|
||||
time: "2024/1/22 12:20:13",
|
||||
},
|
||||
{
|
||||
type: "暴雨黄色预警",
|
||||
info: "xxxx气象台发布暴雨黄色预警信号：xx区xx街道、xx街道、xx镇未来连续三天降雨量将达到150ml以上，请注意防范。",
|
||||
time: "2024/1/22 12:20:13",
|
||||
},
|
||||
{
|
||||
type: "暴雨黄色预警",
|
||||
info: "xxxx气象台发布暴雨黄色预警信号：xx区xx街道、xx街道、xx镇未来连续三天降雨量将达到150ml以上，请注意防范。",
|
||||
time: "2024/1/22 12:20:13",
|
||||
},
|
||||
];
|
||||
const clickDetails = () => {};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.side-bg {
|
||||
height: 45%;
|
||||
// height: 45%;
|
||||
}
|
||||
.weather_body {
|
||||
padding-top: 5px;
|
||||
padding-left: 10px;
|
||||
.weather_data {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
> div:nth-child(1) {
|
||||
width: 40%;
|
||||
}
|
||||
> div:nth-child(2) {
|
||||
width: 59%;
|
||||
}
|
||||
}
|
||||
.weather_data_title {
|
||||
font-size: 16px;
|
||||
font-family: Source Han Sans SC, Source Han Sans SC;
|
||||
font-weight: 400;
|
||||
color: #ffe7cd;
|
||||
}
|
||||
.weather_data_left {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
background-image: url("../../../../assets/images/home-page/left/barometer.png");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
padding: 12px;
|
||||
> div:nth-child(1) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
> div {
|
||||
width: 190px;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
margin-right: 20px;
|
||||
> span:nth-child(1) {
|
||||
font-family: YouSheBiaoTiHei;
|
||||
}
|
||||
justify-content: space-between;
|
||||
> div:nth-child(1) {
|
||||
font-size: 27px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #ffffff;
|
||||
> img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
> div:nth-child(2) {
|
||||
font-size: 14px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
> div:nth-child(2) {
|
||||
padding-left: 10px;
|
||||
margin-top: 20px;
|
||||
overflow-y: scroll;
|
||||
height: 200px;
|
||||
background-color: #153062;
|
||||
> div {
|
||||
color: #86b6f0;
|
||||
|
||||
font-size: 13px;
|
||||
font-family: Source Han Sans SC, Source Han Sans SC;
|
||||
font-weight: 400;
|
||||
color: #d0deee;
|
||||
}
|
||||
> div:nth-child(1) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
> span {
|
||||
margin-right: 20px;
|
||||
}
|
||||
> span:nth-child(2) {
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
text-align: center;
|
||||
}
|
||||
> span:nth-child(3) {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
> span:nth-child(4) {
|
||||
color: #e19f35;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
> div:nth-child(2)::-webkit-scrollbar {
|
||||
display: none;
|
||||
.weather_data_right {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.release_buttom {
|
||||
cursor: pointer;
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
border: 1px solid red;
|
||||
padding: 0 10px;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
.time {
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans SC, Source Han Sans SC;
|
||||
font-weight: 400;
|
||||
color: #159aff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,25 +2,22 @@
|
|||
<div class="left-side">
|
||||
<!-- 晴雨台 -->
|
||||
<Weather></Weather>
|
||||
<!-- 风险池 -->
|
||||
<RiskPool></RiskPool>
|
||||
<!-- 应急事件统计 -->
|
||||
<EventStatistics></EventStatistics>
|
||||
<!-- 基本信息统计 -->
|
||||
<BasicInformation></BasicInformation>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, ref, watchEffect } from "vue";
|
||||
export default defineComponent({
|
||||
components: { Weather, RiskPool, EventStatistics },
|
||||
components: { Weather, BasicInformation },
|
||||
name: "LeftSide",
|
||||
});
|
||||
</script>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import BasicInformation from "./components/basicInformation.vue";
|
||||
import Weather from "./components/weather.vue";
|
||||
import RiskPool from "./components/risk-pool.vue";
|
||||
import EventStatistics from "./components/event-statistics.vue";
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<!-- -->
|
||||
<template>
|
||||
<div>
|
||||
<div class="top_option" ref="buttonRef" v-click-outside="onClickOutside">
|
||||
<div class="top_menu">
|
||||
<!-- <div class="top_option" ref="buttonRef" v-click-outside="onClickOutside">
|
||||
<img src="@/assets/images/top/top-option-layer.png" alt="" />
|
||||
<span>图层控制</span>
|
||||
</div>
|
||||
<el-popover
|
||||
</div> -->
|
||||
<!-- <el-popover
|
||||
ref="popoverRef"
|
||||
:virtual-ref="buttonRef"
|
||||
trigger="click"
|
||||
|
|
@ -60,7 +60,17 @@
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-popover>
|
||||
</el-popover> -->
|
||||
|
||||
<div
|
||||
class="top_title"
|
||||
v-for="(item, index) in label"
|
||||
:key="index"
|
||||
@click="clickMenuOption(item.id)"
|
||||
:class="item.check == true ? 'menu_selected' : 'menu_notSelected'"
|
||||
>
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
|
|
@ -70,30 +80,71 @@ export default defineComponent({
|
|||
});
|
||||
</script>
|
||||
<script setup lang='ts'>
|
||||
import { ClickOutside as vClickOutside } from "element-plus";
|
||||
const buttonRef = ref();
|
||||
const popoverRef = ref();
|
||||
const onClickOutside = () => {
|
||||
unref(popoverRef).popperRef?.delayHide?.();
|
||||
};
|
||||
const data = reactive([
|
||||
{ name: "应急物资", state: true, eName: "emergency-supplies" },
|
||||
{ name: "避难场所", state: true, eName: "shelter" },
|
||||
{ name: "城市内涝点", state: true, eName: "waterlogging-point" },
|
||||
{ name: "视频监控", state: true, eName: "video-monitoring" },
|
||||
{ name: "救援队伍", state: false, eName: "rescue-team" },
|
||||
{ name: "学校", state: false, eName: "school" },
|
||||
{ name: "微型消防站", state: false, eName: "micro-fire-station" },
|
||||
{ name: "消防站", state: false, eName: "fire-station" },
|
||||
{ name: "医疗队伍", state: false, eName: "medical-team" },
|
||||
import { menuStore } from "@/store/menu";
|
||||
const label = ref([
|
||||
{ title: "大屏首页", check: true, id: 0 },
|
||||
{ title: "大数据分析", check: false, id: 1 },
|
||||
]);
|
||||
|
||||
const modifySelected = (item: any) => {
|
||||
item.state = !item.state;
|
||||
const clickMenuOption = (id: any) => {
|
||||
label.value.forEach((item) => {
|
||||
item.check = false;
|
||||
});
|
||||
label.value[id].check = true;
|
||||
};
|
||||
</script>
|
||||
// import { ClickOutside as vClickOutside } from "element-plus";
|
||||
// const buttonRef = ref();
|
||||
// const popoverRef = ref();
|
||||
// const onClickOutside = () => {
|
||||
// unref(popoverRef).popperRef?.delayHide?.();
|
||||
// };
|
||||
// const data = reactive([
|
||||
// { name: "应急物资", state: true, eName: "emergency-supplies" },
|
||||
// { name: "避难场所", state: true, eName: "shelter" },
|
||||
// { name: "城市内涝点", state: true, eName: "waterlogging-point" },
|
||||
// { name: "视频监控", state: true, eName: "video-monitoring" },
|
||||
// { name: "救援队伍", state: false, eName: "rescue-team" },
|
||||
// { name: "学校", state: false, eName: "school" },
|
||||
// { name: "微型消防站", state: false, eName: "micro-fire-station" },
|
||||
// { name: "消防站", state: false, eName: "fire-station" },
|
||||
// { name: "医疗队伍", state: false, eName: "medical-team" },
|
||||
// ]);
|
||||
|
||||
// const modifySelected = (item: any) => {
|
||||
// item.state = !item.state;
|
||||
// };
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.top_menu {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
.top_title {
|
||||
cursor: pointer;
|
||||
width: 112px;
|
||||
height: 40px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
margin-left: 32px;
|
||||
background-image: url();
|
||||
font-size: 18px;
|
||||
font-family: PingFangSC-Medium, PingFangSC-Medium;
|
||||
font-weight: normal;
|
||||
color: #f4faff;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.menu_selected {
|
||||
background-image: url("@/assets/images/top/menuSelection.png");
|
||||
}
|
||||
.menu_notSelected {
|
||||
background-image: url("@/assets/images/top/menuNotSelected.png");
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<!-- <style lang="scss" scoped>
|
||||
.top_option {
|
||||
width: 131px;
|
||||
height: 31px;
|
||||
|
|
@ -164,4 +215,4 @@ const modifySelected = (item: any) => {
|
|||
color: #edd351 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style> -->
|
||||
Loading…
Reference in New Issue
Block a user