修改军团 设备列表显示 和设备类型图表

public/img/icons/safari-pinned-tab.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.00251 14.9297L0 1.07422H6.14651L8.00251 4.27503L9.84583 1.07422H16L8.00251 14.9297Z" fill="black"/>
+</svg>

src/views/electronicControl/index.vue

@@ -12,7 +12,7 @@
     <div class="header">
       <div class="title">
         <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="t('messages.electronicControl')" :titleTip="[]"
-          :typeFun="['comback', 'time']" :alarmType="[]"></header2>
+          :typeFun="['time']" :alarmType="[]"></header2>
       </div>
     </div>
     <div class="content" ref="Acontent">

src/views/legionProducts/chart/ringChart.vue

@@ -12,12 +12,15 @@
 </template>
 
 <script setup lang='ts'>
-import { ref, onMounted, onUnmounted, getCurrentInstance } from 'vue'
+import { ref, onMounted, onUnmounted, getCurrentInstance,defineProps,watch,onUpdated } from 'vue'
 const { proxy } = getCurrentInstance() as any;
 import { useI18n } from 'vue-i18n'
 let {t} = useI18n();
 let ringRef = ref();
 let ringChart = null;
+const prop = defineProps({
+    data: []
+})
 const init = () => {
     ringChart = proxy.$echarts.init(ringRef.value, 'dark')
     let option = {
@@ -57,29 +60,22 @@ const init = () => {
                 labelLine: {
                     show: true,
                 },
-                data: [
-                    {
-                        "value": 7,
-                        "name": "老化架",
-                        "id": "aging_rack"
-                    },
-                    {
-                        "value": 4,
-                        "name": "绘图仪",
-                        "id": "graph_plotter"
-                    },
-                    {
-                        "value": 6,
-                        "name": "老化台",
-                        "id": "aging_table"
-                    }
-                ],
+                data: prop.data,
             },
         ],
     }
     ringChart.setOption(option)
 }
 
+onUpdated(() => {
+    ringChart.setOption({
+        series: [
+            {
+                data: prop.data
+            }
+        ]
+    })
+})
 onMounted(() => {
     init()
 })

src/views/legionProducts/index.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="container">
         <header>
-            <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="`${title}${t('messages.IoT_System')}`" :titleTip="[]"
-                :typeFun="['time']" :alarmType="[]"></header2>
+            <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="`${title}${t('messages.IoT_System')}`"
+                :titleTip="[]" :typeFun="['time']" :alarmType="[]"></header2>
         </header>
         <main class="content">
             <el-row class="layout">
@@ -15,7 +15,8 @@
                         </div>
                         <div style="height: 48%;width: 100%;">
                             <border13>
-                                <percentageVue :title="`${title} ${t('messages.finishSchedule')}`" :color="['#ee6666', '#a14646']" :percentage="percentage">
+                                <percentageVue :title="`${title} ${t('messages.finishSchedule')}`"
+                                    :color="['#ee6666', '#a14646']" :percentage="percentage">
                                 </percentageVue>
                             </border13>
                         </div>
@@ -28,24 +29,24 @@
                         <el-col :span="12">
                             <div class="p40">
                                 <border13>
-                                <devStatus :data="deviceStatus"></devStatus>
-                            </border13>
+                                    <devStatus :data="deviceStatus"></devStatus>
+                                </border13>
                             </div>
-                            
+
                         </el-col>
                         <el-col :span="12">
                             <div class="p40">
                                 <border13>
-                                <ringChart></ringChart>
-                            </border13>
+                                    <ringChart :data="ringData"></ringChart>
+                                </border13>
                             </div>
-                            
+
                         </el-col>
                     </el-row>
                     <el-row style="width: 100%;height: 65%;box">
                         <div class="center">
                             <border13>
-                                <scrollBoard :config="scrollBoardConfig" :severdata = "severdata"></scrollBoard>
+                                <scrollBoard :config="scrollBoardConfig" :severdata="severdata"></scrollBoard>
                             </border13>
                         </div>
                     </el-row>
@@ -65,20 +66,21 @@ import ringChart from './chart/ringChart.vue'
 import devStatus from './chart/devStatus.vue'
 import percentageVue from "@/components/charts/percentage.vue"
 import scrollBoard from './chart/scrollBoard.vue'
-import { getDeviceInPlantList,getDeviceStatus } from '@/http/legionProducts'
-import { getprogressOfCorps,gatewayOfCorps } from "@/http/InPlantProducts";
+import { getDeviceInPlantList, getDeviceStatus } from '@/http/legionProducts'
+import { getprogressOfCorps, gatewayOfCorps } from "@/http/InPlantProducts";
 import { useI18n } from 'vue-i18n'
-let {t} = useI18n();
+let { t } = useI18n();
 const route = useRoute()
 const router = useRouter()
 let severdata = reactive([])
 let percentage = ref(0)
 //军团id
-const deptId:any = route.params.deptId
+const deptId: any = route.params.deptId
 const title = route.query.title
 const gatwayList = ref([])
 const deviceStatus = ref([])
-let legion:any = {
+let ringData = ref([])
+let legion: any = {
     '5': '汽车军团',
     '3': '服装军团',
     '4': '家纺军团',
@@ -89,22 +91,35 @@ let scrollBoardConfig = reactive({
     headerBGC: 'rgb(52, 105, 243)',
     oddRowBGC: '#100c2a',
     evenRowBGC: '#100c2a',
-    rowNum:10,
-    columnWidth:[80,170,120,120,120,120,120,120,120,100,130],
-    align:['center','center','center','center','center','center','center','center','center','center','center'],
+    rowNum: 10,
+    columnWidth: [80, 170, 120, 120, 120, 120, 120, 120, 120, 100, 130],
+    align: ['center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center'],
     data: []
 })
 //获取设备列表
 const getList = (deptId) => {
     getDeviceInPlantList({ deptId }).then((res: any) => {
         if (res.code == 200) {
+            let ringObj = {}
             res.data.forEach((item: any, index: number) => {
                 let status = JSON.parse(item.deviceStatus) == true ? '在线' : '离线'
-                let temp = [index + 1, item.name, t('messages.model'), item.label, t('messages.type'), t('messages.InstallPhase'), status, t('messages.AssemblyGroup'), t('messages.electronicGroup'), t('messages.inspector'), item.deliveryDate]
+                let temp = [index + 1, item.name, item.model, item.label, item.typeName, item.status, status, item.assemblyGroup, item.electricGroup, item.inspector, item.deliveryDate]
                 scrollBoardConfig.data.push(temp)
-                item.index = index+1
+                item.index = index + 1
                 severdata.push(item)
+                if (ringObj[item.type]) {
+                    ringObj[item.type].value++;
+                } else {
+                    ringObj[item.type] = {
+                        "value": 1,
+                        "name": item.typeName,
+                        "id": item.type
+                    };
+                }
             })
+            console.log(ringObj);
+            
+            ringData.value = Object.values(ringObj)
         }
     })
 
@@ -113,36 +128,36 @@ const getList = (deptId) => {
 const getprogressOfCorpsfun = () => {
     getprogressOfCorps().then((res: any) => {
         if (res.code == 200) {
-            
+
             res.data.forEach((item: any) => {
                 if (item.deptId == deptId) {
-                    percentage.value = Math.floor((item.accomplish/item.counts)*100)
+                    percentage.value = Math.floor((item.accomplish / item.counts) * 100)
                 }
             })
         }
     })
 }
 //获取网关状态
-const getWayStatus = ()=>{
+const getWayStatus = () => {
     gatewayOfCorps().then((res: any) => {
         if (res.code == 200) {
-            
+
             let index = res.data.findIndex((item: any) => {
                 return item.name == legion[deptId]
             })
             gatwayList.value.push(res.data[index])
             gatwayList.value[0].name = title
         }
-        
+
     })
 }
 
 //获取设备状态
-const getDevStatus = ()=>{
-    getDeviceStatus({deptId}).then((res: any) => {
+const getDevStatus = () => {
+    getDeviceStatus({ deptId }).then((res: any) => {
         if (res.code == 200) {
             deviceStatus.value = res.data
-            
+
         }
     })
 }
@@ -175,10 +190,11 @@ getList(deptId)
     display: flex;
     justify-content: center;
     align-items: center;
-    box-sizing: border-box;    
+    box-sizing: border-box;
     padding: 0 40px;
     font-size: 16px;
 }
+
 .p40 {
     box-sizing: border-box;
     width: 100%;