suzhou-jichuang-lanhai
/
wujiangtaishipc
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

弹窗

Browse Source
xuhongjie
xuWorkEmai 3 years ago
parent 2857bf43c7
commit 88f2412ab4
9 changed files with 897 additions and 648 deletions
Show Stats Download Patch File Download Diff File

2
package.json
Unescape View File

@ -55,7 +55,7 @@
"moment": "^2.29.4",
"nprogress": "0.2.0",
"quill": "1.3.7",
"screenfull": "5.0.2",
"screenfull": "^5.0.2",
"sortablejs": "1.10.2",
"vue": "2.6.12",
"vue-count-to": "1.0.13",

BIN
src/assets/wujiangtaishipc/img/案件审核.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

165
src/utils/coordtransform.js
Unescape View File

@ -0,0 +1,165 @@
/*
* @Description:
* @Author: Fugang
* @Date: 2019-08-21 14:49:30
* @LastEditors: Fugang
* @LastEditTime: 2019-08-21 14:59:10
*/
/* eslint-disable */
//定义一些常量
var x_PI = (3.14159265358979324 * 3000.0) / 180.0;
var PI = 3.1415926535897932384626;
var a = 6378245.0;
var ee = 0.00669342162296594323;
/**
* 百度坐标系 (BD-09) 与 火星坐标系 (GCJ-02)的转换
* 即 百度 转 谷歌、高德
* @param bd_lon
* @param bd_lat
* @returns {*[]}
*/
var bd09togcj02 = function bd09togcj02(bd_lon, bd_lat) {
var bd_lon = +bd_lon;
var bd_lat = +bd_lat;
var x = bd_lon - 0.0065;
var y = bd_lat - 0.006;
var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_PI);
var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_PI);
var gg_lng = z * Math.cos(theta);
var gg_lat = z * Math.sin(theta);
return [gg_lng, gg_lat];
};
/**
* 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转换
* 即谷歌、高德 转 百度
* @param lng
* @param lat
* @returns {*[]}
*/
var gcj02tobd09 = function gcj02tobd09(lng, lat) {
var lat = +lat;
var lng = +lng;
var z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * x_PI);
var theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * x_PI);
var bd_lng = z * Math.cos(theta) + 0.0065;
var bd_lat = z * Math.sin(theta) + 0.006;
return [bd_lng, bd_lat];
};
/**
* WGS84转GCj02
* @param lng
* @param lat
* @returns {*[]}
*/
var wgs84togcj02 = function wgs84togcj02(lng, lat) {
var lat = +lat;
var lng = +lng;
if (out_of_china(lng, lat)) {
return [lng, lat];
} else {
var dlat = transformlat(lng - 105.0, lat - 35.0);
var dlng = transformlng(lng - 105.0, lat - 35.0);
var radlat = (lat / 180.0) * PI;
var magic = Math.sin(radlat);
magic = 1 - ee * magic * magic;
var sqrtmagic = Math.sqrt(magic);
dlat = (dlat * 180.0) / (((a * (1 - ee)) / (magic * sqrtmagic)) * PI);
dlng = (dlng * 180.0) / ((a / sqrtmagic) * Math.cos(radlat) * PI);
var mglat = lat + dlat;
var mglng = lng + dlng;
return [mglng, mglat];
}
};
/**
* GCJ02 转换为 WGS84
* @param lng
* @param lat
* @returns {*[]}
*/
var gcj02towgs84 = function gcj02towgs84(lng, lat) {
var lat = +lat;
var lng = +lng;
if (out_of_china(lng, lat)) {
return [lng, lat];
} else {
var dlat = transformlat(lng - 105.0, lat - 35.0);
var dlng = transformlng(lng - 105.0, lat - 35.0);
var radlat = (lat / 180.0) * PI;
var magic = Math.sin(radlat);
magic = 1 - ee * magic * magic;
var sqrtmagic = Math.sqrt(magic);
dlat = (dlat * 180.0) / (((a * (1 - ee)) / (magic * sqrtmagic)) * PI);
dlng = (dlng * 180.0) / ((a / sqrtmagic) * Math.cos(radlat) * PI);
var mglat = lat + dlat;
var mglng = lng + dlng;
return [lng * 2 - mglng, lat * 2 - mglat];
}
};
var transformlat = function transformlat(lng, lat) {
var lat = +lat;
var lng = +lng;
var ret =
-100.0 +
2.0 * lng +
3.0 * lat +
0.2 * lat * lat +
0.1 * lng * lat +
0.2 * Math.sqrt(Math.abs(lng));
ret +=
((20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) *
2.0) /
3.0;
ret +=
((20.0 * Math.sin(lat * PI) + 40.0 * Math.sin((lat / 3.0) * PI)) * 2.0) /
3.0;
ret +=
((160.0 * Math.sin((lat / 12.0) * PI) + 320 * Math.sin((lat * PI) / 30.0)) *
2.0) /
3.0;
return ret;
};
var transformlng = function transformlng(lng, lat) {
var lat = +lat;
var lng = +lng;
var ret =
300.0 +
lng +
2.0 * lat +
0.1 * lng * lng +
0.1 * lng * lat +
0.1 * Math.sqrt(Math.abs(lng));
ret +=
((20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) *
2.0) /
3.0;
ret +=
((20.0 * Math.sin(lng * PI) + 40.0 * Math.sin((lng / 3.0) * PI)) * 2.0) /
3.0;
ret +=
((150.0 * Math.sin((lng / 12.0) * PI) +
300.0 * Math.sin((lng / 30.0) * PI)) *
2.0) /
3.0;
return ret;
};
/**
* 判断是否在国内，不在国内则不做偏移
* @param lng
* @param lat
* @returns {boolean}
*/
var out_of_china = function out_of_china(lng, lat) {
var lat = +lat;
var lng = +lng;
// 纬度3.86~53.55,经度73.66~135.05
return !(lng > 73.66 && lng < 135.05 && lat > 3.86 && lat < 53.55);
};
export { bd09togcj02, gcj02tobd09, wgs84togcj02, gcj02towgs84 };

25
src/utils/gaodeAddress.js
Unescape View File

@ -0,0 +1,25 @@
/*
* @Description: 高德地理逆编码
* @Author: Fugang
* @Date: 2019-09-11 11:12:08
* @LastEditors: 许宏杰
* @LastEditTime: 2022-09-09 14:39:37
*/
import axios from "axios";
import { wgs84togcj02 } from "./coordtransform.js";
var gaodeAddress = function (lnglat, callback) {
let gaode = wgs84togcj02(lnglat[0], lnglat[1]);
let location = gaode[0] + "," + gaode[1];
// let key = '3e00762495bf45fb0696fe22a8ef60cb';
let key = "149638a4fa876c2c699625f18a2332e3"; // 根勇
axios
.get(
`https://restapi.amap.com/v3/geocode/regeo?location=${location}&key=${key}`
)
.then((res) => {
callback(res.data.regeocode.formatted_address);
});
};
export { gaodeAddress };

2
src/utils/request.js
Unescape View File

@ -73,7 +73,7 @@ service.interceptors.response.use(
store.dispatch("LogOut").then(() => {
//解决默认首页问题（这个代码会使再登录时带上参数“redirect=%2Findex”，会导致登录后跳转到index这个首页；）
// location.href = '/index';
location.href = "/login";
location.href = "/#/login";
});
})
.catch(() => {});

657
src/views/components/check/index.vue
Unescape View File

@ -2,48 +2,211 @@
* @Author: 许宏杰
* @Date: 2022-08-25 13:33:58
* @LastEditors: 许宏杰
* @LastEditTime: 2022-08-31 17:03:31
* @LastEditTime: 2022-09-08 16:22:27
* @FilePath: \wujiangtaishipc\src\views\components\check\index.vue
-->
<template>
<div class="check-container">
待开发....
<!-- <div class="check_container_left">
<div class="check_container_left_top">
<span class="check_container_left_top_text">违规事件检索</span>
</div>
<div class="check_container_center">
<span class="check_container_center_title"> 点位选择:</span>
<el-select v-model="value" placeholder="请选择点位...">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<el-button round>更新</el-button>
<span class="check_container_center_timetitle"> 时间选择：</span>
<div class="check_container_center_button">
<el-button round>今天</el-button>
<el-button round>近三天</el-button>
<el-button round>近七天</el-button>
<div class="check_container_left">
<!-- <div class="left-top">
<div class="check_container_left_top">
<span class="check_container_left_top_text">违规事件检索</span>
</div>
<div class="check_container_center">
<div class="check_container_center_title">点位选择:</div>
<div class="check_container_center_input">
<el-input v-model="input" placeholder="请选择点位..."></el-input>
</div>
<div class="check_container_center_button">更新</div>
</div>
<div class="check_container_center_time">
<el-time-picker
v-model="value1"
:picker-options="{
selectableRange: '18:30:00 - 20:30:00',
}"
placeholder="任意时间点"
>
</el-time-picker>
<div class="check_container_center_time_title">时间选择:</div>
<div class="btn-gr">
<div class="btn">今天</div>
<div class="btn">近三天</div>
<div class="btn">近七天</div>
</div>
</div>
<div class="check_container_center_time_select">
<el-col :span="12">
<el-form-item label="时间选择:">
<el-date-picker
v-model="value2"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</el-form-item>
</el-col>
</div>
<div class="check_container_center_bottom">违规类型</div>
<div class="check_container_center_bottom_button">
<div class="button-btn">全部</div>
<div class="button-btn">非机动车违章停车</div>
<div class="button-btn">门前占道经营</div>
<div class="button-btn">沿街晾晒</div>
<div class="button-btn">建筑垃圾</div>
<div class="button-btn">道路破损</div>
<div class="button-btn">乱堆物料</div>
<div class="button-btn">流通摊贩</div>
<div class="button-btn">环卫暴露垃圾</div>
<div class="button-btn">垃圾桶满溢</div>
<div class="button-btn">违章乱贴小广告</div>
</div>
<div class="check_container_center_bottom_check">
<div class="check_container_center_bottom_check_title">审核状态:</div>
<div class="check_container_center_bottom_check_button1">
<div class="check-btn">待审核</div>
<div class="check-btn">已通过</div>
<div class="check-btn">未通过</div>
</div>
</div>
<div class="check_container_center_bottom_bottom">
<div class="bottom-btn-gr">
<div class="bottom-bottom-btn">查询</div>
<div class="bottom-bottom-btn">重置</div>
</div>
</div>
</div>
</div> -->
<div class="left-bottom">
<div class="left-bottom-right-top">
<div class="left-title">事件列表</div>
<div class="right-title">共1076件</div>
</div>
<div class="right-center">
<div class="center-title">
<div class="title">序号</div>
<div class="title">事件类型</div>
<div class="title">区域网络</div>
<div class="title">时间</div>
<div class="title">审核状态</div>
</div>
<div class="center-bottom">
<div class="bottom">1</div>
<div class="bottom">沿街晾晒</div>
<div class="bottom">网格区域1</div>
<div class="bottom">2022-01-01</div>
<div class="bottom-btn">待审核</div>
</div>
<div class="center-bottom">
<div class="bottom">1</div>
<div class="bottom">沿街晾晒</div>
<div class="bottom">网格区域1</div>
<div class="bottom">2022-01-01</div>
<div class="bottom-btn">待审核</div>
</div>
<div class="center-bottom">
<div class="bottom">1</div>
<div class="bottom">沿街晾晒</div>
<div class="bottom">网格区域1</div>
<div class="bottom">2022-01-01</div>
<div class="bottom-btn">待审核</div>
</div>
<div class="center-bottom">
<div class="bottom">1</div>
<div class="bottom">沿街晾晒</div>
<div class="bottom">网格区域1</div>
<div class="bottom">2022-01-01</div>
<div class="bottom-btn">待审核</div>
</div>
<div class="center-bottom">
<div class="bottom">1</div>
<div class="bottom">沿街晾晒</div>
<div class="bottom">网格区域1</div>
<div class="bottom">2022-01-01</div>
<div class="bottom-btn">待审核</div>
</div>
<div class="center-bottom">
<div class="bottom">1</div>
<div class="bottom">沿街晾晒</div>
<div class="bottom">网格区域1</div>
<div class="bottom">2022-01-01</div>
<div class="bottom-btn">待审核</div>
</div>
<div class="center-bottom">
<div class="bottom">1</div>
<div class="bottom">沿街晾晒</div>
<div class="bottom">网格区域1</div>
<div class="bottom">2022-01-01</div>
<div class="bottom-btn">待审核</div>
</div>
<div class="center-bottom">
<div class="bottom">1</div>
<div class="bottom">沿街晾晒</div>
<div class="bottom">网格区域1</div>
<div class="bottom">2022-01-01</div>
<div class="bottom-btn">待审核</div>
</div>
<div class="center-bottom">
<div class="bottom">1</div>
<div class="bottom">沿街晾晒</div>
<div class="bottom">网格区域1</div>
<div class="bottom">2022-01-01</div>
<div class="bottom-btn">待审核</div>
</div>
</div>
</div> -->
</div>
<!-- <div class="check_container_right">
<div class="right-top">
<div class="top-left">人工审核</div>
<div class="top-right">第1/312件 已审核0件</div>
</div>
<div class="check-container-right-center">
<div class="check-container-right-center-left">
<div class="check-container-right-center-left-img"></div>
</div>
<div class="check-container-right-center-right">
<div class="right-top-title">事件信息</div>
<div class="check-container-right-center-right-top">
<div class="right-top-total">
<div class="right-top-title1">所属单位:</div>
<div class="right-top-title2">盛泽</div>
</div>
<div class="right-top-total">
<div class="right-top-title1">监控地点:</div>
<div class="right-top-title2">江苏省苏州市吴江区盛泽镇</div>
</div>
<div class="right-top-total">
<div class="right-top-title1">违规时间:</div>
<div class="right-top-title2">2022-08-09 14:39:21</div>
</div>
<!-- <div class="check_container_right"></div> -->
<div class="right-top-total">
<div class="right-top-title1">系统识别:</div>
<div class="right-top-title2">违章乱贴小广告</div>
</div>
<div class="right-top-title1">人工识别:</div>
</div>
<div class="check-container-right-center-right-btn">
<div class="right-btn-gr">非机动车违章停车</div>
<div class="right-btn-gr">违章乱贴小广告</div>
<div class="right-btn-gr">沿街晾晒</div>
<div class="right-btn-gr">建筑垃圾</div>
<div class="right-btn-gr">道路破损</div>
<div class="right-btn-gr">乱堆物料</div>
<div class="right-btn-gr">流动摊贩</div>
<div class="right-btn-gr">环卫暴露垃圾</div>
<div class="right-btn-gr">垃圾桶满溢</div>
<div class="right-btn-gr">门前占道经营</div>
</div>
<div class="right-top-title3">备注:</div>
<div class="check-container-right-bottom">
<div class="check-container-right-bottom-title">
视频上报-单位[盛泽]-告警点位[江苏省苏州市吴江区盛泽镇]
</div>
</div>
<div class="check-container-right-bottom-button">
<div class="right-bottom-btn color">未违规</div>
<div class="right-bottom-btn color1">确认违规</div>
<div class="right-bottom-btn color2">上报业务平台</div>
</div>
</div>
</div>
</div> -->
</div>
</template>
@ -68,20 +231,46 @@ export default {};
font-family: "BY";
}
.check_container_left {
margin-right: vw(10);
float: left;
width: vw(460);
height: vh(894);
background: url("../../../assets/wujiangtaishipc/img/img_box.png") no-repeat;
background-size: 100% 100%;
border: solid 1px #fff;
width: 100%;
height: 100%;
// border: 1px solid red;
// margin-right: vw(10);
// float: left;
// width: vw(460);
// height: vh(894);
background: url("../../../assets/wujiangtaishipc/img/案件审核.png") no-repeat
center;
background-size: auto 100%;
// display: flex;
// flex-direction: column;
}
.left-top {
flex: 1;
}
.left-bottom {
flex: 1;
}
.check_container_center_button {
width: vw(70);
height: vh(24);
font-size: 16px;
background-color: #0055a7;
padding-left: 15px;
padding-right: 15px;
margin-left: 20px;
margin-right: 2px;
text-align: center;
border-radius: 10px;
margin-top: 35px;
}
.check_container_right {
float: left;
width: vw(1300);
flex: 1;
height: vh(894);
//background: yellow;
background: url("../../../assets/wujiangtaishipc/img/img_box.png") no-repeat;
background-size: 100% 100%;
border: #fff;
margin-left: 5px;
}
@ -102,67 +291,371 @@ export default {};
line-height: 60px;
}
.check_container_center {
width: vw(430);
height: vh(350);
background: #071f37;
margin-top: vh(20);
margin-left: vw(15);
display: flex;
justify-content: flex-start;
}
.check_container_center_title {
width: 70px;
height: vh(16);
font-size: vw(14);
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #11fff7;
margin-top: vh(37);
margin-left: vw(28);
}
::v-deep .el-input__inner {
width: vw(230);
height: vh(30);
line-height: 36px;
background: white;
margin-left: vw(70);
width: vw(200);
height: vh(26);
background: linear-gradient(0deg, #ffffff, #dbdbdb);
border: 1px solid #0062c3;
border-radius: 4px;
}
::v-deep .el-button--medium.is-round {
float: right;
width: 44px;
::v-deep .el-button {
width: 64px;
height: 24px;
border: 1px solid;
// border-image: linear-gradient(0deg, #00C0FF, #009CFF) 10 10;
background: linear-gradient(
0deg,
rgba(7, 39, 64, 0.9) 0%,
rgba(0, 132, 255, 0.9) 100%
);
box-shadow: 0px 3px 6px 0px rgba(4, 0, 0, 0.45);
border-radius: 10px;
background: #0055a7;
border: 1px solid #0181ff;
border-radius: 12px;
font-size: 14px;
font-family: Alibaba PuHuiTi;
color: #ffff;
margin-right: 27px;
font-weight: 400;
color: #ffffff;
line-height: 5px;
}
.check_container_center_time {
display: flex;
justify-content: space-between;
align-content: center;
margin-top: 20px;
}
.check_container_center_time_title {
width: vw(80);
font-size: 16px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #11fff7;
margin-left: vw(28);
margin-top: 6px;
}
.btn-gr {
display: flex;
justify-content: center;
}
.check-btn {
font-size: 16px;
background-color: #0055a7;
padding-left: 15px;
padding-right: 15px;
margin-left: 2px;
margin-right: 2px;
margin-top: 10px;
border-radius: 10px;
}
.btn {
font-size: 14px;
background-color: #0055a7;
padding-left: 15px;
padding-right: 15px;
margin-top: 11px;
margin-right: 25px;
margin-top: 10px;
border-radius: 10px;
}
.check_container_center_title {
width: 67px;
.button-btn {
font-size: 14px;
background-color: #0055a7;
padding-left: 15px;
padding-right: 15px;
margin-left: 26px;
margin-right: 5px;
margin-top: 10px;
border-radius: 10px;
}
.check_container_center_bottom_button {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
margin-top: 12px;
}
.check_container_center_bottom {
font-size: 14px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #11fff7;
margin-top: 40px;
margin-left: vw(28);
}
.check_container_center_bottom_check {
display: flex;
justify-content: flex-start;
}
.check_container_center_bottom_check_title {
width: 90px;
height: 16px;
font-size: 16px;
font-size: 14px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #11fff7;
line-height: 40px;
margin-left: vw(26);
}
.check_container_center_bottom_bottom {
height: vh(30);
margin-top: 25px;
}
.bottom-btn-gr {
display: flex;
justify-content: center;
}
.bottom-bottom-btn {
font-size: 14px;
background-color: #0055a7;
padding-left: 15px;
padding-right: 15px;
margin-left: 5px;
margin-right: 5px;
border-radius: 10px;
margin-top: 0.3125rem;
}
.check_container_center_bottom_check {
display: flex;
justify-content: flex-start;
margin-top: 10px;
}
.check_container_center_bottom_check_button1 {
display: flex;
justify-content: center;
}
.left-bottom-right-top {
display: flex;
justify-content: space-between;
}
.right-title {
width: 75px;
font-size: 14px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #8aa4ca;
margin-right: 8px;
}
.left-title {
width: 80px;
font-size: 14px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #8aa4ca;
margin-left: 12px;
}
.right-center {
width: vw(460);
}
.center-title {
width: vw(430);
height: vh(26);
display: flex;
justify-content: center;
margin: 0 auto;
margin-top: 5px;
background: #06446e;
}
.title {
opacity: 0.3;
font-size: 14px;
font-family: Alibaba PuHuiTi;
font-weight: 500;
color: #fff;
padding-left: 20px;
padding-right: 21px;
}
.center-bottom {
width: vw(430);
height: vh(26);
display: flex;
justify-content: center;
margin: 0 auto;
margin-top: 5px;
background: #062642;
}
.bottom {
opacity: 0.3;
font-size: 14px;
font-family: Alibaba PuHuiTi;
font-weight: 500;
color: #fff;
padding-left: 20px;
padding-right: 21px;
}
.bottom-btn {
width: 54px;
background: #be621e;
border-radius: 2px;
font-size: 12px;
font-family: Microsoft YaHei UI;
font-weight: 400;
color: #ffffff;
text-align: center;
}
.top-left {
width: vw(80);
font-size: 18px;
font-family: Alibaba PuHuiTi;
font-weight: 500;
color: #ffffff;
margin-top: 18px;
margin-left: 70px;
}
.right-top {
display: flex;
justify-content: space-between;
}
.top-right {
width: 187px;
font-size: 18px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #ffffff;
margin-top: 18px;
margin-right: 15px;
}
.check-container-right-center {
width: vw(1345);
height: vh(800);
//border: 1px solid #0055a7;
margin-top: 35px;
display: flex;
justify-content: flex-start;
}
.check-container-right-center-left {
width: vw(936);
height: vh(780);
margin-left: 25px;
background: black;
border-radius: 4px;
display: flex;
align-items: center;
}
.check-container-right-center-left-img {
width: vw(936);
height: vh(400);
background: url("../../../assets/wujiangtaishipc/img/popup_img.jpg") no-repeat;
background-size: 100% 100%;
}
.check-container-right-center-right {
width: vw(360);
height: vh(780);
border: 1px solid #0055a7;
//background: #102942;
border-radius: 6px;
margin-left: 5px;
}
.check-container-right-center-right-top {
display: flex;
flex-direction: column;
}
.right-top-title {
width: 72px;
font-size: 18px;
font-family: Microsoft YaHei UI;
font-weight: bold;
color: #00d2ff;
margin-left: 20px;
}
::v-deep .el-input--medium {
font-size: 9px;
margin-left: -50px;
.right-top-title1 {
width: 100px;
margin-left: 20px;
font-size: 16px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #8aa4ca;
line-height: 40px;
}
.right-top-total {
display: flex;
justify-content: flex-start;
}
.check_container_center_timetitle {
width: 66px;
height: 15px;
.right-top-title2 {
font-size: 16px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #11fff7;
color: #ffffff;
line-height: 40px;
margin-left: vw(20);
margin-top: vh(5);
margin-left: -18px;
}
.check_container_center_button {
width: vw(250);
height: vh(50);
.check-container-right-center-right-btn {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.right-btn-gr {
font-size: 14px;
background-color: #0055a7;
padding-left: 10px;
padding-right: 10px;
margin-left: 20px;
margin-top: 10px;
border-radius: 10px;
}
.right-top-title3 {
width: 100px;
margin-left: 20px;
font-size: 16px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #8aa4ca;
line-height: 70px;
}
.check-container-right-bottom {
width: vw(310);
height: vh(174);
background: linear-gradient(0deg, #ffffff, #dbdbdb);
border: 1px solid #0062c3;
border-radius: 4px;
margin-left: 26px;
}
.check-container-right-bottom-title {
width: 314px;
height: 35px;
font-size: 14px;
font-family: Alibaba PuHuiTi;
font-weight: 500;
color: #003f7c;
line-height: 20px;
margin-top: 10px;
}
.check-container-right-bottom-button {
display: flex;
justify-content: flex-start;
align-items: center;
}
.right-bottom-btn {
width: vw(80);
height: vh(36);
border-radius: 10px;
font-size: 12px;
font-family: Microsoft YaHei UI;
font-weight: 400;
color: #ffffff;
text-align: center;
line-height: vh(36);
margin-left: 46px;
margin-top: 50px;
}
.color {
background: green;
}
.color1 {
background: red;
}
.color2 {
background: blue;
}
</style>

27
src/views/components/hotMap/bottomMap.vue
Unescape View File

@ -117,27 +117,28 @@ export default {
this.heatLayer = new mars3d.layer.HeatLayer({
positions: arrPoints,
// 以下为热力图本身的样式参数，可参阅api：https://www.patrick-wied.at/static/heatmapjs/docs.html
max: 20000,
// max: 100,
heatStyle: {
radius: 20,
minOpacity: 0,
maxOpacity: 0.4,
blur: 0.3,
gradient: {
0: "#e9ec36",
0.25: "#ffdd2f",
0.5: "#fa6c20",
0.75: "#fe4a33",
1: "#ff0000",
},
// radius: 25,
// minOpacity: 0,
// maxOpacity: 0.4,
// blur: 0.85,
// gradient: {
// 0: "#e9ec36",
// 0.25: "#ffdd2f",
// 0.5: "#fa6c20",
// 0.75: "#fe4a33",
// 1: "#ff0000",
// },
},
// 以下为矩形矢量对象的样式参数
style: {
opacity: 1.0,
// clampToGround: true,
},
flyTo: false,
flyTo: true,
});
map.addLayer(this.heatLayer);
});

523
src/views/components/overview/components/bottomMap copy.vue
Unescape View File

@ -1,523 +0,0 @@
<template>
<div class="bottom-map">
<mars-map :url="configUrl" :options="options" @onload="onMapload" />
</div>
</template>
<script>
import { fabric } from "fabric";
import MarsMap from "../../../../components/mars-work/mars-map.vue";
import marsOptions from "../../../../utils/mars-config/mars-option.js";
import wujiangjiedaoJson from "@/utils/mapJson/wujiangjiedao.json";
import wujiangbuffer1Json from "@/utils/mapJson/wujiangbuffer1.json";
import wujiangbuffer2Json from "@/utils/mapJson/wujiangbuffer2.json";
import iconlist from "@/utils/iconList.js";
import { listTotalData, getGpsPath } from "@/api/wujiangtaishi/totalData";
import moment from "moment";
// let mars3d = window.mars3d;
export default {
components: {
MarsMap,
},
data() {
const basePathUrl = window.basePathUrl || "";
return {
data_mark: [
[753, 552, 1030, 779, 0.6],
[873, 572, 1146, 904, 0.85],
[1474, 591, 1917, 1066, 0.86],
],
canvas: null,
huanchong: null, //缓冲面
mian: null, //镇级街道
graphicLayerDian: null,
times: null,
timeed: false,
totalDataList: [],
lastId: null,
listPath: null,
options: marsOptions, // 引入重新配置文件
configUrl: basePathUrl + "config/config.json",
iconTitle: {
wzltxgg: "违章乱贴小广告",
fjdcwt: "非机动车违章停车",
hwbllj: "环卫暴露垃圾",
ljmy: "垃圾桶满溢",
yjls: "沿街晾晒",
mqzdjy: "门前占道经营",
ldtf: "流动摊贩",
},
positions: [],
queryParams: {
params: {
begincreatetime: undefined,
endcreatetime: undefined,
},
},
};
},
mounted() {},
watch: {
timeed: {
deep: true,
handler(newName, oldName) {
console.log(newName, oldName, "启动计时器");
if (newName == true) {
this.times = setInterval(() => {
this.queryParams.params.endcreatetime = moment().format(
"YYYY-MM-DD HH:mm:ss"
);
setTimeout(this.addDemoGraphic4(), 0);
}, 1000 * 60 * 2);
}
},
},
},
beforedestroy() {
clearInterval(this.times);
this.timeed = false;
},
methods: {
// 地图构造完成回调
onMapload(map) {
// console.log('进来了,')
let _this = this;
// 创建entity图层
const graphicLayer = new mars3d.layer.GraphicLayer();
map.addLayer(graphicLayer);
// 创建矢量点数据图层
this.graphicLayerDian = new mars3d.layer.GraphicLayer();
map.addLayer(this.graphicLayerDian);
// 2.在layer上绑定监听事件
map.on(mars3d.EventType.click, function (event) {
console.log("监听layer，单击了矢量对象", event);
// data-content
// console.warn(
// document.getElementsByClassName("canvas")[0].dataset.content
// );
// console.warn(document.getElementsByClassName("canvas")[0].dataset.url);
let data_list =
document.getElementsByClassName("canvas")[0].dataset.content;
let data_image =
document.getElementsByClassName("canvas")[0].dataset.url;
let data_type =
document.getElementsByClassName("canvas")[0].dataset.type;
_this.setImgbg(data_list, data_image, data_type);
});
map.on(mars3d.EventType.wheel, () => {
//鼠标的滚轮事件
let zoom = map.level;
if (zoom >= 12) {
this.mian.show = false;
this.baimoLayer.show = true;
} else {
this.mian.show = true;
this.baimoLayer.show = false;
}
});
// 可在图层上绑定popup,对所有加到这个图层的矢量数据都生效
// graphicLayer.bindPopup("我是layer上绑定的Popup", {
// anchor: [0, -10],
// });
// 可在图层绑定右键菜单,对所有加到这个图层的矢量数据都生效
graphicLayer.bindContextMenu([
{
text: "删除对象",
iconCls: "fa fa-trash-o",
callback: function (e) {
const graphic = e.graphic;
if (graphic) {
graphicLayer.removeGraphic(graphic);
}
},
},
]);
// 加载缓冲面数据
// this.addGeoBufferGraphics(map);
/* 吴江区白膜 */
this.addBaimoLayer(map);
// 加载面数据
this.addGeoGraphics(map);
//历史线路（处理页面刷新或者进入系统不需要车从头开始跑）
this.getHistoryPath(graphicLayer);
//汽车
// this.getCarPath(graphicLayer);
// 加载点位
// this.addDemoGraphic4(map);
// }, 1000);
},
//历史线路
getHistoryPath(graphicLayer) {
let queryParams = {
x_id: "1",
d_id: "100",
};
getGpsPath(queryParams).then((res) => {
this.listPath = res.rows;
let list = res.rows;
this.lastId = list[list.length - 1].id + 1; //最后一条数据id
this.positions = [];
list.forEach((item) => {
if (Number(item.lng) > 0 && Number(item.lat) > 0) {
//防止存在无法的坐标
this.positions.push([Number(item.lng), Number(item.lat)]);
}
});
//曲线
const graphic = new mars3d.graphic.PolylineEntity({
positions: this.positions,
style: {
width: 6,
color: Cesium.Color.CYAN,
clampToGround: true,
closure: false,
},
attr: { remark: "示例3" },
});
graphicLayer.addGraphic(graphic);
this.getCarPath(graphicLayer);
});
},
/* 加载镇级面 */
addGeoGraphics(map) {
this.mian = new mars3d.layer.GeoJsonLayer({
name: "镇级面",
data: wujiangjiedaoJson,
symbol: (e) => {
// console.log(e);
return {
color: e.color,
opacity: 0.1,
outline: true,
outlineWidth: 1.5,
outlineColor: e.color,
// 面中心点，显示文字的配置
label: {
text: "{NAME}", // 对应的属性名称
opacity: 1,
font_size: 18,
font_family: "黑体",
color: e.color,
outline: false,
scaleByDistance: true,
scaleByDistance_far: 20000000,
scaleByDistance_farValue: 0.1,
scaleByDistance_near: 1000,
scaleByDistance_nearValue: 1,
},
};
},
});
map.addLayer(this.mian);
},
/* 加载缓冲面 */
addGeoBufferGraphics(map) {
// 创建矢量数据图层
this.huanchong = new mars3d.layer.GeoJsonLayer({
name: "缓冲面",
data: wujiangbuffer2Json,
symbol: (e) => {
// console.log(e);
return {
color: e.color,
opacity: e.opacity,
};
},
});
map.addLayer(this.huanchong);
},
/* 加载点位 */
addDemoGraphic4(map) {
let _this = this;
listTotalData(this.queryParams).then((response) => {
this.totalDataList = response.rows;
this.queryParams.params.begincreatetime =
this.totalDataList[this.totalDataList.length - 1].begaintime;
this.queryParams.params.begincreatetime = moment
.unix(this.queryParams.params.begincreatetime)
.format("YYYY-MM-DD HH:mm:ss"); //开始时间取系统最后一条数据的时间
for (let i = 0; i < this.totalDataList.length; i++) {
const primitive = new mars3d.graphic.BillboardPrimitive({
position: new mars3d.LngLatPoint(
_this.totalDataList[i].lng,
_this.totalDataList[i].lat
),
style: {
clampToGround: true, //是否贴地
image: iconlist["icon_" + _this.totalDataList[i].eventname],
scale: 0.7,
},
attr: {
id: _this.totalDataList[i].id,
lat: _this.totalDataList[i].lat,
lng: _this.totalDataList[i].lng,
imgname: _this.totalDataList[i].imgname,
typename: _this.totalDataList[i].eventname,
timestamp: _this.totalDataList[i].begaintime,
zb: _this.totalDataList[i].zb,
},
});
_this.graphicLayerDian.addGraphic(primitive); // primitive.addTo(graphicLayer) //另外一种写法
}
// this.timeed = true;
console.log("可以启动了");
});
_this.graphicLayerDian.bindPopup(
function (e) {
console.log(e.graphic.options, "屏幕中心");
let zhongxin = map.getCenter();
map.setSceneOptions({
center: {
lat: e.graphic.options.attr.lat,
lng: e.graphic.options.attr.lng,
},
});
// map.setCameraView({
// lat: zhongxin._lat,
// lng: zhongxin._lng,
// alt: zhongxin._alt, //高度值
// });
// console.log(e.graphic.options.attr);
let iconData = e.graphic.options.attr; //附件属性信息
let year = moment.unix(iconData.timestamp).format("YYYY");
let month = moment.unix(iconData.timestamp).format("MM");
let Data = moment.unix(iconData.timestamp).format("DD");
let iconType = _this.iconTitle[iconData.typename];
let timer = moment
.unix(iconData.timestamp)
.format("YYYY-MM-DD HH:mm:ss");
let image = `http://www.jichuanglanhai.com:9014/profile/upload/${year}/${month}/${Data}/${iconData.imgname}.jpg`;
let html = `
<div class="DIY-popup-title">事件信息</div>
<div class="DIY-popup-canvas">
<canvas
crossorigin="anonymous"
id="canvas"
class="canvas"
width="672"
height="378"
data-content="${iconData.zb}"
data-url="${image}"
data-type="${iconData.typename}"
/>
</div>
<div class="DIY-popup-item">
<div class="DIY-popup-item-lable">所属单位:</div>
<div class="DIY-popup-item-value">盛泽</div>
</div>
<div class="DIY-popup-item">
<div class="DIY-popup-item-lable">监控地点:</div>
<div class="DIY-popup-item-value">江苏省苏州市吴江区盛泽镇</div>
</div>
<div class="DIY-popup-item">
<div class="DIY-popup-item-lable">违规时间:</div>
<div class="DIY-popup-item-value">${timer}</div>
</div>
<div class="DIY-popup-item">
<div class="DIY-popup-item-lable">系统识别:</div>
<div class="DIY-popup-item-value">${iconType}</div>
</div>
`;
return html;
},
{
className: "Popup-boxes",
}
);
},
// canves设置背景
setImgbg(data_list, data_image, data_type) {
console.log(JSON.parse(data_list), data_image);
this.data_mark = JSON.parse(data_list);
this.canvas = new fabric.Canvas("canvas");
fabric.Image.fromURL(
// "https://picsum.photos/250/250/?image=54",
data_image,
(img, isError) => {
img.set({
scaleX: this.canvas.width / img.width,
scaleY: this.canvas.height / img.height,
// width: this.canvas.width,
// height: this.canvas.height,
// originX: 'left',
// originY: 'top'
left: 0,
top: 0,
});
// console.log(this.canvas.width / img.width);
// console.log(this.canvas.height / img.height);
this.canvas.setBackgroundImage(
img,
this.canvas.renderAll.bind(this.canvas)
);
let scaleXw = this.canvas.width / img.width;
let scaleYh = this.canvas.height / img.height;
this.draw(scaleXw, scaleYh, data_type);
}
);
},
draw(x, y, data_type) {
this.data_mark.map((item) => {
// console.log(item);
// 2.4 2.16
let x1 = item[0];
let y1 = item[1];
let x2 = item[2];
let y2 = item[3];
let kexindu = item[4];
let top = y1 * x; // y
let left = x1 * y; // x
let width = (x2 - x1) * x; // w
let height = (y2 - y1) * y; // h
// console.log(x, y);
// console.log(top, left, width, height);
// 矩形对象
const rect = new fabric.Rect({
top,
left,
width,
height,
fill: "transparent", // 填充色：透明
stroke: "red", // 边框颜色：黑色
strokeWidth: 2,
});
rect.selectable = false; //当设置为false时，Object无法被选中编辑（无论是以像素点为基础或以组为基础），但是相应的事件仍然会触发。默认值为true。
// 将矩形添加到画布上
this.canvas.add(rect);
// 添加文字
var text = new fabric.IText(data_type + "：" + kexindu, {
top: top - 18,
left,
fill: "red",
fontSize: 14,
// fontWeight: "bold",
backgroundColor: "#000",
});
text.selectable = false;
this.canvas.add(text);
});
// // console.log(this.scaleXw);
// let top = 342 / x; // y
// let left = 753 / y; // x
// let width = 277 / x; // w
// let height = 227 / y; // h
// // 矩形对象
// const rect = new fabric.Rect({
// top,
// left,
// width,
// height,
// fill: "transparent", // 填充色：透明
// stroke: "red", // 边框颜色：黑色
// });
// rect.selectable = false; //当设置为false时，Object无法被选中编辑（无论是以像素点为基础或以组为基础），但是相应的事件仍然会触发。默认值为true。
// // 将矩形添加到画布上
// this.canvas.add(rect);
},
/* 吴江区白膜 */
addBaimoLayer(map) {
this.baimoLayer = new mars3d.layer.TilesetLayer({
show: false,
flyTo: false,
name: "吴江区建筑",
url: "http://39.101.188.84:7777/wujiangbaimo/tileset.json",
maximumScreenSpaceError: 16,
maximumMemoryUsage: 512,
clampToGround: false,
style: new Cesium.Cesium3DTileStyle({
color: {
conditions: [["true", "color('rgb(150,150,150)',1)"]],
},
}),
// highlight: { type: "click", color: "#FFFF00" },
// popup: [
// { field: "objectid", name: "编号" },
// { field: "name", name: "名称" },
// { field: "height", name: "楼高", unit: "米" },
// ],
});
map.addLayer(this.baimoLayer);
},
// 创建车辆
getCarPath(graphicLayer) {
let _this = this;
const car = new mars3d.graphic.Route({
id: 1,
name: "巡检车",
model: {
url: "//data.mars3d.cn/gltf/mars/qiche.gltf",
scale: 0.5,
clampToGround: true, //贴地
},
circle: {
radius: 50,
materialType: mars3d.MaterialType.CircleWave,
materialOptions: {
color: "#ffff00",
opacity: 0.3,
speed: 10,
count: 3,
gradient: 0.1,
},
clampToGround: true,
show: false,
},
polyline: {
color: "#00ffff",
width: 2,
clampToGround: true,
// maxDistance: 500,
},
attr: {},
});
graphicLayer.addGraphic(car);
//定时任务
setInterval(() => {
let queryParams = {
x_id: this.lastId,
d_id: this.lastId + 2,
};
getGpsPath(queryParams).then((res) => {
let list = res.rows;
this.lastId = list[list.length - 1].id + 1; //最后一条数据id
const point = new mars3d.LngLatPoint(list[0].lng, list[0].lat, 0);
car.addDynamicPosition(point, 20);
// graphic.addDynamicPosition(
// Cesium.Cartesian3.fromDegrees(list[0].lng, list[0].lat, 30),
// 20
// );
});
}, 1000);
},
},
};
</script>
<style lang="scss" scoped>
.mapcontainer {
position: relative;
height: 100%;
overflow: hidden;
}
.bottom-map {
height: calc(100vh + 30px);
}
</style>

144
src/views/components/overview/components/bottomMap.vue
Unescape View File

@ -3,12 +3,7 @@
<mars-map :url="configUrl" :options="options" @onload="onMapload" />
<transition name="el-fade-in-linear">
<div class="iconIamge" v-show="canvasShow">
<div class="data-lable-value">
<div class="data_type">{{ data_type }}</div>
<div class="data_time">{{ data_time }}</div>
</div>
<div class="img-box">
<div class="img-box" @click="showCanvas('canvas2')">
<canvas
crossorigin="anonymous"
id="canvas"
@ -17,8 +12,45 @@
border-radius="6"
/>
</div>
<div class="data-lable-value">
<!-- <div class="data_type">{{ data_type }}</div>
<div class="data_time">{{ data_time }}</div> -->
<div class="data_type">工单号</div>
<div class="data_time">GD2022090500000071</div>
</div>
<div class="data-lable-value">
<div class="data_type">类型:</div>
<div class="data_time">{{ data_type }}</div>
</div>
<div class="data-lable-value">
<div class="data_type">时间:</div>
<div class="data_time">{{ data_time }}</div>
</div>
<div class="data-lable-value">
<div class="data_type">地点:</div>
<div class="data_time">{{ imgAdrress }}</div>
</div>
<div class="data-lable-value" style="margin-bottom: 0">
<div class="data_type">状态:</div>
<div class="data_time">
<span class="imgState">未处理</span>
</div>
</div>
</div>
</transition>
<el-dialog
:visible.sync="dialogVisible"
append-to-body
:close-on-click-modal="false"
>
<canvas
crossorigin="anonymous"
id="canvas2"
width="960"
height="540"
border-radius="6"
/>
</el-dialog>
</div>
</template>
@ -32,6 +64,7 @@ import wujiangbuffer1Json from "@/utils/mapJson/wujiangbuffer1.json";
import wujiangbuffer2Json from "@/utils/mapJson/wujiangbuffer2.json";
import iconlist from "@/utils/iconList.js";
import { listTotalData, getGpsPath } from "@/api/wujiangtaishi/totalData";
import { gaodeAddress } from "../../../../utils/gaodeAddress.js"; //经纬度转地址
import moment from "moment";
// let mars3d = window.mars3d;
@ -42,12 +75,15 @@ export default {
data() {
const basePathUrl = window.basePathUrl || "";
return {
dialogVisible: false,
dialogImage: {},
canvasShow: false,
loading: null,
graphicLayer: null,
map: null,
data_type: "",
data_time: "",
imgAdrress: "",
data_mark: [
[753, 552, 1030, 779, 0.6],
[873, 572, 1146, 904, 0.85],
@ -128,22 +164,36 @@ export default {
this.$store.commit("CHANGE_STATE");
},
methods: {
//单击canvas放大预览
showCanvas(name) {
let _this = this;
this.dialogVisible = true;
console.log(this.dialogImage, name);
this.$nextTick(() => {
var c = document.getElementById("canvas2");
c.width = 960;
c.height = 540;
_this.setImgbg(
this.dialogImage.zb,
this.dialogImage.image,
this.dialogImage.typename,
name
);
});
},
// 地图构造完成回调
onMapload(map) {
// console.log('进来了,')
let _this = this;
// 创建entity图层
const graphicLayer = new mars3d.layer.GraphicLayer();
map.addLayer(graphicLayer);
this.map = map;
this.graphicLayer = graphicLayer;
// 创建矢量点数据图层
this.graphicLayerDian = new mars3d.layer.GraphicLayer();
map.addLayer(this.graphicLayerDian);
//鼠标左键
map.on(mars3d.EventType.leftDown, function (event) {
// console.log("鼠标左键");
_this.$store.commit("CHANGES_BOOLE", false); //将vueX的值变回
});
// 2.在layer上绑定监听事件
@ -156,20 +206,23 @@ export default {
c.width = 384;
c.height = 216;
var attr = event.graphic.options.attr;
_this.data_type = _this.iconTitle[attr.typename];
_this.data_time = moment
.unix(attr.timestamp)
.format("YYYY-MM-DD HH:mm:ss");
// console.log("图标", timer);
// _this.data.data_type_time = moment
// .unix(attr.timestamp)
// .format("YYYY-MM-DD HH:mm:ss");
let year = moment.unix(attr.timestamp).format("YYYY");
let month = moment.unix(attr.timestamp).format("MM");
let Data = moment.unix(attr.timestamp).format("DD");
let image = `http://www.jichuanglanhai.com:9014/profile/upload/${year}/${month}/${Data}/ori_${attr.imgname}.jpg`;
_this.setImgbg(attr.zb, image, attr.typename);
gaodeAddress([attr.lng, attr.lat], (add) => {
_this.imgAdrress = add;
});
_this.dialogImage = {
zb: attr.zb,
image: image,
typename: attr.typename,
};
_this.setImgbg(attr.zb, image, attr.typename, "canvas");
}
}
});
@ -217,8 +270,8 @@ export default {
moment(new Date()).add("year", 0).format("YYYY-MM-DD") + " 00:00:00",
endcreatetime:
moment(new Date()).add("year", 0).format("YYYY-MM-DD") + " 23:59:59",
// begincreatetime: "2022-09-05" + " 00:00:00",
// endcreatetime: "2022-09-05" + " 23:59:59",
// begincreatetime: "2022-09-08" + " 00:00:00",
// endcreatetime: "2022-09-08" + " 23:59:59",
};
let carData = {
show: false,
@ -495,10 +548,12 @@ export default {
);
},
// canves设置背景
setImgbg(data_list, data_image, data_type) {
setImgbg(data_list, data_image, data_type, name) {
// console.log(JSON.parse(data_list), data_image);
this.data_mark = JSON.parse(data_list);
this.canvas = new fabric.Canvas("canvas");
this.canvas = new fabric.Canvas(`${name}`);
fabric.Image.fromURL(
// "https://picsum.photos/250/250/?image=54",
data_image,
@ -508,19 +563,18 @@ export default {
scaleY: this.canvas.height / img.height,
// width: this.canvas.width,
// height: this.canvas.height,
// originX: 'left',
// originY: 'top'
// originX: "left",
// originY: "top",
left: 0,
top: 0,
});
// console.log(this.canvas.width / img.width);
// console.log(this.canvas.height / img.height);
// console.log(this.canvas.width / img.width);
// console.log(this.canvas.height / img.height);
this.canvas.setBackgroundImage(
img,
this.canvas.renderAll.bind(this.canvas)
);
let scaleXw = this.canvas.width / img.width;
let scaleYh = this.canvas.height / img.height;
@ -531,8 +585,6 @@ export default {
draw(x, y, data_type) {
let _this = this;
this.data_mark.map((item) => {
// console.log(item);
// 2.4 2.16
let x1 = item[0];
let y1 = item[1];
let x2 = item[2];
@ -680,13 +732,49 @@ export default {
}
.data-lable-value {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
font-size: 14px;
color: #0098f6;
color: #fff;
margin: 10px 0;
.data_type {
margin-right: 10px;
}
}
.bottom-map {
height: calc(100vh + 30px);
}
::v-deep .el-dialog {
width: auto !important;
background: transparent;
}
::v-deep .el-dialog__header {
padding: 0;
}
::v-deep .el-dialog__body {
display: flex;
align-items: center;
justify-content: center;
}
::v-deep .el-dialog__body {
padding: 0;
border: 1px soild red;
}
.imgState {
height: 20px;
width: 50px;
background: red;
border-radius: 6px;
padding: 3px;
font-size: 14px;
color: #333;
}
::v-deep .el-dialog__wrapper {
background: rgba(0, 0, 0, 0.6);
}
::v-deep .el-icon-close:before {
color: #fff;
font-size: 20px;
}
</style>

Write Preview
Loading…
Cancel
Save