预警表格样式修改

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

@@ -1,76 +1,76 @@
 <template>
-  <div>
+    <div>
-    <public-title :title="props.title">
+        <public-title :title="props.title">
-      <template #right>
+            <template #right>
-        {{ props.tips }}
+                {{ props.tips }}
-      </template>
+            </template>
-    </public-title>
+        </public-title>
-    <div class="inner" ref="healthChart"></div>
+        <div class="inner" ref="healthChart"></div>
-  </div>
+    </div>
 </template>
 <script setup lang="ts">
-import PublicTitle from '/@/components/publicTitle.vue';
+    import PublicTitle from '/@/components/publicTitle.vue';
-import {useSpin} from '/@/components/body-d-left/bodyLeftHooks.ts';
+    import { useSpin } from '/@/components/body-d-left/bodyLeftHooks.ts';
-import {useHealth} from '/@/components/body-d-right/bodyRightHooks.ts';
+    import { useHealth } from '/@/components/body-d-right/bodyRightHooks.ts';
-import {screenPie} from '/@/components/item-d/pieCharts.ts';
+    import { screenPie } from '/@/components/item-d/pieCharts.ts';
-import {onMounted, ref, unref, watch} from 'vue';
+    import { onMounted, ref, unref, watch } from 'vue';
-import * as echarts from 'echarts';
+    import * as echarts from 'echarts';
 
-const props = defineProps({
+    const props = defineProps({
-  title: {
+        title: {
-    type: String,
+            type: String,
-    default: () => '',
+            default: () => '',
-  },
+        },
-  data: {
+        data: {
-    type: Array,
+            type: Array,
-    default: () => [],
+            default: () => [],
-  },
+        },
-  color: {
+        color: {
-    type: Array,
+            type: Array,
-    default: () => [],
+            default: () => [],
-  },
+        },
-  tips: {
+        tips: {
-    type: String,
+            type: String,
-    default: () => '',
+            default: () => '',
-  },
+        },
-});
+    });
-const healthChart = ref<HTMLElement>();
+    const healthChart = ref<HTMLElement>();
 
-const {setSpin, spinning} = useSpin();
+    const { setSpin, spinning } = useSpin();
 
-onMounted(() => {
+    onMounted(() => {
-  init();
+        init();
-});
+    });
 
-watch(
+    watch(
-    () => props.data,
+        () => props.data,
-    () => {
+        () => {
-      init();
+            init();
+        }
+    );
+
+    const { healthData, getValue, setHealth } = useHealth();
+
+    async function init() {
+        // setHealth(props.data);
+        // const yData = unref(getValue);
+        // let total = yData.reduce((accumulator, currentValue) => Number(accumulator) + Number(currentValue), 0);
+        initChart(props.data, 78, props.color);
     }
-);
 
-const {healthData, getValue, setHealth} = useHealth();
+    function initChart(chartData, total, color) {
-
+        let myChart = echarts.init(healthChart.value);
-async function init() {
+        let options = screenPie(chartData, total, color);
-  // setHealth(props.data);
+        myChart.setOption(options);
-  // const yData = unref(getValue);
+        window.addEventListener('resize', () => {
-  // let total = yData.reduce((accumulator, currentValue) => Number(accumulator) + Number(currentValue), 0);
+            myChart.resize();
-  initChart(props.data, 78, props.color);
+        });
-}
+    }
-
-function initChart(chartData, total, color) {
-  let myChart = echarts.init(healthChart.value);
-  let options = screenPie(chartData, total, color);
-  myChart.setOption(options);
-  window.addEventListener('resize', () => {
-    myChart.resize();
-  });
-}
 </script>
 <style scoped lang="less">
-.inner {
+    .inner {
-  width: 90%;
+        width: 100%;
-  margin: 0 auto;
+        margin: 0 auto;
-  height: calc(100% - 40px);
+        height: calc(100% - 40px);
-}
+    }
 </style>

src/components/item-d/pieCharts.ts

@@ -3,8 +3,8 @@ export function screenPie(chartData, total, color) {
         title: {
             text: '总人数',
             subtext: total + '',
-            x: 'center',
+            x: '38%',
-            y: '35%',
+            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/oneR.vue

@@ -1,64 +1,64 @@
 <template>
-  <div class="terminal-container">
+    <div class="terminal-container">
-    <public-title title="睡眠">
+        <public-title title="睡眠">
-      <template #right>平均睡眠时长：6小时30分</template>
+            <template #right>平均睡眠时长：6小时30分</template>
-    </public-title>
+        </public-title>
-    <div class="inner">
+        <div class="inner">
-      <div class="title">
+            <div class="title">
-        <span class="count">6.5h</span>
+                <span class="count">6.5h</span>
-        <span class="lightSleep">深睡2.4小时 浅睡4.1小时</span>
+                <span class="lightSleep">深睡2.4小时 浅睡4.1小时</span>
-      </div>
+            </div>
-      <div class="sleepChart" ref="sleepChart"></div>
+            <div class="sleepChart" ref="sleepChart"></div>
+        </div>
     </div>
-  </div>
 </template>
 <script setup lang="ts">
-import PublicTitle from '/@/components/publicTitle.vue';
+    import PublicTitle from '/@/components/publicTitle.vue';
-import * as echarts from 'echarts';
+    import * as echarts from 'echarts';
-import {ringOption, useHealth} from '/@/components/body-d-right/bodyRightHooks';
+    import { ringOption, useHealth } from '/@/components/body-d-right/bodyRightHooks';
-import {ref, onMounted, unref} from 'vue';
+    import { ref, onMounted, unref } from 'vue';
-import {sleepCharts} from '/@/components/secondaryScreen/screen-right/screenRightHooks';
+    import { sleepCharts } from '/@/components/secondaryScreen/screen-right/screenRightHooks';
 
-const sleepChart = ref<HTMLElement>();
+    const sleepChart = ref<HTMLElement>();
-onMounted(() => {
+    onMounted(() => {
-  init();
+        init();
-});
+    });
-const {healthData, getValue, setHealth} = useHealth();
+    const { healthData, getValue, setHealth } = useHealth();
 
-function init() {
+    function init() {
-  initChart();
+        initChart();
-}
+    }
 
-function initChart() {
+    function initChart() {
-  let myChart = echarts.init(sleepChart.value);
+        let myChart = echarts.init(sleepChart.value);
-  let options = sleepCharts();
+        let options = sleepCharts();
-  myChart.setOption(options);
+        myChart.setOption(options);
-  window.addEventListener('resize', () => {
+        window.addEventListener('resize', () => {
-    myChart.resize();
+            myChart.resize();
-  });
+        });
-}
+    }
 </script>
 <style scoped lang="less">
-.inner {
+    .inner {
-  height: calc(100% - 40px);
+        height: calc(100% - 40px);
 
-  .title {
+        .title {
-    color: #cfcfcf;
+            color: #cfcfcf;
-    text-align: left;
+            text-align: left;
-    padding: 1% 6%;
+            padding: 1% 6%;
 
-    .count {
+            .count {
-      font-size: 28px;
+                font-size: 28px;
-      font-weight: bold;
+                font-weight: bold;
+            }
+
+            .lightSleep {
+                padding-left: 2%;
+            }
+        }
+
+        .sleepChart {
+            height: 80%;
+        }
     }
-
-    .lightSleep {
-      padding-left: 2%;
-    }
-  }
-
-  .sleepChart {
-    height: 80%;
-  }
-}
 </style>

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
-               :pagination="tableInfo.pagination"
+          class="ant-table-striped"
-               :rowClassName="(record, index) => (index % 2 === 1 ? 'table-default' : 'table-striped')"/>
+          :dataSource="tableInfo.dataSource"
+          :columns="tableInfo.columns"
+          :pagination="tableInfo.pagination"
+          :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,55 +24,53 @@ import {ref} from 'vue';
 import PublicTitle from '/@/components/publicTitle.vue';
 
 const tableInfo = ref({
-  dataSource: [],
+  dataSource: [
-  columns: [],
+    {
+      key: '1',
+      name: '胡彦斌',
+      age: 32,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '2',
+      name: '胡彦祖',
+      age: 42,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '3',
+      name: '胡彦祖',
+      age: 42,
+      address: '西湖区湖底公园1号',
+    },
+  ],
+  columns: [
+    {
+      title: '姓名',
+      dataIndex: 'name',
+      key: 'name',
+      align: 'center',
+    },
+    {
+      title: '年龄',
+      dataIndex: 'age',
+      key: 'age',
+      align: 'right',
+    },
+    {
+      title: '住址',
+      dataIndex: 'address',
+      key: 'address',
+      align: 'center',
+      slots: {customRender: 'address'}
+    },
+  ],
   pagination: {
     current: 1,
     pageSize: 2,
-    total: 20
+    total: 2,
-  }
-})
-const dataSource = ref([
-  {
-    key: '1',
-    name: '胡彦斌',
-    age: 32,
-    address: '西湖区湖底公园1号',
   },
-  {
+});
-    key: '2',
-    name: '胡彦祖',
-    age: 42,
-    address: '西湖区湖底公园1号',
-  },
-  {
-    key: '3',
-    name: '胡彦祖',
-    age: 42,
-    address: '西湖区湖底公园1号',
-  },
-]);
-
-const columns = ref([
-  {
-    title: '姓名',
-    dataIndex: 'name',
-    key: 'name',
-    align: 'center',
-  },
-  {
-    title: '年龄',
-    dataIndex: 'age',
-    key: 'age',
-    align: 'right',
-  },
-  {
-    title: '住址',
-    dataIndex: 'address',
-    key: 'address',
-    align: 'center',
-  },
-]);
 </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;
+  background-color: #1f2935;
-  color: #8291A9;
+  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);
     }

src/components/secondaryScreen/secondMap/secondMap.vue

@@ -56,4 +56,4 @@
             margin: 10px 0;
         }
     }
-</style>
+</style>