更新首页模块
This commit is contained in:
du
parent
7291d33ddc
commit
ef97337b4d
9
src/api/homePage.ts
Normal file
9
src/api/homePage.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import request from "../utils/request";
|
||||
|
||||
export function test(data: any) {
|
||||
return request({
|
||||
url: "",
|
||||
method: "POST",
|
||||
data: data
|
||||
});
|
||||
}
|
||||
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 5.2 KiB |
BIN
src/assets/images/home-page/left/leftArrow.png
Normal file
BIN
src/assets/images/home-page/left/leftArrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 383 B |
BIN
src/assets/images/home-page/left/rightArrow.png
Normal file
BIN
src/assets/images/home-page/left/rightArrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 390 B |
Binary file not shown.
|
Before Width: | Height: | Size: 7.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.1 KiB |
|
|
@ -56,11 +56,12 @@
|
|||
|
||||
table th,
|
||||
table td {
|
||||
border-bottom: none !important;
|
||||
// border-bottom: none !important;
|
||||
}
|
||||
|
||||
td {
|
||||
border: none;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
// 滚动条的宽度
|
||||
|
|
@ -80,12 +81,12 @@
|
|||
}
|
||||
|
||||
.cell {
|
||||
// display: -webkit-box;
|
||||
// -webkit-line-clamp: 1;
|
||||
// overflow: hidden;
|
||||
// text-overflow: ellipsis;
|
||||
// -webkit-box-orient: vertical;
|
||||
// word-break: break-all;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -123,6 +123,6 @@ ul {
|
|||
// border-image: linear-gradient(180deg,
|
||||
// rgba(15, 37, 77, 0) 0%,
|
||||
// rgba(64, 98, 165, 1) 100%) 2 2 2 2;
|
||||
margin-bottom: 31px;
|
||||
margin-bottom: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@ $designWidth: 1920;
|
|||
$designHeight: 1080;
|
||||
|
||||
//侧边菜单宽度
|
||||
$sideWidth: 33%;
|
||||
$sideWidth: 31%;
|
||||
|
||||
@use "sass:math";
|
||||
|
||||
|
|
@ -103,4 +103,30 @@ $sideWidth: 33%;
|
|||
.conBox {
|
||||
background-color: rgba(0, 61, 123, 0.5);
|
||||
border-radius: 0px 0px 10px 10px;
|
||||
}
|
||||
|
||||
.module_top_title {
|
||||
cursor: pointer;
|
||||
width: 64px;
|
||||
height: 22px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
border-radius: 3px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.module_menu_selected {
|
||||
background-color: #486f6f;
|
||||
border: 1px solid #66e1df;
|
||||
color: #66e1df;
|
||||
}
|
||||
|
||||
.module_menu_notSelected {
|
||||
background-color: #294040;
|
||||
border: 1px solid #a6c2e2;
|
||||
color: #a7c5e8;
|
||||
}
|
||||
|
|
@ -6,7 +6,8 @@ axios.defaults.headers["content-type"] = "application/json;charset=utf-8";
|
|||
// 创建axios实例
|
||||
const service = axios.create({
|
||||
// 路由BaseUrl，防止跨域请求
|
||||
baseURL: import.meta.env.VITE_PUBLIC_PATH,
|
||||
// baseURL: import.meta.env.VITE_PUBLIC_PATH,
|
||||
baseURL: 'http://42.193.40.239:8017',
|
||||
// 超时时间
|
||||
timeout: 20000,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,12 +1,29 @@
|
|||
<!-- 晴雨台 -->
|
||||
<!-- 基本信息统计 -->
|
||||
<template>
|
||||
<div class="side-bg">
|
||||
<TitleC title="晴雨台" :swshow="false"></TitleC>
|
||||
<TitleC title="基本信息统计" :swshow="false"></TitleC>
|
||||
<div class="con_box conBox">
|
||||
<div>
|
||||
<div></div>
|
||||
<div class="chart-wrapper">
|
||||
<div class="container" ref="populationtenementRef"></div>
|
||||
<div>
|
||||
<div>6980</div>
|
||||
<div></div>
|
||||
<div>人口总数</div>
|
||||
</div>
|
||||
<img src="@/assets/images/home-page/left/inner-ring.png" alt="" />
|
||||
</div>
|
||||
<div class="con_option">
|
||||
<div
|
||||
class="con_option_term"
|
||||
v-for="(item, index) in populationList"
|
||||
:key="index"
|
||||
>
|
||||
<div :style="'background-color:' + item.color"></div>
|
||||
<div>{{ item.lable }}</div>
|
||||
<div></div>
|
||||
<div>{{ item.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -18,102 +35,84 @@ export default defineComponent({
|
|||
});
|
||||
</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();
|
||||
// });
|
||||
import * as echarts from "echarts";
|
||||
const populationtenementRef = ref();
|
||||
let populationList = ref([
|
||||
{ lable: "常驻人口", value: "379", color: "#4CC6C1" },
|
||||
{ lable: "党员", value: "022", color: "#05D48A" },
|
||||
{ lable: "村干部", value: "147", color: "#E6B900" },
|
||||
{ lable: "脱贫户", value: "354", color: "#DE8059" },
|
||||
{ lable: "新生儿", value: "379", color: "#D98200" },
|
||||
{ lable: "在校生", value: "379", color: "#BF43B2" },
|
||||
{ lable: "残疾人", value: "379", color: "#D43C33" },
|
||||
{ lable: "低保户", value: "379", color: "#6658E3" },
|
||||
{ lable: "五保户", value: "022", color: "#A1CDE6" },
|
||||
{ lable: "务工人员", value: "147", color: "#3DABCC" },
|
||||
]);
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
// legend: {
|
||||
// top: "5%",
|
||||
// left: "center",
|
||||
// },
|
||||
series: [
|
||||
{
|
||||
color: [
|
||||
// "#D33B33",
|
||||
// "transparent",
|
||||
],
|
||||
// name: "Access From",
|
||||
type: "pie",
|
||||
radius: ["75%", "85%"],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 5,
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: "center",
|
||||
},
|
||||
// emphasis: {
|
||||
// label: {
|
||||
// show: true,
|
||||
// fontSize: 40,
|
||||
// fontWeight: "bold",
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
// { value: 1048, name: "" },
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
const getData = () => {
|
||||
let state = false;
|
||||
for (let index = 0; index < populationList.value.length; index++) {
|
||||
let data = [
|
||||
{
|
||||
value: populationList.value[index].value,
|
||||
name: populationList.value[index].lable,
|
||||
},
|
||||
{
|
||||
value: "10",
|
||||
name: "",
|
||||
},
|
||||
];
|
||||
let color = [populationList.value[index].color, "transparent"];
|
||||
option.series[0].color.push(...color);
|
||||
option.series[0].data.push(...data);
|
||||
}
|
||||
const airTenementChart = echarts.init(populationtenementRef.value);
|
||||
airTenementChart.setOption(option);
|
||||
};
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -123,5 +122,94 @@ export default defineComponent({
|
|||
.con_box {
|
||||
height: 213px;
|
||||
margin-top: 5px;
|
||||
display: flex;
|
||||
}
|
||||
.chart-wrapper {
|
||||
margin-top: 10px;
|
||||
flex: 1;
|
||||
height: 180px;
|
||||
position: relative;
|
||||
.container {
|
||||
flex: 1;
|
||||
width: 170px;
|
||||
margin-top: -10px;
|
||||
height: 200px;
|
||||
}
|
||||
> div:nth-child(2) {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
top: 62px;
|
||||
left: 48px;
|
||||
> div:nth-child(1) {
|
||||
font-size: 20px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #d0deee;
|
||||
}
|
||||
> div:nth-child(2) {
|
||||
width: 70px;
|
||||
height: 2px;
|
||||
background-color: #63717b;
|
||||
}
|
||||
> div:nth-child(3) {
|
||||
font-size: 10px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #d0deee;
|
||||
}
|
||||
}
|
||||
> img:nth-of-type(1) {
|
||||
position: absolute;
|
||||
left: 29px;
|
||||
top: 35px;
|
||||
width: 112px;
|
||||
height: 112px;
|
||||
}
|
||||
> img:nth-of-type(2) {
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
top: 7px;
|
||||
width: 165px;
|
||||
height: 165px;
|
||||
}
|
||||
}
|
||||
.con_option {
|
||||
width: 400px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
padding: 10px 0px;
|
||||
}
|
||||
.con_option_term {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 27px;
|
||||
width: 45%;
|
||||
> div:nth-child(1) {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
> div:nth-child(2) {
|
||||
font-size: 14px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #a4a6ab;
|
||||
flex: 1;
|
||||
}
|
||||
> div:nth-child(3) {
|
||||
border-top: 1px #707070 dashed;
|
||||
width: 50px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
> div:nth-child(4) {
|
||||
font-size: 14px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #ffc97a;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
<template>
|
||||
<div class="side-bg">
|
||||
<div>
|
||||
<TitleC title="晴雨台" :swshow="false"></TitleC>
|
||||
<TitleC title="晴雨台"></TitleC>
|
||||
<div class="weather_data">
|
||||
<div>
|
||||
<TitleD width="100">
|
||||
|
|
@ -37,7 +37,21 @@
|
|||
<TitleD width="100">
|
||||
<div class="weather_data_title">未来7天气象数据</div>
|
||||
</TitleD>
|
||||
<div class="weather_data_right conBox"></div>
|
||||
<div class="weather_data_right conBox chart-wrapper">
|
||||
<div ref="tenementRef" class="container"></div>
|
||||
<div>
|
||||
<img
|
||||
src="../../../../assets/images/home-page/left/leftArrow.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
src="../../../../assets/images/home-page/left/rightArrow.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<TitleD width="100">
|
||||
|
|
@ -51,7 +65,20 @@
|
|||
align="center"
|
||||
width="120"
|
||||
/>
|
||||
<el-table-column prop="info" label="预警信息" align="center" />
|
||||
<el-table-column prop="info" label="预警信息" align="center">
|
||||
<template #default="scope">
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
:content="scope.row.info"
|
||||
placement="top-start"
|
||||
popper-class="weather_tip"
|
||||
>
|
||||
<span>{{ scope.row.info }}</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- show-overflow-tooltip -->
|
||||
<el-table-column
|
||||
prop="time"
|
||||
label="预警时间"
|
||||
|
|
@ -75,6 +102,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import * as echarts from "echarts";
|
||||
import { defineComponent, onMounted, ref, watchEffect } from "vue";
|
||||
export default defineComponent({
|
||||
name: "weather",
|
||||
|
|
@ -98,8 +126,114 @@ const tableData = [
|
|||
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 = () => {};
|
||||
|
||||
const tenementRef = ref();
|
||||
let option = {
|
||||
color: ["#66E1DF"],
|
||||
tooltip: {
|
||||
show: false,
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
// 坐标轴指示器，坐标轴触发有效
|
||||
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: "0%",
|
||||
right: "5%",
|
||||
bottom: "0%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false, // 不显示坐标轴刻度线
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
color: "#D0DEEE",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
splitLine: {
|
||||
// 网格线
|
||||
show: true,
|
||||
lineStyle: {
|
||||
//分割线
|
||||
color: "#99999955",
|
||||
width: 1,
|
||||
type: "dashed", //dotted：虚线 solid:实线
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: "{value} °C",
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbol: "none", // 不显示连接点
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
shadowColor: "#165DFF",
|
||||
shadowBlur: 20,
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#0F476B",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#002A56",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
data: [2, 4, 9, 12, 15, 48, 2],
|
||||
},
|
||||
],
|
||||
};
|
||||
const getData = () => {
|
||||
const airTenementChart = echarts.init(tenementRef.value);
|
||||
airTenementChart.setOption(option);
|
||||
};
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -168,7 +302,26 @@ const clickDetails = () => {};
|
|||
}
|
||||
.weather_data_right {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
> div:nth-child(2) {
|
||||
margin-top: -17px;
|
||||
margin-left: 28px;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
img {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
> div:nth-child(3) {
|
||||
margin-top: -23px;
|
||||
text-align: right;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
img {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.time {
|
||||
font-size: 12px;
|
||||
|
|
@ -176,4 +329,20 @@ const clickDetails = () => {};
|
|||
font-weight: 400;
|
||||
color: #159aff;
|
||||
}
|
||||
.chart-wrapper {
|
||||
height: 120px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.container {
|
||||
width: 86%;
|
||||
height: 160px;
|
||||
margin-top: -45px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.weather_tip {
|
||||
max-width: 200px !important;
|
||||
}
|
||||
</style>
|
||||
149
src/views/home-page/left-side/components/workSituation.vue
Normal file
149
src/views/home-page/left-side/components/workSituation.vue
Normal file
|
|
@ -0,0 +1,149 @@
|
|||
<!-- 工作开展情况 -->
|
||||
<template>
|
||||
<div class="side-bg">
|
||||
<TitleC title="工作开展情况"></TitleC>
|
||||
<TitleD width="100">
|
||||
<!-- <div class="work_title">气象预警信息</div> -->
|
||||
<div
|
||||
class="module_top_title"
|
||||
v-for="(item, index) in label"
|
||||
:key="index"
|
||||
@click="clickMenuOption(item.id)"
|
||||
:class="
|
||||
item.check == true
|
||||
? 'module_menu_selected'
|
||||
: 'module_menu_notSelected'
|
||||
"
|
||||
>
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</TitleD>
|
||||
<div class="work_con conBox">
|
||||
<div v-for="(item, index) in data" :key="index">
|
||||
<div>{{ item.index }}</div>
|
||||
<img
|
||||
src="../../../../assets/images/home-page/left/barometer.png"
|
||||
alt=""
|
||||
/>
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
:content="item.con"
|
||||
placement="top-start"
|
||||
popper-class="work_tip"
|
||||
>
|
||||
<div>{{ item.con }}</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, ref, watchEffect } from "vue";
|
||||
export default defineComponent({
|
||||
name: "WorkSituation",
|
||||
});
|
||||
</script>
|
||||
<script setup lang='ts'>
|
||||
const visible = ref(false);
|
||||
const label = ref([
|
||||
{ title: "党建统领", check: true, id: 0 },
|
||||
{ title: "平安法治", check: false, id: 1 },
|
||||
{ title: "经济生态", check: false, id: 2 },
|
||||
{ title: "公共服务", check: false, id: 3 },
|
||||
]);
|
||||
const data = [
|
||||
{
|
||||
index: 1,
|
||||
con: "每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况，每日每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况...",
|
||||
},
|
||||
{
|
||||
index: 2,
|
||||
con: "每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况...",
|
||||
},
|
||||
{
|
||||
index: 3,
|
||||
con: "每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况...",
|
||||
},
|
||||
{
|
||||
index: 4,
|
||||
con: "每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况...",
|
||||
},
|
||||
];
|
||||
const clickMenuOption = (id: any) => {
|
||||
label.value.forEach((item) => {
|
||||
item.check = false;
|
||||
});
|
||||
label.value[id].check = true;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.side-bg {
|
||||
// height: 45%;
|
||||
}
|
||||
.work_title {
|
||||
font-size: 16px;
|
||||
font-family: Source Han Sans SC, Source Han Sans SC;
|
||||
font-weight: 400;
|
||||
color: #ffe7cd;
|
||||
}
|
||||
.work_con {
|
||||
width: 100%;
|
||||
height: 244px;
|
||||
padding: 12px 8px;
|
||||
overflow-y: scroll;
|
||||
> div:not(:nth-child(1)) {
|
||||
// margin-top: ;
|
||||
}
|
||||
> div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 68px;
|
||||
padding: 10px 13px;
|
||||
> div:nth-of-type(1) {
|
||||
width: 24px;
|
||||
height: 16px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #ff7734;
|
||||
background-color: #ff7734 10%;
|
||||
line-height: 14px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #ff7734;
|
||||
}
|
||||
> img {
|
||||
width: 70px;
|
||||
height: 48px;
|
||||
}
|
||||
> div:nth-of-type(2) {
|
||||
width: 408px;
|
||||
height: 48px;
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #d0deee;
|
||||
//超出两行省略号
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
}
|
||||
.work_con::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.work_tip {
|
||||
max-width: 408px !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,110 +0,0 @@
|
|||
<!-- -->
|
||||
|
||||
|
||||
<template>
|
||||
<el-dialog
|
||||
class="dialog"
|
||||
width="40%"
|
||||
v-model="dialogVisible"
|
||||
:title="'发布预警'"
|
||||
center
|
||||
close-on-click-modal="false"
|
||||
:show-close="false"
|
||||
@close="emit('close')"
|
||||
>
|
||||
<div class="dialog_body">
|
||||
<el-form label-width="150px" :model="form" class="center-form">
|
||||
<el-form-item label="预警内容" style="width: 94%">
|
||||
<el-input v-model="form.name" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="人员" style="width: 94%">
|
||||
<el-select v-model="form.region" placeholder="请选择人员">
|
||||
<el-option label="某某人1" value="shanghai" />
|
||||
<el-option label="某某人2" value="beijing" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="close">取消</el-button>
|
||||
<el-button type="primary" @click="close"> 确定 </el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { reactive, ref, watch } from "vue";
|
||||
const props = defineProps({
|
||||
visible: Boolean,
|
||||
});
|
||||
const dialogVisible = ref(false);
|
||||
const emit = defineEmits(["close"]);
|
||||
const close = () => {
|
||||
emit("close");
|
||||
};
|
||||
|
||||
const dialogTableVisible = ref(false);
|
||||
const dialogFormVisible = ref(false);
|
||||
const formLabelWidth = "140px";
|
||||
|
||||
const form = reactive({
|
||||
con: "",
|
||||
});
|
||||
|
||||
const gridData = [
|
||||
{
|
||||
date: "2016-05-02",
|
||||
name: "John Smith",
|
||||
address: "No.1518, Jinshajiang Road, Putuo District",
|
||||
},
|
||||
{
|
||||
date: "2016-05-04",
|
||||
name: "John Smith",
|
||||
address: "No.1518, Jinshajiang Road, Putuo District",
|
||||
},
|
||||
{
|
||||
date: "2016-05-01",
|
||||
name: "John Smith",
|
||||
address: "No.1518, Jinshajiang Road, Putuo District",
|
||||
},
|
||||
{
|
||||
date: "2016-05-03",
|
||||
name: "John Smith",
|
||||
address: "No.1518, Jinshajiang Road, Putuo District",
|
||||
},
|
||||
];
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(val) => {
|
||||
dialogVisible.value = val;
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.el-button--text {
|
||||
margin-right: 15px;
|
||||
}
|
||||
log-footer button:first-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.dialog-footer button {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.dia log {
|
||||
z-index: 9;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.dialog_body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 50px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,13 +4,15 @@
|
|||
<Weather></Weather>
|
||||
<!-- 基本信息统计 -->
|
||||
<BasicInformation></BasicInformation>
|
||||
<!-- 工作开展情况 -->
|
||||
<WorkSituation></WorkSituation>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, ref, watchEffect } from "vue";
|
||||
export default defineComponent({
|
||||
components: { Weather, BasicInformation },
|
||||
components: { Weather, BasicInformation, WorkSituation },
|
||||
name: "LeftSide",
|
||||
});
|
||||
</script>
|
||||
|
|
@ -18,6 +20,7 @@ export default defineComponent({
|
|||
<script lang='ts' setup>
|
||||
import BasicInformation from "./components/basicInformation.vue";
|
||||
import Weather from "./components/weather.vue";
|
||||
import WorkSituation from "./components/workSituation.vue";
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
188
src/views/home-page/right-side/components/command.vue
Normal file
188
src/views/home-page/right-side/components/command.vue
Normal file
|
|
@ -0,0 +1,188 @@
|
|||
<!-- 应急指挥 -->
|
||||
<template>
|
||||
<div class="side-bg">
|
||||
<TitleC title="应急指挥"></TitleC>
|
||||
<TitleD width="100">
|
||||
<div
|
||||
class="module_top_title"
|
||||
v-for="(item, index) in label"
|
||||
:key="index"
|
||||
@click="clickMenuOption(item.id)"
|
||||
:class="
|
||||
item.check == true
|
||||
? 'module_menu_selected'
|
||||
: 'module_menu_notSelected'
|
||||
"
|
||||
>
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</TitleD>
|
||||
<div class="command_data conBox">
|
||||
<div class="command_search">
|
||||
<div>
|
||||
<el-input
|
||||
size="small"
|
||||
v-model="commandSearch"
|
||||
placeholder="请输入..."
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
<span>搜索</span>
|
||||
</div>
|
||||
<el-table :data="tableData" height="150" style="width: 100%">
|
||||
<el-table-column type="index" label="序号" align="center" width="60" />
|
||||
<el-table-column
|
||||
prop="address"
|
||||
label="所属镇/村(社区)"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="numberOfPeople"
|
||||
label="应急队伍人数"
|
||||
align="center"
|
||||
width="110"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="contacts"
|
||||
label="联系人"
|
||||
align="center"
|
||||
width="70"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="phone"
|
||||
label="值班电话"
|
||||
align="center"
|
||||
width="110"
|
||||
/>
|
||||
<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>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, ref, watchEffect } from "vue";
|
||||
export default defineComponent({
|
||||
name: "WorkSituation",
|
||||
});
|
||||
</script>
|
||||
<script setup lang='ts'>
|
||||
const label = ref([
|
||||
{ title: "应急队伍", check: true, id: 0 },
|
||||
{ title: "应急物资", check: false, id: 1 },
|
||||
{ title: "应急体系", check: false, id: 2 },
|
||||
{ title: "应急发布", check: false, id: 3 },
|
||||
{ title: "应急事件", check: false, id: 4 },
|
||||
]);
|
||||
const clickMenuOption = (id: any) => {
|
||||
label.value.forEach((item) => {
|
||||
item.check = false;
|
||||
});
|
||||
label.value[id].check = true;
|
||||
};
|
||||
const tableData = [
|
||||
{
|
||||
address: "某某某某某某某名称",
|
||||
numberOfPeople: 20,
|
||||
contacts: "某某某",
|
||||
phone: "18094760684",
|
||||
},
|
||||
{
|
||||
address: "某某某某某某某名称",
|
||||
numberOfPeople: 20,
|
||||
contacts: "某某某",
|
||||
phone: "18094760684",
|
||||
},
|
||||
{
|
||||
address: "某某某某某某某名称",
|
||||
numberOfPeople: 20,
|
||||
contacts: "某某某",
|
||||
phone: "18094760684",
|
||||
},
|
||||
{
|
||||
address: "某某某某某某某名称",
|
||||
numberOfPeople: 20,
|
||||
contacts: "某某某",
|
||||
phone: "18094760684",
|
||||
},
|
||||
{
|
||||
address: "某某某某某某某名称",
|
||||
numberOfPeople: 20,
|
||||
contacts: "某某某",
|
||||
phone: "18094760684",
|
||||
},
|
||||
{
|
||||
address: "某某某某某某某名称",
|
||||
numberOfPeople: 20,
|
||||
contacts: "某某某",
|
||||
phone: "18094760684",
|
||||
},
|
||||
{
|
||||
address: "某某某某某某某名称",
|
||||
numberOfPeople: 20,
|
||||
contacts: "某某某",
|
||||
phone: "18094760684",
|
||||
},
|
||||
];
|
||||
const commandSearch = ref("");
|
||||
const clickDetails = () => {};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.time {
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans SC, Source Han Sans SC;
|
||||
font-weight: 400;
|
||||
color: #159aff;
|
||||
}
|
||||
// ::v-deep .el-table .cell {
|
||||
// -webkit-line-clamp: 2;
|
||||
// }
|
||||
.command_data {
|
||||
height: 195px;
|
||||
background-color: rgba(0, 61, 123, 0) !important;
|
||||
}
|
||||
.command_search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: rgba(0, 61, 123, 0.353) !important;
|
||||
padding: 10px 0px;
|
||||
> div {
|
||||
width: 258px;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
margin-left: 25px;
|
||||
}
|
||||
> span {
|
||||
width: 64px;
|
||||
height: 25px;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 3px 3px 3px 3px;
|
||||
opacity: 1;
|
||||
border: 1px solid #66e1df;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #66e1df;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
line-height: 23px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
::v-deep .el-input--small .el-input__wrapper {
|
||||
box-shadow: none;
|
||||
border: 1px solid rgba(108, 128, 151, 1) !important;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.command_tip {
|
||||
max-width: 200px !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,190 +0,0 @@
|
|||
<!-- 应急物资 -->
|
||||
<template>
|
||||
<div class="side-bg">
|
||||
<div><TitleC title="应急物资"></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="date" label="物资类型" align="center" />
|
||||
<el-table-column prop="house" label="存放仓库" align="center" />
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="负责人"
|
||||
align="center"
|
||||
width="80"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="address"
|
||||
label="查看"
|
||||
align="center"
|
||||
width="80"
|
||||
>
|
||||
<template #default="scope">
|
||||
<span @click="visible = true">
|
||||
<span class="pointer details">详情</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
background
|
||||
small
|
||||
v-model:currentPage="currentPage"
|
||||
v-model:page-size="pageSize"
|
||||
layout="total, prev, pager, next"
|
||||
:total="total"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Detail :visible="visible" @click="visible = false" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, ref, watchEffect } from "vue";
|
||||
export default defineComponent({
|
||||
name: "goods-materials",
|
||||
});
|
||||
</script>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import Detail from "../dialog/material.vue";
|
||||
const visible = ref(false);
|
||||
|
||||
const tableData = [
|
||||
{
|
||||
date: "应急物资",
|
||||
name: "某某人",
|
||||
house: "xxx仓库",
|
||||
address: "999999999999999999",
|
||||
},
|
||||
{
|
||||
date: "应急物资",
|
||||
name: "某某人",
|
||||
house: "xxx仓库",
|
||||
address: "11111111111",
|
||||
},
|
||||
{
|
||||
date: "应急物资",
|
||||
name: "某某人",
|
||||
house: "xxx仓库",
|
||||
address: "11111111111",
|
||||
},
|
||||
{
|
||||
date: "应急物资",
|
||||
name: "某某人",
|
||||
house: "xxx仓库",
|
||||
address: "11111111111",
|
||||
},
|
||||
{
|
||||
date: "应急物资",
|
||||
name: "某某人",
|
||||
house: "xxx仓库",
|
||||
address: "11111111111",
|
||||
},
|
||||
];
|
||||
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(5);
|
||||
const total = ref(10);
|
||||
const search = ref("");
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.side-bg {
|
||||
height: 36%;
|
||||
}
|
||||
.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>
|
||||
134
src/views/home-page/right-side/components/portrait.vue
Normal file
134
src/views/home-page/right-side/components/portrait.vue
Normal file
|
|
@ -0,0 +1,134 @@
|
|||
<!-- 工作考核 -->
|
||||
<template>
|
||||
<div class="side-bg">
|
||||
<TitleC title="工作考核"></TitleC>
|
||||
<TitleD width="100">
|
||||
<div
|
||||
class="module_top_title"
|
||||
v-for="(item, index) in label"
|
||||
:key="index"
|
||||
@click="clickMenuOption(item.id)"
|
||||
:class="
|
||||
item.check == true
|
||||
? 'module_menu_selected'
|
||||
: 'module_menu_notSelected'
|
||||
"
|
||||
>
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</TitleD>
|
||||
<div class="portrait_con conBox">
|
||||
<div
|
||||
class="portrait_con_options"
|
||||
v-for="(item, index) in portraitList"
|
||||
:key="index"
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
<span>{{ index + 1 }}</span>
|
||||
<span>{{ item.label }}</span>
|
||||
</div>
|
||||
<div>{{ item.value }}/50</div>
|
||||
</div>
|
||||
<div><el-slider disabled v-model="item.value" max="50" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, ref, watchEffect } from "vue";
|
||||
export default defineComponent({
|
||||
name: "WorkSituation",
|
||||
});
|
||||
</script>
|
||||
<script setup lang='ts'>
|
||||
const label = ref([
|
||||
{ title: "各干部", check: true, id: 0 },
|
||||
{ title: "村(社区)", check: false, id: 1 },
|
||||
]);
|
||||
const clickMenuOption = (id: any) => {
|
||||
label.value.forEach((item) => {
|
||||
item.check = false;
|
||||
});
|
||||
label.value[id].check = true;
|
||||
};
|
||||
const portraitList = ref([
|
||||
{ label: "某某人-职位", value: 48 },
|
||||
{ label: "某某人-职位", value: 40 },
|
||||
{ label: "某某人-职位", value: 38 },
|
||||
{ label: "某某人-职位", value: 18 },
|
||||
{ label: "某某人-职位", value: 48 },
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.portrait_con {
|
||||
width: 100%;
|
||||
height: 214px;
|
||||
padding: 10px 21px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.portrait_con::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.portrait_con_options {
|
||||
margin-top: 2px;
|
||||
> div:nth-child(1) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
> div:nth-child(1) {
|
||||
> span:nth-child(1) {
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 16px;
|
||||
border: 1px solid #ff7734;
|
||||
line-height: 14px;
|
||||
text-align: center;
|
||||
background-color: rgba(255, 119, 52, 0.3);
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #ff7734;
|
||||
}
|
||||
> span:nth-child(2) {
|
||||
font-size: 14px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
margin-left: 9px;
|
||||
}
|
||||
}
|
||||
> div:nth-child(2) {
|
||||
font-size: 14px;
|
||||
font-family: Furore, Furore;
|
||||
font-weight: normal;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
> div:nth-child(2) {
|
||||
margin-top: -5px;
|
||||
}
|
||||
}
|
||||
::v-deep .el-slider__bar {
|
||||
background: linear-gradient(270deg, #00c7e6 0%, #0088ff 100%);
|
||||
height: 6px;
|
||||
margin: 2px 0px;
|
||||
border-radius: 0%;
|
||||
}
|
||||
::v-deep .el-slider__button {
|
||||
margin-top: 4px;
|
||||
border-radius: 3px;
|
||||
width: 2px;
|
||||
height: 10px;
|
||||
border: 0px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
::v-deep .el-slider__runway {
|
||||
border-radius: 0%;
|
||||
height: 10px;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,226 +0,0 @@
|
|||
<!-- 应急队伍 -->
|
||||
<template>
|
||||
<div class="side-bg">
|
||||
<div><TitleC title="应急队伍"></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="name"
|
||||
label="负责人"
|
||||
align="center"
|
||||
width="80"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="num"
|
||||
label="队伍人数"
|
||||
align="center"
|
||||
width="130"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="address"
|
||||
label="查看"
|
||||
align="center"
|
||||
width="80"
|
||||
>
|
||||
<template #default="scope">
|
||||
<span @click="visible = true">
|
||||
<span class="pointer details">详情</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
background
|
||||
small
|
||||
v-model:currentPage="currentPage"
|
||||
v-model:page-size="pageSize"
|
||||
layout="total, prev, pager, next"
|
||||
:total="total"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Detail :visible="visible" @click="visible = false" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, ref, watchEffect } from "vue";
|
||||
export default defineComponent({
|
||||
name: "ranks",
|
||||
});
|
||||
</script>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import Detail from "../dialog/team.vue";
|
||||
const visible = ref(false);
|
||||
|
||||
const tableData = [
|
||||
{
|
||||
date: "应急队伍",
|
||||
name: "某某人",
|
||||
num: 10,
|
||||
address: "99999999999",
|
||||
},
|
||||
{
|
||||
date: "应急队伍",
|
||||
name: "某某人",
|
||||
num: 10,
|
||||
address: "11111111111",
|
||||
},
|
||||
{
|
||||
date: "应急队伍",
|
||||
name: "某某人",
|
||||
num: 10,
|
||||
address: "11111111111",
|
||||
},
|
||||
{
|
||||
date: "应急队伍",
|
||||
name: "某某人",
|
||||
num: 10,
|
||||
address: "11111111111",
|
||||
},
|
||||
{
|
||||
date: "应急队伍",
|
||||
name: "某某人",
|
||||
num: 10,
|
||||
address: "11111111111",
|
||||
},
|
||||
];
|
||||
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(5);
|
||||
const total = ref(10);
|
||||
const search = ref("");
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.side-bg {
|
||||
height: 36%;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.inputDeep {
|
||||
:deep(.el-input__wrapper) {
|
||||
box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color))
|
||||
inset;
|
||||
cursor: default;
|
||||
border: 1px solid rgba(0, 0, 255, 0) !important;
|
||||
|
||||
.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,213 +0,0 @@
|
|||
<!-- 应急发布 -->
|
||||
<template>
|
||||
<div class="side-bg">
|
||||
<div><TitleC title="应急发布"></TitleC></div>
|
||||
|
||||
<div class="release_body">
|
||||
<div class="release_table">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
max-height="32vh"
|
||||
style="width: 100%"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
<el-table-column prop="name" label="事件名" align="center" />
|
||||
<el-table-column prop="status" label="状态" align="center" />
|
||||
<el-table-column prop="address" label="发生地" align="center" />
|
||||
<el-table-column
|
||||
prop="address"
|
||||
label="操作"
|
||||
align="center"
|
||||
width="100"
|
||||
>
|
||||
<template #default="scope">
|
||||
<span @click="visible = true">
|
||||
<span class="pointer details">应急发布</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
background
|
||||
small
|
||||
v-model:currentPage="currentPage"
|
||||
v-model:page-size="pageSize"
|
||||
layout="total, prev, pager, next"
|
||||
:total="total"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Detail :visible="visible" @close="visible = false"></Detail>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, ref, watchEffect } from "vue";
|
||||
export default defineComponent({
|
||||
name: "release",
|
||||
});
|
||||
</script>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import Detail from "../dialog/events.vue";
|
||||
const visible = ref(false);
|
||||
|
||||
const tableData = [
|
||||
{
|
||||
name: "事件",
|
||||
status: "已处理",
|
||||
address: "99999999999",
|
||||
},
|
||||
{
|
||||
name: "事件",
|
||||
status: "已处理",
|
||||
address: "11111111111",
|
||||
},
|
||||
{
|
||||
name: "事件",
|
||||
status: "已处理",
|
||||
address: "11111111111",
|
||||
},
|
||||
{
|
||||
name: "事件",
|
||||
status: "已处理",
|
||||
address: "11111111111",
|
||||
},
|
||||
{
|
||||
name: "事件",
|
||||
status: "已处理",
|
||||
address: "11111111111",
|
||||
},
|
||||
];
|
||||
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(5);
|
||||
const total = ref(10);
|
||||
const search = ref("");
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.side-bg {
|
||||
height: 36%;
|
||||
position: relative;
|
||||
}
|
||||
.release_body {
|
||||
padding: 10px;
|
||||
}
|
||||
.release_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;
|
||||
}
|
||||
}
|
||||
.release_body_top_icon_left {
|
||||
background-image: url("@/assets/images/emergency-map/left/cm_left_bg_1.png");
|
||||
}
|
||||
.release_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;
|
||||
}
|
||||
.release_table {
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.inputDeep {
|
||||
:deep(.el-input__wrapper) {
|
||||
box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color))
|
||||
inset;
|
||||
cursor: default;
|
||||
border: 1px solid rgba(0, 0, 255, 0) !important;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.release_buttom {
|
||||
cursor: pointer;
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
border: 1px solid red;
|
||||
width: 60px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 30px;
|
||||
}
|
||||
</style>
|
||||
121
src/views/home-page/right-side/components/riskPool.vue
Normal file
121
src/views/home-page/right-side/components/riskPool.vue
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
<!-- 风险池 -->
|
||||
<template>
|
||||
<div class="side-bg">
|
||||
<TitleC title="风险池"></TitleC>
|
||||
<TitleD width="100">
|
||||
<div
|
||||
class="module_top_title"
|
||||
v-for="(item, index) in label"
|
||||
:key="index"
|
||||
@click="clickMenuOption(item.id)"
|
||||
:class="
|
||||
item.check == true
|
||||
? 'module_menu_selected'
|
||||
: 'module_menu_notSelected'
|
||||
"
|
||||
>
|
||||
{{ item.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="80" />
|
||||
<el-table-column prop="info" label="预警信息" align="center">
|
||||
<template #default="scope">
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
:content="scope.row.info"
|
||||
placement="top-start"
|
||||
popper-class="riskPool_tip"
|
||||
>
|
||||
<span>{{ scope.row.info }}</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<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
|
||||
prop="recipient"
|
||||
label="接收人"
|
||||
align="center"
|
||||
width="70"
|
||||
>
|
||||
<template #default="scope">
|
||||
<span class="time">{{ scope.row.recipient }}</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>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, ref, watchEffect } from "vue";
|
||||
export default defineComponent({
|
||||
name: "WorkSituation",
|
||||
});
|
||||
</script>
|
||||
<script setup lang='ts'>
|
||||
const label = ref([
|
||||
{ title: "防火", check: true, id: 0 },
|
||||
{ title: "防汛", check: false, id: 1 },
|
||||
{ title: "治安", check: false, id: 2 },
|
||||
]);
|
||||
const clickMenuOption = (id: any) => {
|
||||
label.value.forEach((item) => {
|
||||
item.check = false;
|
||||
});
|
||||
label.value[id].check = true;
|
||||
};
|
||||
const tableData = [
|
||||
{
|
||||
type: "防火",
|
||||
info: "xxxx气象台发布暴雨黄色预警信号：xx区xx街道、xx街道、xx镇未来连续三天降雨量将达到150ml以上，请注意防范。",
|
||||
time: "2024/1/22 12:20:13",
|
||||
recipient: "某某某",
|
||||
},
|
||||
{
|
||||
type: "防火",
|
||||
info: "xxxx气象台发布暴雨黄色预警信号：xx区xx街道、xx街道、xx镇未来连续三天降雨量将达到150ml以上，请注意防范。",
|
||||
time: "2024/1/22 12:20:13",
|
||||
recipient: "某某某",
|
||||
},
|
||||
{
|
||||
type: "防火",
|
||||
info: "xxxx气象台发布暴雨黄色预警信号：xx区xx街道、xx街道、xx镇未来连续三天降雨量将达到150ml以上，请注意防范。",
|
||||
time: "2024/1/22 12:20:13",
|
||||
recipient: "某某某",
|
||||
},
|
||||
{
|
||||
type: "防火",
|
||||
info: "xxxx气象台发布暴雨黄色预警信号：xx区xx街道、xx街道、xx镇未来连续三天降雨量将达到150ml以上，请注意防范。",
|
||||
time: "2024/1/22 12:20:13",
|
||||
recipient: "某某某",
|
||||
},
|
||||
];
|
||||
const clickDetails = () => {};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.time {
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans SC, Source Han Sans SC;
|
||||
font-weight: 400;
|
||||
color: #159aff;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.riskPool_tip {
|
||||
max-width: 200px !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,179 +0,0 @@
|
|||
<!-- 应急体系 -->
|
||||
<template>
|
||||
<div class="side-bg">
|
||||
<div><TitleC title="应急体系"></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="address"
|
||||
label="查看"
|
||||
align="center"
|
||||
width="80"
|
||||
>
|
||||
<template #default="scope">
|
||||
<span @click="toDetail">
|
||||
<span class="pointer details">详情</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</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: "system",
|
||||
});
|
||||
</script>
|
||||
|
||||
<script lang='ts' setup>
|
||||
const tableData = [
|
||||
{
|
||||
date: "预案名",
|
||||
name: "某某人",
|
||||
address: "99999999999",
|
||||
},
|
||||
{
|
||||
date: "预案名",
|
||||
name: "某某人",
|
||||
address: "11111111111",
|
||||
},
|
||||
{
|
||||
date: "预案名",
|
||||
name: "某某人",
|
||||
address: "11111111111",
|
||||
},
|
||||
{
|
||||
date: "预案名",
|
||||
name: "某某人",
|
||||
address: "11111111111",
|
||||
},
|
||||
{
|
||||
date: "预案名",
|
||||
name: "某某人",
|
||||
address: "11111111111",
|
||||
},
|
||||
];
|
||||
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(5);
|
||||
const total = ref(10);
|
||||
const search = ref("");
|
||||
|
||||
const toDetail = () => {
|
||||
window.open(
|
||||
"http://42.193.40.239:8888/resource/hy/%E6%B6%88%E9%98%B2%E5%BA%94%E6%80%A5%E9%A2%84%E6%A1%88.pdf"
|
||||
);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.side-bg {
|
||||
height: 36%;
|
||||
}
|
||||
.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,118 +0,0 @@
|
|||
<!-- -->
|
||||
<template>
|
||||
<el-dialog
|
||||
class="dialog"
|
||||
width="40%"
|
||||
v-model="dialogVisible"
|
||||
title="应急发布"
|
||||
center
|
||||
:show-close="false"
|
||||
@close="emit('close')"
|
||||
>
|
||||
<div class="dialog_body">
|
||||
<el-form label-width="150px" :model="form" class="center-form">
|
||||
<el-form-item label="事件内容" style="width: 94%">
|
||||
<el-input v-model="form.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="发生地点" style="width: 94%">
|
||||
<el-input v-model="form.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="责任人" style="width: 94%">
|
||||
<el-input v-model="form.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="解决建议" style="width: 94%">
|
||||
<el-input v-model="form.name" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="close">取消</el-button>
|
||||
<el-button type="primary" @click="close"> 确定 </el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { reactive, ref, watch } from "vue";
|
||||
const props = defineProps({
|
||||
visible: Boolean,
|
||||
});
|
||||
const dialogVisible = ref(false);
|
||||
const emit = defineEmits(["close"]);
|
||||
const close = () => {
|
||||
emit("close");
|
||||
};
|
||||
|
||||
const dialogTableVisible = ref(false);
|
||||
const dialogFormVisible = ref(false);
|
||||
const formLabelWidth = "140px";
|
||||
|
||||
const form = reactive({
|
||||
con: "",
|
||||
});
|
||||
|
||||
const gridData = [
|
||||
{
|
||||
date: "2016-05-02",
|
||||
name: "John Smith",
|
||||
address: "No.1518, Jinshajiang Road, Putuo District",
|
||||
},
|
||||
{
|
||||
date: "2016-05-04",
|
||||
name: "John Smith",
|
||||
address: "No.1518, Jinshajiang Road, Putuo District",
|
||||
},
|
||||
{
|
||||
date: "2016-05-01",
|
||||
name: "John Smith",
|
||||
address: "No.1518, Jinshajiang Road, Putuo District",
|
||||
},
|
||||
{
|
||||
date: "2016-05-03",
|
||||
name: "John Smith",
|
||||
address: "No.1518, Jinshajiang Road, Putuo District",
|
||||
},
|
||||
];
|
||||
|
||||
const tableData = [{ name: "张三" }];
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(val) => {
|
||||
dialogVisible.value = val;
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.title-t {
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.el-button--text {
|
||||
margin-right: 15px;
|
||||
}
|
||||
log-footer button:first-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.dialog-footer button {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.dia log {
|
||||
z-index: 9;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.dialog_body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 50px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,124 +0,0 @@
|
|||
<!-- -->
|
||||
<template>
|
||||
<el-dialog
|
||||
class="dialog"
|
||||
width="40%"
|
||||
v-model="dialogVisible"
|
||||
:title="'物资详情'"
|
||||
center
|
||||
:show-close="false"
|
||||
@close="emit('close')"
|
||||
>
|
||||
<div class="dialog_body">
|
||||
<el-form label-width="150px" :model="form" class="center-form">
|
||||
<el-form-item label="物资名称">
|
||||
<el-input v-model="form.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="存放仓库">
|
||||
<el-input v-model="form.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="物资类型">
|
||||
<el-input v-model="form.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="负责人">
|
||||
<el-input v-model="form.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话">
|
||||
<el-input v-model="form.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="详细地址">
|
||||
<el-input v-model="form.name" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="close">取消</el-button>
|
||||
<el-button type="primary" @click="close"> 确定 </el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { reactive, ref, watch } from "vue";
|
||||
const props = defineProps({
|
||||
visible: Boolean,
|
||||
});
|
||||
const dialogVisible = ref(false);
|
||||
const emit = defineEmits(["close"]);
|
||||
const close = () => {
|
||||
emit("close");
|
||||
};
|
||||
|
||||
const dialogTableVisible = ref(false);
|
||||
const dialogFormVisible = ref(false);
|
||||
const formLabelWidth = "140px";
|
||||
|
||||
const form = reactive({
|
||||
con: "",
|
||||
});
|
||||
|
||||
const gridData = [
|
||||
{
|
||||
date: "2016-05-02",
|
||||
name: "John Smith",
|
||||
address: "No.1518, Jinshajiang Road, Putuo District",
|
||||
},
|
||||
{
|
||||
date: "2016-05-04",
|
||||
name: "John Smith",
|
||||
address: "No.1518, Jinshajiang Road, Putuo District",
|
||||
},
|
||||
{
|
||||
date: "2016-05-01",
|
||||
name: "John Smith",
|
||||
address: "No.1518, Jinshajiang Road, Putuo District",
|
||||
},
|
||||
{
|
||||
date: "2016-05-03",
|
||||
name: "John Smith",
|
||||
address: "No.1518, Jinshajiang Road, Putuo District",
|
||||
},
|
||||
];
|
||||
|
||||
const tableData = [{ name: "张三" }];
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(val) => {
|
||||
dialogVisible.value = val;
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.title-t {
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.el-button--text {
|
||||
margin-right: 15px;
|
||||
}
|
||||
log-footer button:first-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.dialog-footer button {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.dia log {
|
||||
z-index: 9;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.dialog_body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 50px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,146 +0,0 @@
|
|||
<!-- -->
|
||||
<template>
|
||||
<el-dialog
|
||||
class="dialog"
|
||||
width="40%"
|
||||
v-model="dialogVisible"
|
||||
:title="'队伍详情'"
|
||||
center
|
||||
:show-close="false"
|
||||
@close="emit('close')"
|
||||
>
|
||||
<div class="dialog_body">
|
||||
<el-form label-width="150px" :model="form" class="center-form">
|
||||
<el-form-item label="队伍名称">
|
||||
<el-input v-model="form.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="所属地区">
|
||||
<el-input v-model="form.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="人数">
|
||||
<el-input v-model="form.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="负责人">
|
||||
<el-input v-model="form.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话">
|
||||
<el-input v-model="form.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话">
|
||||
<el-input v-model="form.name" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<span class="title-t">队伍成员</span>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
max-height="32vh"
|
||||
style="width: 100%; margin: 10px 0"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
<el-table-column prop="name" label="姓名" align="center" />
|
||||
<el-table-column prop="sex" label="性别" align="center" />
|
||||
<el-table-column prop="mz" label="民族" align="center" width="80" />
|
||||
<el-table-column prop="age" label="年龄" align="center" />
|
||||
<el-table-column prop="mm" 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"
|
||||
/>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="close">取消</el-button>
|
||||
<el-button type="primary" @click="close"> 确定 </el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { reactive, ref, watch } from "vue";
|
||||
const props = defineProps({
|
||||
visible: Boolean,
|
||||
});
|
||||
const dialogVisible = ref(false);
|
||||
const emit = defineEmits(["close"]);
|
||||
const close = () => {
|
||||
emit("close");
|
||||
};
|
||||
|
||||
const dialogTableVisible = ref(false);
|
||||
const dialogFormVisible = ref(false);
|
||||
const formLabelWidth = "140px";
|
||||
|
||||
const form = reactive({
|
||||
con: "",
|
||||
});
|
||||
|
||||
const gridData = [
|
||||
{
|
||||
date: "2016-05-02",
|
||||
name: "John Smith",
|
||||
address: "No.1518, Jinshajiang Road, Putuo District",
|
||||
},
|
||||
{
|
||||
date: "2016-05-04",
|
||||
name: "John Smith",
|
||||
address: "No.1518, Jinshajiang Road, Putuo District",
|
||||
},
|
||||
{
|
||||
date: "2016-05-01",
|
||||
name: "John Smith",
|
||||
address: "No.1518, Jinshajiang Road, Putuo District",
|
||||
},
|
||||
{
|
||||
date: "2016-05-03",
|
||||
name: "John Smith",
|
||||
address: "No.1518, Jinshajiang Road, Putuo District",
|
||||
},
|
||||
];
|
||||
|
||||
const tableData = [{ name: "张三" }];
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(val) => {
|
||||
dialogVisible.value = val;
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.title-t {
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.el-button--text {
|
||||
margin-right: 15px;
|
||||
}
|
||||
log-footer button:first-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.dialog-footer button {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.dia log {
|
||||
z-index: 9;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.dialog_body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 50px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,26 +1,23 @@
|
|||
<template>
|
||||
<div class="right-side">
|
||||
<!-- 应急队伍 -->
|
||||
<Ranks></Ranks>
|
||||
<!-- 应急物资 -->
|
||||
<GoodsMaterials></GoodsMaterials>
|
||||
<!-- 应急体系 -->
|
||||
<System></System>
|
||||
<!-- 应急发布 -->
|
||||
<Release></Release>
|
||||
<!-- 工作考核 -->
|
||||
<Portrait></Portrait>
|
||||
<!-- 风险池 -->
|
||||
<RiskPool></RiskPool>
|
||||
<!-- 应急指挥 -->
|
||||
<Command></Command>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, ref, watchEffect } from "vue";
|
||||
export default defineComponent({
|
||||
components: { Ranks, GoodsMaterials, System, Release },
|
||||
components: { Portrait, RiskPool, Command },
|
||||
name: "RightSide",
|
||||
});
|
||||
import Ranks from "./components/ranks.vue";
|
||||
import GoodsMaterials from "./components/goods-materials.vue";
|
||||
import System from "./components/system.vue";
|
||||
import Release from "./components/release.vue";
|
||||
import Portrait from "./components/portrait.vue";
|
||||
import RiskPool from "./components/riskPool.vue";
|
||||
import Command from "./components/command.vue";
|
||||
</script>
|
||||
|
||||
<script lang='ts' setup>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<component :is="rightComponent" />
|
||||
</transition>
|
||||
<!-- 底部菜单 -->
|
||||
<BottomMenu></BottomMenu>
|
||||
<!-- <BottomMenu></BottomMenu> -->
|
||||
<!-- 顶部菜单 -->
|
||||
<transition name="fade" mode="out-in">
|
||||
<component :is="topComponent" />
|
||||
|
|
@ -30,7 +30,7 @@ import DataLeftSide from "../data-statistics/left-side/index.vue";
|
|||
import HomeRightSide from "../home-page/right-side/index.vue";
|
||||
import HomeLeftSide from "../home-page/left-side/index.vue";
|
||||
// 底部菜单
|
||||
import BottomMenu from "../bottom-menu/index.vue";
|
||||
// import BottomMenu from "../bottom-menu/index.vue";
|
||||
// 顶部菜单
|
||||
import TopMenu from "../top-menu/index.vue";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,39 +1,59 @@
|
|||
<template>
|
||||
<div class="top-menu">
|
||||
<!-- <div class="item" v-for="(item, index) in menu" :key="index">
|
||||
<div class="item-ext" v-if="item.ext">
|
||||
<div class="item-in">
|
||||
<span class="lab">{{ item.name }}</span>
|
||||
<span class="val">{{ item.val }}</span>
|
||||
</div>
|
||||
<div class="item-in">
|
||||
<span class="lab">{{ item.ext.name }}</span>
|
||||
<span class="legend"></span>
|
||||
</div>
|
||||
<div class="time">
|
||||
<div>{{ datetime }}</div>
|
||||
<div>
|
||||
<span>{{ specificDate }}</span>
|
||||
<span>{{ nowWeek }}</span>
|
||||
</div>
|
||||
<div class="item-normal" v-else>
|
||||
<span class="val">{{ item.val }}</span>
|
||||
<span class="lab">{{ item.name }}</span>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="weather">
|
||||
<img src="@/assets/images/home-page/left/lightRain.png" alt="" />
|
||||
<span>雨 15℃</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { onMounted, ref } from "vue";
|
||||
|
||||
const menu = ref([
|
||||
{
|
||||
name: "天府新区街道总数：",
|
||||
val: 13,
|
||||
color: "#FF5B36",
|
||||
ext: { name: "总体风险等级：", val: 0 },
|
||||
},
|
||||
{ name: "天府新区社区总数", val: 13, color: "#FF5B36" },
|
||||
{ name: "监管企业总数", val: 7334, color: "#FF9131" },
|
||||
]);
|
||||
|
||||
onMounted(() => {});
|
||||
//时间
|
||||
const datetime = ref("");
|
||||
//日期
|
||||
const specificDate = ref("");
|
||||
//星期
|
||||
const nowWeek = ref("");
|
||||
//获取时间：时分秒
|
||||
const getData = () => {
|
||||
let date = new Date();
|
||||
// 获取时间：时分秒
|
||||
const hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
|
||||
const minute =
|
||||
date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
|
||||
const secound =
|
||||
date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
|
||||
datetime.value = hour + ":" + minute + ":" + secound;
|
||||
// 获取日期：年月日
|
||||
const year = date.getFullYear();
|
||||
const month = date.getMonth() + 1;
|
||||
const day = date.getDate();
|
||||
specificDate.value = year + "-" + month + "-" + day;
|
||||
// 获取星期几
|
||||
const weeks = new Array(
|
||||
"星期日",
|
||||
"星期一",
|
||||
"星期二",
|
||||
"星期三",
|
||||
"星期四",
|
||||
"星期五",
|
||||
"星期六"
|
||||
);
|
||||
nowWeek.value = weeks[new Date().getDay()];
|
||||
};
|
||||
onMounted(() => {
|
||||
setInterval(() => {
|
||||
getData();
|
||||
}, 1000);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -45,63 +65,41 @@ onMounted(() => {});
|
|||
margin: 0 1%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
|
||||
.item {
|
||||
font-size: 18px;
|
||||
color: #acc0d8;
|
||||
padding: 10px 20px;
|
||||
min-width: 223px;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
cursor: pointer;
|
||||
background-image: url("@/assets/images/menu/menu-top-bg.png");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
margin: 2%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.val {
|
||||
font-size: 20px;
|
||||
font-family: YouSheBiaoTiHei;
|
||||
color: #ff9131;
|
||||
}
|
||||
|
||||
.lab {
|
||||
font-size: 14px;
|
||||
color: #acc0d8;
|
||||
}
|
||||
|
||||
.item-normal {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item-ext {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.item-in {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.legend {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background: #2281e3;
|
||||
border-radius: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.item-in span:last-child {
|
||||
margin-left: 10px;
|
||||
}
|
||||
justify-content: end;
|
||||
color: #ffffff;
|
||||
}
|
||||
.time {
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
> div:nth-child(1) {
|
||||
text-align: right;
|
||||
}
|
||||
> div:nth-child(2) {
|
||||
> span:nth-child(2) {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.weather {
|
||||
margin-left: 15px;
|
||||
width: 112px;
|
||||
height: 33px;
|
||||
border: 1px solid #159aff;
|
||||
border-radius: 16.5px;
|
||||
margin-right: 10px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
> span {
|
||||
margin-left: 10px;
|
||||
}
|
||||
> img {
|
||||
margin-top: -10px;
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -81,6 +81,7 @@ export default defineComponent({
|
|||
</script>
|
||||
<script setup lang='ts'>
|
||||
import { menuStore } from "@/store/menu";
|
||||
const userMenu = menuStore();
|
||||
const label = ref([
|
||||
{ title: "大屏首页", check: true, id: 0 },
|
||||
{ title: "大数据分析", check: false, id: 1 },
|
||||
|
|
@ -90,6 +91,7 @@ const clickMenuOption = (id: any) => {
|
|||
item.check = false;
|
||||
});
|
||||
label.value[id].check = true;
|
||||
userMenu.setMenuType(id);
|
||||
};
|
||||
// import { ClickOutside as vClickOutside } from "element-plus";
|
||||
// const buttonRef = ref();
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user