update 调整应急大屏样式·

src/assets/less/amap-item.less

@@ -1,20 +1,20 @@
 //高德信息弹窗
 .amap-info-contentContainer {
 	.amap-content-body {
-    background: #00152B;
+		background: var(--alarmContentBg);
-    border: 1px solid #129BFF;
+		border: 1px solid var(--alarmBorder);
 		
 		.amap-lib-infowindow {
-      background: #00152B;
+			background: var(--alarmContentBg);
 			
 			.amap-lib-infowindow-title {
-        color: #fff;
+				color: var(--antSelectFontColor);
-        border-bottom: 1px solid #129BFF;
+				border-bottom: 1px solid var(--alarmBorder);
 				padding: 4px 0;
 			}
 			
 			.amap-lib-infowindow-content {
-        color: #fff;
+				color: var(--antSelectFontColor);
 				padding: 4px 0;
 			}
 		}

src/assets/less/index.less

@@ -2,6 +2,11 @@
 @import "./themeType";
 @import "./public-title";
 
+html, body, #app {
+  min-width: 1300px;
+  overflow-x: auto;
+}
+
 .type-time {
   padding-top: 3%;
   font-size: 16px;
@@ -132,8 +137,7 @@
 }
 
 // 选中字体颜色
-.ant-select-selection-item {
+:deep(.ant-select-selection-item) {
-  //color: #1b7ef2 !important;
   color: var(--antSelectFontColor);
 }
 
@@ -198,14 +202,14 @@
   background-color: #f3f5ff;
 
   .police-con {
-    color: #000;
+    color: var(--tableFontColor);
     background-color: #f3f5ff;
   }
 
   .ant-modal-title {
     color: #576BAD !important;
     background: url('/@/assets/images/dialog-light.png') no-repeat;
-    background-size: 100%;
+    background-size: 100% 100%;
   }
 }
 
@@ -221,7 +225,7 @@
   .ant-modal-title {
     color: #ffffff !important;
     background: url('/@/assets/images/dialog.png') no-repeat;
-    background-size: 100%;
+    background-size: 100% 100%;
   }
 }
 

src/assets/less/public-title.less

@@ -4,12 +4,9 @@
   opacity: 1;
   border-top: 1px solid #6a707c;
   border-bottom: 1px solid #6a707c;
-    border-image: linear-gradient(
+  border-image: linear-gradient(90deg,
-        90deg,
   rgba(217.0000022649765, 231.00000143051147, 255, 0.5),
-        rgba(217.0000022649765, 231.00000143051147, 255, 0)
+  rgba(217.0000022649765, 231.00000143051147, 255, 0)) 1 1;
-    )
-    1 1;
   color: #ffffff;
 
   &:before {
@@ -28,6 +25,7 @@
     font-weight: normal;
   }
 }
+
 .public-title.light {
   background: url("/@/assets/images/title-background.png") no-repeat;
   background-size: 100% 100%;
@@ -37,6 +35,7 @@
 .server-item.light {
   color: #607DDB;
 }
+
 .server-item.dark {
 
   &:nth-child(odd) {
@@ -45,12 +44,25 @@
 }
 
 .right-top-item.light {
+  .fixed-width {
+    display: inline-flex;
+    width: 100px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  //名字和类型宽度100
   > span:nth-child(1) {
     color: #607DDB;
+    width: 100px;
   }
+
   > span:nth-child(2) {
     color: #F58584;
+    width: 100px;
   }
+
   > div {
     color: #607DDB;
   }
@@ -63,6 +75,7 @@
     background: url('/@/assets/images/positionNew.png') no-repeat;
   }
 }
+
 .right-top-item.dark {
   .fixed-width {
     display: inline-flex;
@@ -72,6 +85,14 @@
     overflow: hidden;
   }
 
+  > span:nth-child(1) {
+    width: 100px;
+  }
+
+  > span:nth-child(2) {
+    width: 100px;
+  }
+
   span {
     color: #ffffff;
     font-size: 16px;
@@ -90,6 +111,7 @@
   color: #576BAD;
   background: url('/@/assets/images/top-title-new.png') no-repeat;
 }
+
 .outer-title.dark {
   color: #ffffff;
   background: url('/@/assets/images/top-title.png') no-repeat;

src/assets/theme/theme.css

@@ -17,4 +17,7 @@
     --pageItemActiveBg: #0081ff;
     /*表单*/
     --formLabel: #1b7ef2;
+    /*地图弹窗*/
+    --alarmContentBg: #00152B;
+    --alarmBorder: #1b7ef2;
 }

src/assets/theme/themeList.ts

@@ -18,6 +18,9 @@ export const themeList = {
         pageItemActiveBg: '#0081ff',
         //form
         formLabel: '#1b7ef2',
+        //地图弹窗
+        alarmContentBg: '#00152B',
+        alarmBorder: '#1b7ef2',
     },
     light: {
         antSelectDropdownBg: '#fff',
@@ -37,6 +40,9 @@ export const themeList = {
         pageItemActiveBg: '#7092ff',
         //form
         formLabel: '#7092ff',
+        //地图弹窗
+        alarmContentBg: '#ced7f6',
+        alarmBorder: '#1b7ef2',
     },
 };
 

src/components/body-d-left/threeL.vue

@@ -13,7 +13,7 @@
             </div>
             <div class="physical-container">
                 <a-spin :spinning="spinning" class="spin"></a-spin>
-                <div class="RadarCharts"></div>
+                <div class="RadarCharts" ref="radarChartsRef"></div>
             </div>
         </div>
     </div>
@@ -78,8 +78,10 @@
         everyEmpty && initChart();
     }
 
+    const radarChartsRef = ref<HTMLElement>();
+
     function initChart() {
-        const myChart = echarts.init(document.querySelector('.RadarCharts'));
+        const myChart = echarts.init(radarChartsRef.value);
         let countList = radarList?.value.map((item) => item?.userCount);
         if (countList.length < 1) return;
         let max = Math.max(...countList);
@@ -105,7 +107,6 @@
         .physical-container {
             width: 96%;
             height: calc(100% - 35px);
-            //padding-top: 6%;
             display: flex;
             flex-wrap: wrap;
             align-content: space-around;

src/components/body-d-right/bodyRightHooks.ts

@@ -133,9 +133,9 @@ const ringTheme = {
         backgroundColor: 'rgba(50,50,50,0.7)',
         tooltip: {
             textStyle: {
-                color: '#fff',
+                color: '#768ddb',
             },
-            backgroundColor: '#607DDB',
+            backgroundColor: '#d5dcf8',
             borderColor: '#1b7ef2',
         },
         legend: {
@@ -144,7 +144,7 @@ const ringTheme = {
             },
         },
         seriesLabel: {
-            color: '#27386E',
+            color: '#fff',
         },
     },
 };
@@ -196,7 +196,7 @@ export function ringOption(chartData, total, theme) {
         series: [
             {
                 type: 'pie',
-                radius: ['50%', '74%'],
+                radius: ['50%', '80%'],
                 center: ['50%', '47%'],
                 avoidLabelOverlap: false,
                 label: {

src/components/body-d-right/oneR.vue

@@ -130,7 +130,7 @@
                 handlePolice(item);
             });
         } else {
-            message.warn('暂无定位信息');
+            message.warn('暂无经纬度信息！');
         }
     }
 

src/components/dialog/Dialog.vue

@@ -44,6 +44,7 @@
             display: flex;
             align-items: center;
             width: 100%;
+            min-height: 40px;
             height: 40px;
             background-size: 100% 100%;
             color: #ffffff !important;

src/components/secondaryScreen/secondMap/components/userInfoModal/userInfoModal.less

@@ -1,6 +1,5 @@
 .user-info-modal {
 	background-color: #00152b;
-  border: 1px solid #129bff;
 	padding: 14px;
 	position: relative;
 	

src/components/xianMap/xianMap.vue

@@ -573,8 +573,7 @@
             gap: 20px;
 
             .count-item {
-                //src/assets/images/footer-num.png
+                padding: 0 100px;
-                width: 340px;
                 height: 80px;
                 display: flex;
                 flex-direction: column;

src/main.ts

@@ -6,7 +6,7 @@ import router from './router';
 import('ant-design-vue/dist/antd.less');
 import registerGlobComp from './assets/ts/antd.ts';
 import directiveMethods from './assets/ts/directive';
-import { setupStore } from './store/index.ts';
+import { setupStore } from '/@/store';
 
 const app = createApp(App);
 // 注册自定义事件

src/views/components/phoneDialog/phoneDialog.vue

@@ -1,5 +1,5 @@
 <template>
-    <Dialog :openVis="visible" width="50%" :title="title" @close="closeDialog" :maskClosable="false">
+    <Dialog class="phone-dialog" :openVis="visible" width="50%" :title="title" @close="closeDialog" :maskClosable="false">
         <template #container>
             <div v-if="useForm" class="form-container">
                 <Form :model="formRecord" :label-width="100" v-bind="formItemLayout">
@@ -102,8 +102,16 @@
     });
 </script>
 <style scoped lang="less">
+    .phone-dialog {
+        overflow: auto;
+    }
+
     .form-container {
         margin: 10px 0;
+
+        :deep(.ant-form-item-label > label) {
+            color: var(--formLabel);
+        }
     }
 
     .table-container {

vite.config.ts

@@ -11,7 +11,7 @@ function pathResolve(dir: string) {
 
 const px2remOptions = {
     remUnit: 14,
-    rootValue: 19, //换算基数， 默认100 ,也就是1440px ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多少px了
+    rootValue: 17, //换算基数， 默认100 ,也就是1440px ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多少px了
     unitPrecision: 5, //允许REM单位增长到的十进制数字，其实就是精度控制
     // propWhiteList: [], // 默认值是一个空数组，这意味着禁用白名单并启用所有属性。
     // propBlackList: [], // 黑名单