feat:对接工单模块接口

src/api/home.js

@@ -16,3 +16,12 @@ export function getVideoListApi(data) {
     params: data
   })
 }
+
+// 刷新播放地址
+export function postRefreshApi(data) {
+  return request({
+    url: '/api/video/refresh',
+    method: 'POST',
+    data: data
+  })
+}

src/api/request.js

@@ -96,6 +96,8 @@ const instance = axios.create({
   baseURL: 'http://36.138.38.16:8001/fjtcc-api',
   timeout: 100000,
   headers: {
+    Authorization:
+      'eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImE1OWFmNWYwLTU3OWItNDJkNy1hZDJhLTY0Y2JlODA5ZWI1NiJ9.BTxvu6jUWbN0qONWf5K6VzXopE8T8qXzKuX-mij21VJT4U0LdgnqToyqeNDQ2OyJ6cvpdJBzQ9mEEb-dnwrTpQ',
     'Content-Type': 'application/json;charset=UTF-8'
   }
 })
@@ -106,7 +108,7 @@ const instance = axios.create({
 instance.interceptors.request.use(
   (config) => {
     if (config.data && config.headers['Content-Type'] === 'application/json";charset=UTF-8')
-      config.data = qs.stringify(config.data)
+      config.data = config.data
     return config
   },
   (error) => {

src/api/workOrder.js

@@ -0,0 +1,49 @@
+import request from './request'
+
+// 最新工单
+export function getListApi() {
+  return request({
+    url: '/api/largeScreen/workorder/list',
+    method: 'get'
+  })
+}
+
+// 统计
+export function getTotalApi() {
+  return request({
+    url: '/api/largeScreen/workorder/total',
+    method: 'get'
+  })
+}
+
+// 工单总数(折线图)
+export function getLineChartApi() {
+  return request({
+    url: '/api/largeScreen/workorder/lineChart',
+    method: 'get'
+  })
+}
+
+// 工单完成比例
+export function getCompleteRateApi() {
+  return request({
+    url: '/api/largeScreen/workorder/completeRate',
+    method: 'get'
+  })
+}
+
+// 工单景区占比
+export function getSpotRateApi() {
+  return request({
+    url: '/api/largeScreen/workorder/spotRate',
+    method: 'get'
+  })
+}
+
+// 工单类型占比
+export function getTypeRateApi() {
+  return request({
+    url: '/api/largeScreen/workorder/typeRate',
+    method: 'get'
+  })
+}

src/assets/fonts/index.css

@@ -0,0 +1,13 @@
+@font-face {
+    font-family: "MicrosoftYaHei";
+    src: url("./MicrosoftYaHei.ttf");
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "MicrosoftYaHeiBold";
+    src: url("./MicrosoftYaHeiBold.ttf");
+    font-weight: normal;
+    font-style: normal;
+}

src/components/CoreVideo/index.vue

@@ -33,15 +33,15 @@
 <script setup>
   import primary from '@/assets/images/item-primary.png'
   import error from '@/assets/images/item-error.png'
-  import { getVideoListApi } from '@/api/home'
+  import { getVideoListApi, postRefreshApi } from '@/api/home'
   import Hls from 'hls.js'
 
-  let list = ref(2)
+  let list = ref([])
 
   const getRefs = (el) => {
     if (el) {
       const hls = new Hls()
-      hls.loadSource('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8')
+      hls.loadSource('http://36.138.38.16:6106/live/042f4987808b444aa96c1e8bc6e3ad2a/hls.m3u8')
       hls.attachMedia(el)
       hls.on(Hls.Events.MANIFEST_PARSED, () => {
         el.play()
@@ -52,6 +52,7 @@
     let res = await getVideoListApi({
       businessVideoDisplayPosition: ''
     })
+    list.value = res.data
   }
   onMounted(() => {
     getVideoList()

src/components/Header/index.vue

@@ -12,7 +12,7 @@
       >
         {{ item.name }}
       </li>
-      <el-dropdown v-if="navLeft.length > 3" trigger="click" @command="handleCommand">
+      <!-- <el-dropdown v-if="navLeft.length > 3" trigger="click" @command="handleCommand">
         <li
           class="nav-left-item"
           :style="{
@@ -29,7 +29,7 @@
             </el-dropdown-item>
           </el-dropdown-menu>
         </template>
-      </el-dropdown>
+      </el-dropdown> -->
     </ul>
     <div class="title">
       <span>{{ title }}</span>
@@ -280,6 +280,7 @@
       & > span {
         font-size: vw(48);
         font-weight: 800;
+        font-family: 'MicrosoftYaHeiBold';
         color: transparent;
         letter-spacing: vw(10);
         -webkit-background-clip: text;

src/hooks/socket.js

@@ -18,7 +18,8 @@ export function useWebSocket(url) {
       sendMessage(
         JSON.stringify({
           action: 'start',
-          type: 'index'
+          type: 'index',
+          scenitspot: 'index'
         })
       )
     }

src/main.js

@@ -4,6 +4,7 @@ import App from './App.vue'
 import router from './router'
 import '@/styles/reset.css'
 import '@/styles/common.scss'
+import '@/assets/fonts/index.css'
 
 const app = createApp(App)
 

src/styles/common.scss

@@ -34,6 +34,9 @@
 .mr-8 {
   margin-right: vw(8) !important;
 }
+.mt-8 {
+  margin-top: vw(8) !important;
+}
 .pt-10 {
   padding-top: vh(10) !important;
 }

src/views/home/components/box-1.vue

@@ -209,9 +209,9 @@
     )
   })
   const channelTotal = computed(() => {
-    return homeData.value?.userPortrait.channel.reduce(
+    return (
-      (total, current) => Number(current.count) + total,
+      homeData.value?.userPortrait?.channel ||
-      0
+      [].reduce((total, current) => Number(current.count) + total, 0)
     )
   })
 </script>

src/views/home/components/ticket.vue

@@ -41,30 +41,32 @@
           }
         },
         color: ['#F15A25', '#01FEFE', '#12B5FD'],
-        series: homeData.value?.userPortrait?.channel.map((item, index) => {
+        series:
-          return {
+          homeData.value?.userPortrait?.channel ||
-            name: item.name,
+          [].map((item, index) => {
-            type: 'pie',
+            return {
-            clockwise: false, //顺时加载
+              name: item.name,
-            radius: [`${x * (index + 1)}%`, `${y + index * 15}%`],
+              type: 'pie',
-            center: ['50%', '40%'],
+              clockwise: false, //顺时加载
-            label: { show: false },
+              radius: [`${x * (index + 1)}%`, `${y + index * 15}%`],
-            labelLine: { show: false },
+              center: ['50%', '40%'],
-            emphasis: { show: false },
+              label: { show: false },
-            data: [
+              labelLine: { show: false },
-              {
+              emphasis: { show: false },
-                value: parseFloat(item.value),
+              data: [
-                name: item.name
+                {
-              },
+                  value: parseFloat(item.value),
-              {
+                  name: item.name
-                value: 100,
+                },
-                itemStyle: {
+                {
-                  color: '#07439C'
+                  value: 100,
+                  itemStyle: {
+                    color: '#07439C'
+                  }
                 }
-              }
+              ]
-            ]
+            }
-          }
+          })
-        })
       })
     }
   )

src/views/workOrder/components/box-1.vue

@@ -1,132 +1,142 @@
 <template>
-	<div class="work-box-1">
+  <div class="work-box-1">
-		<!-- 最新工单 -->
+    <!-- 最新工单 -->
-		<div class="header">
+    <div class="header">
-		  <div class="title"> <span>最新工单</span> </div>
+      <div class="title"> <span>最新工单</span> </div>
-		</div>
+    </div>
-		<!-- 列表 -->
+    <!-- 列表 -->
-		<div class="list">
+    <div class="list">
-			<div class="li" v-for="item in 40">
+      <div class="li" v-for="(item, index) in list" :key="index">
-				<span class="label label1">普通</span>
+        <span :class="item.level">{{ item.level_text }}</span>
-				<p>这是一条工单信息这是一条工单信息这是一条工单信息这是一条工单信息这是一条</p>
+        <p>{{ item.title }}</p>
-				<span class="time">2024-12.16 23:58</span>
+        <span class="time">{{ item.time }}</span>
-			</div>
+      </div>
-		</div>
+    </div>
-	</div>
+  </div>
 </template>
 
-<script>
+<script setup>
+  import { getListApi } from '@/api/workOrder'
+  let list = ref([])
+  const getList = async () => {
+    let res = await getListApi()
+    list.value = res.data
+  }
+  onMounted(() => {
+    getList()
+  })
 </script>
 
 <style lang="scss" scoped>
-	.work-box-1{
+  .work-box-1 {
-		width:vw(815);
+    width: vw(815);
-		height:vh(975);
+    height: vh(950);
-		margin-top:vh(100);
+    margin-top: vh(120);
-		background: linear-gradient( 321deg, #0B2F64 0%, #062B57 100%);
+    background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
-		border-radius: 0px 0px 0px 0px;
+    position: relative;
-		position:relative;
+    z-index: 99;
-		z-index:99;
+    padding: 0 vw(20);
-		padding:0 vw(20);
+    .list {
-		.list{
+      /* 滚动条整体样式 */
-			/* 滚动条整体样式 */
+      &::-webkit-scrollbar {
-			&::-webkit-scrollbar {
+        width: vw(4); /* 滚动条的宽度 */
-			  width: vw(4); /* 滚动条的宽度 */
+      }
-			}
+      /* 滚动条轨道 */
-			/* 滚动条轨道 */
+      &::-webkit-scrollbar-track {
-			&::-webkit-scrollbar-track {
+        background: 'transparent'; /* 轨道的背景色 */
-			  background: 'transparent'; /* 轨道的背景色 */
+      }
-			}
+      /* 滚动条滑块 */
-			/* 滚动条滑块 */
+      &::-webkit-scrollbar-thumb {
-			&::-webkit-scrollbar-thumb {
+        background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
-			  background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
+        border-radius: 5px; /* 滑块的圆角 */
-			  border-radius: 5px; /* 滑块的圆角 */
+      }
-			}
+      height: vh(895);
-			height:vh(895);
+      overflow: auto;
-			overflow: auto;
+      .li:nth-child(odd) {
-			.li:nth-child(odd){
+        background: rgba(3, 78, 153, 0.3);
-				background: rgba(3,78,153,0.3);
+      }
-				
+      .li:nth-child(even) {
-			}
+        background-color: transparent;
-			.li:nth-child(even){
+      }
-				background-color: transparent;
+      .li {
-			}
+        display: flex;
-			.li{
+        align-items: center;
-				display: flex;
+        justify-content: flex-start;
-				align-items: center;
+        padding: vh(8) vh(10);
-				justify-content: flex-start;
+        .label {
-				padding:vh(8) vh(10);
+          width: vw(60);
-				.label{
+          height: vh(24);
-					width: vw(60);
+          line-height: vh(24);
-					height: vh(24);
+          color: #fff;
-					line-height:vh(24);
+          border-radius: vw(2);
-					color:#fff;
+          font-size: vw(14);
-					border-radius: 2px 2px 2px 2px;
+          text-align: center;
-					font-size: vw(14);
+          display: inline-block;
-					text-align: center;
+          margin-right: vw(10);
-					display: inline-block;
+        }
-					margin-right: vw(10);
+        .normal {
-				}
+          @extend .label;
-				.label1{
+          background: #2380fb;
-					background: #2380FB;
+        }
-				}
+        .warn {
-				.label2{
+          @extend .label;
-					background: #FEAE00;
+          background: #feae00;
-				}
+        }
-				.label3{
+        .important {
-					background: #D9011B;
+          @extend .label;
-				}
+          background: #d9011b;
-				.time{
+        }
-					font-weight: 400;
+        .time {
-					font-size: vw(12);
+          font-weight: 400;
-					color: rgba(255,255,255,0.6);
+          font-size: vw(12);
-					line-height: 14px;
+          color: rgba(255, 255, 255, 0.6);
-					text-align: left;
+          line-height: 14px;
-					font-style: normal;
+          text-align: left;
-					text-transform: none;
+          font-style: normal;
-					margin-left:vw(30);
+          text-transform: none;
-				}
+          margin-left: vw(30);
-				p{
+        }
-					font-weight: 400;
+        p {
-					font-size: vw(15);
+          font-weight: 400;
-					color: #FFFFFF;
+          font-size: vw(15);
-					text-align: left;
+          color: #ffffff;
-					font-style: normal;
+          text-align: left;
-					text-transform: none;
+          font-style: normal;
-					flex: 1;
+          text-transform: none;
-					 /*1. 先强制一行内显示文本*/
+          flex: 1;
-					white-space: nowrap;
+          /*1. 先强制一行内显示文本*/
-					  /*2. 超出的部分隐藏*/
+          white-space: nowrap;
-					overflow: hidden;
+          /*2. 超出的部分隐藏*/
-					  /*3. 文字用省略号替代超出的部分*/
+          overflow: hidden;
-					text-overflow: ellipsis;
+          /*3. 文字用省略号替代超出的部分*/
-				}
+          text-overflow: ellipsis;
-			}
+        }
-		}
+      }
-		.header {
+    }
-		  position: relative;
+    .header {
-		  margin:vh(20);
+      position: relative;
-		  .title {
+      margin: vh(20);
-		    margin: vh(5) auto;
+      .title {
-		    width: vw(468);
+        margin: vh(5) auto;
-		    height: vh(32);
+        width: vw(468);
-		    font-weight: 800;
+        height: vh(32);
-		    font-size: vw(16);
+        font-weight: 800;
-		    color: #fff;
+        font-size: vw(16);
-		    display: flex;
+        color: #fff;
-		    align-items: center;
+        display: flex;
-		    justify-content: center;
+        align-items: center;
-		    background-image: url('@/assets/images/title-4.png');
+        justify-content: center;
-		    background-size: 100% 100%;
+        background-image: url('@/assets/images/title-4.png');
-			span{
+        background-size: 100% 100%;
-				font-weight: 800;
+        span {
-				color: transparent;
+          font-weight: 800;
-				-webkit-background-clip: text;
+          color: transparent;
-				background-clip: text;
+          -webkit-background-clip: text;
-				-webkit-text-fill-color: transparent;
+          background-clip: text;
-				background-image: linear-gradient(to bottom, #ffffff 0%, #87c9ff 100%);
+          -webkit-text-fill-color: transparent;
-			}
+          background-image: linear-gradient(to bottom, #ffffff 0%, #87c9ff 100%);
-		  }
+        }
-	  }
+      }
-	}
+    }
+  }
 </style>

src/views/workOrder/components/box-2.vue

@@ -1,110 +1,119 @@
 <template>
   <div class="work-box-2">
-    <!-- 1 -->
+    <div class="box-1">
-    <div class="work-2-flex">
+      <Title1 title="今日工单" />
-      <div class="header">
-        <div class="title"> <span>今日工单</span> </div>
-      </div>
       <div class="hd-list">
-        <img class="h-icon" src="@/assets/images/work-icon-1.png" alt="" />
+        <img class="h-icon" src="@/assets/images/work-icon-1.png" />
         <div class="item item1">
-          今日工单总条数 <span class="color1"><countup endVal="45678" /></span>
+          今日工单总条数 <span class="color1"><countup :end-val="totalData.total" /></span>
         </div>
         <div class="item item1">
-          工单完成数 <span class="color1"><countup endVal="45678" /></span>
+          工单完成数 <span class="color1"><countup :end-val="totalData.complete" /></span>
         </div>
         <div class="item item3">
-          紧急工单数 <span class=""><countup endVal="45678" /></span>
+          紧急工单数 <span class=""><countup :end-val="totalData.warn" /></span>
         </div>
         <div class="item item2">
-          重要工单数 <span class=""><countup endVal="45678" /></span>
+          重要工单数 <span class=""><countup :end-val="totalData.important" /></span>
         </div>
         <div class="item item1">
-          普通工单数 <span class=""><countup endVal="45678" /></span>
+          普通工单数 <span class=""><countup :end-val="totalData.normal" /></span>
         </div>
       </div>
-      <div class="chart-box flex">
+      <div class="chart">
-        <div class="lt-chart">
+        <div class="chart__wrapper">
-          <div class="title-3"><span>异常告警占比</span></div>
+          <Title3 title="工单总数" />
-          <div class="box chart-p">
+          <!-- <div class="check-label">
-            <div class="check-label">
+            <span class="active">全部</span>
-              <span class="active">全部</span>
+            <span>已完成总数</span>
-              <span>已完成总数</span>
+          </div> -->
-            </div>
+          <Line :width="680" :height="320" :data="seriesData" :xAxisData="xAxisData" />
-            <v-chart class="line-chart" :option="optionLine" autoresize />
-          </div>
         </div>
-        <div class="lt-chart">
+        <div class="chart__wrapper">
-          <div class="title-3"><span>异常告警占比</span></div>
+          <Title3 title="工单类型完成比例" />
-          <div class="box-press">
+          <div class="progress">
-            <!-- <v-chart class="line-chart"  :option="optionLine" autoresize /> -->
+            <div class="progress-item">
-
+              <span class="progress-item__label">普通</span>
-            <div class="p-item">
+              <div class="progress-item__inner">
-              <span>普通</span>
-              <div class="box-1">
                 <el-progress
-                  :percentage="50"
+                  :percentage="completeRateData.normal * 100"
+                  :stroke-width="fitChartSize(24)"
                   stroke-linecap="square"
-                  :stroke-width="fitChartSize(15)"
                   color="#2380FB"
-                ></el-progress>
+                />
               </div>
             </div>
-            <div class="p-item">
+            <div class="progress-item">
-              <span>普通</span>
+              <span class="progress-item__label">紧急</span>
-              <div class="box-1">
+              <div class="progress-item__inner">
                 <el-progress
-                  :percentage="50"
+                  :percentage="completeRateData.warn * 100"
+                  :stroke-width="fitChartSize(24)"
                   stroke-linecap="square"
-                  :stroke-width="fitChartSize(15)"
                   color="#D9011B"
-                ></el-progress>
+                />
               </div>
             </div>
-            <div class="p-item">
+            <div class="progress-item">
-              <span>普通</span>
+              <span class="progress-item__label">紧急</span>
-              <div class="box-1">
+              <div class="progress-item__inner">
                 <el-progress
-                  :percentage="50"
+                  :percentage="completeRateData.important * 100"
+                  :stroke-width="fitChartSize(24)"
                   stroke-linecap="square"
-                  :stroke-width="fitChartSize(15)"
                   color="#FEAE00"
-                ></el-progress>
+                />
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-    <div class="work-2-flex">
+    <div class="box-2 mt-8">
-      <div class="header">
+      <Title1 title="不同景区工单占比" />
-        <div class="title"> <span>不同景区工单占比</span> </div>
+      <div class="chart">
-      </div>
+        <div class="chart__wrapper">
-      <div class="chart-box flex">
+          <Title3 title="景区工单占比" />
-        <div class="lt-chart">
+          <div class="chart__inner">
-          <div class="title-3"><span>异常告警占比</span></div>
+            <spotRate :dataList="spotRateData" :total="8888" />
-          <div class="box">
+            <ul class="chart__legend">
-            <v-chart class="chart" :option="option1" autoresize />
+              <li class="chart__legend-item" v-for="(item, index) in spotRateData" :key="index">
-            <!-- <v-chart class="line-chart"  :option="optionLine" autoresize /> -->
+                <p class="dot" :style="{ background: colors[index] }" />
+                <p class="name">{{ item.name }}</p>
+                <p class="value">{{ item.value }}%</p>
+              </li>
+            </ul>
           </div>
         </div>
-        <div class="lt-chart">
+        <div class="chart__wrapper">
-          <div class="title-3"><span>异常告警占比</span></div>
+          <Title3 title="景区工单占比" />
-          <div class="box">
+          <div class="chart__inner">
-            <div class="chart-1">
+            <spotRate :dataList="spotRateData" :total="8888" />
-              <v-chart class="chart" :option="option2" autoresize />
+            <ul class="chart__legend">
+              <li class="chart__legend-item" v-for="(item, index) in spotRateData" :key="index">
+                <p class="dot" :style="{ background: colors[index] }" />
+                <p class="name">{{ item.name }}</p>
+                <p class="value">{{ item.value }}%</p>
+              </li>
+            </ul>
+            <div class="alarm">
+              <Title2 title="异常点位告警排名" />
+              <ul class="alarm__wrapper">
+                <li class="alarm-item" v-for="(item, index) in 8" :key="index">
+                  <p
+                    class="alarm-item__rank"
+                    :class="{
+                      'alarm-item__rank--error': index == 0,
+                      'alarm-item__rank--warning': index == 1,
+                      'alarm-item__rank--primary': index == 2
+                    }"
+                  >
+                    {{ item }}
+                  </p>
+                  <p class="alarm-item__content">异常点位告警1号名称</p>
+                </li>
+              </ul>
             </div>
-            <div class="chart-des">
-              <div class="t-des">
-                <img class="h-icon" src="@/assets/images/work-icon-m-1.png" alt="" />
-                异常点位告警排名
-              </div>
-              <div class="t-item" v-for="item in 8">
-                <span class="bgColor1">1</span>
-                <p>异常点位告警1号名称</p>
-              </div>
-            </div>
-            <!-- <v-chart class="line-chart"  :option="optionLine" autoresize /> -->
           </div>
         </div>
       </div>
@@ -114,404 +123,57 @@
 
 <script setup>
   import countup from 'vue-countup-v3'
-  import * as echarts from 'echarts'
+  import spotRate from './spotRate.vue'
   import { fitChartSize } from '@/utils/dataUtil'
-  import Map from '@/components/Map/marker.vue'
+  import {
-  import VChart, { THEME_KEY } from 'vue-echarts'
+    getTotalApi,
-  import { ref, provide } from 'vue'
+    getLineChartApi,
+    getCompleteRateApi,
+    getSpotRateApi,
+    getTypeRateApi
+  } from '@/api/workOrder.js'
 
-  provide(THEME_KEY, 'dark')
+  const colors = ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA']
-  const customColor = ref('#2380FB')
+  let totalData = ref({
-  const option1 = ref({
+    total: 0,
-    backgroundColor: 'transparent',
+    complete: 0,
-    tooltip: {
+    urgent: 0,
-      trigger: 'item'
+    important: 0,
-    },
+    normal: 0
-    legend: {
-      type: 'scroll',
-      orient: 'vertical',
-      right: fitChartSize(10),
-      top: fitChartSize(70),
-      bottom: fitChartSize(20),
-      itemWidth: 5,
-      itemHeight: 5,
-      padding: [20, 10, 20, 10],
-      // itemGap:15,
-      show: true,
-      lineStyle: {
-        borderColor: '#fff',
-        width: 5
-      },
-      textStyle: {
-        color: '#fff',
-        fontSize: fitChartSize(16),
-        lineHeight: 16,
-        rich: {
-          d: {
-            width: '100%',
-            borderWidth: 0.5,
-            height: 5,
-            backgroundColor: '1'
-          },
-          a: {
-            width: fitChartSize(200),
-            align: 'left',
-            fontSize: fitChartSize(16)
-            // backgroundColor:'1'
-            // color:'1',
-            // borderColor:'#eee',
-            // borderWidth:2
-          }
-        }
-      },
-      formatter: (e) => {
-        let ratio = 0
-        let value = 0
-        if (option1.value.series[0].data.length > 0) {
-          option1.value.series[0].data.forEach((item) => {
-            if (e == item.name) {
-              ratio = ((item.value * 100) / 3799).toFixed(0)
-              value = item.value
-            }
-          })
-        }
-        // return `${e}    ${ratio}%
-        let arr = ['{a|' + e + '}', '{b|' + ratio + '%}']
-        return arr.join('')
-      },
-      itemStyle: {
-        // color:'#fff'
-      },
-      backgroundColor: 'rgba(0,77,136,0.6)'
-    },
-    series: [
-      {
-        name: 'Access From',
-        type: 'pie',
-        left: 0,
-        top: 40,
-        width: fitChartSize(350),
-        height: fitChartSize(350),
-        // width:200,
-        // height:200,
-        radius: ['40%', '50%'],
-        avoidLabelOverlap: false,
-        padAngle: 5,
-        itemStyle: {
-          borderRadius: 2
-        },
-        label: {
-          show: false,
-          position: 'center',
-          fontWeight: 'bold'
-          // formatter: function (o) {
-          //  let data = o.data.value
-          //   return `{value|${data}}` + '\n' + `{name|整改率}`
-          // },
-          // rich: {
-
-          //   value: {
-          //     color: '#fff',
-          //     fontSize: fitChartSize(24),
-          //     fontWeight: 'bold',
-          //     padding: [0, 0, 5, 0]
-          //   },
-          //   name: {
-          //     color: '#7894A8',
-          //     fontSize: fitChartSize(12)
-          //   }
-          // }
-        },
-        emphasis: {
-          label: {
-            show: true,
-            fontSize: fitChartSize(16),
-            fontWeight: 'bold',
-            color: '#fff',
-            fontWeight: 'bold',
-            formatter: function (o) {
-              let data = o.data.value
-              return `{value|${data}}` + '\n' + `{name|整改率}`
-            },
-            rich: {
-              value: {
-                color: '#fff',
-                fontSize: fitChartSize(24),
-                fontWeight: 'bold',
-                padding: [0, 0, 5, 0]
-              },
-              name: {
-                color: '#7894A8',
-                fontSize: fitChartSize(12)
-              }
-            }
-          }
-        },
-        labelLine: {
-          show: true
-        },
-        data: [
-          { value: 200, name: '异常状况1' },
-          { value: 500, name: '异常状况2' },
-          { value: 234, name: '异常状况3' },
-          { value: 135, name: '异常状况4' },
-          { value: 100, name: '异常状况5' },
-          { value: 777, name: '异常状况6' },
-          { value: 888, name: '其他' }
-        ]
-      }
-    ]
   })
-  const option2 = ref({
+  let completeRateData = ref({ important: 0, normal: 0, warn: 0 })
-    backgroundColor: 'transparent',
+  let seriesData = ref([])
-    tooltip: {
+  let xAxisData = ref([])
-      trigger: 'item'
+  let typeRateData = ref([])
-    },
+  let spotRateData = ref([])
-    legend: {
-      type: 'scroll',
-      orient: 'vertical',
-      right: fitChartSize(30),
-      top: fitChartSize(70),
-      bottom: fitChartSize(20),
-      itemWidth: 5,
-      itemHeight: 5,
-      padding: [20, 10, 20, 10],
-      // itemGap:15,
-      show: true,
-      lineStyle: {
-        borderColor: '#fff',
-        width: 5
-      },
-      textStyle: {
-        color: '#fff',
-        fontSize: fitChartSize(16),
-        lineHeight: 16,
-        rich: {
-          d: {
-            width: '100%',
-            borderWidth: 0.5,
-            height: 5,
-            backgroundColor: '1'
-          },
-          a: {
-            width: fitChartSize(100),
-            align: 'left',
-            fontSize: fitChartSize(16)
-            // backgroundColor:'1'
-            // color:'1',
-            // borderColor:'#eee',
-            // borderWidth:2
-          }
-        }
-      },
-      formatter: (e) => {
-        let ratio = 0
-        let value = 0
-        if (option1.value.series[0].data.length > 0) {
-          option1.value.series[0].data.forEach((item) => {
-            if (e == item.name) {
-              ratio = ((item.value * 100) / 3799).toFixed(0)
-              value = item.value
-            }
-          })
-        }
-        // return `${e}    ${ratio}%
-        let arr = ['{a|' + e + '}', '{b|' + ratio + '%}']
-        return arr.join('')
-      },
-      itemStyle: {
-        // color:'#fff'
-      },
-      backgroundColor: 'rgba(0,77,136,0.6)'
-    },
-    series: [
-      {
-        name: 'Access From',
-        type: 'pie',
-        left: fitChartSize(-65),
-        top: fitChartSize(40),
-        width: fitChartSize(350),
-        height: fitChartSize(350),
-        // width:200,
-        // height:200,
-        radius: ['40%', '50%'],
-        avoidLabelOverlap: false,
-        padAngle: 5,
-        itemStyle: {
-          borderRadius: 2
-        },
-        label: {
-          show: false,
-          position: 'center',
-          fontWeight: 'bold'
-          // formatter: function (o) {
-          //  let data = o.data.value
-          //   return `{value|${data}}` + '\n' + `{name|整改率}`
-          // },
-          // rich: {
 
-          //   value: {
+  const getTypeRate = async () => {
-          //     color: '#fff',
+    let res = await getTypeRateApi()
-          //     fontSize: fitChartSize(24),
+    typeRateData.value = res.data.data
-          //     fontWeight: 'bold',
+  }
-          //     padding: [0, 0, 5, 0]
+  const getSpotRate = async () => {
-          //   },
+    let res = await getSpotRateApi()
-          //   name: {
+    spotRateData.value = res.data.data
-          //     color: '#7894A8',
+  }
-          //     fontSize: fitChartSize(12)
+  const getCompleteRate = async () => {
-          //   }
+    let res = await getCompleteRateApi()
-          // }
+    completeRateData.value = res.data
-        },
+  }
-        emphasis: {
+  const getLineChart = async () => {
-          label: {
+    let res = await getLineChartApi()
-            show: true,
+    seriesData.value = res.data.series
-            fontSize: fitChartSize(16),
+    xAxisData.value = res.data.data
-            fontWeight: 'bold',
+  }
-            color: '#fff',
+  const getTotal = async () => {
-            fontWeight: 'bold',
+    let res = await getTotalApi()
-            formatter: function (o) {
+    totalData.value = res.data
-              let data = o.data.value
+  }
-              return `{value|${data}}` + '\n' + `{name|整改率}`
+  onMounted(() => {
-            },
+    getTotal()
-            rich: {
+    getLineChart()
-              value: {
+    getCompleteRate()
-                color: '#fff',
+    getTypeRate()
-                fontSize: fitChartSize(24),
+    getSpotRate()
-                fontWeight: 'bold',
-                padding: [0, 0, 5, 0]
-              },
-              name: {
-                color: '#7894A8',
-                fontSize: fitChartSize(12)
-              }
-            }
-          }
-        },
-        labelLine: {
-          show: true
-        },
-        data: [
-          { value: 200, name: '异常状况1' },
-          { value: 500, name: '异常状况2' },
-          { value: 234, name: '异常状况3' },
-          { value: 135, name: '异常状况4' },
-          { value: 100, name: '异常状况5' },
-          { value: 777, name: '异常状况6' },
-          { value: 888, name: '其他' }
-        ]
-      }
-    ]
-  })
-  const optionLine = ref({
-    backgroundColor: 'transparent',
-    height: '90%',
-    grid: {
-      top: '20',
-      bottom: '0',
-      left: '4%',
-      containLabel: true
-    },
-    xAxis: {
-      nameLocation: 'middle',
-      type: 'category',
-      boundaryGap: false,
-      axisLabel: {
-        fontSize: 10,
-        interval: 0, // 显示所有标签
-        rotate: 0 // 旋转标签45度
-      },
-      data: [
-        '10:00',
-        '10:00',
-        '10:00',
-        '10:00',
-        '10:00',
-        '10:00',
-        '10:00',
-        '10:00',
-        '10:00',
-        '10:00'
-      ],
-      axisTisk: {
-        show: true,
-        // 设置刻度长度
-        length: 1,
-        lineStyle: {
-          type: 'dashed', // 设置为虚线
-          width: 0
-        }
-      },
-      axisLine: {
-        lineStyle: {
-          color: '#0096FF' // 设置横线颜色
-        }
-      }
-    },
-    yAxis: {
-      type: 'value',
-      min: 0,
-      max: 7000,
-      interval: 1000,
-      axisLabel: {
-        fontSize: fitChartSize(12), // 设置Y轴刻度字体大小
-        color: '#eee'
-      },
-      splitLine: {
-        show: true,
-        lineStyle: {
-          type: 'dashed',
-          color: '#00D0FF'
-        }
-      }
-    },
-
-    series: [
-      {
-        data: [0, 1000, 3000, 3500, 4200, 2000, 6000, 800, 6500, 4500],
-        type: 'line',
-        smooth: true,
-        label: {
-          show: false //隐藏坐标点
-        },
-        itemStyle: {
-          color: 'transparent'
-        },
-        markLine: {
-          symbol: ['none', 'none'],
-          label: { show: false }
-        },
-        areaStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            {
-              offset: 0,
-              color: 'rgba(125, 231, 255, 0.1)'
-            },
-            {
-              offset: 1,
-              color: 'rgba(0, 157, 255, 0.1)'
-            }
-          ])
-        },
-
-        lineStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-            {
-              offset: 0,
-              color: '#7DE7FF'
-            },
-            {
-              offset: 0.5,
-              color: '#02F9FA'
-            },
-            {
-              offset: 1,
-              color: '#009DFF'
-            }
-          ]),
-          width: 2
-        }
-      }
-    ]
   })
 </script>
 
@@ -527,9 +189,7 @@
     font-size: vw(14) !important;
     color: #fff;
   }
-  .line-chart {
+
-    // margin-top:vh(20);
-  }
   .chart-p {
     position: relative;
     .check-label {
@@ -541,7 +201,6 @@
         padding: vw(5);
         background: linear-gradient(270deg, rgba(8, 41, 86, 0.16) 0%, #0b61b4 100%);
         border-radius: vw(50);
-        // border: 1px solid rgba(0,114,220,0.3);
         margin-left: vw(5);
         display: inline-block;
         font-weight: 400;
@@ -561,144 +220,44 @@
   }
   .work-box-2 {
     width: vw(1522);
-    height: vh(965);
+    margin-top: vh(120);
-    margin-top: vh(100);
     margin-left: vw(10);
     position: relative;
     z-index: 99;
-    .work-2-flex {
+    .box-1 {
+      height: vh(500);
       background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
-      height: vh(490);
+      .chart {
-      overflow: hidden;
-
-      .chart-box {
         display: flex;
         justify-content: space-between;
         padding: vw(20) vw(15);
 
-        .lt-chart {
+        &__wrapper {
           width: vw(740);
-          min-height: vw(336);
+          height: vh(370);
-          padding: vw(20);
+          padding: 0 vw(20);
           background-image: url('@/assets/images/bg-3.png');
           background-size: 100% 100%;
-          .box-press {
+          .progress {
             padding: vw(30);
             padding-top: vh(40);
-            .p-item {
+            &-item {
               display: flex;
               width: 100%;
               margin-top: vh(40);
               align-items: center;
-              span {
-                font-weight: bold;
-                font-size: vw(14);
-                color: #ffffff;
-                text-align: left;
-                font-style: normal;
-                text-transform: none;
-                margin-right: vw(10);
-              }
-              .box-1 {
-                flex: 1;
-              }
             }
-          }
+            &-item__label {
-          .box {
-            width: 100%;
-            height: vh(250);
-            display: flex;
-            margin-top: vh(30);
-            .chart-1 {
-              flex: 1;
-            }
-            .chart-des {
-              width: vw(224);
-              height: vh(312);
-              background: #0a4190;
-              .t-item:nth-child(odd) {
-                background: rgba(0, 150, 255, 0.3);
-              }
-              .t-item:nth-child(even) {
-                background-color: transparent;
-              }
-              .t-item {
-                display: flex;
-                padding: vh(10) vw(10);
-                span {
-                  width: vw(24);
-                  height: vh(16);
-                  text-align: center;
-                  display: inline-block;
-                  margin-right: vw(10);
-                  color: #fff;
-                  border-radius: 2px 2px 2px 2px;
-                }
-                p {
-                  font-weight: 400;
-                  font-size: vw(15);
-                  color: #ffffff;
-                  text-align: left;
-                  font-style: normal;
-                  text-transform: none;
-                  flex: 1;
-                  /*1. 先强制一行内显示文本*/
-                  white-space: nowrap;
-                  /*2. 超出的部分隐藏*/
-                  overflow: hidden;
-                  /*3. 文字用省略号替代超出的部分*/
-                  text-overflow: ellipsis;
-                }
-                .bgColor1 {
-                  background: #d9011b;
-                }
-                .bgColor2 {
-                  background: #feae00;
-                }
-                .bgColor3 {
-                  background: #2380fb;
-                }
-                .bgColor4 {
-                  background: #495c77;
-                }
-              }
-              .t-des {
-                background: rgba(0, 150, 255, 0.4);
-                padding: vw(10);
-                font-weight: 400;
-                font-size: vw(13);
-                color: #02f9fa;
-                display: flex;
-                text-align: left;
-                font-style: normal;
-                text-transform: none;
-                img {
-                  width: vw(16);
-                  height: vh(12);
-                  margin-right: vw(5);
-                }
-              }
-            }
-          }
-          .title-3 {
-            position: relative;
-            width: vw(344);
-            height: vh(12);
-            margin-top: vh(20);
-            background-image: url('@/assets/images/title-6.png');
-            background-size: 100% 100%;
-
-            & > span {
-              position: absolute;
-              bottom: vh(4);
-              left: vw(20);
-              font-size: vw(15);
               font-weight: bold;
-              background-image: linear-gradient(to bottom, #ffffff 0%, #0096ff 100%);
+              font-size: vw(14);
-              -webkit-background-clip: text;
+              color: #ffffff;
-              background-clip: text;
+              text-align: left;
-              -webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
+              font-style: normal;
-              color: transparent; /* 兼容其他浏览器 */
+              text-transform: none;
+              margin-right: vw(10);
+            }
+            &-item__inner {
+              flex: 1;
             }
           }
         }
@@ -752,30 +311,131 @@
           background-size: 100% 100%;
         }
       }
-      .header {
+    }
-        position: relative;
+    .box-2 {
-        margin: vh(20);
+      height: vh(434);
+      background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
 
-        .title {
+      .chart {
-          margin: vh(5) auto;
+        display: flex;
-          width: vw(468);
+        justify-content: space-between;
-          height: vh(32);
+        padding: vw(20) vw(15);
-          font-weight: 800;
+
-          font-size: vw(16);
+        &__wrapper {
-          color: #fff;
+          width: vw(740);
+          height: vh(370);
+          padding: 0 vw(20);
+          background-image: url('@/assets/images/bg-3.png');
+          background-size: 100% 100%;
+        }
+
+        &__inner {
+          display: flex;
+          align-items: center;
+        }
+
+        &__legend {
+          flex: 1;
+
+          &-item {
+            position: relative;
+            width: 100%;
+            height: vh(40);
+            display: flex;
+            align-items: center;
+            margin-bottom: vh(8);
+            background: linear-gradient(
+              90deg,
+              rgba(0, 150, 255, 0.34) 0%,
+              rgba(0, 150, 255, 0) 100%
+            );
+
+            &::before {
+              position: absolute;
+              content: '';
+              width: vw(4);
+              height: vh(40);
+              background-color: #0096ff;
+            }
+
+            .dot {
+              width: vw(4);
+              height: vw(4);
+              margin: 0 vw(16);
+            }
+
+            .name {
+              font-weight: 400;
+              font-size: vw(12);
+              color: #ffffff;
+              width: vw(130);
+            }
+
+            .value {
+              font-weight: bold;
+              font-size: vw(15);
+              color: #ffffff;
+            }
+          }
+        }
+      }
+
+      .alarm {
+        background: #0a4190;
+
+        &__wrapper {
+          flex: 1;
+          height: vh(270);
+          background: #054581; /* 滚动条整体样式 */
+          &::-webkit-scrollbar {
+            width: vw(4); /* 滚动条的宽度 */
+          }
+          /* 滚动条轨道 */
+          &::-webkit-scrollbar-track {
+            background: 'transparent'; /* 轨道的背景色 */
+          }
+          /* 滚动条滑块 */
+          &::-webkit-scrollbar-thumb {
+            background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
+            border-radius: 5px; /* 滑块的圆角 */
+          }
+          overflow: auto;
+        }
+
+        &-item {
+          padding: 0 vw(12);
+          &:nth-child(2n) {
+            background: #054d8d;
+          }
+          height: vh(40);
+          display: flex;
+          align-items: center;
+        }
+
+        &-item__rank {
+          width: vw(24);
+          height: vh(16);
+          font-size: vw(12);
+          color: #ffffff;
           display: flex;
           align-items: center;
           justify-content: center;
-          background-image: url('@/assets/images/title-4.png');
+          background: #495c77;
-          background-size: 100% 100%;
+        }
-          span {
+        &-item__rank--error {
-            font-weight: 800;
+          background-color: #d9011b;
-            color: transparent;
+        }
-            -webkit-background-clip: text;
+        &-item__rank--warning {
-            background-clip: text;
+          background-color: #feae00;
-            -webkit-text-fill-color: transparent;
+        }
-            background-image: linear-gradient(to bottom, #ffffff 0%, #87c9ff 100%);
+        &-item__rank--primary {
-          }
+          background-color: #2380fb;
+        }
+        &-item__content {
+          padding-left: vw(20);
+          font-weight: 400;
+          font-size: vw(14);
+          color: #ffffff;
         }
       }
     }

src/views/workOrder/components/box-3.vue

@@ -194,18 +194,16 @@
   .work-box-3 {
     width: vw(813);
     height: vh(380);
-    background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
+    margin-top: vh(120);
-    border-radius: 0px 0px 0px 0px;
-    margin-top: vh(100);
     margin-left: vw(10);
     position: relative;
     z-index: 99;
+    background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
+
     .work-box-1 {
       width: vw(815);
       height: vh(588);
-      // margin-top:vh(100);
       background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
-      border-radius: 0px 0px 0px 0px;
       position: relative;
       z-index: 99;
       padding: 0 vw(20);
@@ -285,7 +283,7 @@
       }
       .header {
         position: relative;
-        margin: vh(20);
+        margin: 0 vh(20);
         .title {
           margin: vh(5) auto;
           width: vw(468);

src/views/workOrder/components/spotRate.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="spotRate" :id="id" />
+</template>
+
+<script setup>
+  import { fitChartSize } from '@/utils/dataUtil'
+  import { useEchart } from '@/hooks/echart'
+
+  const props = defineProps({
+    config: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    dataList: {
+      type: Array,
+      default: () => []
+    },
+    total: {
+      type: Number,
+      default: () => 0
+    },
+    colors: {
+      type: Array,
+      default: () => ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA']
+    }
+  })
+
+  const { id, setOption } = useEchart()
+
+  var defaultCofig = {
+    color: [],
+    series: [
+      {
+        type: 'pie',
+        center: ['50%', '50%'],
+        radius: ['70%', '90%'],
+        itemStyle: {
+          borderWidth: fitChartSize(4),
+          borderColor: '#093672'
+        },
+        label: {
+          show: true,
+          position: 'center',
+          fontWeight: 'bold',
+          rich: {
+            value: {
+              color: '#fff',
+              fontSize: fitChartSize(24),
+              fontWeight: 'bold',
+              padding: [0, 0, 5, 0]
+            },
+            name: {
+              color: '#7894A8',
+              fontSize: fitChartSize(12)
+            }
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        data: []
+      }
+    ]
+  }
+
+  watch(
+    () => props.dataList,
+    (newVal) => {
+      if (newVal.length > 0) {
+        nextTick(() => {
+          defaultCofig.color = props.colors
+          defaultCofig.series[0].data = props.dataList
+          defaultCofig.series[0].label.formatter = () => {
+            return `{value|${props.total}}` + '\n' + `{name|工单总数}`
+          }
+          setOption({
+            ...defaultCofig,
+            ...props.config
+          })
+        })
+      }
+    },
+    { immediate: true }
+  )
+</script>
+
+<style scoped lang="scss">
+  .spotRate {
+    width: vw(240);
+    height: vh(320);
+  }
+</style>