890 lines
23 KiB
Vue
890 lines
23 KiB
Vue
<!--
|
||
* @Author: SunTao 328867980@qq.com
|
||
* @Date: 2024-10-21 09:59:32
|
||
* @LastEditors: SunTao 328867980@qq.com
|
||
* @LastEditTime: 2025-01-07 14:26:49
|
||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\traffic-safety.vue
|
||
* @Description: 病害巡检大屏-今日巡查
|
||
-->
|
||
|
||
<template>
|
||
<div class="content">
|
||
<div class="traffic-left">
|
||
<span @click="showDialog('today')">{{ today }}</span>
|
||
</div>
|
||
<div class="traffic-right">
|
||
<div class="right-sum" @click="showDialog('')">
|
||
<span>{{ all }}</span
|
||
>个
|
||
</div>
|
||
<div class="right-rate">
|
||
<div class="right-rate-top">
|
||
<span>{{ count }}</span
|
||
>个
|
||
<i v-if="state === '增加'" class="el-icon-caret-top"></i>
|
||
<i v-else-if="state === '无变化'" class="el-icon-minus"></i>
|
||
<i v-else class="el-icon-caret-bottom"></i>
|
||
</div>
|
||
<div class="right-rate-bottom">
|
||
<span v-if="state === '增加'" class="up">{{ state }}</span>
|
||
<span v-else class="bottom">{{ state }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 病害巡检弹窗 -->
|
||
<el-dialog
|
||
title="当前病害查看"
|
||
:visible.sync="showDialogVisible"
|
||
width="75rem"
|
||
append-to-body
|
||
:close-on-click-modal="false"
|
||
destroy-on-close
|
||
@close="screenCancel"
|
||
>
|
||
<div class="today-content">
|
||
<div class="today-select">
|
||
<div>
|
||
<el-select
|
||
:popper-append-to-body="false"
|
||
v-model="roadSelect"
|
||
@change="changeRoad"
|
||
clearable
|
||
placeholder="请选择路段"
|
||
>
|
||
<el-option
|
||
v-for="item in roadList"
|
||
:key="`${item.name}-${item.index}`"
|
||
:label="item.name"
|
||
:value="item.name"
|
||
/>
|
||
</el-select>
|
||
</div>
|
||
<div>
|
||
<el-select
|
||
:popper-append-to-body="false"
|
||
v-model="companySelect"
|
||
clearable
|
||
@change="changeCompany"
|
||
placeholder="请选择分公司"
|
||
>
|
||
<el-option
|
||
v-for="item in companyList"
|
||
:key="`${item.name}-${item.index}`"
|
||
:label="item.name"
|
||
:value="item.name"
|
||
/>
|
||
</el-select>
|
||
</div>
|
||
</div>
|
||
<div class="today-bottom">
|
||
<div ref="leftChart" class="dialog-div"></div>
|
||
<div ref="rightChart" class="dialog-div"></div>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import * as echarts from "echarts";
|
||
import { roadToday, roadTodayDetail } from "@/api/xj/screen/traffic-screen";
|
||
export default {
|
||
name: "TrafficSafety",
|
||
props: {
|
||
// 病害巡检中4种类型点击绑定
|
||
bottomTipClick: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
// 新增病害数
|
||
today: "0",
|
||
// 病害总数
|
||
all: 0,
|
||
// 病害增长率
|
||
scale: 0,
|
||
// 较昨日增长、减少
|
||
state: "——",
|
||
// 增长、减少数量
|
||
count: "0",
|
||
// 弹窗显隐控制
|
||
showDialogVisible: false,
|
||
// 左侧路段选择绑定
|
||
roadSelect: "",
|
||
// 左侧路段下拉数据
|
||
roadList: [],
|
||
// 左侧图表总数据
|
||
leftChartList: [],
|
||
// 左侧图表数据
|
||
leftChartData: [],
|
||
// 右侧公司选择绑定
|
||
companySelect: "",
|
||
// 右侧公司选择下拉
|
||
companyList: [],
|
||
// 右侧图表总数据
|
||
rightChartList: [],
|
||
// 右侧图表数据
|
||
rightChartData: [],
|
||
};
|
||
},
|
||
watch: {
|
||
bottomTipClick: {
|
||
handler() {
|
||
this.getData();
|
||
},
|
||
},
|
||
},
|
||
mounted() {
|
||
this.getData();
|
||
},
|
||
methods: {
|
||
/* 获取数据 */
|
||
getData() {
|
||
roadToday({ classType: this.bottomTipClick }).then(({ code, data }) => {
|
||
if (code === 200) {
|
||
this.today = data.today;
|
||
this.all = data.all;
|
||
this.state = data.state;
|
||
this.count = data.count;
|
||
this.scale = data.scale;
|
||
}
|
||
});
|
||
},
|
||
|
||
/* 点击打开弹窗 */
|
||
showDialog(item) {
|
||
this.getChartData(item);
|
||
this.showDialogVisible = true;
|
||
},
|
||
|
||
/* 弹窗路段修改事件 */
|
||
changeRoad(value) {
|
||
this.leftChartData = this.leftChartList.filter((item) => {
|
||
if (value) {
|
||
return item.name === value;
|
||
}
|
||
return item;
|
||
});
|
||
this.$nextTick(() => {
|
||
this.drawLeftChart();
|
||
});
|
||
},
|
||
|
||
/* 弹窗公司修改事件 */
|
||
changeCompany(value) {
|
||
this.rightChartData = this.rightChartList.filter((item) => {
|
||
if (value) {
|
||
return item.name === value;
|
||
}
|
||
return item;
|
||
});
|
||
this.$nextTick(() => {
|
||
this.drawRightChart();
|
||
});
|
||
},
|
||
|
||
/* 请求弹窗数据 */
|
||
getChartData(item) {
|
||
roadTodayDetail({ classType: this.bottomTipClick, type: item }).then(
|
||
({ code, data }) => {
|
||
if (code === 200) {
|
||
this.leftChartList = data[0];
|
||
this.leftChartData = data[0];
|
||
this.roadList = data[0].map((item, index) => {
|
||
return {
|
||
...item,
|
||
index: index,
|
||
};
|
||
});
|
||
this.rightChartList = data[1];
|
||
this.rightChartData = data[1];
|
||
this.companyList = data[1].map((item, index) => {
|
||
return {
|
||
...item,
|
||
index: index,
|
||
};
|
||
});
|
||
this.$nextTick(() => {
|
||
this.drawLeftChart();
|
||
this.drawRightChart();
|
||
});
|
||
}
|
||
}
|
||
);
|
||
},
|
||
|
||
/* 绘制左侧echart图 */
|
||
drawLeftChart() {
|
||
const xData = this.leftChartData.map((item) => {
|
||
return item.name;
|
||
});
|
||
const y1Data = this.leftChartData.map((item) => {
|
||
return item.road;
|
||
});
|
||
const y2Data = this.leftChartData.map((item) => {
|
||
return item.bridge;
|
||
});
|
||
const y3Data = this.leftChartData.map((item) => {
|
||
return item.event;
|
||
});
|
||
const y4Data = this.leftChartData.map((item) => {
|
||
return item.green;
|
||
});
|
||
if (this.$refs.leftChart) {
|
||
const chart = echarts.init(this.$refs.leftChart);
|
||
chart.setOption({
|
||
color: [
|
||
{
|
||
type: "linear",
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{ offset: 0, color: "#8DF2FF" }, // 0% 处的颜色
|
||
{ offset: 1, color: "#82B3FD" }, // 100% 处的颜色
|
||
],
|
||
},
|
||
{
|
||
type: "linear",
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{ offset: 0, color: "#8087FF" }, // 0% 处的颜色
|
||
{ offset: 1, color: "#532EFF" }, // 100% 处的颜色
|
||
],
|
||
},
|
||
{
|
||
type: "linear",
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{ offset: 0, color: "#FFB3B3" }, // 0% 处的颜色
|
||
{ offset: 1, color: "#FF2E2E" }, // 100% 处的颜色
|
||
],
|
||
},
|
||
{
|
||
type: "linear",
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{ offset: 0, color: "#F7DA15" }, // 0% 处的颜色
|
||
{ offset: 1, color: "#FCC105" }, // 100% 处的颜色
|
||
],
|
||
},
|
||
],
|
||
title: {
|
||
text: "",
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
show: true,
|
||
confine: false,
|
||
backgroundColor: "rgba(9, 24, 48, 0.5)",
|
||
borderColor: "rgba(75, 253, 238, 0.4)",
|
||
textStyle: {
|
||
fontSize: 12,
|
||
color: "#ffffff",
|
||
},
|
||
},
|
||
grid: {
|
||
left: "3%",
|
||
right: "%",
|
||
bottom: "3%",
|
||
containLabel: true,
|
||
},
|
||
legend: {
|
||
orient: "horizontal",
|
||
left: "right",
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
itemWidth: 8,
|
||
itemHeight: 8,
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
axisLabel: {
|
||
interval: 0,
|
||
color: "#fff",
|
||
formatter: (params) => {
|
||
if (params.length > 4) {
|
||
return `${params.slice(0, 4)}...`;
|
||
}
|
||
return params;
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
data: xData,
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
axisLabel: {
|
||
color: "rgba(255,255,255,0.65)",
|
||
},
|
||
minInterval: 1,
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,0.2)",
|
||
},
|
||
},
|
||
name: "单位：个",
|
||
nameTextStyle: {
|
||
color: "rgba(255,255,255,0.65)",
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
barWidth: 10,
|
||
name: "路面",
|
||
type: "bar",
|
||
data: y1Data,
|
||
},
|
||
{
|
||
barWidth: 10,
|
||
name: "交安",
|
||
type: "bar",
|
||
data: y3Data,
|
||
},
|
||
{
|
||
barWidth: 10,
|
||
name: "道桥",
|
||
type: "bar",
|
||
data: y2Data,
|
||
},
|
||
{
|
||
barWidth: 10,
|
||
name: "绿化",
|
||
type: "bar",
|
||
data: y4Data,
|
||
},
|
||
],
|
||
dataZoom: [
|
||
{
|
||
// 设置滚动条的隐藏与显示
|
||
show: false,
|
||
// 设置滚动条类型
|
||
type: "slider",
|
||
// 设置背景颜色
|
||
backgroundColor: "rgba(225,225,225,0.2)",
|
||
// 设置选中范围的填充颜色
|
||
fillerColor: "#ccc",
|
||
// 设置边框颜色
|
||
borderColor: "rgba(225,225,225,0.2)",
|
||
// 是否显示detail，即拖拽时候显示详细数值信息
|
||
showDetail: false,
|
||
// 数据窗口范围的起始数值
|
||
startValue: 0,
|
||
// 数据窗口范围的结束数值（一页显示多少条数据）
|
||
endValue: 6,
|
||
// empty：当前数据窗口外的数据，被设置为空。
|
||
// 即不会影响其他轴的数据范围
|
||
filterMode: "empty",
|
||
// 设置滚动条宽度，相对于盒子宽度
|
||
width: "80%",
|
||
// 设置滚动条高度
|
||
height: 5,
|
||
// 设置滚动条显示位置
|
||
left: "center",
|
||
// 是否锁定选择区域（或叫做数据窗口）的大小
|
||
zoomLoxk: true,
|
||
// 控制手柄的尺寸
|
||
handleSize: 10,
|
||
// dataZoom-slider组件离容器下侧的距离
|
||
bottom: 0,
|
||
},
|
||
{
|
||
// 没有下面这块的话，只能拖动滚动条，
|
||
// 鼠标滚轮在区域内不能控制外部滚动条
|
||
type: "inside",
|
||
// 滚轮是否触发缩放
|
||
zoomOnMouseWheel: false,
|
||
// 鼠标滚轮触发滚动
|
||
moveOnMouseMove: true,
|
||
moveOnMouseWheel: true,
|
||
},
|
||
],
|
||
});
|
||
window.addEventListener("resize", () => {
|
||
chart.resize();
|
||
});
|
||
}
|
||
},
|
||
|
||
/* 绘制右侧echart图 */
|
||
drawRightChart() {
|
||
const xData = this.rightChartData.map((item) => {
|
||
return item.name;
|
||
});
|
||
const y1Data = this.rightChartData.map((item) => {
|
||
return item.road;
|
||
});
|
||
const y2Data = this.rightChartData.map((item) => {
|
||
return item.bridge;
|
||
});
|
||
const y3Data = this.rightChartData.map((item) => {
|
||
return item.event;
|
||
});
|
||
const y4Data = this.rightChartData.map((item) => {
|
||
return item.green;
|
||
});
|
||
if (this.$refs.rightChart) {
|
||
const chart = echarts.init(this.$refs.rightChart);
|
||
chart.setOption({
|
||
color: [
|
||
{
|
||
type: "linear",
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{ offset: 0, color: "#8DF2FF" }, // 0% 处的颜色
|
||
{ offset: 1, color: "#82B3FD" }, // 100% 处的颜色
|
||
],
|
||
},
|
||
{
|
||
type: "linear",
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{ offset: 0, color: "#8087FF" }, // 0% 处的颜色
|
||
{ offset: 1, color: "#532EFF" }, // 100% 处的颜色
|
||
],
|
||
},
|
||
{
|
||
type: "linear",
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{ offset: 0, color: "#FFB3B3" }, // 0% 处的颜色
|
||
{ offset: 1, color: "#FF2E2E" }, // 100% 处的颜色
|
||
],
|
||
},
|
||
{
|
||
type: "linear",
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{ offset: 0, color: "#F7DA15" }, // 0% 处的颜色
|
||
{ offset: 1, color: "#FCC105" }, // 100% 处的颜色
|
||
],
|
||
},
|
||
],
|
||
title: {
|
||
text: "",
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
show: true,
|
||
confine: false,
|
||
backgroundColor: "rgba(9, 24, 48, 0.5)",
|
||
borderColor: "rgba(75, 253, 238, 0.4)",
|
||
textStyle: {
|
||
fontSize: 12,
|
||
color: "#ffffff",
|
||
},
|
||
},
|
||
grid: {
|
||
left: "3%",
|
||
right: "%",
|
||
bottom: "3%",
|
||
containLabel: true,
|
||
},
|
||
legend: {
|
||
orient: "horizontal",
|
||
left: "right",
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
itemWidth: 8,
|
||
itemHeight: 8,
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
axisLabel: {
|
||
color: "#fff",
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
data: xData,
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
axisLabel: {
|
||
color: "rgba(255,255,255,0.65)",
|
||
},
|
||
minInterval: 1,
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,0.2)",
|
||
},
|
||
},
|
||
name: "单位：个",
|
||
nameTextStyle: {
|
||
color: "rgba(255,255,255,0.65)",
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
barWidth: 10,
|
||
name: "路面",
|
||
type: "bar",
|
||
data: y1Data,
|
||
},
|
||
{
|
||
barWidth: 10,
|
||
name: "交安",
|
||
type: "bar",
|
||
data: y3Data,
|
||
},
|
||
{
|
||
barWidth: 10,
|
||
name: "道桥",
|
||
type: "bar",
|
||
data: y2Data,
|
||
},
|
||
{
|
||
barWidth: 10,
|
||
name: "绿化",
|
||
type: "bar",
|
||
data: y4Data,
|
||
},
|
||
],
|
||
dataZoom: [
|
||
{
|
||
// 设置滚动条的隐藏与显示
|
||
show: false,
|
||
// 设置滚动条类型
|
||
type: "slider",
|
||
// 设置背景颜色
|
||
backgroundColor: "rgba(225,225,225,0.2)",
|
||
// 设置选中范围的填充颜色
|
||
fillerColor: "#ccc",
|
||
// 设置边框颜色
|
||
borderColor: "rgba(225,225,225,0.2)",
|
||
// 是否显示detail，即拖拽时候显示详细数值信息
|
||
showDetail: false,
|
||
// 数据窗口范围的起始数值
|
||
startValue: 0,
|
||
// 数据窗口范围的结束数值（一页显示多少条数据）
|
||
endValue: 6,
|
||
// empty：当前数据窗口外的数据，被设置为空。
|
||
// 即不会影响其他轴的数据范围
|
||
filterMode: "empty",
|
||
// 设置滚动条宽度，相对于盒子宽度
|
||
width: "80%",
|
||
// 设置滚动条高度
|
||
height: 5,
|
||
// 设置滚动条显示位置
|
||
left: "center",
|
||
// 是否锁定选择区域（或叫做数据窗口）的大小
|
||
zoomLoxk: true,
|
||
// 控制手柄的尺寸
|
||
handleSize: 10,
|
||
// dataZoom-slider组件离容器下侧的距离
|
||
bottom: 0,
|
||
},
|
||
{
|
||
// 没有下面这块的话，只能拖动滚动条，
|
||
// 鼠标滚轮在区域内不能控制外部滚动条
|
||
type: "inside",
|
||
// 滚轮是否触发缩放
|
||
zoomOnMouseWheel: false,
|
||
// 鼠标滚轮触发滚动
|
||
moveOnMouseMove: true,
|
||
moveOnMouseWheel: true,
|
||
},
|
||
],
|
||
});
|
||
window.addEventListener("resize", () => {
|
||
chart.resize();
|
||
});
|
||
}
|
||
},
|
||
|
||
/* 关闭 弹窗事件 */
|
||
screenCancel() {
|
||
this.showDialogVisible = false;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
|
||
.traffic-left {
|
||
width: 45%;
|
||
height: 100%;
|
||
color: #ffffff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding-left: 1.5rem;
|
||
font-size: 1.5rem;
|
||
// background-image: url("../../../assets/screen/traffic/traffic-left.png");
|
||
background-image: url("~@/assets/screen/disease/today-left.png");
|
||
background-repeat: no-repeat;
|
||
background-size: 85%;
|
||
background-position: 100% 60%;
|
||
|
||
span {
|
||
cursor: pointer;
|
||
font-family: "DouYu";
|
||
background: linear-gradient(to bottom, #ffffff, #2773d0);
|
||
/*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
|
||
background-clip: text;
|
||
/*将设置的背景颜色限制在文字中*/
|
||
-webkit-text-fill-color: transparent;
|
||
/*给文字设置成透明*/
|
||
}
|
||
}
|
||
|
||
.traffic-right {
|
||
width: 55%;
|
||
height: 100%;
|
||
padding: 1rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
color: #ffffff;
|
||
|
||
.right-sum {
|
||
cursor: pointer;
|
||
width: 100%;
|
||
height: 45%;
|
||
display: flex;
|
||
padding-left: 2rem;
|
||
justify-content: center;
|
||
line-height: 3rem;
|
||
// background-image: url("../../../assets/screen/traffic/right-sum.png");
|
||
background-image: url("~@/assets/screen/disease/right-sum.png");
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
background-position: 100% 50%;
|
||
color: #aac6c7;
|
||
// font-size: 1rem;
|
||
font-family: "DouYu";
|
||
font-size: 0.8rem;
|
||
|
||
span {
|
||
margin-right: 0.5rem;
|
||
font-size: 1rem;
|
||
font-family: "DouYu";
|
||
background: linear-gradient(to bottom, #ffffff, #21f1e1);
|
||
/*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
|
||
background-clip: text;
|
||
/*将设置的背景颜色限制在文字中*/
|
||
-webkit-text-fill-color: transparent;
|
||
/*给文字设置成透明*/
|
||
}
|
||
}
|
||
|
||
.right-rate {
|
||
width: 100%;
|
||
height: 45%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
font-size: 1rem;
|
||
background: url("~@/assets/screen/index/right-rate.png") no-repeat;
|
||
background-size: 100%;
|
||
background-position: 100% 50%;
|
||
color: #aac6c7;
|
||
|
||
.right-rate-top {
|
||
width: 100%;
|
||
height: 50%;
|
||
padding-left: 3rem;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: flex-end;
|
||
font-family: "DouYu";
|
||
font-size: 0.8rem;
|
||
|
||
span {
|
||
font-size: 1rem;
|
||
font-weight: 800;
|
||
font-family: "DouYu";
|
||
margin-right: 0.5rem;
|
||
background: linear-gradient(to bottom, #ffffff, #9e7a06);
|
||
/*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
|
||
background-clip: text;
|
||
/*将设置的背景颜色限制在文字中*/
|
||
-webkit-text-fill-color: transparent;
|
||
/*给文字设置成透明*/
|
||
}
|
||
|
||
.el-icon-caret-top {
|
||
font-size: 1.2rem;
|
||
line-height: 1.5rem;
|
||
font-weight: 800;
|
||
color: red;
|
||
}
|
||
|
||
.el-icon-caret-bottom,
|
||
.el-icon-minus {
|
||
font-size: 1.2rem;
|
||
line-height: 1.5rem;
|
||
font-weight: 800;
|
||
color: #19eb27;
|
||
}
|
||
}
|
||
|
||
.right-rate-bottom {
|
||
width: 100%;
|
||
height: 50%;
|
||
padding-left: 55%;
|
||
|
||
span {
|
||
font-size: 0.7rem;
|
||
font-family: "DouYu";
|
||
}
|
||
}
|
||
|
||
.up {
|
||
color: #ff2e2e;
|
||
padding: 0 0.5rem;
|
||
}
|
||
|
||
.bottom {
|
||
color: #19eb27;
|
||
padding: 0 0.5rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 弹窗内容样式
|
||
.today-content {
|
||
height: 30rem;
|
||
display: flex;
|
||
|
||
.dialog-div {
|
||
width: 50%;
|
||
height: 100%;
|
||
margin: 0 1rem;
|
||
}
|
||
}
|
||
|
||
// 弹窗内容样式
|
||
.today-content {
|
||
height: 30rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.today-select {
|
||
width: 100%;
|
||
// height: 10%;
|
||
display: flex;
|
||
|
||
> div {
|
||
width: 50%;
|
||
padding: 0 2rem;
|
||
|
||
::v-deep .el-select {
|
||
width: 12rem;
|
||
|
||
.el-input .el-select__caret {
|
||
line-height: 1.5rem;
|
||
}
|
||
|
||
.el-input--medium .el-input__inner {
|
||
height: 1.5rem;
|
||
background-color: transparent;
|
||
color: #89c5e8;
|
||
border-color: #6991cd;
|
||
}
|
||
|
||
.el-select-dropdown {
|
||
background-color: #102649;
|
||
border-color: #08204f;
|
||
|
||
.el-scrollbar {
|
||
.el-select-dropdown__wrap {
|
||
.el-scrollbar__view {
|
||
.el-select-dropdown__item {
|
||
color: #aaabb8;
|
||
}
|
||
|
||
.el-select-dropdown__item:hover {
|
||
background-color: #2b4c7e;
|
||
}
|
||
|
||
.el-select-dropdown__item.selected {
|
||
background-color: #2b4c7e;
|
||
}
|
||
|
||
.el-select-dropdown__item.hover {
|
||
background-color: #2b4c7e;
|
||
}
|
||
}
|
||
|
||
.el-select-dropdown__list {
|
||
background-color: #102649;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.today-bottom {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
|
||
.dialog-div {
|
||
width: 50%;
|
||
height: 90%;
|
||
margin: 0 1rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 修改弹窗样式 */
|
||
::v-deep .el-dialog__header {
|
||
padding: 10px;
|
||
background-color: #113463;
|
||
|
||
span,
|
||
i {
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
::v-deep .el-dialog__body {
|
||
padding: 0;
|
||
background-color: #113463;
|
||
}
|
||
</style>
|