Merge branch 'lifeline_develop_siping' of http://116.142.80.13:3000/sooka_onest/visu_lifeline into lifeline_develop_siping

src/components/supermap-2.5d.vue

@@ -1388,9 +1388,9 @@ export default {
     boxSelection(){
       let that=this;
       let layersAll = [];
-      that.checkedCities.forEach(url => {
-        if (!url) return;  // 如果没有 URL，跳过当前迭代
-        SuperMap3D.when.all(that.selectMapObj_3D(url), function (layers) {
+      that.checkedCities.forEach(urlList => {
+        if (!urlList.length) return;  // 如果没有 URL，跳过当前迭代  // 如果没有 URL，跳过当前迭代
+        SuperMap3D.when.all(that.selectMapObj_3D(urlList[0]), function (layers) {
           layersAll.push(layers)
         });
       });

src/views/SenEquipmentCenter.vue

@@ -1,34 +1,29 @@
 <!--设备中心-->
 <template>
 	<div class="visual-con hz_body">
-    <div class="con_left">
-      <div class="list_tit">企业设备分布</div>
-      <div class="company_fx" ref="echartsByCompany"></div>
-      <div class="company_fx_text">
-        <span v-for="item in commanyInfo">
-          {{item.name}}:{{item.value}}
-        </span>
-      </div>
-      <div class="list_tit">部门设备分布</div>
-      <div class="type_fx" ref="echartsByType"></div>
-      <div class="list_tit">设备在离线分析</div>
-      <div class="onoff_fx" ref="echartsByOnOff"></div>
-    </div>
+		<div class="con_left">
+			<div class="list_tit">企业设备分布</div>
+			<div class="company_fx" ref="echartsByCompany"></div>
+			<div class="company_fx_text">
+				<span v-for="item in commanyInfo">
+					{{item.name}}:{{item.value}}
+				</span>
+			</div>
+			<div class="list_tit">部门设备分布</div>
+			<div class="type_fx" ref="echartsByType"></div>
+			<div class="list_tit">设备在离线分析</div>
+			<div class="onoff_fx" ref="echartsByOnOff"></div>
+		</div>
 		<!--主体-->
 		<div class="con_right">
 			<div class="list_tit">设备列表</div>
-			<el-select v-model="listParams.brand" placeholder="请选择品牌" @change="brandHasChanged" clearable style="width:100%;margin-bottom: 10px;">
-				<el-option
-            v-for="dict in dict.type.sentinel_installation_method"
-						:key="dict.value"
-						:label="dict.label"
-						:value="dict.value">
+			<el-select v-model="listParams.brand" placeholder="请选择品牌" @change="brandHasChanged" clearable
+				style="width:100%;margin-bottom: 10px;">
+				<el-option v-for="dict in dict.type.sentinel_installation_method" :key="dict.value" :label="dict.label"
+					:value="dict.value">
 				</el-option>
 			</el-select>
-			<el-input
-					placeholder="请输入内容"
-					suffix-icon="el-icon-search"
-					v-model="listParams.deviceName">
+			<el-input placeholder="请输入内容" suffix-icon="el-icon-search" v-model="listParams.deviceName">
 			</el-input>
 			<dl class="sp_list">
 				<dt>
@@ -41,21 +36,13 @@
 						<span class="dt1">{{ idx + 1 }}</span>
 						<span class="dt2">{{ e.deviceName }}</span>
 						<span class="dt3">
-							<img
-								style="cursor: pointer;"
-								src="../assets/images/sentinel/hz_list_d.png"
-							/>
+							<img style="cursor: pointer;" src="../assets/images/sentinel/hz_list_d.png" />
 						</span>
 					</dd>
 				</div>
 			</dl>
-			<el-pagination
-					background
-          style="justify-content: space-between;display: flex;"
-					layout="prev, pager, next"
-					:current-page.sync="listParams.pageNum"
-					@current-change="pageNumHasChanged"
-					:total="deviceTotal">
+			<el-pagination background style="justify-content: space-between;display: flex;" layout="prev, pager, next"
+				:current-page.sync="listParams.pageNum" @current-change="pageNumHasChanged" :total="deviceTotal">
 			</el-pagination>
 		</div>
 	</div>
@@ -64,14 +51,16 @@
 <script>
 	import Cookies from 'js-cookie'
 	import supermap from '@/components/supermap-2.5d' //超图
-	import {getUserProfile} from "@/api/system/user";
+	import {
+		getUserProfile
+	} from "@/api/system/user";
 	import {
 		brandPageList,
 		selectByDeviceId,
 		selectDailyThreshold,
-    countByBrand,
-    countByDepartment,
-    countByTypeForStatus
+		countByBrand,
+		countByDepartment,
+		countByTypeForStatus
 	} from "@/api/sentinel"
 
 	import '../assets/styles/sb_body.css';
@@ -83,28 +72,29 @@
 	let echarts = require("echarts");
 
 	export default {
-		name:'MyChart',
+		name: 'MyChart',
 		components: {
 			supermap,
 		},
-    dicts:['sentinel_installation_method'],
-		metaInfo () {
+		dicts: ['sentinel_installation_method'],
+		metaInfo() {
 			return {
-				title:'四平市智慧哨兵监管平台',
-				meta:[{
-					charset: "utf-8"
-				},
+				title: '四平市智慧哨兵监管平台',
+				meta: [{
+						charset: "utf-8"
+					},
 					{
 						name: "viewport",
 						content: "width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-					}]
+					}
+				]
 			}
 		},
 		created() {
-      this.getListDeviceAll()
+			this.getListDeviceAll()
 		},
 		mounted() {
-      this.equipmentEcharts();
+			this.equipmentEcharts();
 			// 初始化地图数据
 			setTimeout(() => {
 				this.title = '四平市智慧哨兵监管平台'
@@ -113,225 +103,297 @@
 		data() {
 			return {
 				isVisible: false, // 初始时设置为false，不显示内容
-				input:'',
+				input: '',
 				input1: '',
-				title:'四平市智慧哨兵监管平台',
-				deviceList:[],       		 	// 设备列表
-				deviceListSearch:[],        	// 设备列表检索
-        		deviceTotal:0,
-				listParams:{
-					brand:'',
-					deviceName:'',
+				title: '四平市智慧哨兵监管平台',
+				deviceList: [], // 设备列表
+				deviceListSearch: [], // 设备列表检索
+				deviceTotal: 0,
+				listParams: {
+					brand: '',
+					deviceName: '',
 					pageNum: 1,
-        			pageSize: 10,
-				},								// 设备列表条件检索
+					pageSize: 10,
+				}, // 设备列表条件检索
 				options: [],
 				value: '',
-				isDetailVisible:false,          // 设备弹窗显隐flag
-				detailInfo:{},                  // 设备详情信息
+				isDetailVisible: false, // 设备弹窗显隐flag
+				detailInfo: {}, // 设备详情信息
 
-        commanyInfo:[],
+				commanyInfo: [],
 			}
 		},
 		methods: {
-      equipmentEcharts(){
-        countByBrand().then(res => {
-          const seriesData = []
-          for(let item of res.data){
-            seriesData.push({name:item.brandName,value:item.count})
-            this.commanyInfo.push({name:item.brandName,value:item.count})
-          }
-          const echartsByCompany = echarts.init(this.$refs.echartsByCompany);
-          let echartsByCompanyOption = {
-            series: [
-              {
-                type: 'pie',
-                radius: ['40%', '60%'],
-                avoidLabelOverlap: false,
-                padAngle: 10,
-                itemStyle: {
-                  borderRadius: 20
-                },
-                label: {
-                  show: false,
-                  position: 'center'
-                },
-                emphasis: {
-                  label: {
-                    show: true,
-                    fontSize: 14,
-                    fontWeight: 'bold',
-                    formatter: '{b}:{c} \n {d}%'
-                  }
-                },
-                labelLine: {
-                  show: false
-                },
-                color: ["rgb(131,249,103)", "#FBFE27", "#FE5050","#1DB7E5"],
-                data: seriesData
-              }
-            ]
-          };
-          echartsByCompany.setOption(echartsByCompanyOption);
-        })
-        countByDepartment().then(res => {
-          const seriesData = []
-          for(let item of res.data){
-            seriesData.push({name:item.departmentName,value:item.deviceCount})
-          }
-          const echartsByType = echarts.init(this.$refs.echartsByType);
-          let echartsByTypeOption = {
-            series: [
-              {
-                type: 'pie',
-                radius: [20, 70],
-                center: ['50%', '50%'],
-                roseType: 'area',
-                itemStyle: {
-                  borderRadius: 2
-                },
-                labelLine:{
-                  show:true,
-                  position:'outside',
-                  length:10,
-                  length2:10,
-                },
-                label: {
-                  show: true,
-                  normal: {
-                    textStyle: {
-                      color: '#fff'  // 改变标示文字的颜色
-                    }
-                  },
-                  formatter: '{b}:{c}'
-                },
-                color: ["#ffa518", "#ff5629","#60b49b","#f3d435","#343df5"],
-                data: seriesData
-              }
-            ]
-          };
-          echartsByType.setOption(echartsByTypeOption);
-        })
-        countByTypeForStatus().then(res => {
-          const echartsByOnOff = echarts.init(this.$refs.echartsByOnOff);
-          let product = ['product'];
-          let on = ['在线'];
-          let off = ['离线'];
-          for(let item of res.data){
-            product.push(item.deviceType);
-            on.push(item.onlineCount);
-            off.push(item.offlineCount);
-          }
-
-          let source = [product,on,off];
-          let echartsByOnOffOption = {
-            title: {
-              text: product[1],
-              textStyle: {
-                color: '#b2de82', // 文字颜色
-                fontSize: 20, // 字体大小
-                fontWeight: 'bold', // 字体粗细
-                fontFamily: 'Arial' // 字体家族
-              },
-              left: 'left' // 标题位置
-            },
-            tooltip: {
-              trigger: 'axis',
-              showContent: false
-            },
-            dataset: {
-              source: source
-            },
-            xAxis: { type: 'category',
-              axisLabel: {
-                color: '#b2de82'
-              }
-            },
-            yAxis: { gridIndex: 0 },
-            grid: { top: '55%' },
-            color: ["#28717d", "#629ab2"],
-            series: [
-              {
-                type: 'bar',
-                smooth: true,
-                seriesLayoutBy: 'row',
-                emphasis: { focus: 'series' }
-              },
-              {
-                type: 'bar',
-                smooth: true,
-                seriesLayoutBy: 'row',
-                emphasis: { focus: 'series' }
-              },
-              {
-                type: 'pie',
-                id: 'pie',
-                radius: '30%',
-                center: ['50%', '30%'],
-                emphasis: {
-                  focus: 'self'
-                },
-                label: {
-                  formatter: '{@地埋} ({d}%)'
-                },
-              }
-            ]
-          };
-          echartsByOnOff.on('updateAxisPointer', function (event) {
-            const xAxisInfo = event.axesInfo[0];
-            if (xAxisInfo) {
-              const dimension = xAxisInfo.value + 1;
-              echartsByOnOff.setOption({
-                title: {
-                  text: product[dimension]
-                },
-                series: {
-                  id: 'pie',
-                  label: {
-                    formatter: '{b}: {@[' + dimension + ']} ({d}%)'
-                  },
-                }
-              });
-            }
-          });
-          echartsByOnOff.setOption(echartsByOnOffOption);
-        })
-      },
-			closeDetail(){
+			equipmentEcharts() {
+				countByBrand().then(res => {
+					const seriesData = []
+					for (let item of res.data) {
+						seriesData.push({
+							name: item.brandName,
+							value: item.count
+						})
+						this.commanyInfo.push({
+							name: item.brandName,
+							value: item.count
+						})
+					}
+					const echartsByCompany = echarts.init(this.$refs.echartsByCompany);
+					let echartsByCompanyOption = {
+						series: [{
+							type: 'pie',
+							radius: ['40%', '70%'],
+							right: '25%',
+							avoidLabelOverlap: false,
+							padAngle: 10,
+							itemStyle: {
+								borderRadius: 20,
+								normal: {
+									color: function(params) {
+										var colorList = [{
+												c1: ' #fce5ca', //管理
+												c2: '#FF9D62'
+											},
+											{
+												c1: '#508DFF', //实践
+												c2: '#4558fe'
+											},
+											{
+												c1: '#66965b', //操作
+												c2: '#64e4a8'
+											},
+											{
+												c1: '#149ce4', //操作
+												c2: '#5ae4c6'
+											}
+										]
+										return new echarts.graphic.LinearGradient(1, 0, 0, 0,
+									[{ //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
+
+											offset: 0,
+											color: colorList[params.dataIndex].c1
+										}, {
+											offset: 1,
+											color: colorList[params.dataIndex].c2
+										}])
+										/*  return colorList[params.dataIndex]*/
+									}
+								}
+							},
+							label: {
+								show: false,
+								position: 'center'
+							},
+							emphasis: {
+								label: {
+									show: true,
+									fontSize: 14,
+									fontWeight: 'bold',
+									formatter: '{b}:{c} \n {d}%'
+								}
+							},
+							labelLine: {
+								show: false
+							},
+							color: ["rgb(131,249,103)", "#FBFE27", "#FE5050", "#1DB7E5"],
+							data: seriesData
+						}]
+					};
+					echartsByCompany.setOption(echartsByCompanyOption);
+				})
+				countByDepartment().then(res => {
+					const seriesData = []
+					for (let item of res.data) {
+						seriesData.push({
+							name: item.departmentName,
+							value: item.deviceCount
+						})
+					}
+					const echartsByType = echarts.init(this.$refs.echartsByType);
+					let echartsByTypeOption = {
+						series: [{
+							type: 'pie',
+							radius: [20, 70],
+							center: ['50%', '50%'],
+							roseType: 'area',
+							itemStyle: {
+								borderRadius: 2,
+								normal: {
+									color: function(params) {
+										var colorList = [{
+												c1: ' #fce5ca', //管理
+												c2: '#FF9D62'
+											},
+											{
+												c1: ' #508DFF', //实践
+												c2: '#26C5FE'
+											},
+											{
+												c1: '#63E587', //操作
+												c2: '#5FE2E4'
+											}
+										]
+										return new echarts.graphic.LinearGradient(1, 0, 0, 0,
+									[{ //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
+
+											offset: 0,
+											color: colorList[params.dataIndex].c1
+										}, {
+											offset: 1,
+											color: colorList[params.dataIndex].c2
+										}])
+										/*  return colorList[params.dataIndex]*/
+									}
+								}
+							},
+							labelLine: {
+								show: true,
+								position: 'outside',
+								length: 10,
+								length2: 10,
+							},
+							label: {
+								show: true,
+								normal: {
+									textStyle: {
+										color: '#fff' // 改变标示文字的颜色
+									}
+								},
+								formatter: '{b}:{c}'
+							},
+							color: ["#ffa518", "#ff5629", "#60b49b", "#f3d435", "#343df5"],
+							data: seriesData
+						}]
+					};
+					echartsByType.setOption(echartsByTypeOption);
+				})
+				countByTypeForStatus().then(res => {
+					const echartsByOnOff = echarts.init(this.$refs.echartsByOnOff);
+					let product = ['product'];
+					let on = ['在线'];
+					let off = ['离线'];
+					for (let item of res.data) {
+						product.push(item.deviceType);
+						on.push(item.onlineCount);
+						off.push(item.offlineCount);
+					}
+
+					let source = [product, on, off];
+					let echartsByOnOffOption = {
+						title: {
+							text: product[1],
+							textStyle: {
+								color: '#ffffff', // 文字颜色
+								fontSize: 20, // 字体大小
+								fontWeight: 'bold', // 字体粗细
+								fontFamily: 'Arial' // 字体家族
+							},
+							left: 'left' // 标题位置
+						},
+						tooltip: {
+							trigger: 'axis',
+							showContent: false
+						},
+						dataset: {
+							source: source
+						},
+						xAxis: {
+							type: 'category',
+							axisLabel: {
+								color: '#ffffff'
+							}
+						},
+						yAxis: {
+							gridIndex: 0
+						},
+						grid: {
+							top: '55%'
+						},
+						color: ["#38a1b1", "#30fff2"],
+						series: [{
+								type: 'bar',
+								smooth: true,
+								seriesLayoutBy: 'row',
+								emphasis: {
+									focus: 'series'
+								}
+							},
+							{
+								type: 'bar',
+								smooth: true,
+								seriesLayoutBy: 'row',
+								emphasis: {
+									focus: 'series'
+								}
+							},
+							{
+								type: 'pie',
+								id: 'pie',
+								radius: '30%',
+								center: ['50%', '30%'],
+								emphasis: {
+									focus: 'self'
+								},
+								label: {
+									formatter: '{@地埋} ({d}%)'
+								},
+							}
+						]
+					};
+					echartsByOnOff.on('updateAxisPointer', function(event) {
+						const xAxisInfo = event.axesInfo[0];
+						if (xAxisInfo) {
+							const dimension = xAxisInfo.value + 1;
+							echartsByOnOff.setOption({
+								title: {
+									text: product[dimension]
+								},
+								series: {
+									id: 'pie',
+									label: {
+										formatter: '{b}: {@[' + dimension + ']} ({d}%)'
+									},
+								}
+							});
+						}
+					});
+					echartsByOnOff.setOption(echartsByOnOffOption);
+				})
+			},
+			closeDetail() {
 				this.isDetailVisible = false
 				this.isVisible = false
 			},
 			dropLocation(lat, lng) {
-				this.$parent.$refs.supermap.dropLocation(lat*1, lng*1)
+				this.$parent.$refs.supermap.dropLocation(lat * 1, lng * 1)
 			},
-			pageNumHasChanged(e){
+			pageNumHasChanged(e) {
 				this.getListDeviceAll()
 			},
 			// 查询设备列表
-			getListDeviceAll(){
+			getListDeviceAll() {
 				brandPageList(this.listParams).then(res => {
 					this.deviceList = res.rows
 					this.deviceListSearch = res.rows
-          			this.deviceTotal = res.total
+					this.deviceTotal = res.total
 					let deviceMarkersList = []
 					// hz_qy
 					if (res.rows != null && res.rows.length > 0) {
 						for (let i = 0; i < res.rows.length; i++) {
-							console.log('设备信息',res.rows[i])
+							console.log('设备信息', res.rows[i])
 							let markersMap = {
-							lng: 124.59,
-							lat: 43.02,
-							icon: "hzqy",
-							bindPopupHtml: "",
-							click: "preview",
-							parameter: {
-								id:res.rows[i].id || '',
-							},
-							keepBindPopup: false,
-							isAggregation: false,
+								lng: 124.59,
+								lat: 43.02,
+								icon: "hzqy",
+								bindPopupHtml: "",
+								click: "preview",
+								parameter: {
+									id: res.rows[i].id || '',
+								},
+								keepBindPopup: false,
+								isAggregation: false,
 							};
-							markersMap.lng = res.rows[i].longitude*1;
-							markersMap.lat = res.rows[i].latitude*1;
+							markersMap.lng = res.rows[i].longitude * 1;
+							markersMap.lat = res.rows[i].latitude * 1;
 							markersMap.radius = res.rows[i].cameraRadius || '';
 							deviceMarkersList.push(markersMap);
 						}
@@ -347,19 +409,21 @@
 					}
 				})
 			},
-			preview(e){
-				selectByDeviceId({id:e.id}).then(res => {
+			preview(e) {
+				selectByDeviceId({
+					id: e.id
+				}).then(res => {
 					this.detailInfo = res.data
-					console.log('this.detailInfo',this.detailInfo)
+					console.log('this.detailInfo', this.detailInfo)
 					this.isDetailVisible = true
 				})
 			},
-			brandHasChanged(e){
+			brandHasChanged(e) {
 				this.getListDeviceAll()
 			},
 		},
-		watch:{
-			['listParams.deviceName'](){
+		watch: {
+			['listParams.deviceName']() {
 				this.getListDeviceAll()
 			}
 		}
@@ -373,42 +437,47 @@
 	}
 
 
-	.hz_body{
+	.hz_body {
 		position: relative;
 	}
-	i,b,u{
+
+	i,
+	b,
+	u {
 		font-style: normal;
 		text-decoration: none;
 	}
 
 
 
-	.qydw1{
+	.qydw1 {
 		position: absolute;
 		top: 60%;
 		left: 40%;
 		display: block;
-		width:54px ;
+		width: 54px;
 		height: 77px;
 	}
-	.qydw2{
+
+	.qydw2 {
 		position: absolute;
 		top: 50%;
 		left: 70%;
 		display: block;
-		width:54px ;
+		width: 54px;
 		height: 77px;
 	}
-	.qydw3{
+
+	.qydw3 {
 		position: absolute;
 		top: 40%;
 		left: 80%;
 		display: block;
-		width:54px ;
+		width: 54px;
 		height: 77px;
 	}
 
-	.tk_div{
+	.tk_div {
 		width: 21%;
 		height: 38%;
 		position: absolute;
@@ -418,13 +487,15 @@
 		display: flex;
 		flex-direction: row;
 	}
-	.tk_bor{
-		padding: 15px!important;
+
+	.tk_bor {
+		padding: 15px !important;
 		border: 3px solid #28727e;
 		box-shadow: 0px 0px 24px #28727e;
-		background: rgba(0,0,0,0.39);
+		background: rgba(0, 0, 0, 0.39);
 	}
-	.tk_bor h1{
+
+	.tk_bor h1 {
 		padding-left: 20px;
 		background: url("../assets/images/sentinel/hz_k.png") no-repeat left;
 		font-size: 18px;
@@ -433,7 +504,8 @@
 		height: 38px;
 		line-height: 38px;
 	}
-	.tk_bor h1 i{
+
+	.tk_bor h1 i {
 		display: inline-block;
 		float: right;
 		background: #3bad96;
@@ -445,17 +517,19 @@
 		position: relative;
 		border-radius: 4px;
 	}
-	.tk_bor h1 i::after{
+
+	.tk_bor h1 i::after {
 		display: block;
 		content: '';
 		border-bottom: 9px solid transparent;
 		border-right: 9px solid #3bad96;
 		border-top: 9px solid transparent;
 		position: absolute;
-		left:-8px;
-		top:8px;
+		left: -8px;
+		top: 8px;
 	}
-	.tk_bor p{
+
+	.tk_bor p {
 		padding-left: 20px;
 		background: url("../assets/images/sentinel/hz_k.png") no-repeat left;
 		background-size: 12px;
@@ -463,21 +537,25 @@
 		color: #fff;
 		line-height: 35px;
 	}
-	.tk_bor p a{
+
+	.tk_bor p a {
 		color: #6bf5f2;
 		text-underline-offset: 0.4em;
 		text-decoration: underline;
 	}
-	.tk_bor p a:hover{
+
+	.tk_bor p a:hover {
 		color: #6bf5f2;
 		text-underline-offset: 0.4em;
 		text-decoration: underline;
 		cursor: pointer;
 	}
-	.tk1{
+
+	.tk1 {
 		position: relative;
-		margin-right: 20px!important;
+		margin-right: 20px !important;
 	}
+
 	//  .tk1::after{
 	// 	display: block;
 	// 	content: '';
@@ -489,45 +567,47 @@
 	// 	left: 50%;
 	// 	transform: translateX(-50%);
 	//  }
-	#sbxqChart{
+	#sbxqChart {
 		width: 100%;
 		height: 91%;
 	}
-  //图表设备分析
-  .company_fx {
-    width: 80%;
-    height: 200px;
-  }
-  .company_fx_text{
-    width: 20%;
-    margin-left: 14rem;
-    top: 6rem;
-    position: inherit;
-    color: #a3d5da;
-  }
-
-  .type_fx {
-    width: 100%;
-    height: 200px;
-  }
-
-  .onoff_fx {
-    width: 100%;
-    height: 200px;
-  }
-
-  .sp_list .dt1{
-    width:52px !important;
-  }
-  .sp_list .dt2{
-    width:190px !important;
-  }
-  .sp_list .dt3{
-    width:40px !important;
-  }
 
+	//图表设备分析
+	.company_fx {
+		width: 100%;
+		height: 200px;
+	}
+
+	.company_fx_text {
+		width: 20%;
+		margin-left: 14rem !important;
+		top: 6rem;
+		position: inherit;
+		color: #a3d5da;
+	}
+
+	.type_fx {
+		width: 100%;
+		height: 200px;
+	}
+
+	.onoff_fx {
+		width: 100%;
+		height: 200px;
+	}
 
+	.sp_list .dt1 {
+		width: 52px !important;
+	}
+
+	.sp_list .dt2 {
+		width: 190px !important;
+	}
+
+	.sp_list .dt3 {
+		width: 40px !important;
+	}
 </style>
 <style rel="stylesheet/scss" lang="scss" scoped>
 	@import '@/assets/styles/base.scss';
-</style>
+</style>