预警表格样式修改

src/components/item-d/item-d.vue

@@ -69,7 +69,7 @@ function initChart(chartData, total, color) {
 </script>
 <style scoped lang="less">
     .inner {
-  width: 90%;
+        width: 100%;
         margin: 0 auto;
         height: calc(100% - 40px);
     }

src/components/item-d/pieCharts.ts

@@ -3,8 +3,8 @@ export function screenPie(chartData, total, color) {
         title: {
             text: '总人数',
             subtext: total + '',
-            x: 'center',
-            y: '35%',
+            x: '38%',
+            y: '42%',
             textStyle: {
                 fontSize: 14,
                 color: '#ffffff',
@@ -27,7 +27,7 @@ export function screenPie(chartData, total, color) {
             borderColor: '#1b7ef2',
         },
         legend: {
-            left: '80%',
+            left: '74%',
             top: 'center',
             orient: 'vertical',
             icon: 'circle',
@@ -40,7 +40,8 @@ export function screenPie(chartData, total, color) {
         series: [
             {
                 type: 'pie',
-                radius: ['50%', '90%'],
+                radius: ['50%', '86%'],
+                center: ['42%', '55%'],
                 avoidLabelOverlap: false,
                 label: {
                     show: true,

src/components/secondaryScreen/screen-right/screenRightHooks.ts

@@ -13,7 +13,7 @@ export function sleepCharts() {
             textStyle: {
                 color: '#ffffff'
             },
-            left: '60%',
+            left: '55%',
         },
         color: ['#14B3F8', '#6D7BEB', '#5451DC'],
         xAxis: {

src/components/secondaryScreen/screen-right/threeR.vue

@@ -2,9 +2,20 @@
   <div>
     <public-title title="预警"/>
     <div class="inner-screen">
-      <a-table class="ant-table-striped" :dataSource="tableInfo.dataSource" :columns="tableInfo.columns"
+      <a-table
+          class="ant-table-striped"
+          :dataSource="tableInfo.dataSource"
+          :columns="tableInfo.columns"
           :pagination="tableInfo.pagination"
-               :rowClassName="(record, index) => (index % 2 === 1 ? 'table-default' : 'table-striped')"/>
+          :rowClassName="(record, index) => (index % 2 === 1 ? 'table-default' : 'table-striped')"
+      >
+        <template #address="{text}">
+          <div class="police-times">
+            <span class="police-text">{{ text }}</span>
+            <span class="police-icon"></span>
+          </div>
+        </template>
+      </a-table>
     </div>
   </div>
 </template>
@@ -13,15 +24,7 @@ import {ref} from 'vue';
 import PublicTitle from '/@/components/publicTitle.vue';
 
 const tableInfo = ref({
-  dataSource: [],
-  columns: [],
-  pagination: {
-    current: 1,
-    pageSize: 2,
-    total: 20
-  }
-})
-const dataSource = ref([
+  dataSource: [
     {
       key: '1',
       name: '胡彦斌',
@@ -40,9 +43,8 @@ const dataSource = ref([
       age: 42,
       address: '西湖区湖底公园1号',
     },
-]);
-
-const columns = ref([
+  ],
+  columns: [
     {
       title: '姓名',
       dataIndex: 'name',
@@ -60,8 +62,15 @@ const columns = ref([
       dataIndex: 'address',
       key: 'address',
       align: 'center',
+      slots: {customRender: 'address'}
     },
-]);
+  ],
+  pagination: {
+    current: 1,
+    pageSize: 2,
+    total: 2,
+  },
+});
 </script>
 <style scoped lang="less">
 .inner-screen {
@@ -69,6 +78,25 @@ const columns = ref([
   height: calc(100% - 40px);
   margin: 20px 0;
 
+  .police-times {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .police-text {
+      padding-right: 20px;
+    }
+
+    .police-icon {
+      display: inline-block;
+      width: 18px;
+      height: 18px;
+      background: url('/@/assets/images/terminal.png') no-repeat;
+      background-size: 100% 100%;
+      cursor: pointer;
+    }
+  }
+
   :deep(.ant-table-thead) {
     display: none !important;
   }
@@ -83,14 +111,13 @@ const columns = ref([
   }
 
   :deep(.ant-table-row:hover) {
-    background-color: transparent !important;
+    background-color: transparent;
     color: #ffffff;
   }
-
 }
 
 .ant-table-striped :deep(.table-striped) td {
-  background-color: #0A0A0C;
+  background-color: #0a0a0c;
   color: #ffffff;
 }
 
@@ -100,24 +127,49 @@ const columns = ref([
 
 // 分页
 :deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
-  background-color: #1F2935;
-  color: #8291A9;
+  background-color: #1f2935;
+  color: #8291a9;
   border: none;
 }
 
 :deep(.ant-pagination-item) {
-  background-color: #1F2935;
+  background-color: #1f2935;
   color: #ffffff;
   border: none;
 }
 
 // 当前页选中的样式
 :deep(.ant-pagination-item-active) {
-  background-color: #0081FF;
+  background-color: #0081ff;
 }
 
-:deep(.ant-pagination-item-active a,.ant-pagination-item a) {
+:deep(.ant-pagination-item-active a) {
   color: #ffffff;
 }
 
+:deep(.ant-pagination-item a) {
+  color: #ffffff;
+}
+
+:deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
+  color: #ffffff;
+  background-color: #1f2935;
+}
+
+// 省略样式
+:deep(.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-ellipsis) {
+  color: #ffffff;
+}
+
+// 省略鼠标移入样式
+:deep(.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-link-icon) {
+  color: rgba(255, 255, 255, 0.4);
+}
+
+// 下一页
+:deep(.ant-pagination-next .ant-pagination-item-link) {
+  background-color: #1f2935;
+  color: #8291a9;
+  border: none;
+}
 </style>

src/components/secondaryScreen/screen-right/twoR.vue

@@ -49,7 +49,7 @@
 </script>
 <style scoped lang="less">
     .inner {
-        width: 90%;
+        width: 100%;
         margin: 0 auto;
         height: calc(100% - 40px);
     }