```javascript
<template><div id="map-container"><div v-if="isPatrol" class="menu br"><button @click="draw">绘制</button><button @click="edit">编辑</button><button @click="polyEditor.close()">结束</button></div><div class="menu tr"><button v-if="isPatrol" @click="drawRule">{{ ruleState ? "关闭测距" : "开启测距" }}</button><button @click="changeTheme('darkblue')">深色主题</button><button @click="changeTheme('normal')">浅色主题</button><button @click="toggleFullScreen">{{ startInitPatrolSet ? "关闭全屏并结束" : "全屏" }}</button></div><div v-if="isPatrol" class="map-control"><iv-if="!isPlay"class="el-icon-video-play"style="font-size: 24px; vertical-align: middle"@click="isPlay = true;navgControl('start');"/><iv-elseclass="el-icon-video-pause"style="font-size: 24px; vertical-align: middle"@click="isPlay = false;navgControl('pause');"/><!-- <span class="passed-time">{{ passedTime }}</span> --><!-- <el-sliderclass="map-slider"v-model="sliderVal":show-tooltip="false":step="0.0001"></el-slider> --><divclass="map-times"@mouseenter="isTimesChoose = true"@mouseleave="isTimesChoose = false"><div class="times-show">倍速 {{ times }}</div><div class="choose-box"><ul v-show="isTimesChoose"><liv-for="item in speedList":key="item":class="{ active: times === item }"@click="changeSpeed(item)">倍速 {{ item }}</li></ul></div></div><span class="passed-time">{{ totalTime }}</span></div><div style="display: none"><HeatSource ref="heatSource" :data="dialogData" /><Compensator ref="compensator" :data="dialogData" /><Cleaner ref="cleaner" :data="dialogData" /><Valve ref="valve" :data="dialogData" /><PipeLine ref="pipeLine" :data="dialogData" /><Exchange ref="exchange" :data="dialogData" /><Monitor ref="monitor" :data="dialogData" /><Well ref="well" :data="dialogData" /></div></div>
</template><script>
/*** Import Amap-Vue based on Gaode-map on demand* https://jimliu.net/amap-vue/*/
import AMapLoader from "@amap/amap-jsapi-loader";
import { mapGetters } from "vuex";
import HeatSource from "./MapDialog/HeatSource";
import Compensator from "./MapDialog/Compensator";
import Cleaner from "./MapDialog/Cleaner";
import Valve from "./MapDialog/Valve";
import PipeLine from "./MapDialog/PipeLine";
import Exchange from "./MapDialog/Exchange";
import Monitor from "./MapDialog/Monitor";
import Well from "./MapDialog/Well";
import { cloneDeep } from "lodash";
import http from "@/apis/geoInfo";
import { server_config } from "/public/config";
export default {name: "AMap",props: ["listener"],components: {HeatSource,Compensator,Cleaner,Valve,PipeLine,Exchange,Monitor,Well,},data() {return {layer: {},dialogData: {notes: "站位",},timesChanged: false,map: null, // 地图poly: null, // 多边形polyEditor: null, // 多边形编辑器ruleState: false, // 测距状态ruler: null, //测距工具heatSource: [], // 热源多边形数组exchange: [], //换热站heatArea: [], //供热区域monitor: [], // 计量站wellCap: [], //井盖steamValve: [], //排气阀bridge: [], //勾手cleaner: [], // 除污器compensator: [], //补偿器valve: [], //阀门pipeLine: [], // 管网fiber: [], // 光纤isOnSlider: false, //是否为手动鼠标拉动进度条playIcon: "resume", //开始按钮是重新开始还是继续isTimesChoose: false, //选择速度弹窗的open/closepassedTime: "00:00:00", //已经走了的时间totalTime: "00:00:00", //一共走了的时间isPlay: false, //是否为播放sliderVal: 0, //进度条滑动速度speed: 100, //初始速度，km/htimes: 1, //几倍速度播放navgtr: null, //巡航器speedList: [8, 4, 2, 1],pathList: [],trackList: [],lat: "",lng: "",moveConfig: [],moveIdx: 0,markers: [],passedPolylines: [],polylines: [],startInitPatrolSet: false,closeFullScreen: false,isFirstLoad: true,imageLayer: null,config:process.env.NODE_ENV === "production"? server_config.production: process.env.NODE_ENV === "debug"? server_config.debug: server_config.development,configSubPipeline: {},};},computed: {...mapGetters({token: "getToken",}),mode() {return this.$store.state.mode;},isPatrol() {return this.$route.path === "/Map/Patrol";},},beforeCreate() {// 加载地图AMapLoader.load({key: "1ccc7c0c495f09e0a1f663b5fb21bb7c", // 申请好的Web端开发者Key，首次调用 load 时必填version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ["AMap.MouseTool","AMap.ElasticMarker","AMap.Scale","AMap.PolyEditor","AMap.RangingTool","AMap.DistrictSearch","AMap.Polygon","AMap.Polyline","AMap.Marker","AMap.MoveAnimation",], // 需要使用的的插件列表，如比例尺'AMap.Scale'等AMapUI: {// 是否加载 AMapUI，缺省不加载version: "1.1", // AMapUI 缺省 1.1},}).then((AMap) => {this.initMap(AMap);window.AMap = AMap;this.initWeather(AMap);}).catch((e) => {console.error(e);});document.addEventListener("fullscreenchange", () => {if (this.startInitPatrolSet) {if (this.closeFullScreen) {this.toggleFullScreen();this.closeFullScreen = false;} else {this.closeFullScreen = true;}}});},mounted() {this.addElement();this.updateElement();this.deleteElement();this.initPatrolSet();this.$EventBus.$on("clear-map", () => {this.clearMap();});this.$EventBus.$on("updateSubPipeline", ({ type, checked, systemId }) => {this.configSubPipeline[type] = { checked, systemId };console.log(type, checked, systemId);this.addSubPipeline();});},methods: {getBounds() {const bounds = this.map.getBounds();let width = Math.abs(bounds.northeast.lng - bounds.southwest.lng);let height = Math.abs(bounds.northeast.lat - bounds.southwest.lat);const longitude = bounds.southwest.lng;const latitude = bounds.northeast.lat;if (this.isFirstLoad) {this.isFirstLoad = false;http.getGeoList({width,height,longitude,latitude,}).then((res) => {this.$store.commit("setLayerData", res);this.$EventBus.$emit("getLayerEnd");});}//添加图层this.addSubPipeline();},addSubPipeline(systemId) {//删除图层if (this.layer.imageLayer) {this.map.remove(this.layer.imageLayer);this.layer.imageLayer.splice(0);} else {this.layer.imageLayer = [];}Object.keys(this.configSubPipeline).forEach((key) => {const { checked, systemId } = this.configSubPipeline[key];if (checked) {const mapSize = this.map.getSize();const width = mapSize.width;const height = mapSize.height;const northEastLng = this.map.getBounds().northeast.lng;const northEastLat = this.map.getBounds().northeast.lat;const southWestLng = this.map.getBounds().southwest.lng;const southWestLat = this.map.getBounds().southwest.lat;const imageLayer = new AMap.ImageLayer({bounds: this.map.getBounds(),url:this.config.baseURL +"geoInfo/img?zoom=" +this.map.getZoom() +"&width=" +width +"&height=" +height +"&northEastLng=" +northEastLng +"&northEastLat=" +northEastLat +"&southWestLng=" +southWestLng +"&southWestLat=" +southWestLat +"&systemId=" +systemId, // 图片 UrlzIndex: 2,zooms: [3, 18], // 设置可见级别，[最小级别，最大级别]});this.layer.imageLayer.push(imageLayer);this.map.add(this.layer.imageLayer);}});},// 初始化地图initMap(AMap) {this.map = new AMap.Map("map-container", {zoom: 14,resizeEnable: true,mapStyle: "amap://styles/darkblue",});this.map.on("click", function(e) {console.log(e.lnglat.getLng() + "," + e.lnglat.getLat());});this.map.on("moveend", this.getBounds);//  this.map.on("zoomend", this.getBounds);// this.map.on("mousewheel", () => {//   console.log(this.map.getResolution());// });// this.map.setCity('天津市')this.districtModal(AMap); // 若不需要此功能，注释掉代码就好},// 显示目标城市目标行政区域，外部遮罩。可根据业务需求修改城市adcode。若不需要此功能，可不调用此方法。districtModal(AMap) {let _this = this;new AMap.DistrictSearch({extensions: "all", // 是否返回行政区边界坐标点subdistrict: 0,}).search("120116", (status, result) => {//"120116"为天津市滨海新区adcode,此参数也可以写‘滨海新区’const { lat, lng } = result.districtList[0].center;this.lat = lat;this.lng = lng;let outer = [new AMap.LngLat(-360, 90, true),new AMap.LngLat(-360, -90, true),new AMap.LngLat(360, -90, true),new AMap.LngLat(360, 90, true),];let holes = result.districtList[0].boundaries; // 行政区域边界let arr = [];holes.forEach((item) => {arr.push(item.length);});let indexMax = 0;arr.forEach((item, index) => {if (item === Math.max(...arr)) {indexMax = index;}});let pathArray = [outer];pathArray.push.apply(pathArray, [holes[indexMax]]);// innerPolygon 为行政区域边界多边形let innerPolygon = new AMap.Polygon({path: pathArray,// 线条颜色，使用16进制颜色代码赋值。默认值为#006600strokeColor: "#1892FC",strokeWeight: 1,// 多边形填充颜色，使用16进制颜色代码赋值，如：#FFAA00fillColor: "#0f1c2d",// 多边形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9fillOpacity: 0.8,});// outerPolygon 只为setFitView， 未在地图展示let outerPolygon = new AMap.Polygon({path: holes[indexMax],});innerPolygon.setPath(pathArray);_this.map.add(innerPolygon);_this.map.setFitView(outerPolygon);// _this.map.setZoom(_this.getZoom() + 0.5) // 设置放大倍数});},// 添加标记addMarker() {let marker = new AMap.Marker({icon:"//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",position: [104.065695, 30.657522],offset: new window.AMap.Pixel(-13, -30),});marker.setMap(this.map);},// 绘制多边形draw() {let vm = this;let mouseTool = new AMap.MouseTool(this.map);mouseTool.polygon({strokeColor: "#FF33FF",strokeOpacity: 1,strokeWeight: 6,strokeOpacity: 0.2,fillColor: "#1791fc",fillOpacity: 0.4,// 线样式还支持 'dashed'strokeStyle: "solid",// strokeStyle是dashed时有效// strokeDasharray: [30,10],});mouseTool.on("draw", function(event) {// event.obj 为绘制出来的覆盖物对象vm.poly = event.obj;console.log(event);mouseTool.close();});},// 编辑多边形edit() {var polyEditor = new AMap.PolyEditor(this.map, this.poly);this.polyEditor = polyEditor;polyEditor.on("addnode", function(event) {console.log("触发事件：addnode");});polyEditor.on("adjust", function(event) {console.log("触发事件：adjust");});polyEditor.on("removenode", function(event) {console.log("触发事件：removenode");});polyEditor.on("end", function(event) {console.log("触发事件： end");// event.target 即为编辑后的多边形对象console.log(event.target.getPath());});polyEditor.open();},// 换主题changeTheme(name) {const styleName = `amap://styles/${name}`;this.map.setMapStyle(styleName);},// 切换全屏toggleFullScreen() {if (this.startInitPatrolSet) {Object.keys(this.layer).forEach((key) => {if (["userOnline", "markers", "passedPolylines", "polyline"].includes(key)) {this.layer[key] && this.map.remove(this.layer[key]);}});this.startInitPatrolSet = false;this.isPlay = false;if (document.exitFullscreen) {this.map.setZoom(this.map.getZoom() - 0.5);this.closeFullScreen = false;document.exitFullscreen();}} else {this.startInitPatrolSet = true;if (!document.fullscreenElement) {const map = document.querySelector("#map-container");map.requestFullscreen();this.map.setZoom(this.map.getZoom() + 0.5);}}},// 测距drawRule() {if (!this.ruleState) {const ruler = new AMap.RangingTool(this.map, {startMarkerOptions: {//可缺省icon: new AMap.Icon({size: new AMap.Size(19, 31), //图标大小imageSize: new AMap.Size(19, 31),image: "https://webapi.amap.com/theme/v1.3/markers/b/start.png",}),},endMarkerOptions: {//可缺省icon: new AMap.Icon({size: new AMap.Size(19, 31), //图标大小imageSize: new AMap.Size(19, 31),image: "https://webapi.amap.com/theme/v1.3/markers/b/end.png",}),offset: new AMap.Pixel(-9, -31),},midMarkerOptions: {//可缺省icon: new AMap.Icon({size: new AMap.Size(19, 31), //图标大小imageSize: new AMap.Size(19, 31),image: "https://webapi.amap.com/theme/v1.3/markers/b/mid.png",}),offset: new AMap.Pixel(-9, -31),},lineOptions: {//可缺省strokeStyle: "solid",strokeColor: "#FF33FF",strokeOpacity: 1,strokeWeight: 2,},//同 RangingTool 的 自定义 设置，缺省为默认样式});this.ruler = ruler;this.ruleState = true;ruler.turnOn();} else {this.ruleState = false;this.ruler.turnOff();}},updateElement() {this.$EventBus.$on("updateElement",({ mapType, dataName, updateConfigs }) => {updateConfigs.forEach(({ id, config }) => {if (mapType === "Polyline") {const data = this.layer[dataName].find((el) => el.id === id);data.setOptions(config);}});});},// 在地图上添加addElement() {this.$EventBus.$on("addElement", (obj) => {const cloneDeepObj = cloneDeep(obj);const { mapType, dataName, config = {} } = obj;if (obj.mapType) {for (let i = 0; i < obj.elementLocaton.length; i++) {let data = null;if (mapType === "Polygon") {data = new AMap.Polygon({path: obj.elementLocaton[i],// 线条颜色，使用16进制颜色代码赋值。默认值为#006600strokeColor: obj.elementPathColor,// 轮廓线宽度strokeWeight: 1,// 多边形填充颜色，使用16进制颜色代码赋值，如：#FFAA00,根据设备或区域自行设置fillColor: obj.elementPathColor,// 多边形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9fillOpacity: 0.5,// 轮廓线透明度，取值范围 [0,1] ，0表示完全透明，1表示不透明。默认为0.9strokeOpacity: 0.5,...config,});} else if (mapType === "Polyline") {data = new window.AMap.Polyline({path: obj.elementLocaton[i],// 线条颜色，使用16进制颜色代码赋值。默认值为#006600strokeColor: obj.elementPathColor,// 轮廓线宽度strokeWeight: 1,// 多边形填充颜色，使用16进制颜色代码赋值，如：#FFAA00,根据设备或区域自行设置fillColor: obj.elementPathColor,// 多边形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9fillOpacity: 0.5,// 轮廓线透明度，取值范围 [0,1] ，0表示完全透明，1表示不透明。默认为0.9strokeOpacity: 0.5,...config,});data.id = obj.id;data.on("click", () => {obj.onClick && obj.onClick();});} else if (mapType === "Marker") {// console.log('map obj.elementLocaton', obj.elementLocaton[i])data = new AMap.Marker({// 点标记位置position: obj.elementLocaton[i],// 点标记图片icon: new AMap.Icon({// 图标尺寸imageOffset: new AMap.Pixel(6, 16),// 图标的取图地址,可用本地图片，可用网络图片image: obj.image,// 图标所用图片大小imageSize: new AMap.Size(20, 20),}),...config,});} else if (mapType === "Text") {data = new AMap.Text({// 点标记位置offset: new AMap.Pixel(0, 0),position:typeof cloneDeepObj.elementLocaton[0][0] === "number"? cloneDeepObj.elementLocaton[0]: cloneDeepObj.elementLocaton[0][0],zIndex: 16,...config,});}if (this.$refs[obj.refName]) {AMap.event.addListener(data, "click", async () => {console.log("--> data", data);if (obj.onClick) {this.infoWindow = new AMap.InfoWindow({content: this.$refs[obj.refName].$el,isCustome: true,offset: new AMap.Pixel(-4, -36),});const res = await obj.onClick(obj.id);this.dialogData = res;this.infoWindow.open(this.map,mapType === "Marker"? data.getPosition(): obj.elementLocaton[0][0]);}});}if (!this.layer[dataName]) {this.layer[dataName] = [];}if (data) {this.layer[dataName].push(data);this.layer[dataName] && this.map.add(this.layer[dataName]);}// 添加点}}});},// 从地图上删除deleteElement() {this.$EventBus.$on("deleteElement", (dataName) => {this.infoWindow && this.infoWindow.close(this.map);if (this.layer[dataName] && this.layer[dataName].length) {this.map.remove(this.layer[dataName]);this.layer[dataName].splice(0);}});},initPatrolSet() {this.$EventBus.$on("initPatrolSet", async ({ paths, users }) => {this.toggleFullScreen();// this.allFullScreenthis.initPathCallback = () => {return new Promise((resolve, reject) => {this.moveIdx = 0;if (!this.layer.markers) {this.layer.markers = [];}if (!this.layer.passedPolylines) {this.layer.passedPolylines = [];}if (!this.layer.polyline) {this.layer.polyline = [];}this.map.remove(this.layer.markers);this.map.remove(this.layer.passedPolylines);this.map.remove(this.layer.polyline);this.layer.markers.splice(0);this.layer.passedPolylines.splice(0);this.layer.polyline.splice(0);this.isPlay = false;this.resumeMove();this.$nextTick(() => {this.initMapPath(paths, users);resolve();});});};await this.initPathCallback();});},initMapPath(paths, users) {paths.forEach(({ id, path, timestamps }) => {const initPath = cloneDeep(path);const marker = new AMap.Marker({map: this.map,position: path[0],offset: new AMap.Pixel(-10, -13),icon: new AMap.Icon({size: new AMap.Size(25, 25), //图标大小imageSize: new AMap.Size(25, 25),image: require("@/assets/img/map-icons/user-online.png"),}),autoRotation: false,label: {content: users.find((item) => item.id === id).name,direction: "top",},});// 绘制轨迹const polyline = new AMap.Polyline({map: this.map,path,showDir: true,strokeColor: "#28F", //线颜色// strokeOpacity: 1,     //线透明度strokeWeight: 10, //线宽// strokeStyle: "solid"  //线样式});marker.on("moveend", (e) => {});marker.on("moving", (e) => {// 脏数据太多了passedPolyline.setPath(e.passedPath);});const passedPolyline = new AMap.Polyline({map: this.map,// path: lineArr,strokeColor: "#AF5", //线颜色// strokeOpacity: 1,     //线透明度strokeWeight: 6, //线宽// strokeStyle: "solid"  //线样式});this.moveConfig.push({// 开始动画start: () => {marker.moveAlong(path, 100 * this.times);},// 继续动画resume: () => {marker.resumeMove();},// 暂停动画pause: () => {marker.pauseMove();},});this.layer.polyline.push(polyline);this.layer.passedPolylines.push(passedPolyline);this.layer.markers.push(marker);if (!this.layer.markers) {}});},startMove() {this.moveConfig.forEach(({ start }) => {start();});},resumeMove() {this.moveConfig.forEach(({ resume }) => {resume();});},stopMove() {this.moveConfig.forEach(({ pause }) => {pause();});},// 开始、暂停、继续等操作navgControl(action) {if (action === "start") {if (this.timesChanged) {this.startMove();this.startMove.end = true;this.timesChanged = false;}if (!this.startMove.end) {this.startMove();this.startMove.end = true;} else {this.timesChanged = false;this.resumeMove();}} else {this.stopMove();}},openSlider() {this.isOnSlider = true;},closeSlider() {this.isOnSlider = false;},// 修改倍速changeSpeed(times) {this.isTimesChoose = false;this.times = times;this.timesChanged = true;this.startMove.end = false;this.isPlay = false;this.stopMove();},sliderChange(val) {let newVal = typeof newVal === "number" ? val : this.sliderVal;let num = parseInt((newVal / 1000) * this.pathList.length);let decimal =String((newVal / 100) * this.pathList.length).split(".")[1] || 0;this.navgtr.moveToPoint(num, Number("0." + decimal));this.pathSimplifierIns.renderLater();},clearMap() {Object.keys(this.layer).forEach((key) => {this.map.remove(this.layer[key]);Array.isArray(this.layer[key]) && this.layer[key].splice(0);});this.infoWindow && this.infoWindow.close(this.map);},/*** use GaoDe api to get current city mail code* @param AMap  the GaoDe api AMap class* @returns {Promise<result.adcode>} the mail code of the current city*/getCity(AMap) {return new Promise(function(resolve, reject) {AMap.plugin("AMap.CitySearch", function() {const citySearch = new AMap.CitySearch();citySearch.getLocalCity(function(status, result) {if (status === "complete" && result.info === "OK") {// 查询成功，result即为当前所在城市信息resolve(result.adcode);} else {reject(status);}});});});},/*** get the current weather information* @param AMap the GaoDe api AMap class* @param mailCode the mail code location to search the weather* @returns {Promise<data>} the weather data of the given mail code location*/getWeather(AMap, mailCode) {return new Promise(function(resolve, reject) {//加载天气查询插件AMap.plugin("AMap.Weather", function() {//创建天气查询实例const weather = new AMap.Weather();//执行实时天气信息查询weather.getForecast(mailCode, function(err, data) {if (!err) {resolve(data);} else {console.log(err);reject(err);}});});});},async initWeather(AMap) {//get city main code for get weatherconst cityMailCode = await this.getCity(AMap);//get weather data base on the mail codeconst weatherData = await this.getWeather(AMap, cityMailCode);this.$store.commit("setWeatherData", weatherData);},},watch: {sliderVal(newVal) {if (!this.isOnSlider) {return false;}this.sliderChange(newVal);},mode() {this.clearMap();},$route() {this.clearMap();this.configSubPipeline = {};},},beforeDestroy() {this.$EventBus.$off("addElement");this.$EventBus.$off("updateElement");this.$EventBus.$off("deleteElement");this.$EventBus.$off("initPatrolSet");this.$EventBus.$off("clear-map");this.map && this.map.destroy();this.navgtr = null;},
};
</script><style scoped>
#map-container {position: relative;color: #2c3e50;width: 100%;height: 100%;
}
.menu {position: absolute;z-index: 5;
}
.menu button {-webkit-appearance: none;outline: none;border: none;font-size: 12px;cursor: pointer;line-height: 1;padding: 6px 10px;/* border-radius: 3px; */margin-left: 6px;-webkit-appearance: none;background: linear-gradient(0deg, #07368f, #002a78, #07368f);border: 1px solid rgba(45, 122, 238, 0.45);color: #1ed2ff;box-shadow: 0 0 2px 1px #1d55c5 inset;
}
.br {right: 0;bottom: 0;
}
.tr {right: 0;top: 0;
}
.el-slider__button-wrapper {transition: all 0.2s linear;top: -5px;
}
.el-slider__runway {background-color: rgba(255, 255, 255, 0.5);
}
.color-tag li {display: inline-block;border-radius: 4px;width: 100px;height: 36px;line-height: 36px;text-align: center;background-color: #fff;cursor: pointer;margin-right: 2px;
}
.color-tag li.color-org {background-color: #ff8533;color: #fff;
}
.color-tag li.color-green {background-color: #46c51a;color: #fff;
}
.map-control {position: absolute;bottom: 0;width: 65%;left: 0;z-index: 200;height: 50px;line-height: 50px;border-radius: 2px;color: #1ed2ff;background-image: linear-gradient(to top, rgba(1, 63, 116, 0.7), transparent);padding: 0 10px;
}
.map-slider {display: inline-block;width: 45%;margin-left: 15px;position: relative;top: 14px;
}
.passed-time {position: relative;top: 2px;/*display: inline-block;*/margin-left: 15px;font-size: 12px;
}
.map-times {display: inline-block;margin-left: 15px;
}
.map-times .times-show {padding: 0 4px;line-height: 18px;font-size: 12px;border: 1px solid #1ed2ff;border-radius: 4px;cursor: pointer;
}
.map-times .choose-box {position: absolute;top: -60px;height: 162px;transition: all 0.5s linear;
}
.map-times ul {background: rgba(0, 0, 0, 0.7);padding: 4px 0;width: 70px;text-align: center;border-radius: 3px;
}
.map-times li {height: 18px;line-height: 18px;cursor: pointer;font-size: 12px;
}
.map-times li.active {color: #1c99fd;
}
.map-times li:hover {font-size: 14px;
}
/*>>> .amap-info-content {*/
/*  padding: 0 18px 0 10px;*/
/*}*/
>>> .el-slider__runway {background-color: #909090;
}
>>> .el-slider__button {width: 10px;height: 10px;border: 2px solid #07368f;background-color: #1c99fd;
}
</style>