大数据分析模块
This commit is contained in:
du
parent
ef97337b4d
commit
14b02e9043
|
|
@ -107,7 +107,8 @@ $sideWidth: 31%;
|
|||
|
||||
.module_top_title {
|
||||
cursor: pointer;
|
||||
width: 64px;
|
||||
// width: 64px;
|
||||
min-width: 64px;
|
||||
height: 22px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
|
|
@ -117,6 +118,7 @@ $sideWidth: 31%;
|
|||
font-weight: 500;
|
||||
border-radius: 3px;
|
||||
margin-left: 8px;
|
||||
padding: 0px 7px;
|
||||
}
|
||||
|
||||
.module_menu_selected {
|
||||
|
|
@ -130,3 +132,35 @@ $sideWidth: 31%;
|
|||
border: 1px solid #a6c2e2;
|
||||
color: #a7c5e8;
|
||||
}
|
||||
|
||||
.weather_data_div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.weather_data_button {
|
||||
margin-right: 10px;
|
||||
display: flex;
|
||||
|
||||
>div {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.weather_data_title {
|
||||
font-size: 16px;
|
||||
font-family: Source Han Sans SC, Source Han Sans SC;
|
||||
font-weight: 400;
|
||||
color: #ffe7cd;
|
||||
}
|
||||
217
src/views/data-statistics/left-side/components/domicile.vue
Normal file
217
src/views/data-statistics/left-side/components/domicile.vue
Normal file
|
|
@ -0,0 +1,217 @@
|
|||
<!-- 户籍统计 -->
|
||||
<template>
|
||||
<div class="side-bg">
|
||||
<TitleC title="户籍统计" :swshow="false"></TitleC>
|
||||
<div class="con_box conBox">
|
||||
<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>
|
||||
</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 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" },
|
||||
{ lable: "五类人员", value: "147", color: "#872F0A" },
|
||||
{ lable: "外出务工人员", value: "147", color: "#8AD900" },
|
||||
{ lable: "重点关注人员", value: "147", color: "#BD1BEC" },
|
||||
]);
|
||||
let 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 = () => {
|
||||
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>
|
||||
.side-bg {
|
||||
// height: 45%;
|
||||
}
|
||||
.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,99 +2,169 @@
|
|||
<template>
|
||||
<div class="side-bg">
|
||||
<div>
|
||||
<TitleC title="晴雨台" :swshow="false"></TitleC>
|
||||
</div>
|
||||
<div class="weather_body">
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
<div class="title">气温走势</div>
|
||||
<div class="chart-wrapper">
|
||||
<div class="container" ref="tenementRef"></div>
|
||||
</div>
|
||||
<div class="title" style="margin-top: 20px">空气指数</div>
|
||||
<div class="chart-wrapper airEcharts">
|
||||
<div class="container" ref="airTenementRef"></div>
|
||||
</div>
|
||||
<div class="airIndex">
|
||||
<div class="title">空气指数</div>
|
||||
<TitleC title="晴雨台"></TitleC>
|
||||
<div class="weather_data">
|
||||
<div>
|
||||
<div>
|
||||
<span>PM2.5</span>
|
||||
<span>15</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>PM10</span>
|
||||
<span>93</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>CO</span>
|
||||
<span>0</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>SO2</span>
|
||||
<span>3</span>
|
||||
<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>雨 东南风：＜3级</div>
|
||||
<div>10~17℃</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div>PM2.5：48.0%</div>
|
||||
<div>PM10：240mm</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>O3：48.0%</div>
|
||||
<div>空气质量：良</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 生活指数 -->
|
||||
<div class="title">生活指数</div>
|
||||
<div class="livingIndex_div">
|
||||
<div v-for="(item, index) in livingIndex" :key="index">
|
||||
<div>
|
||||
<span>{{ item.name }}</span>
|
||||
<span>{{ item.tate }}</span>
|
||||
</div>
|
||||
<div>{{ item.con }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 气象预警 -->
|
||||
<div class="title">气象预警</div>
|
||||
<div class="weatherWarning_div">
|
||||
<div v-for="(item, index) in weatherWarning" :key="index">
|
||||
<div>
|
||||
<div>
|
||||
<TitleD width="100">
|
||||
<div class="weather_data_div">
|
||||
<div class="weather_data_title">24小时天气象数据</div>
|
||||
<div class="weather_data_button">
|
||||
<div
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</TitleD>
|
||||
<div class="weather_data_right conBox chart-wrapper">
|
||||
<div ref="tenementRef" class="container"></div>
|
||||
<div>
|
||||
<img
|
||||
src="@/assets/images/data-statistics/left/rainstorm-orange.png"
|
||||
src="../../../../assets/images/home-page/left/leftArrow.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div>{{ item.name }}</div>
|
||||
<div>{{ item.time }}</div>
|
||||
<img
|
||||
src="../../../../assets/images/home-page/left/rightArrow.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>{{ item.con }}</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">
|
||||
<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="预警时间"
|
||||
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>
|
||||
|
||||
<script lang="ts">
|
||||
import * as echarts from "echarts";
|
||||
import { defineComponent, onMounted, ref, watchEffect } from "vue";
|
||||
export default defineComponent({
|
||||
name: "Weather",
|
||||
name: "weather",
|
||||
});
|
||||
</script>
|
||||
<script setup lang='ts'>
|
||||
import * as echarts from "echarts";
|
||||
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",
|
||||
},
|
||||
{
|
||||
type: "暴雨黄色预警",
|
||||
info: "xxxx气象台发布暴雨黄色预警信号：xx区xx街道、xx街道、xx镇未来连续三天降雨量将达到150ml以上，请注意防范。",
|
||||
time: "2024/1/22 12:20:13",
|
||||
},
|
||||
];
|
||||
const clickDetails = () => {};
|
||||
//未来七天气象数据选择
|
||||
const label = ref([
|
||||
{ title: "24小时", 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 tenementRef = ref();
|
||||
let option = {
|
||||
color: ["#FF831F"],
|
||||
color: ["#66E1DF"],
|
||||
tooltip: {
|
||||
show: false,
|
||||
trigger: "axis",
|
||||
|
|
@ -112,32 +182,7 @@ let option = {
|
|||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: [
|
||||
"1点",
|
||||
"2点",
|
||||
"3点",
|
||||
"4点",
|
||||
"5点",
|
||||
"6点",
|
||||
"7点",
|
||||
"8点",
|
||||
"9点",
|
||||
"10点",
|
||||
"11点",
|
||||
"12点",
|
||||
"13点",
|
||||
"14点",
|
||||
"15点",
|
||||
"16点",
|
||||
"17点",
|
||||
"18点",
|
||||
"19点",
|
||||
"20点",
|
||||
"21点",
|
||||
"22点",
|
||||
"23点",
|
||||
"24点",
|
||||
],
|
||||
data: ["现在", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00"],
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false, // 不显示坐标轴刻度线
|
||||
|
|
@ -148,11 +193,11 @@ let option = {
|
|||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
// axisLabel: {
|
||||
// interval: 0,
|
||||
// color: "#86909C",
|
||||
// fontSize: 14,
|
||||
// },
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
color: "#D0DEEE",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
|
|
@ -168,6 +213,9 @@ let option = {
|
|||
type: "dashed", //dotted：虚线 solid:实线
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: "{value} °C",
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
|
|
@ -194,195 +242,22 @@ let option = {
|
|||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#B36224",
|
||||
color: "#0F476B",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#111D37",
|
||||
color: "#002A56",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
data: [
|
||||
5, 7, 1, 3, 6, 7, 8, 9, 10, 2, 9, 7, 15, 17, 19, 2, 4, -5, -4, -2, 3, 5,
|
||||
7, 6,
|
||||
],
|
||||
data: [2, 4, 9, 12, 15, 48, 2],
|
||||
},
|
||||
],
|
||||
};
|
||||
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 livingIndex = ref([
|
||||
{ name: "带伞", tate: "无需", con: "无需带伞" },
|
||||
{
|
||||
name: "洗车",
|
||||
tate: "适宜",
|
||||
con: "适宜洗车，未来持续两天无雨天气较好，适合擦洗汽车，蓝天白云、风和日丽将伴您的车子连日洁净",
|
||||
},
|
||||
{ name: "紫外线", tate: "最弱", con: "可以不采取措施" },
|
||||
{
|
||||
name: "旅行",
|
||||
tate: "适宜",
|
||||
con: "有阵雨，温度适宜，在细雨中游玩别有一番情调，可不要错过机会呦! 但记得出门要携带雨具",
|
||||
},
|
||||
{
|
||||
name: "旅行",
|
||||
tate: "适宜",
|
||||
con: "有阵雨，温度适宜，在细雨中游玩别有一番情调，可不要错过机会呦! 但记得出门要携带雨具",
|
||||
},
|
||||
{
|
||||
name: "旅行",
|
||||
tate: "适宜",
|
||||
con: "有阵雨，温度适宜，在细雨中游玩别有一番情调，可不要错过机会呦! 但记得出门要携带雨具",
|
||||
},
|
||||
]);
|
||||
const weatherWarning = ref([
|
||||
{
|
||||
name: "大风黄色预警",
|
||||
time: "2023-12-1416:00:17",
|
||||
con: "道孚县气象局2023年12月14日16时00分发布大风黄色预警",
|
||||
},
|
||||
{
|
||||
name: "大风黄色预警",
|
||||
time: "2023-12-1416:00:17",
|
||||
con: "道孚县气象局2023年12月14日16时00分发布大风黄色预警",
|
||||
},
|
||||
{
|
||||
name: "大风黄色预警",
|
||||
time: "2023-12-1416:00:17",
|
||||
con: "道孚县气象局2023年12月14日16时00分发布大风黄色预警",
|
||||
},
|
||||
{
|
||||
name: "大风黄色预警",
|
||||
time: "2023-12-1416:00:17",
|
||||
con: "道孚县气象局2023年12月14日16时00分发布大风黄色预警",
|
||||
},
|
||||
{
|
||||
name: "大风黄色预警",
|
||||
time: "2023-12-1416:00:17",
|
||||
con: "道孚县气象局2023年12月14日16时00分发布大风黄色预警",
|
||||
},
|
||||
{
|
||||
name: "大风黄色预警",
|
||||
time: "2023-12-1416:00:17",
|
||||
con: "道孚县气象局2023年12月14日16时00分发布大风黄色预警",
|
||||
},
|
||||
{
|
||||
name: "大风黄色预警",
|
||||
time: "2023-12-1416:00:17",
|
||||
con: "道孚县气象局2023年12月14日16时00分发布大风黄色预警",
|
||||
},
|
||||
{
|
||||
name: "大风黄色预警",
|
||||
time: "2023-12-1416:00:17",
|
||||
con: "道孚县气象局2023年12月14日16时00分发布大风黄色预警",
|
||||
},
|
||||
{
|
||||
name: "大风黄色预警",
|
||||
time: "2023-12-1416:00:17",
|
||||
con: "道孚县气象局2023年12月14日16时00分发布大风黄色预警",
|
||||
},
|
||||
{
|
||||
name: "大风黄色预警",
|
||||
time: "2023-12-1416:00:17",
|
||||
con: "道孚县气象局2023年12月14日16时00分发布大风黄色预警",
|
||||
},
|
||||
]);
|
||||
|
||||
const getData = () => {
|
||||
//天气情况
|
||||
const tenementChart = echarts.init(tenementRef.value);
|
||||
tenementChart.setOption(option);
|
||||
//空气情况仪表盘
|
||||
const airTenementChart = echarts.init(airTenementRef.value);
|
||||
airTenementChart.setOption(airOption);
|
||||
const airTenementChart = echarts.init(tenementRef.value);
|
||||
airTenementChart.setOption(option);
|
||||
};
|
||||
onMounted(() => {
|
||||
getData();
|
||||
|
|
@ -391,197 +266,107 @@ onMounted(() => {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.side-bg {
|
||||
height: 195%;
|
||||
// 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_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;
|
||||
}
|
||||
}
|
||||
}
|
||||
> div:nth-child(2) {
|
||||
padding-left: 10px;
|
||||
margin-top: 20px;
|
||||
overflow-y: scroll;
|
||||
height: 200px;
|
||||
background-color: #153062;
|
||||
> div {
|
||||
color: #86b6f0;
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
> div:nth-child(2)::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.chart-wrapper {
|
||||
margin-top: 30px;
|
||||
flex: 1;
|
||||
height: 180px;
|
||||
.container {
|
||||
flex: 1;
|
||||
width: 440px;
|
||||
margin-top: -55px;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
.airEcharts {
|
||||
margin-top: 70px;
|
||||
}
|
||||
.airIndex {
|
||||
margin-top: 10px;
|
||||
|
||||
> div:nth-child(2) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
> div {
|
||||
> div:nth-child(1) {
|
||||
font-size: 27px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-color: #61738b;
|
||||
}
|
||||
> div:nth-child(1) {
|
||||
color: rgb(8, 237, 138);
|
||||
}
|
||||
> div:nth-child(2) {
|
||||
color: yellow;
|
||||
}
|
||||
> div:nth-child(3) {
|
||||
color: red;
|
||||
}
|
||||
> div:nth-child(4) {
|
||||
color: chartreuse;
|
||||
}
|
||||
}
|
||||
}
|
||||
//进度条
|
||||
.percentage-value {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
font-size: 28px;
|
||||
}
|
||||
.percentage-label {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.demo-progress .el-progress--line {
|
||||
margin-bottom: 15px;
|
||||
width: 350px;
|
||||
}
|
||||
.demo-progress .el-progress--circle {
|
||||
margin-right: 15px;
|
||||
}
|
||||
.title {
|
||||
font-size: 30px;
|
||||
color: white;
|
||||
font-family: YouSheBiaoTiHei;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.livingIndex_div {
|
||||
padding: 5px 10px;
|
||||
height: 300px;
|
||||
overflow-y: scroll;
|
||||
background-color: rgb(127, 116, 116);
|
||||
border-radius: 5px;
|
||||
> div {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background-color: #153062;
|
||||
margin-bottom: 10px;
|
||||
padding-left: 10px;
|
||||
color: white;
|
||||
border-radius: 5px;
|
||||
> div:nth-child(1) {
|
||||
font-size: 18px;
|
||||
line-height: 50px;
|
||||
> span:nth-child(1) {
|
||||
font-weight: bold;
|
||||
}
|
||||
> span:nth-child(2) {
|
||||
margin-left: 10px;
|
||||
align-items: center;
|
||||
color: #ffffff;
|
||||
> img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
> div:nth-child(2) {
|
||||
font-size: 14px;
|
||||
overflow: hidden; /* 超出一行文字自动隐藏 */
|
||||
text-overflow: ellipsis; /*文字隐藏后添加省略号*/
|
||||
white-space: nowrap; /*强制不换行*/
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
> div:nth-child(2) {
|
||||
> div {
|
||||
font-size: 13px;
|
||||
font-family: Source Han Sans SC, Source Han Sans SC;
|
||||
font-weight: 400;
|
||||
color: #d0deee;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 5px;
|
||||
> div {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.livingIndex_div::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.weatherWarning_div::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.weatherWarning_div {
|
||||
overflow-y: scroll;
|
||||
height: 300px;
|
||||
background-color: rgb(127, 116, 116);
|
||||
padding: 5px 5px;
|
||||
border-radius: 5px;
|
||||
> div {
|
||||
margin-bottom: 10px;
|
||||
border-radius: 10px;
|
||||
background-color: #153062;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
> div:nth-child(1) {
|
||||
display: flex;
|
||||
> div:nth-child(1) {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
> img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
> div:nth-child(2) {
|
||||
margin-left: 10px;
|
||||
> div:nth-child(1) {
|
||||
font-size: 20px;
|
||||
}
|
||||
> div:nth-child(2) {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
.weather_data_right {
|
||||
width: 100%;
|
||||
> div:nth-child(2) {
|
||||
margin-top: -17px;
|
||||
margin-left: 10px;
|
||||
text-align: left;
|
||||
img {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
> div:nth-child(2) {
|
||||
font-size: 15px;
|
||||
}
|
||||
> div:nth-child(3) {
|
||||
margin-top: -23px;
|
||||
text-align: right;
|
||||
margin-right: 10px;
|
||||
img {
|
||||
cursor: pointer;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.time {
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans SC, Source Han Sans SC;
|
||||
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>
|
||||
283
src/views/data-statistics/left-side/components/workSituation.vue
Normal file
283
src/views/data-statistics/left-side/components/workSituation.vue
Normal file
|
|
@ -0,0 +1,283 @@
|
|||
<!-- 工作开展情况 -->
|
||||
<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="work_con conBox">
|
||||
<div v-show="labelId == 0">
|
||||
<div class="tabsOne" 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 v-show="labelId == 1">
|
||||
<div class="chart-wrapper">
|
||||
<div class="container" ref="jobTypeTenementRef"></div>
|
||||
</div>
|
||||
<div>111</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'>
|
||||
import * as echarts from "echarts";
|
||||
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 },
|
||||
{ title: "调解分析", check: false, id: 4 },
|
||||
]);
|
||||
const data = [
|
||||
{
|
||||
index: 1,
|
||||
con: "每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况，每日每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况...",
|
||||
},
|
||||
{
|
||||
index: 2,
|
||||
con: "每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况...",
|
||||
},
|
||||
{
|
||||
index: 3,
|
||||
con: "每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况...",
|
||||
},
|
||||
{
|
||||
index: 4,
|
||||
con: "每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况，每日工作动态的自动读取形成近期工作开展情况...",
|
||||
},
|
||||
];
|
||||
//头部选择id
|
||||
const labelId = ref(0);
|
||||
const clickMenuOption = (id: any) => {
|
||||
label.value.forEach((item) => {
|
||||
item.check = false;
|
||||
});
|
||||
label.value[id].check = true;
|
||||
labelId.value = id;
|
||||
};
|
||||
//工作类型折线图
|
||||
const jobTypeTenementRef = ref();
|
||||
let option = {
|
||||
title: {
|
||||
text: "Stacked Line",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
legend: {
|
||||
data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
|
||||
},
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {},
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "Email",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
data: [120, 132, 101, 134, 90, 230, 210],
|
||||
},
|
||||
{
|
||||
name: "Union Ads",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
data: [220, 182, 191, 234, 290, 330, 310],
|
||||
},
|
||||
{
|
||||
name: "Video Ads",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
data: [150, 232, 201, 154, 190, 330, 410],
|
||||
},
|
||||
{
|
||||
name: "Direct",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
data: [320, 332, 301, 334, 390, 330, 320],
|
||||
},
|
||||
{
|
||||
name: "Search Engine",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||||
},
|
||||
],
|
||||
};
|
||||
//工作类型折线图数据处理
|
||||
const getjobType = () => {
|
||||
const airTenementChart = echarts.init(jobTypeTenementRef.value);
|
||||
airTenementChart.setOption(option);
|
||||
};
|
||||
onMounted(() => {
|
||||
getjobType();
|
||||
});
|
||||
</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;
|
||||
.tabsOne {
|
||||
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;
|
||||
}
|
||||
}
|
||||
.tabsTwo {
|
||||
}
|
||||
}
|
||||
.work_con::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.work_tip {
|
||||
max-width: 408px !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,19 +1,26 @@
|
|||
<template>
|
||||
<div class="left-side">
|
||||
<!-- 天气情况 -->
|
||||
<!-- 晴雨台 -->
|
||||
<Weather></Weather>
|
||||
<!-- 户籍统计 -->
|
||||
<Domicile></Domicile>
|
||||
<!-- 工作开展情况 -->
|
||||
<WorkSituation></WorkSituation>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, ref, watchEffect } from "vue";
|
||||
export default defineComponent({
|
||||
components: { Weather, Domicile, WorkSituation },
|
||||
name: "LeftSide",
|
||||
});
|
||||
</script>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import Domicile from "./components/domicile.vue";
|
||||
import Weather from "./components/weather.vue";
|
||||
import WorkSituation from "./components/workSituation.vue";
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
188
src/views/data-statistics/right-side/components/command.vue
Normal file
188
src/views/data-statistics/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,238 +1,121 @@
|
|||
<!-- 预警分析 -->
|
||||
<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
|
||||
<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'
|
||||
"
|
||||
>
|
||||
</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>
|
||||
<el-pagination
|
||||
background
|
||||
small
|
||||
v-model:currentPage="personnelCurrentPage"
|
||||
v-model:page-size="personnelageSize"
|
||||
layout="total, prev, pager, next"
|
||||
:total="personnelTotal"
|
||||
/>
|
||||
{{ item.title }}
|
||||
</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" />
|
||||
<el-table-column prop="address" label="地址" align="center" />
|
||||
</el-table>
|
||||
<el-pagination
|
||||
background
|
||||
small
|
||||
v-model:currentPage="placeCurrentPage"
|
||||
v-model:page-size="placePageSize"
|
||||
layout="total, prev, pager, next"
|
||||
:total="placeTotal"
|
||||
/>
|
||||
</div>
|
||||
</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: "risk-pool",
|
||||
name: "WorkSituation",
|
||||
});
|
||||
</script>
|
||||
<script setup lang='ts'>
|
||||
const recordRadio = ref("1");
|
||||
//重点人员
|
||||
const personnelCurrentPage = ref(1);
|
||||
const personnelageSize = ref(5);
|
||||
const personnelTotal = ref(10);
|
||||
|
||||
const personnelTableData = [
|
||||
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 = [
|
||||
{
|
||||
name: "某某人",
|
||||
address: "某某某地址",
|
||||
gender: "男",
|
||||
typesOf: "防火“六类人员”",
|
||||
type: "防火",
|
||||
info: "xxxx气象台发布暴雨黄色预警信号：xx区xx街道、xx街道、xx镇未来连续三天降雨量将达到150ml以上，请注意防范。",
|
||||
time: "2024/1/22 12:20:13",
|
||||
recipient: "某某某",
|
||||
},
|
||||
{
|
||||
name: "某某人",
|
||||
address: "某某某地址",
|
||||
gender: "男",
|
||||
typesOf: "防汛隐患点住户",
|
||||
type: "防火",
|
||||
info: "xxxx气象台发布暴雨黄色预警信号：xx区xx街道、xx街道、xx镇未来连续三天降雨量将达到150ml以上，请注意防范。",
|
||||
time: "2024/1/22 12:20:13",
|
||||
recipient: "某某某",
|
||||
},
|
||||
{
|
||||
name: "某某人",
|
||||
address: "某某某地址",
|
||||
gender: "男",
|
||||
typesOf: "治安类矛盾纠纷重点关注人员",
|
||||
type: "防火",
|
||||
info: "xxxx气象台发布暴雨黄色预警信号：xx区xx街道、xx街道、xx镇未来连续三天降雨量将达到150ml以上，请注意防范。",
|
||||
time: "2024/1/22 12:20:13",
|
||||
recipient: "某某某",
|
||||
},
|
||||
{
|
||||
name: "某某人",
|
||||
address: "某某某地址",
|
||||
gender: "男",
|
||||
typesOf: "防火“六类人员”",
|
||||
},
|
||||
{
|
||||
name: "某某人",
|
||||
address: "某某某地址",
|
||||
gender: "男",
|
||||
typesOf: "防火“六类人员”",
|
||||
},
|
||||
{
|
||||
name: "某某人",
|
||||
address: "某某某地址",
|
||||
gender: "男",
|
||||
typesOf: "防火“六类人员”",
|
||||
},
|
||||
{
|
||||
name: "某某人",
|
||||
address: "某某某地址",
|
||||
gender: "男",
|
||||
typesOf: "防火“六类人员”",
|
||||
type: "防火",
|
||||
info: "xxxx气象台发布暴雨黄色预警信号：xx区xx街道、xx街道、xx镇未来连续三天降雨量将达到150ml以上，请注意防范。",
|
||||
time: "2024/1/22 12:20:13",
|
||||
recipient: "某某某",
|
||||
},
|
||||
];
|
||||
//重点场所
|
||||
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",
|
||||
},
|
||||
{
|
||||
place: "某某场所",
|
||||
classification: "火灾隐患点",
|
||||
address: "11111111111",
|
||||
},
|
||||
{
|
||||
place: "某某场所",
|
||||
classification: "火灾隐患点",
|
||||
address: "11111111111",
|
||||
},
|
||||
];
|
||||
//切换table
|
||||
const recordChange = () => {};
|
||||
const clickDetails = () => {};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.side-bg {
|
||||
height: 39%;
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
// ::v-deep.el-table--striped
|
||||
// .el-table__body
|
||||
// tr.el-table__row--striped
|
||||
// td.el-table__cell {
|
||||
// background: #031838 !important;
|
||||
// }
|
||||
|
||||
// ::v-deep .el-table__row--striped {
|
||||
// border-radius: 20px !important;
|
||||
// }
|
||||
|
||||
// ::v-deep .el-table {
|
||||
// --el-border-color-lighter: #00ffff00;
|
||||
// }
|
||||
|
||||
// ::v-deep.el-table td:last-child {
|
||||
// border-radius: 0 30px 30px 0;
|
||||
// }
|
||||
|
||||
// ::v-deep.el-table td:first-child {
|
||||
// border-radius: 30px 0 0 30px;
|
||||
// }
|
||||
</style>
|
||||
|
|
@ -1,96 +0,0 @@
|
|||
<!-- 应急信息列表 -->
|
||||
<template>
|
||||
<div class="side-bg">
|
||||
<div>
|
||||
<TitleC title="应急信息列表" :swshow="false"></TitleC>
|
||||
</div>
|
||||
<div class="ei_body">
|
||||
<div>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
max-height="32vh"
|
||||
style="width: 100%"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="事件"
|
||||
align="center"
|
||||
width="100"
|
||||
/>
|
||||
<el-table-column prop="address" label="地址" align="center" />
|
||||
<el-table-column prop="time" label="时间" align="center" />
|
||||
<el-table-column 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" @close="visible = false"></Detail>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, ref, watchEffect } from "vue";
|
||||
export default defineComponent({
|
||||
name: "emergency-information",
|
||||
});
|
||||
</script>
|
||||
<script setup lang='ts'>
|
||||
import Detail from "../dialog/events.vue";
|
||||
const visible = ref(false);
|
||||
|
||||
//重点人员
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(5);
|
||||
const total = ref(10);
|
||||
|
||||
const tableData = [
|
||||
{
|
||||
name: "煤气泄露",
|
||||
address: "某某某地址",
|
||||
time: "2023-12-15",
|
||||
},
|
||||
{
|
||||
name: "泥石流",
|
||||
address: "某某某地址",
|
||||
time: "2023-12-15",
|
||||
},
|
||||
{
|
||||
name: "某某事件",
|
||||
address: "某某某地址",
|
||||
time: "2023-12-15",
|
||||
},
|
||||
{
|
||||
name: "某某事件",
|
||||
address: "某某某地址",
|
||||
time: "2023-12-15",
|
||||
},
|
||||
{
|
||||
name: "某某事件",
|
||||
address: "某某某地址",
|
||||
time: "2023-12-15",
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.side-bg {
|
||||
height: 31%;
|
||||
}
|
||||
.ei_body {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,196 +0,0 @@
|
|||
<!-- 应急事件统计 -->
|
||||
<template>
|
||||
<div class="side-bg">
|
||||
<div>
|
||||
<TitleC title="应急事件统计" :swshow="false"></TitleC>
|
||||
</div>
|
||||
<div class="jobType_body">
|
||||
<div class="block">
|
||||
<el-date-picker
|
||||
v-model="value1"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
:size="size"
|
||||
/>
|
||||
</div>
|
||||
<div class="chart-wrapper">
|
||||
<div class="container" ref="tenementRef"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, ref, watchEffect } from "vue";
|
||||
export default defineComponent({
|
||||
name: "job-type",
|
||||
});
|
||||
</script>
|
||||
<script setup lang='ts'>
|
||||
import * as echarts from "echarts";
|
||||
const size = ref<"default" | "large" | "small">("default");
|
||||
|
||||
const value1 = ref("");
|
||||
const shortcuts = [
|
||||
{
|
||||
text: "Last week",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
return [start, end];
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "Last month",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
return [start, end];
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "Last 3 months",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
return [start, end];
|
||||
},
|
||||
},
|
||||
];
|
||||
const tenementRef = ref();
|
||||
let option = {
|
||||
color: ["#FF831F"],
|
||||
tooltip: {
|
||||
show: false,
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
// 坐标轴指示器，坐标轴触发有效
|
||||
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: "0%",
|
||||
right: "5%",
|
||||
bottom: "0%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: [
|
||||
"事件1",
|
||||
"事件2",
|
||||
"事件3",
|
||||
"事件4",
|
||||
"事件5",
|
||||
"事件6",
|
||||
"事件7",
|
||||
"事件8",
|
||||
"事件9",
|
||||
"事件10",
|
||||
],
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false, // 不显示坐标轴刻度线
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
// axisLabel: {
|
||||
// interval: 0,
|
||||
// color: "#86909C",
|
||||
// fontSize: 14,
|
||||
// },
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
splitLine: {
|
||||
// 网格线
|
||||
show: true,
|
||||
lineStyle: {
|
||||
//分割线
|
||||
color: "#99999955",
|
||||
width: 1,
|
||||
type: "dashed", //dotted：虚线 solid:实线
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
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: "#B36224",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#111D37",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
data: [5, 7, 10, 3, 27, 7, 8, 25, 10, 2],
|
||||
},
|
||||
],
|
||||
};
|
||||
const getData = () => {
|
||||
const tenementChart = echarts.init(tenementRef.value);
|
||||
tenementChart.setOption(option);
|
||||
};
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.side-bg {
|
||||
height: 35%;
|
||||
}
|
||||
.jobType_body {
|
||||
}
|
||||
.block {
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.chart-wrapper {
|
||||
margin-top: 30px;
|
||||
flex: 1;
|
||||
height: 180px;
|
||||
.container {
|
||||
flex: 1;
|
||||
width: 440px;
|
||||
margin-top: -55px;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,140 +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="jobType_body">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
max-height="32vh"
|
||||
style="width: 100%"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
<el-table-column
|
||||
v-if="recordRadio == 1"
|
||||
prop="name"
|
||||
label="姓名"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column
|
||||
v-if="recordRadio == 2"
|
||||
prop="name"
|
||||
label="村（社区）"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column prop="val1" label="党建统领" align="center" />
|
||||
<el-table-column prop="val2" label="平安法治" align="center" />
|
||||
<el-table-column prop="val3" label="经济生态" align="center" />
|
||||
<el-table-column prop="val4" label="公共服务" align="center" />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, ref, watchEffect } from "vue";
|
||||
export default defineComponent({
|
||||
name: "jvillage-work",
|
||||
});
|
||||
</script>
|
||||
<script setup lang='ts'>
|
||||
import * as echarts from "echarts";
|
||||
const size = ref<"default" | "large" | "small">("default");
|
||||
|
||||
const recordRadio = ref("1");
|
||||
const tableData = ref([
|
||||
{
|
||||
name: "xxx",
|
||||
val1: "已完成10；未完成0",
|
||||
val2: "已完成10；未完成0",
|
||||
val3: "已完成10；未完成0",
|
||||
val4: "已完成10；未完成0",
|
||||
},
|
||||
{
|
||||
name: "xxx",
|
||||
val1: "已完成10；未完成0",
|
||||
val2: "已完成10；未完成0",
|
||||
val3: "已完成10；未完成0",
|
||||
val4: "已完成10；未完成0",
|
||||
},
|
||||
{
|
||||
name: "xxx",
|
||||
val1: "已完成10；未完成0",
|
||||
val2: "已完成10；未完成0",
|
||||
val3: "已完成10；未完成0",
|
||||
val4: "已完成10；未完成0",
|
||||
},
|
||||
{
|
||||
name: "xxx",
|
||||
val1: "已完成10；未完成0",
|
||||
val2: "已完成10；未完成0",
|
||||
val3: "已完成10；未完成0",
|
||||
val4: "已完成10；未完成0",
|
||||
},
|
||||
{
|
||||
name: "xxx",
|
||||
val1: "已完成10；未完成0",
|
||||
val2: "已完成10；未完成0",
|
||||
val3: "已完成10；未完成0",
|
||||
val4: "已完成10；未完成0",
|
||||
},
|
||||
{
|
||||
name: "xxx",
|
||||
val1: "已完成10；未完成0",
|
||||
val2: "已完成10；未完成0",
|
||||
val3: "已完成10；未完成0",
|
||||
val4: "已完成10；未完成0",
|
||||
},
|
||||
{
|
||||
name: "xxx",
|
||||
val1: "已完成10；未完成0",
|
||||
val2: "已完成10；未完成0",
|
||||
val3: "已完成10；未完成0",
|
||||
val4: "已完成10；未完成0",
|
||||
},
|
||||
]);
|
||||
|
||||
onMounted(() => {});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.side-bg {
|
||||
height: 28%;
|
||||
}
|
||||
.jobType_body {
|
||||
}
|
||||
.block {
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
//单选框样式
|
||||
|
||||
::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>
|
||||
|
|
@ -1,168 +0,0 @@
|
|||
<!-- 工作类型分析 -->
|
||||
<template>
|
||||
<div class="side-bg">
|
||||
<div>
|
||||
<TitleC title="工作类型分析" :swshow="false"></TitleC>
|
||||
</div>
|
||||
<div class="jobType_body">
|
||||
<div class="block">
|
||||
<el-date-picker
|
||||
v-model="value1"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
:size="size"
|
||||
/>
|
||||
</div>
|
||||
<div class="chart-wrapper">
|
||||
<div class="container" ref="tenementRef"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, ref, watchEffect } from "vue";
|
||||
export default defineComponent({
|
||||
name: "job-type",
|
||||
});
|
||||
</script>
|
||||
<script setup lang='ts'>
|
||||
import * as echarts from "echarts";
|
||||
const size = ref<"default" | "large" | "small">("default");
|
||||
|
||||
const value1 = ref("");
|
||||
const tenementRef = ref();
|
||||
let option = {
|
||||
color: ["#FF831F"],
|
||||
tooltip: {
|
||||
show: false,
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
// 坐标轴指示器，坐标轴触发有效
|
||||
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: "0%",
|
||||
right: "5%",
|
||||
bottom: "0%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: [
|
||||
"工作1",
|
||||
"工作2",
|
||||
"工作3",
|
||||
"工作4",
|
||||
"工作5",
|
||||
"工作6",
|
||||
"工作7",
|
||||
"工作8",
|
||||
"工作9",
|
||||
"工作10",
|
||||
],
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false, // 不显示坐标轴刻度线
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
// axisLabel: {
|
||||
// interval: 0,
|
||||
// color: "#86909C",
|
||||
// fontSize: 14,
|
||||
// },
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
splitLine: {
|
||||
// 网格线
|
||||
show: true,
|
||||
lineStyle: {
|
||||
//分割线
|
||||
color: "#99999955",
|
||||
width: 1,
|
||||
type: "dashed", //dotted：虚线 solid:实线
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
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: "#B36224",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#111D37",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
data: [5, 7, 1, 3, 6, 7, 8, 9, 10, 2],
|
||||
},
|
||||
],
|
||||
};
|
||||
const getData = () => {
|
||||
const tenementChart = echarts.init(tenementRef.value);
|
||||
tenementChart.setOption(option);
|
||||
};
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.side-bg {
|
||||
height: 35%;
|
||||
}
|
||||
.jobType_body {
|
||||
}
|
||||
.block {
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
z-index: 999;
|
||||
}
|
||||
.chart-wrapper {
|
||||
margin-top: 30px;
|
||||
flex: 1;
|
||||
height: 180px;
|
||||
.container {
|
||||
flex: 1;
|
||||
width: 440px;
|
||||
margin-top: -55px;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
<!-- 应急物资统计 -->
|
||||
<template>
|
||||
<div class="side-bg">
|
||||
<div>
|
||||
<TitleC title="应急物资统计" :swshow="false"></TitleC>
|
||||
</div>
|
||||
<div class="jobType_body">
|
||||
<div class="chart-wrapper">
|
||||
<div class="container" ref="tenementRef"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, ref, watchEffect } from "vue";
|
||||
export default defineComponent({
|
||||
name: "material-statistics",
|
||||
});
|
||||
</script>
|
||||
<script setup lang='ts'>
|
||||
import * as echarts from "echarts";
|
||||
const tenementRef = ref();
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
radius: "50%",
|
||||
data: [
|
||||
{ value: 1048, name: "消防物资" },
|
||||
{ value: 735, name: "抢险物资" },
|
||||
{ value: 580, name: "灭火物资" },
|
||||
{ value: 484, name: "救援物资" },
|
||||
{ value: 300, name: "防洪物资" },
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const getData = () => {
|
||||
const tenementChart = echarts.init(tenementRef.value);
|
||||
tenementChart.setOption(option);
|
||||
};
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.side-bg {
|
||||
height: 35%;
|
||||
}
|
||||
.jobType_body {
|
||||
padding-top: 50px;
|
||||
}
|
||||
.block {
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.chart-wrapper {
|
||||
margin-top: 30px;
|
||||
flex: 1;
|
||||
height: 180px;
|
||||
.container {
|
||||
flex: 1;
|
||||
width: 440px;
|
||||
margin-top: -55px;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,119 +0,0 @@
|
|||
<!-- 调解分析 -->
|
||||
<template>
|
||||
<div class="side-bg">
|
||||
<div>
|
||||
<TitleC title="调解分析" :swshow="false"></TitleC>
|
||||
</div>
|
||||
<div class="jobType_body">
|
||||
<div class="block">
|
||||
<el-date-picker
|
||||
v-model="value1"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
:size="size"
|
||||
/>
|
||||
</div>
|
||||
<div class="chart-wrapper">
|
||||
<div class="container" ref="tenementRef"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, ref, watchEffect } from "vue";
|
||||
export default defineComponent({
|
||||
name: "supervision-work",
|
||||
});
|
||||
</script>
|
||||
<script setup lang='ts'>
|
||||
import * as echarts from "echarts";
|
||||
const size = ref<"default" | "large" | "small">("default");
|
||||
|
||||
const value1 = ref("");
|
||||
const shortcuts = [
|
||||
{
|
||||
text: "Last week",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
return [start, end];
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "Last month",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
return [start, end];
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "Last 3 months",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
return [start, end];
|
||||
},
|
||||
},
|
||||
];
|
||||
const tenementRef = ref();
|
||||
let option = {
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: [
|
||||
"调解工作1",
|
||||
"调解工作2",
|
||||
"调解工作3",
|
||||
"调解工作4",
|
||||
"调解工作5",
|
||||
"调解工作6",
|
||||
"调解工作7",
|
||||
],
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [42, 51, 32, 6, 5, 4, 7],
|
||||
type: "bar",
|
||||
},
|
||||
],
|
||||
};
|
||||
const getData = () => {
|
||||
const tenementChart = echarts.init(tenementRef.value);
|
||||
tenementChart.setOption(option);
|
||||
};
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.side-bg {
|
||||
height: 28%;
|
||||
}
|
||||
.jobType_body {
|
||||
}
|
||||
.block {
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.chart-wrapper {
|
||||
margin-top: 30px;
|
||||
flex: 1;
|
||||
height: 180px;
|
||||
.container {
|
||||
flex: 1;
|
||||
width: 440px;
|
||||
margin-top: -55px;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,135 +0,0 @@
|
|||
<!-- 值守人员 -->
|
||||
<template>
|
||||
<div class="side-bg">
|
||||
<div>
|
||||
<TitleC title="值守人员" :swshow="false"></TitleC>
|
||||
</div>
|
||||
<div class="rP_body">
|
||||
<div class="rP_body_header">
|
||||
<div>
|
||||
<div>
|
||||
<span>值班领导:</span>
|
||||
<span>某某某</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>联系方式：</span>
|
||||
<span>19090908071</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<span>值班人员:</span>
|
||||
<span>某某某</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>联系方式：</span>
|
||||
<span>19090908072</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
max-height="32vh"
|
||||
style="width: 100%"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
<el-table-column
|
||||
prop="position"
|
||||
label="职位"
|
||||
align="center"
|
||||
width="120"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="姓名"
|
||||
align="center"
|
||||
width="100"
|
||||
/>
|
||||
<el-table-column prop="phone" label="电话" align="center" />
|
||||
<el-table-column label="状态" align="center" width="80">
|
||||
<template #default="scope">
|
||||
<span>
|
||||
<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: "on-duty",
|
||||
});
|
||||
</script>
|
||||
<script setup lang='ts'>
|
||||
const recordRadio = ref("1");
|
||||
//重点人员
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(5);
|
||||
const total = ref(10);
|
||||
|
||||
const tableData = [
|
||||
{
|
||||
name: "某某人",
|
||||
phone: "19090908074",
|
||||
position: "村长",
|
||||
},
|
||||
{
|
||||
name: "某某人",
|
||||
phone: "19090908074",
|
||||
position: "村长",
|
||||
},
|
||||
{
|
||||
name: "某某人",
|
||||
phone: "19090908074",
|
||||
position: "村长",
|
||||
},
|
||||
{
|
||||
name: "某某人",
|
||||
phone: "19090908074",
|
||||
position: "村长",
|
||||
},
|
||||
{
|
||||
name: "某某人",
|
||||
phone: "19090908074",
|
||||
position: "村长",
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.side-bg {
|
||||
height: 39%;
|
||||
}
|
||||
.rP_body {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.rP_body_header {
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
margin-bottom: 10px;
|
||||
> div {
|
||||
display: flex;
|
||||
> div:nth-child(1) {
|
||||
width: 180px;
|
||||
}
|
||||
> div:nth-child(2) {
|
||||
width: 240px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,87 +0,0 @@
|
|||
<!-- 人口类别分类统计 -->
|
||||
<template>
|
||||
<div class="side-bg">
|
||||
<div>
|
||||
<TitleC title="人口类别分类统计" :swshow="false"></TitleC>
|
||||
</div>
|
||||
<div class="pS_body">
|
||||
<table>
|
||||
<tr>
|
||||
<td>户籍人口</td>
|
||||
<td>常住人口</td>
|
||||
<td>流动人口</td>
|
||||
<td>空挂户</td>
|
||||
<td>新生儿</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>11</td>
|
||||
<td>22</td>
|
||||
<td>33</td>
|
||||
<td>44</td>
|
||||
<td>55</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>在校生</td>
|
||||
<td>高龄老人</td>
|
||||
<td>低保户</td>
|
||||
<td>特困人员</td>
|
||||
<td>精神病患者</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>11</td>
|
||||
<td>22</td>
|
||||
<td>33</td>
|
||||
<td>44</td>
|
||||
<td>55</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>五类人员</td>
|
||||
<td>外出务工人员</td>
|
||||
<td>重点关注人员</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>11</td>
|
||||
<td>22</td>
|
||||
<td>33</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, ref, watchEffect } from "vue";
|
||||
export default defineComponent({
|
||||
name: "population-statistics",
|
||||
});
|
||||
</script>
|
||||
<script setup lang='ts'>
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.side-bg {
|
||||
height: 41%;
|
||||
}
|
||||
.pS_body {
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
td {
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
width: 20%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
tr {
|
||||
display: flex;
|
||||
// justify-content: space-between;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
134
src/views/data-statistics/right-side/components/portrait.vue
Normal file
134
src/views/data-statistics/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,119 +0,0 @@
|
|||
<!-- 督办工作统计分析 -->
|
||||
<template>
|
||||
<div class="side-bg">
|
||||
<div>
|
||||
<TitleC title="督办工作统计分析" :swshow="false"></TitleC>
|
||||
</div>
|
||||
<div class="jobType_body">
|
||||
<div class="block">
|
||||
<el-date-picker
|
||||
v-model="value1"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
:size="size"
|
||||
/>
|
||||
</div>
|
||||
<div class="chart-wrapper">
|
||||
<div class="container" ref="tenementRef"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, ref, watchEffect } from "vue";
|
||||
export default defineComponent({
|
||||
name: "supervision-work",
|
||||
});
|
||||
</script>
|
||||
<script setup lang='ts'>
|
||||
import * as echarts from "echarts";
|
||||
const size = ref<"default" | "large" | "small">("default");
|
||||
|
||||
const value1 = ref("");
|
||||
const shortcuts = [
|
||||
{
|
||||
text: "Last week",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
return [start, end];
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "Last month",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
return [start, end];
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "Last 3 months",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
return [start, end];
|
||||
},
|
||||
},
|
||||
];
|
||||
const tenementRef = ref();
|
||||
let option = {
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: [
|
||||
"督办工作1",
|
||||
"督办工作2",
|
||||
"督办工作3",
|
||||
"督办工作4",
|
||||
"督办工作5",
|
||||
"督办工作6",
|
||||
"督办工作7",
|
||||
],
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [91, 25, 70, 24, 45, 37, 1],
|
||||
type: "bar",
|
||||
},
|
||||
],
|
||||
};
|
||||
const getData = () => {
|
||||
const tenementChart = echarts.init(tenementRef.value);
|
||||
tenementChart.setOption(option);
|
||||
};
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.side-bg {
|
||||
height: 28%;
|
||||
}
|
||||
.jobType_body {
|
||||
}
|
||||
.block {
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.chart-wrapper {
|
||||
margin-top: 30px;
|
||||
flex: 1;
|
||||
height: 180px;
|
||||
.container {
|
||||
flex: 1;
|
||||
width: 440px;
|
||||
margin-top: -55px;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,119 +0,0 @@
|
|||
<!-- 村庄工作统计分析 -->
|
||||
<template>
|
||||
<div class="side-bg">
|
||||
<div>
|
||||
<TitleC title="村庄工作分析" :swshow="false"></TitleC>
|
||||
</div>
|
||||
<div class="jobType_body">
|
||||
<div class="block">
|
||||
<el-date-picker
|
||||
v-model="value1"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
:size="size"
|
||||
/>
|
||||
</div>
|
||||
<div class="chart-wrapper">
|
||||
<div class="container" ref="tenementRef"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, ref, watchEffect } from "vue";
|
||||
export default defineComponent({
|
||||
name: "supervision-work",
|
||||
});
|
||||
</script>
|
||||
<script setup lang='ts'>
|
||||
import * as echarts from "echarts";
|
||||
const size = ref<"default" | "large" | "small">("default");
|
||||
|
||||
const value1 = ref("");
|
||||
const shortcuts = [
|
||||
{
|
||||
text: "Last week",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
return [start, end];
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "Last month",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
return [start, end];
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "Last 3 months",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
return [start, end];
|
||||
},
|
||||
},
|
||||
];
|
||||
const tenementRef = ref();
|
||||
let option = {
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: [
|
||||
"村庄工作1",
|
||||
"村庄工作2",
|
||||
"村庄工作3",
|
||||
"村庄工作4",
|
||||
"村庄工作5",
|
||||
"村庄工作6",
|
||||
"村庄工作7",
|
||||
],
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [91, 25, 70, 24, 45, 37, 1],
|
||||
type: "bar",
|
||||
},
|
||||
],
|
||||
};
|
||||
const getData = () => {
|
||||
const tenementChart = echarts.init(tenementRef.value);
|
||||
tenementChart.setOption(option);
|
||||
};
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.side-bg {
|
||||
height: 28%;
|
||||
}
|
||||
.jobType_body {
|
||||
}
|
||||
.block {
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.chart-wrapper {
|
||||
margin-top: 30px;
|
||||
flex: 1;
|
||||
height: 180px;
|
||||
.container {
|
||||
flex: 1;
|
||||
width: 440px;
|
||||
margin-top: -55px;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
|
||||
<!-- 最新工作 -->
|
||||
<script setup lang='ts'>
|
||||
import { ref } from "vue";
|
||||
const total = ref(10);
|
||||
const pageSize = ref(5);
|
||||
const tableData = ref([
|
||||
{ name: "张三", content: "已完成10家企业安全检查任务" },
|
||||
{ name: "张三", content: "已完成10家企业安全检查任务" },
|
||||
{ name: "张三", content: "已完成10家企业安全检查任务" },
|
||||
{ name: "张三", content: "已完成10家企业安全检查任务" },
|
||||
{ name: "张三", content: "已完成10家企业安全检查任务" },
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="side-bg">
|
||||
<div>
|
||||
<TitleC title="最新工作展示" :swshow="false"></TitleC>
|
||||
</div>
|
||||
<div class="jobType_body">
|
||||
<el-table
|
||||
max-height="32vh"
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
<el-table-column prop="name" label="姓名" align="center" />
|
||||
<el-table-column prop="content" label="工作内容" />
|
||||
</el-table>
|
||||
<el-pagination
|
||||
background
|
||||
small
|
||||
v-model:currentPage="currentPage"
|
||||
v-model:page-size="pageSize"
|
||||
layout="total, prev, pager, next"
|
||||
:total="total"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,63 +1,23 @@
|
|||
<template>
|
||||
<div class="right-side">
|
||||
<!-- 最新工作 -->
|
||||
<WorkNews />
|
||||
<!-- 人口类别统计 -->
|
||||
<PopulationStatistics></PopulationStatistics>
|
||||
<!-- 工作类型分析 -->
|
||||
<JobType></JobType>
|
||||
<!-- 工作分析 -->
|
||||
<JobStatic></JobStatic>
|
||||
<!-- 村庄工作分析 -->
|
||||
<VillageWork></VillageWork>
|
||||
<!-- 督办工作统计分析 -->
|
||||
<SupervisionWork></SupervisionWork>
|
||||
<!-- 调解分析 -->
|
||||
<MediationAnalysis></MediationAnalysis>
|
||||
<!-- 工作考核 -->
|
||||
<Portrait></Portrait>
|
||||
<!-- 预警分析 -->
|
||||
<EarlyWarning></EarlyWarning>
|
||||
<!-- 值守人员 -->
|
||||
<OnDuty></OnDuty>
|
||||
<!-- 应急物资统计 -->
|
||||
<MaterialStatistics></MaterialStatistics>
|
||||
<!-- 应急事件统计 -->
|
||||
<EventStatistics></EventStatistics>
|
||||
<!-- 应急信息列表 -->
|
||||
<EmergencyInformation></EmergencyInformation>
|
||||
<!-- 应急指挥 -->
|
||||
<Command></Command>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, ref, watchEffect } from "vue";
|
||||
export default defineComponent({
|
||||
components: {
|
||||
PopulationStatistics,
|
||||
JobType,
|
||||
JobStatic,
|
||||
VillageWork,
|
||||
SupervisionWork,
|
||||
MediationAnalysis,
|
||||
EarlyWarning,
|
||||
OnDuty,
|
||||
MaterialStatistics,
|
||||
EventStatistics,
|
||||
EmergencyInformation,
|
||||
WorkNews,
|
||||
},
|
||||
components: { Portrait, EarlyWarning, Command },
|
||||
name: "RightSide",
|
||||
});
|
||||
import PopulationStatistics from "./components/population-statistics.vue";
|
||||
import JobType from "./components/job-type.vue";
|
||||
import JobStatic from "./components/job-statics.vue";
|
||||
import VillageWork from "./components/village-work.vue";
|
||||
import SupervisionWork from "./components/supervision-work.vue";
|
||||
import MediationAnalysis from "./components/mediation-analysis.vue";
|
||||
import Portrait from "./components/portrait.vue";
|
||||
import EarlyWarning from "./components/early-warning.vue";
|
||||
import OnDuty from "./components/on-duty.vue";
|
||||
import MaterialStatistics from "./components/material-statistics.vue";
|
||||
import EventStatistics from "./components/event-statistics.vue";
|
||||
import EmergencyInformation from "./components/emergency-information.vue";
|
||||
import WorkNews from "./components/work.vue";
|
||||
import Command from "./components/command.vue";
|
||||
</script>
|
||||
|
||||
<script lang='ts' setup>
|
||||
|
|
|
|||
|
|
@ -35,7 +35,23 @@
|
|||
</div>
|
||||
<div>
|
||||
<TitleD width="100">
|
||||
<div class="weather_data_title">未来7天气象数据</div>
|
||||
<div class="weather_data_div">
|
||||
<div class="weather_data_title">未来7天气象数据</div>
|
||||
<div class="weather_data_button">
|
||||
<div
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</TitleD>
|
||||
<div class="weather_data_right conBox chart-wrapper">
|
||||
<div ref="tenementRef" class="container"></div>
|
||||
|
|
@ -133,6 +149,17 @@ const tableData = [
|
|||
},
|
||||
];
|
||||
const clickDetails = () => {};
|
||||
//未来七天气象数据选择
|
||||
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 tenementRef = ref();
|
||||
let option = {
|
||||
|
|
@ -154,7 +181,7 @@ let option = {
|
|||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
|
||||
data: ["21日", "22日", "23日", "24日", "25日", "26日", "27日"],
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false, // 不显示坐标轴刻度线
|
||||
|
|
@ -250,12 +277,7 @@ onMounted(() => {
|
|||
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;
|
||||
|
|
@ -291,12 +313,13 @@ onMounted(() => {
|
|||
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;
|
||||
margin-bottom: 5px;
|
||||
> div {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -304,20 +327,20 @@ onMounted(() => {
|
|||
width: 100%;
|
||||
> div:nth-child(2) {
|
||||
margin-top: -17px;
|
||||
margin-left: 28px;
|
||||
margin-left: 10px;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
img {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
> div:nth-child(3) {
|
||||
margin-top: -23px;
|
||||
text-align: right;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
img {
|
||||
cursor: pointer;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
<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"
|
||||
|
|
|
|||
|
|
@ -48,15 +48,15 @@ const topComponent = ref(TopMenu);
|
|||
*/
|
||||
const changeSide = (type: number) => {
|
||||
switch (type) {
|
||||
case EventEnum.MENU_SAFE_PRO: //安全生产
|
||||
case EventEnum.MENU_SAFE_PRO: //大屏首页
|
||||
leftComponent.value = HomeLeftSide;
|
||||
rightComponent.value = HomeRightSide;
|
||||
topComponent.value = TopMenu;
|
||||
// topComponent.value = TopMenu;
|
||||
break;
|
||||
case EventEnum.MENU_EMER_MAP: //应急一张图
|
||||
case EventEnum.MENU_EMER_MAP: //大数据分析
|
||||
leftComponent.value = DataLeftSide;
|
||||
rightComponent.value = DataRightSide;
|
||||
topComponent.value = "";
|
||||
// topComponent.value = "";
|
||||
break;
|
||||
|
||||
default:
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user