diff --git a/src/api/screen/cityScreen.js b/src/api/screen/cityScreen.js
new file mode 100644
index 00000000..08d68497
--- /dev/null
+++ b/src/api/screen/cityScreen.js
@@ -0,0 +1,85 @@
+import request from '@/utils/request'
+
+
+
+// 装备总数、价值、配置率、今日入库数、出库数
+export const getBasicHeadApi = (data) => {
+    return request({
+        url: '/material-mall/city_screen/getBasicHead',
+        method: 'GET',
+        params: data,
+    })
+}
+
+// 装备数量价值
+export const equipmentQuantityValueApi = (data) => {
+    return request({
+        url: '/material-mall/city_screen/equipmentQuantityValue',
+        method: 'GET',
+        params: data,
+    })
+} 
+
+// 装备状态
+export const equipmentStatusApi = (data) => {
+    return request({
+        url: '/material-mall/city_screen/equipmentStatus',
+        method: 'GET',
+        params: data,
+    })
+} 
+
+// 维保预警
+export const maintenanceAlarmApi = (data) => {
+    return request({
+        url: '/material-mall/city_screen/maintenanceAlarm',
+        method: 'GET',
+        params: data,
+    })
+} 
+
+// 退役报警
+export const retirementAlarmApi = (data) => {
+    return request({
+        url: '/material-mall/city_screen/retirementAlarm',
+        method: 'GET',
+        params: data,
+    })
+} 
+
+// 装备在用率
+export const equipmentInServiceRateApi = (data) => {
+    return request({
+        url: '/material-mall/city_screen/equipmentInServiceRate',
+        method: 'GET',
+        params: data,
+    })
+} 
+
+// 装备周转率
+export const equipmentTurnoverRateApi = (data) => {
+    return request({
+        url: '/material-mall/city_screen/equipmentTurnoverRate',
+        method: 'GET',
+        params: data,
+    })
+} 
+// 工程在用装备情况
+export const equipmentInUseInTheProjectApi = (data) => {
+    return request({
+        url: '/material-mall/city_screen/equipmentInUseInTheProject',
+        method: 'GET',
+        params: data,
+    })
+} 
+
+
+// 电压等级下拉选
+export function getVoltageLevelApi(data) {
+  return request({
+    url: '/material-mall/decChange/getVoltageLevel',
+    method: 'post',
+    data: data,
+  })
+}
+
diff --git a/src/assets/cityScreen/tableHeader2.png b/src/assets/cityScreen/tableHeader2.png
new file mode 100644
index 00000000..fb51d9a5
Binary files /dev/null and b/src/assets/cityScreen/tableHeader2.png differ
diff --git a/src/assets/cityScreen/tableTr2.png b/src/assets/cityScreen/tableTr2.png
new file mode 100644
index 00000000..fd3ae0d4
Binary files /dev/null and b/src/assets/cityScreen/tableTr2.png differ
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index b660b65c..99c847e4 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -114,6 +114,7 @@ const user = {
       return getInfo()
         .then(res => {
           const user = res.user
+          sessionStorage.setItem('companyId', res.user.companyId) 
           const avatar = user.avatar ? user.avatar : require('@/assets/images/profile.jpg')
           commit('SET_ROLES', res.roles && res.roles.length > 0 ? res.roles : ['ROLE_DEFAULT'])
           commit('SET_PERMISSIONS', res.permissions)
diff --git a/src/views/screen/cityScreen/components/engineerUsing/index.vue b/src/views/screen/cityScreen/components/engineerUsing/index.vue
index 84b8ac22..9aa39b57 100644
--- a/src/views/screen/cityScreen/components/engineerUsing/index.vue
+++ b/src/views/screen/cityScreen/components/engineerUsing/index.vue
@@ -2,27 +2,42 @@
     <div class="content">
         <div class="content-title">
             <div class="title">
-                装备状态
+                工程在用装备情况
             </div> 
+            <div class="select-view"> 
+                <select v-model="selectId" @change="changeSelect" class="select-box">
+                    <option v-for="item in options" :key="item.value" :value="item.value">
+                        {{ item.label }}
+                    </option>
+                </select>
+                <!-- <el-select v-model="value" placeholder="请选择" popper-class="popperView">
+                    <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
+                    </el-option>
+                </el-select> -->
+            </div>
         </div>
         <div class="content-view">
             <div class="topView">
                 <div style="width: 25%;height: 100%;display: flex;align-items: center;justify-content: space-between;">
                     <div :class="tabIndex==1?'topTab1 fs-24 active1':'topTab1 fs-24'" @click="changTab(1)">线路</div>
-                    <div :class="tabIndex==2?'topTab2 fs-24 active2':'topTab2 fs-24'" @click="changTab(2)">变电</div>
-                    <div :class="tabIndex==3?'topTab3 fs-24 active3':'topTab3 fs-24'" @click="changTab(3)">电缆</div> 
+                    <div :class="tabIndex==3?'topTab2 fs-24 active2':'topTab2 fs-24'" @click="changTab(3)">变电</div>
+                    <div :class="tabIndex==2?'topTab3 fs-24 active3':'topTab3 fs-24'" @click="changTab(2)">电缆</div> 
                 </div>
                 <div style="width: 45%;height: 100%;display: flex;align-items: center;justify-content: space-between;">
                     <div style="width: 50%;height: 12%;display: flex;align-items: center;justify-content: center;">
                         <img src="../../../../../assets/cityScreen/icon3.png" class="icon" />
                         <span class="text" style="">项目数:</span>
-                        <span class="num">10</span>
+                        <span class="num">{{total}}</span>
                         <span class="unit">个</span>
                     </div>
                     <div style="width: 50%;height: 12%;display: flex;align-items: center;justify-content: center;">
                         <img src="../../../../../assets/cityScreen/icon1.png" class="icon" />
                         <span class="text" style="">在用装备数:</span>
-                        <span class="num">10</span>
+                        <span class="num">{{useNum}}</span>
                         <span class="unit">台</span>
                     </div>
                 </div> 
@@ -38,26 +53,26 @@
             </div>
             <div class="tableBox">
                 <div class="tableTr" v-for="(item,index) in tableList" :key="index">
-                    <div class="tableTd" style="width: 10%;">
+                    <div class="tableTd" style="width: 10%;font-weight: 800;">
                         {{ index+1 }}
                     </div>
                     <div class="tableTd" style="width: 25%;">
-                        {{ item.major }}
+                        {{ item.projectName }}
                     </div>
                     <div class="tableTd" style="width: 20%;">
-                        {{ item.devicesNum }}
+                        {{ item.useNum }}
                     </div>
                     <div class="tableTd">
-                        {{ item.amount }}
+                        {{ (item.investAmount/10000).toFixed(2) }}
                     </div>
                     <div class="tableTd">
-                        {{ item.person }}
+                        {{ item.scenePersonNum }}
                     </div>
                     <div class="tableTd">
                         {{ item.riskLevel }}
                     </div>
                     <div class="tableTd">
-                        {{ item.geography }}
+                        {{ item.geoFeature }}
                     </div>
                 </div>
             </div>
@@ -67,110 +82,67 @@
 </template>
 
 <script> 
+import { equipmentInUseInTheProjectApi,getVoltageLevelApi } from "@/api/screen/cityScreen"; 
+
 export default {
     data() {
         return {
             tabIndex:1,
-            tableList:[
-                {   
-                    major:"变电站工程",
-                    devicesNum:"15",
-                    amount:"2289",
-                    person:89,
-                    riskLevel:5,
-                    geography:"平原",
-                },
-                {   
-                    major:"变电站工程",
-                    devicesNum:"15",
-                    amount:"2289",
-                    person:89,
-                    riskLevel:5,
-                    geography:"平原",
-                },
-                {   
-                    major:"变电站工程",
-                    devicesNum:"15",
-                    amount:"2289",
-                    person:89,
-                    riskLevel:5,
-                    geography:"平原",
-                },
-                {   
-                    major:"变电站工程",
-                    devicesNum:"15",
-                    amount:"2289",
-                    person:89,
-                    riskLevel:5,
-                    geography:"平原",
-                },
-                {   
-                    major:"变电站工程",
-                    devicesNum:"15",
-                    amount:"2289",
-                    person:89,
-                    riskLevel:5,
-                    geography:"平原",
-                },
-                {   
-                    major:"变电站工程",
-                    devicesNum:"15",
-                    amount:"2289",
-                    person:89,
-                    riskLevel:5,
-                    geography:"平原",
-                },
-                {   
-                    major:"变电站工程",
-                    devicesNum:"15",
-                    amount:"2289",
-                    person:89,
-                    riskLevel:5,
-                    geography:"平原",
-                },
-                {   
-                    major:"变电站工程",
-                    devicesNum:"15",
-                    amount:"2289",
-                    person:89,
-                    riskLevel:5,
-                    geography:"平原",
-                },
-                {   
-                    major:"变电站工程",
-                    devicesNum:"15",
-                    amount:"2289",
-                    person:89,
-                    riskLevel:5,
-                    geography:"平原",
-                },
-                {   
-                    major:"变电站工程",
-                    devicesNum:"15",
-                    amount:"2289",
-                    person:89,
-                    riskLevel:5,
-                    geography:"平原",
-                },
-                {   
-                    major:"变电站工程",
-                    devicesNum:"15",
-                    amount:"2289",
-                    person:89,
-                    riskLevel:5,
-                    geography:"平原",
-                },
-            ]
+            total:0,
+            useNum:0,
+            tableList:[],
+            selectId:"",
+            options:[]
         }
     },
     created() { 
+        
     },
     mounted() {
+        this.getVoltageLevel()
+        this.getEquipmentInUseInTheProject() 
     },
     methods: {
+        changeSelect(){
+            console.log(this.selectId)
+            this.getEquipmentInUseInTheProject()
+        },
         changTab(index){
-            this.tabIndex=index
-        }
+            this.tabIndex=index;
+            this.selectId=""
+            this.getEquipmentInUseInTheProject()
+        },
+        
+        getEquipmentInUseInTheProject(){
+            let param = {companyId:sessionStorage.getItem('companyId'),typeId:this.tabIndex,voltageLevel:this.selectId}
+            console.log(param)
+            equipmentInUseInTheProjectApi(param).then(response => {
+                console.log(response,'equipmentInUseInTheProjectApi')
+                if(response.code==200){
+                    this.total = response.data.total
+                    this.useNum = response.data.useNum
+                    this.tableList = response.data.list
+                }
+            });
+        },
+        getVoltageLevel(){
+            getVoltageLevelApi({}).then(response => {
+                console.log(response,'getVoltageLevelApi')
+                if(response.code==200){
+                    if(response.data&&response.data.length>0){
+                        response.data.forEach(item=>{
+                            let obj = {
+                                label:item.voltage+'kV',
+                                value:item.voltage
+                            }
+                            this.options.push(obj)
+                        })
+                        // this.$set(this,'selectId',response.data[0].voltage)
+                    }
+                }
+                
+            });
+        } 
     },
 }
 </script>
@@ -194,6 +166,30 @@ export default {
     top: 23%;
     left: 8%;
 }
+.select-view{
+    width: 15%;
+    height: 54%;
+    position: absolute;
+    top: 21%;
+    right: 2%;
+}  
+.select-box {
+  width: 70%; /*设置宽度确保内容 和 下拉icon的距离*/ 
+  height: 75%;
+  background: #113F67;
+  color: #ccc;
+  border: none;
+  border-radius: 10%;
+  border-color: #113F67;
+  font-size: 20px;
+  /*清除select聚焦时候的边框颜色*/
+  outline: none;
+  option { 
+    font-size: 20px;
+    border: none; 
+  }
+}
+
 .content-view{
     width: 100%;
     height: 85%; 
@@ -267,8 +263,8 @@ export default {
     color: #ccc; 
 }
 .icon{
-    width: 60px;
-        height: 60px;
+    width: 70px;
+    height: 70px;
 }
 
 .tableHeader{
@@ -281,12 +277,12 @@ export default {
 }
 .tableBox{
     width: 100%;
-    height: 78%; 
+    height: 76%; 
     overflow-y: auto;
 }
 .tableTr{
     width: 100%;
-    height: 12%; 
+    height: 18%; 
     background-image: url("../../../../../assets/cityScreen/tableTr.png");
     background-size: 100% 100%;
     margin-bottom: 2px;
@@ -313,7 +309,22 @@ export default {
     justify-content: center;
     font-size: 24px;
 }
-@media screen and (min-width: 1920px) { 
+::-webkit-scrollbar{
+  width: 4px;
+  height: 4px;
+}
+//定义背景颜色和圆角
+::-webkit-scrollbar-thumb{
+  border-radius: 1em;
+  background-color: rgba(50,50,50,.3);
+}
+//定义滚动条轨道 内阴影+圆角
+::-webkit-scrollbar-track{
+  border-radius: 1em;
+  background-color: rgba(50,50,50,.1);
+}
+
+@media screen and (min-width: 1080px) { 
     .title{
         font-size: 10px; 
     } 
@@ -326,20 +337,26 @@ export default {
         margin: 0 2px;
     }
     .unit{
-        font-size: 10px; 
+        font-size: 8px; 
     }
     .icon{
-        width: 30px;
-        height: 30px;
+        width: 35px;
+        height: 35px;
     }
     .text{ 
         font-size: 10px;
     }
     .tableTd{ 
-        font-size: 10px; 
+        font-size: 8px; 
     }
     .fs-24{
-        font-size: 10px;
+        font-size: 8px;
+    }
+    .select-box {
+        font-size: 10px; 
+        option { 
+            font-size: 10px; 
+        }
     }
 }
 @media screen and (min-width: 3000px) { 
@@ -347,22 +364,22 @@ export default {
         font-size: 24px;
     }
     .header{ 
-        font-size: 24px;
+        font-size: 26px;
     } 
     .num{
         color: #83D3F8;
-        font-size: 24px;
+        font-size: 26px;
         margin: 0 10px;
     }
     .unit{
-        font-size: 20px; 
+        font-size: 16px; 
     }
     .icon{
-        width: 60px;
-        height: 60px;
+        width: 70px;
+        height: 70px;
     }
     .text{ 
-        font-size: 20px;
+        font-size: 26px;
     }
     .tableTd{ 
         font-size: 24px; 
@@ -370,6 +387,12 @@ export default {
     .fs-24{
         font-size: 24px;
     }
+    .select-box {
+        font-size: 20px; 
+        option { 
+            font-size: 20px; 
+        }
+    }
 }
 
 
diff --git a/src/views/screen/cityScreen/components/equiQuantity/index.vue b/src/views/screen/cityScreen/components/equiQuantity/index.vue
index 88c2dc6a..f6acbaa3 100644
--- a/src/views/screen/cityScreen/components/equiQuantity/index.vue
+++ b/src/views/screen/cityScreen/components/equiQuantity/index.vue
@@ -17,30 +17,32 @@
                     </div> 
                     <div style="width: 100%;height: 40%;display: flex;justify-content: space-between;align-items: center;">
                         <div class="num">
-                            <span style="font-weight: 700;">50</span>
+                            <span style="font-weight: 700;">{{lineData.deviceQuantity}}</span>
                             <span class="unit">台</span>
                         </div>
                         <div class="num">
-                            <span style="font-weight: 700;">0.027</span>
-                            <span class="unit">亿元</span>
+                            <span style="font-weight: 700;" v-if="lineData.totalValue>99999999">{{(lineData.totalValue/100000000).toFixed(3)}}</span>
+                            <span style="font-weight: 700;" v-else>{{(lineData.totalValue/10000).toFixed(2)}}</span>
+                            <span class="unit" v-if="lineData.totalValue>99999999">亿元</span> 
+                            <span class="unit" v-else>万元</span> 
                         </div>
                     </div>
                     <div id="lineChartOne" style="width: 100%;height: 20%;"></div>
                     <div style="width: 100%;height: 40%;display: flex;justify-content: space-between;align-items: center;">
                         <div class="num2">
                             <span class="unit2">5年</span>
-                            <span style="font-weight: 700;">30</span>
-                            <span class="unit2">73%</span>
+                            <span style="font-weight: 700;">{{lineData.fiveYearCount}}</span>
+                            <span class="unit2">{{lineData.fiveYearRatio}}%</span>
                         </div>
                         <div class="num2" style="color: #00FEFC;">
                             <span class="unit2" style="color: #00FEFC;">5-10年</span>
-                            <span style="font-weight: 700;">15</span>
-                            <span class="unit2" style="color: #00FEFC;">23%</span>
+                            <span style="font-weight: 700;">{{lineData.fiveToTenYearCount}}</span>
+                            <span class="unit2" style="color: #00FEFC;">{{lineData.fiveToTenYearRatio}}%</span>
                         </div>
                         <div class="num2" style="color: #00FEFC;">
                             <span class="unit2" style="color: #1E8DFF;">10年以上</span>
-                            <span style="font-weight: 700;">15</span>
-                            <span class="unit2" style="color: #1E8DFF;">0%</span>
+                            <span style="font-weight: 700;">{{lineData.aboveTenYearCount}}</span>
+                            <span class="unit2" style="color: #1E8DFF;">{{lineData.aboveTenYearRatio}}%</span>
                         </div>
                     </div>
                 </div>
@@ -55,30 +57,32 @@
                     </div> 
                     <div style="width: 100%;height: 40%;display: flex;justify-content: space-between;align-items: center;">
                         <div class="num">
-                            <span style="font-weight: 700;">50</span>
+                            <span style="font-weight: 700;">{{bdData.deviceQuantity}}</span>
                             <span class="unit">台</span>
                         </div>
                         <div class="num">
-                            <span style="font-weight: 700;">0.027</span>
-                            <span class="unit">亿元</span>
+                            <span style="font-weight: 700;" v-if="bdData.totalValue>99999999">{{(bdData.totalValue/100000000).toFixed(3)}}</span>
+                            <span style="font-weight: 700;" v-else>{{(bdData.totalValue/10000).toFixed(2)}}</span>
+                            <span class="unit" v-if="bdData.totalValue>99999999">亿元</span> 
+                            <span class="unit" v-else>万元</span> 
                         </div>
                     </div>
                     <div id="lineChartTwo" style="width: 100%;height: 20%;"></div>
                     <div style="width: 100%;height: 40%;display: flex;justify-content: space-between;align-items: center;">
                         <div class="num2">
                             <span class="unit2">5年</span>
-                            <span style="font-weight: 700;">30</span>
-                            <span class="unit2">73%</span>
+                            <span style="font-weight: 700;">{{bdData.fiveYearCount}}</span>
+                            <span class="unit2">{{bdData.fiveYearRatio}}%</span>
                         </div>
                         <div class="num2" style="color: #00FEFC;">
                             <span class="unit2" style="color: #00FEFC;">5-10年</span>
-                            <span style="font-weight: 700;">15</span>
-                            <span class="unit2" style="color: #00FEFC;">23%</span>
+                            <span style="font-weight: 700;">{{bdData.fiveToTenYearCount}}</span>
+                            <span class="unit2" style="color: #00FEFC;">{{bdData.fiveToTenYearRatio}}%</span>
                         </div>
                         <div class="num2" style="color: #00FEFC;">
                             <span class="unit2" style="color: #1E8DFF;">10年以上</span>
-                            <span style="font-weight: 700;">15</span>
-                            <span class="unit2" style="color: #1E8DFF;">0%</span>
+                            <span style="font-weight: 700;">{{bdData.aboveTenYearCount}}</span>
+                            <span class="unit2" style="color: #1E8DFF;">{{bdData.aboveTenYearRatio}}%</span>
                         </div>
                     </div>
                 </div>
@@ -93,30 +97,32 @@
                     </div> 
                     <div style="width: 100%;height: 40%;display: flex;justify-content: space-between;align-items: center;">
                         <div class="num">
-                            <span style="font-weight: 700;">50</span>
+                            <span style="font-weight: 700;">{{dlData.deviceQuantity}}</span>
                             <span class="unit">台</span>
                         </div>
                         <div class="num">
-                            <span style="font-weight: 700;">0.027</span>
-                            <span class="unit">亿元</span>
+                            <span style="font-weight: 700;" v-if="dlData.totalValue>99999999">{{(dlData.totalValue/100000000).toFixed(3)}}</span>
+                            <span style="font-weight: 700;" v-else>{{(dlData.totalValue/10000).toFixed(2)}}</span>
+                            <span class="unit" v-if="dlData.totalValue>99999999">亿元</span> 
+                            <span class="unit" v-else>万元</span> 
                         </div>
                     </div>
                     <div id="lineChartThree" style="width: 100%;height: 20%;"></div>
                     <div style="width: 100%;height: 40%;display: flex;justify-content: space-between;align-items: center;">
                         <div class="num2">
                             <span class="unit2">5年</span>
-                            <span style="font-weight: 700;">30</span>
-                            <span class="unit2">73%</span>
+                            <span style="font-weight: 700;">{{dlData.fiveYearCount}}</span>
+                            <span class="unit2">{{dlData.fiveYearRatio}}%</span>
                         </div>
                         <div class="num2" style="color: #00FEFC;">
                             <span class="unit2" style="color: #00FEFC;">5-10年</span>
-                            <span style="font-weight: 700;">15</span>
-                            <span class="unit2" style="color: #00FEFC;">23%</span>
+                            <span style="font-weight: 700;">{{dlData.fiveToTenYearCount}}</span>
+                            <span class="unit2" style="color: #00FEFC;">{{dlData.fiveToTenYearRatio}}%</span>
                         </div>
                         <div class="num2" style="color: #00FEFC;">
                             <span class="unit2" style="color: #1E8DFF;">10年以上</span>
-                            <span style="font-weight: 700;">15</span>
-                            <span class="unit2" style="color: #1E8DFF;">0%</span>
+                            <span style="font-weight: 700;">{{dlData.aboveTenYearCount}}</span>
+                            <span class="unit2" style="color: #1E8DFF;">{{dlData.aboveTenYearRatio}}%</span>
                         </div>
                     </div>
 
@@ -129,46 +135,107 @@
 </template>
 
 <script> 
+import { equipmentQuantityValueApi } from "@/api/screen/cityScreen"; 
 import * as echarts from 'echarts' 
 export default {
     data() {
         return { 
+            barWidth:6,
+            myCharts1:null,
+            myCharts2:null,
+            myCharts3:null,
+            dataList:[],
+            lineData:{
+                aboveTenYearCount:0,
+                aboveTenYearRatio:0,
+                fiveToTenYearCount:0,
+                fiveToTenYearRatio:0,
+                fiveYearCount:0,
+                fiveYearRatio:0,
+                totalValue:0,//价值
+                deviceQuantity:0,//数量
+            },//0
+            dlData:{
+                aboveTenYearCount:0,
+                aboveTenYearRatio:0,
+                fiveToTenYearCount:0,
+                fiveToTenYearRatio:0,
+                fiveYearCount:0,
+                fiveYearRatio:0,
+                totalValue:0,//价值
+                deviceQuantity:0,//数量
+            },//1
+            bdData:{
+                aboveTenYearCount:0,
+                aboveTenYearRatio:0,
+                fiveToTenYearCount:0,
+                fiveToTenYearRatio:0,
+                fiveYearCount:0,
+                fiveYearRatio:0,
+                totalValue:0,//价值
+                deviceQuantity:0,//数量
+            },//2 
         }
     },
     created() {
 
     },
     mounted() {
-        this.InitEChartsOne()
-        this.InitEChartsTwo()
-        this.lineChartThree()
+        // console.log(window.innerWidth, window.innerHeight);
+        if(window.innerWidth<3000){
+            this.barWidth=3 
+        }
+        this.getEquipmentQuantity()
+        
     },
     methods: {
+        getEquipmentQuantity(){
+            equipmentQuantityValueApi({companyId:sessionStorage.getItem('companyId')}).then(response => {
+                console.log(response,'equipmentQuantityValueApi')
+                if(response.code==200){
+                    this.dataList = response.data;
+                    this.dataList.forEach(item=>{
+                        if(item.deviceType==0){
+                            this.lineData=item
+                        }
+                        if(item.deviceType==1){
+                            this.dlData=item
+                        }
+                        if(item.deviceType==2){
+                            this.bdData=item
+                        }
+                    })
+                } 
+                this.InitEChartsOne()
+                this.InitEChartsTwo()
+                this.lineChartThree() 
+            });
+        },
         InitEChartsOne() {
             // getCanteenOrdersAndSalesTrendsApi({type:this.type1}).then((response) => {
-                var legendData = [
-                    { name: '5年', data: 30 },
-                    { name: '5-10年', data: 15 },
-                    { name: '10年以上', data: 15 }
-                ];
-                var colorList = ['#83D3F8', '#00FEFC', '#1E8DFF'];
-                var seriesList = [];
-                for (var i = 0; i < legendData.length; i++) {
-                    seriesList.push({
-                        type: 'bar',
-                        stack: '2',
-                        legendHoverLink: false,
-                        barWidth: 6,
-                        data: [
-                            {
-                                value: legendData[i].data,
-                                itemStyle: {
-                                    color: colorList[i],
-                                },
+            var legendData = [
+                { name: '5年', data: this.lineData.fiveYearCount },
+                { name: '5-10年', data: this.lineData.fiveToTenYearCount },
+                { name: '10年以上', data: this.lineData.aboveTenYearCount }
+            ]; 
+            var colorList = ['#83D3F8', '#00FEFC', '#1E8DFF'];
+            var seriesList = [];
+            for (var i = 0; i < legendData.length; i++) {
+                seriesList.push({
+                    type: 'bar',
+                    stack: '2',
+                    legendHoverLink: false,
+                    barWidth: this.barWidth,
+                    data: [
+                        {
+                            value: legendData[i].data,
+                            itemStyle: {
+                                color: colorList[i],
                             },
-                        ],
-                    });
-                }
+                        },
+                    ],
+                });
+            }
                 var option = {
                     grid: {
                         show: true,
@@ -200,9 +267,9 @@ export default {
         InitEChartsTwo() {
             // getCanteenOrdersAndSalesTrendsApi({type:this.type1}).then((response) => {
                 var legendData = [
-                    { name: '5年', data: 30 },
-                    { name: '5-10年', data: 15 },
-                    { name: '10年以上', data: 15 }
+                    { name: '5年', data: this.bdData.fiveYearCount },
+                    { name: '5-10年', data: this.bdData.fiveToTenYearCount },
+                    { name: '10年以上', data: this.bdData.aboveTenYearCount }
                 ];
                 var colorList = ['#83D3F8', '#00FEFC', '#1E8DFF'];
                 var seriesList = [];
@@ -211,7 +278,7 @@ export default {
                         type: 'bar',
                         stack: '2',
                         legendHoverLink: false,
-                        barWidth: 6,
+                        barWidth: this.barWidth,
                         data: [
                             {
                                 value: legendData[i].data,
@@ -246,16 +313,16 @@ export default {
                     ],
                     series: seriesList,
                 }; 
-                this.myCharts1 = echarts.init(document.querySelector('#lineChartTwo'));
-                this.myCharts1.setOption(option)   
+                this.myCharts2 = echarts.init(document.querySelector('#lineChartTwo'));
+                this.myCharts2.setOption(option)   
             // }); 
         },
         lineChartThree() {
             // getCanteenOrdersAndSalesTrendsApi({type:this.type1}).then((response) => {
                 var legendData = [
-                    { name: '5年', data: 30 },
-                    { name: '5-10年', data: 15 },
-                    { name: '10年以上', data: 15 }
+                    { name: '5年', data: this.dlData.fiveYearCount },
+                    { name: '5-10年', data: this.dlData.fiveToTenYearCount },
+                    { name: '10年以上', data: this.dlData.aboveTenYearCount }
                 ];
                 var colorList = ['#83D3F8', '#00FEFC', '#1E8DFF'];
                 var seriesList = [];
@@ -264,7 +331,7 @@ export default {
                         type: 'bar',
                         stack: '2',
                         legendHoverLink: false,
-                        barWidth: 6,
+                        barWidth: this.barWidth,
                         data: [
                             {
                                 value: legendData[i].data,
@@ -299,8 +366,8 @@ export default {
                     ],
                     series: seriesList,
                 }; 
-                this.myCharts1 = echarts.init(document.querySelector('#lineChartThree'));
-                this.myCharts1.setOption(option)   
+                this.myCharts3 = echarts.init(document.querySelector('#lineChartThree'));
+                this.myCharts3.setOption(option)   
             // }); 
         },
     },
@@ -369,7 +436,7 @@ export default {
     margin-right: 8px;
     margin-left: 8px;
 }
-@media screen and (min-width: 1920px) { 
+@media screen and (min-width: 1080px) { 
     .title{
         font-size: 10px; 
     }
diff --git a/src/views/screen/cityScreen/components/equiStatus/index.vue b/src/views/screen/cityScreen/components/equiStatus/index.vue
index b89b5542..9ad6c4e8 100644
--- a/src/views/screen/cityScreen/components/equiStatus/index.vue
+++ b/src/views/screen/cityScreen/components/equiStatus/index.vue
@@ -12,11 +12,13 @@
     </div>
 </template>
 
-<script> 
+<script>
+import { equipmentStatusApi } from "@/api/screen/cityScreen"; 
 import * as echarts from 'echarts' 
 export default {
     data() {
         return { 
+            myCharts4:null,
             barWidth:40,
             size:[40, 20],
             Offset1:[-0, 10],
@@ -27,8 +29,7 @@ export default {
     created() {
 
     },
-    mounted() {
-        
+    mounted() { 
         console.log(window.innerWidth, window.innerHeight);
         if(window.innerWidth<3000){
             this.barWidth=20
@@ -41,7 +42,17 @@ export default {
     },
     methods: {
         InitEChartsOne() {
-            // getCanteenOrdersAndSalesTrendsApi({type:this.type1}).then((response) => {
+            equipmentStatusApi({companyId:sessionStorage.getItem('companyId')}).then((response) => {
+                console.log(response,"equipmentStatusApi")
+                var dataList = response.data||[];
+                var xData=[]
+                var yData=[]
+                var rateData=[]
+                dataList.forEach(item=>{
+                    xData.push(item.name)
+                    yData.push(item.num)
+                    rateData.push(item.rate)
+                })
                 var option = {
                     grid: {
                         show: true,
@@ -52,7 +63,7 @@ export default {
                         borderColor: "transparent"
                     },
                     xAxis: {
-                        data: ['在用', '在库', '在修', '共享'],
+                        data: xData,
                         axisTick: {
                             show: false
                         },
@@ -130,12 +141,12 @@ export default {
                                 fontSize: this.fontSize,
                                 color: '#ccc',
                                 formatter: function(params) {
-                                    console.log(params) 
-                                    var str = "" + params.value  + "\n\n";
+                                    // console.log(params) 
+                                    var str = params.value+ "/" + rateData[params.dataIndex]+"%";
                                     return str;
                                 },
                             },
-                            data:[220, 182, 191, 234]
+                            data:yData
                         },
                         {
                             "name": "",
@@ -188,14 +199,14 @@ export default {
                                         opacity: 1,
                                         color:'#2B9CCC',
                                     },
-                            "data": [220, 182, 191, 234]
+                            "data": yData
                         },
 
                     ]
                 };
-                this.myCharts1 = echarts.init(document.querySelector('#lineChartFour'));
-                this.myCharts1.setOption(option)   
-            // }); 
+                this.myCharts4 = echarts.init(document.querySelector('#lineChartFour'));
+                this.myCharts4.setOption(option)   
+            }); 
         },
     },
 }
@@ -229,12 +240,9 @@ export default {
     width: 100%;margin-bottom: 10px;color: #A9C4F8;text-align: center;
     font-size: 24px;
 }
-@media screen and (min-width: 1920px) { 
+@media screen and (min-width: 1080px) { 
     .title{
         font-size: 10px;
-        position: absolute;
-        top: 42%;
-        left: 18%;
     } 
     .text{ 
         font-size: 10px;
@@ -244,9 +252,6 @@ export default {
 @media screen and (min-width: 3000px) { 
     .title{
         font-size: 24px;
-        position: absolute;
-        top: 42%;
-        left: 18%;
     }
     .text{ 
         font-size: 24px;
diff --git a/src/views/screen/cityScreen/components/equiTurnover/index.vue b/src/views/screen/cityScreen/components/equiTurnover/index.vue
index 75cb0e1c..0132e054 100644
--- a/src/views/screen/cityScreen/components/equiTurnover/index.vue
+++ b/src/views/screen/cityScreen/components/equiTurnover/index.vue
@@ -15,9 +15,6 @@
             </div>
             <div class="tableBox">
                 <div class="tableTr" v-for="(item,index) in tableList" :key="index">
-                    <div class="tableTd">
-                        {{ index+1 }}
-                    </div>
                     <div class="tableTd">
                         {{ item.major }}
                     </div>
@@ -25,13 +22,13 @@
                         {{ item.mainProcess }}
                     </div>
                     <div class="tableTd">
-                        {{ item.subProcess }}
+                        {{ item.subprocess }}
                     </div>
                     <div class="tableTd">
-                        {{ item.equipment }}
+                        {{ item.deviceName }}
                     </div>
                     <div class="tableTd">
-                        {{ item.maintenanceStatus }}
+                        {{ item.turnoverRate }}
                     </div>
                 </div>
             </div>
@@ -40,106 +37,28 @@
 </template>
 
 <script> 
+import { equipmentTurnoverRateApi } from "@/api/screen/cityScreen"; 
 export default {
     data() {
         return { 
-            tableList:[
-                {   
-                    major:"变电站工程",
-                    mainProcess:"组塔施工",
-                    subProcess:"塔材吊装塔材吊装塔材吊装",
-                    equipment:"牵引机",
-                    maintenanceStatus:"2.25次/年",
-                },
-                {   
-                    major:"变电站工程",
-                    mainProcess:"组塔施工",
-                    subProcess:"塔材吊装塔材吊装塔材吊装",
-                    equipment:"牵引机",
-                    maintenanceStatus:"2.25次/年",
-                },{   
-                    major:"变电站工程",
-                    mainProcess:"组塔施工",
-                    subProcess:"塔材吊装",
-                    equipment:"牵引机",
-                    maintenanceStatus:"2.25次/年",
-                },{   
-                    major:"变电站工程",
-                    mainProcess:"组塔施工",
-                    subProcess:"塔材吊装",
-                    equipment:"牵引机",
-                    maintenanceStatus:"2.25次/年",
-                },{   
-                    major:"变电站工程",
-                    mainProcess:"组塔施工",
-                    subProcess:"塔材吊装",
-                    equipment:"牵引机",
-                    maintenanceStatus:"2.25次/年",
-                },{   
-                    major:"变电站工程",
-                    mainProcess:"组塔施工",
-                    subProcess:"塔材吊装",
-                    equipment:"牵引机",
-                    maintenanceStatus:"2.25次/年",
-                },{   
-                    major:"变电站工程",
-                    mainProcess:"组塔施工",
-                    subProcess:"塔材吊装",
-                    equipment:"牵引机",
-                    maintenanceStatus:"2.25次/年",
-                },{   
-                    major:"变电站工程",
-                    mainProcess:"组塔施工",
-                    subProcess:"塔材吊装",
-                    equipment:"牵引机",
-                    maintenanceStatus:"2.25次/年",
-                },{   
-                    major:"变电站工程",
-                    mainProcess:"组塔施工",
-                    subProcess:"塔材吊装",
-                    equipment:"牵引机",
-                    maintenanceStatus:"2.25次/年",
-                },{   
-                    major:"变电站工程",
-                    mainProcess:"组塔施工",
-                    subProcess:"塔材吊装",
-                    equipment:"牵引机",
-                    maintenanceStatus:"2.25次/年",
-                },{   
-                    major:"变电站工程",
-                    mainProcess:"组塔施工",
-                    subProcess:"塔材吊装",
-                    equipment:"牵引机",
-                    maintenanceStatus:"2.25次/年",
-                },{   
-                    major:"变电站工程",
-                    mainProcess:"组塔施工",
-                    subProcess:"塔材吊装",
-                    equipment:"牵引机",
-                    maintenanceStatus:"2.25次/年",
-                },{   
-                    major:"变电站工程",
-                    mainProcess:"组塔施工",
-                    subProcess:"塔材吊装",
-                    equipment:"牵引机",
-                    maintenanceStatus:"2.25次/年",
-                },{   
-                    major:"变电站工程",
-                    mainProcess:"组塔施工",
-                    subProcess:"塔材吊装",
-                    equipment:"牵引机",
-                    maintenanceStatus:"2.25次/年",
-                }
-
-            ]
+            tableList:[]
         }
     },
     created() {
 
     },
     mounted() {
+        this.getEquipmentTurnoverRate()
     },
     methods: {
+        getEquipmentTurnoverRate(){
+            equipmentTurnoverRateApi({companyId:sessionStorage.getItem('companyId')}).then(response => {
+                console.log(response,'equipmentTurnoverRateApi')
+                if(response.code==200){  
+                    this.tableList = response.data.list
+                }
+            });
+        } 
     },
 }
 </script>
@@ -178,19 +97,21 @@ export default {
 }
 .tableBox{
     width: 100%;
-    height: 88%; 
+    height: 84%; 
     overflow-y: auto;
 }
 .tableTr{
     width: 100%;
-    height: 12%; 
+    height: 16%; 
     background-image: url("../../../../../assets/cityScreen/tableTr.png");
     background-size: 100% 100%;
     margin-bottom: 2px;
     display: flex;
+    cursor: pointer;
 }
 .tableTd{
-    width: 20%;
+    width: 18%;
+    margin: 0 1%;
     height: 100%;
     display: flex;
     align-items: center;
@@ -203,14 +124,29 @@ export default {
 }
 .header{
     color: #72B1F1;
-    width: 20%;
+    width: 18%;
     height: 100%;
+    margin: 0 auto;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 24px;
+    font-size: 26px;
 }
-@media screen and (min-width: 1920px) { 
+::-webkit-scrollbar{
+  width: 4px;
+  height: 4px;
+}
+//定义背景颜色和圆角
+::-webkit-scrollbar-thumb{
+  border-radius: 1em;
+  background-color: rgba(50,50,50,.3);
+}
+//定义滚动条轨道 内阴影+圆角
+::-webkit-scrollbar-track{
+  border-radius: 1em;
+  background-color: rgba(50,50,50,.1);
+}
+@media screen and (min-width: 1080px) { 
     .title{
         font-size: 10px; 
     } 
@@ -218,7 +154,7 @@ export default {
         font-size: 10px;
     } 
     .tableTd{ 
-        font-size: 10px; 
+        font-size: 8px; 
     }
 }
 @media screen and (min-width: 3000px) { 
@@ -226,7 +162,7 @@ export default {
         font-size: 24px;
     }
     .header{ 
-        font-size: 24px;
+        font-size: 26px;
     } 
     .tableTd{ 
         font-size: 24px; 
diff --git a/src/views/screen/cityScreen/components/equiUse/index.vue b/src/views/screen/cityScreen/components/equiUse/index.vue
index 8eaf103c..ded1358f 100644
--- a/src/views/screen/cityScreen/components/equiUse/index.vue
+++ b/src/views/screen/cityScreen/components/equiUse/index.vue
@@ -8,19 +8,19 @@
         <div class="content-view">
             <img src="../../../../../assets/cityScreen/usingBg.png" style="width: 80%;height: 100%;position: absolute;top: 0;left: 15%;" />
             <div class="all-box">
-                <div>60%</div>
+                <div>{{allRate}}%</div>
                 <div class="title2">总体在用率</div>
             </div>
             <div class="bd-box">
-                <div>60%</div>
+                <div>{{rate1}}%</div>
                 <div class="title3">变电装备在用率</div>
             </div>
             <div class="line-box">
-                <div>60%</div>
+                <div>{{rate2}}%</div>
                 <div class="title3">线路装备在用率</div>
             </div>
             <div class="cable-box">
-                <div>60%</div>
+                <div>{{rate3}}%</div>
                 <div class="title3">电缆装备在用率</div>
             </div>
             
@@ -29,17 +29,32 @@
 </template>
 
 <script> 
+import { equipmentInServiceRateApi } from "@/api/screen/cityScreen"; 
 export default {
     data() {
-        return { 
+        return {
+            allRate:0,
+            rate1:0,
+            rate2:0,
+            rate3:0
         }
     },
-    created() {
-
-    },
+    created() {},
     mounted() {
+        this.getEquipmentInServiceRate()
     },
     methods: {
+        getEquipmentInServiceRate(){
+            equipmentInServiceRateApi({companyId:sessionStorage.getItem('companyId')}).then(response => {
+                console.log(response,'equipmentInServiceRateApi')
+                if(response.code==200){
+                    this.allRate = response.data[3].rate
+                    this.rate1 = response.data[0].rate
+                    this.rate2 = response.data[1].rate
+                    this.rate3 = response.data[2].rate
+                }
+            });
+        } 
     },
 }
 </script>
@@ -104,7 +119,7 @@ export default {
     font-size: 28px;
     font-weight: 800;
     position: absolute;
-    top:38%;
+    top:39%;
     left: 12%;
 }
 .line-box{
@@ -118,7 +133,7 @@ export default {
     font-size: 28px;
     font-weight: 800;
     position: absolute;
-    top:19%;
+    top:20%;
     right: 0%;
 }
 .cable-box{
@@ -132,21 +147,21 @@ export default {
     font-size: 28px;
     font-weight: 800;
     position: absolute;
-    top:74%;
+    top:73%;
     right: 0%;
 }
  
-@media screen and (min-width: 1920px) { 
+@media screen and (min-width: 1080px) { 
     .title{
         font-size: 10px; 
     } 
     .title2{
-        font-size: 10px;
-        padding-top: 5px;
+        font-size: 8px;
+        padding-top: 2px;
     }
     .title3{
-        font-size: 10px;
-        padding-top: 10px;
+        font-size: 8px;
+        padding-top: 12px;
     }
     .all-box{
         font-size: 12px; 
@@ -171,7 +186,7 @@ export default {
     }
     .title3{
         font-size: 20px;
-        padding-top: 30px;
+        padding-top: 28px;
     }
     .all-box{ 
         font-size: 28px; 
diff --git a/src/views/screen/cityScreen/components/maintenance/index.vue b/src/views/screen/cityScreen/components/maintenance/index.vue
index 03935cb3..0f448a9e 100644
--- a/src/views/screen/cityScreen/components/maintenance/index.vue
+++ b/src/views/screen/cityScreen/components/maintenance/index.vue
@@ -9,81 +9,65 @@
             <div style="width: 100%;height: 12%;display: flex;align-items: center;justify-content: center;">
                 <img src="../../../../../assets/cityScreen/icon1.png" class="icon" />
                 <span class="text" style="">装备预警总数:</span>
-                <span class="num">10</span>
+                <span class="num">{{totalNum}}</span>
                 <span class="unit">台</span>
             </div>
             <div style="width: 100%;height: 85%;overflow-y: auto;">
-                <el-table :data="tableList">
-                    <el-table-column label="序号" align="center" type="index"></el-table-column>
-                    <el-table-column label="工序" align="center" prop="process"/>
-                    <el-table-column label="设备" align="center" prop="equipment"/>
-                    <el-table-column label="维保情况" align="center" prop="maintenanceStatus"/> 
-                </el-table> 
+                <div class="tableHeader">
+                    <div class="header" style="width: 15%;">序号</div>
+                    <div class="header" style="width: 30%;">工序</div> 
+                    <div class="header" style="width: 30%;">设备</div>
+                    <div class="header" style="width: 25%;">维保情况</div>
+                </div>
+                <div class="tableBox">
+                    <div class="tableTr" v-for="(item,index) in tableList" :key="index">
+                        <div class="tableTd" style="width: 15%;">
+                            {{ index+1 }}
+                        </div>
+                        <div class="tableTd" style="width: 30%;">
+                            {{ item.procedureName }}
+                        </div>
+                        <div class="tableTd" style="width: 30%;">
+                            {{ item.deviceName }}
+                        </div>
+                        <div class="tableTd" style="width: 25%;">
+                            <span v-if="item.situation=='已超期'" style="color: red;">{{ item.situation }}</span>
+                            <span v-else>{{ item.situation }}</span>
+                        </div>
+                    </div>
+                </div>
             </div> 
         </div>
     </div>
 </template>
 
 <script> 
+
+import { maintenanceAlarmApi } from "@/api/screen/cityScreen"; 
 export default {
     data() {
         return { 
-            tableList:[
-                {
-                    process:"组塔施工",
-                    equipment:"抱杆",
-                    maintenanceStatus:"正常",
-                },
-                {
-                    process:"组塔施工",
-                    equipment:"抱杆",
-                    maintenanceStatus:"正常",
-                },
-                {
-                    process:"组塔施工",
-                    equipment:"抱杆",
-                    maintenanceStatus:"正常",
-                },
-                {
-                    process:"组塔施工",
-                    equipment:"抱杆",
-                    maintenanceStatus:"正常",
-                },
-                {
-                    process:"组塔施工",
-                    equipment:"抱杆",
-                    maintenanceStatus:"正常",
-                },
-                {
-                    process:"组塔施工",
-                    equipment:"抱杆",
-                    maintenanceStatus:"正常",
-                },
-                {
-                    process:"组塔施工",
-                    equipment:"抱杆",
-                    maintenanceStatus:"正常",
-                },
-                {
-                    process:"组塔施工",
-                    equipment:"抱杆",
-                    maintenanceStatus:"正常",
-                },
-                {
-                    process:"组塔施工",
-                    equipment:"抱杆",
-                    maintenanceStatus:"正常",
-                },
-
-            ]
+            totalNum:0,
+            tableList:[]
         }
     },
     created() {
 
     },
     mounted() {
+        this.getMaintenanceAlarm()
     },
     methods: {
+        getMaintenanceAlarm(){
+            maintenanceAlarmApi({companyId:sessionStorage.getItem('companyId')}).then(response => { 
+                console.log(response,'maintenanceAlarmApi')
+                if(response.code==200){
+                    this.totalNum = response.data.total
+                    this.tableList = response.data.list
+                }
+            });
+        } 
+        
     },
 }
 </script>
@@ -127,70 +111,72 @@ export default {
     color: #ccc; 
 }
 .icon{
-    width: 60px;
-        height: 60px;
-}
-/*最外层透明*/
-::v-deep .el-table,
-::v-deep .el-table__expanded-cell {
-  background-color: transparent !important;
-}
-/* 表格内背景颜色 */
-::v-deep .el-table th,
-::v-deep .el-table tr,
-::v-deep .el-table td {
-  background-color: transparent !important; 
-  border: 1px solid rgba(3, 40, 70, 0.9) !important;
-}
-/*去除底边框*/
-::v-deep.el-table td.el-table__cell {
-  border: 0;
-}
-::v-deep.el-table th.el-table__cell.is-leaf {
-  border: 0;
-}
-::v-deep.el-table::before {
-  height: 0;
+    width: 70px;
+    height: 70px;
 }
 
-/* 滚动条 */
-::v-deep .el-table__body-wrapper::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+.tableHeader{
+    width: 100%;
+    height: 12%; 
+    background-color: #082D6E;
+    opacity: 0.8;
+    display: flex;
+    align-items: center;
 }
-::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
-  background-color: #2893cc;
-  border-radius: 3px;
+.tableBox{
+    width: 100%;
+    height: 84%; 
+    overflow-y: auto;
+}
+.tableTr{
+    width: 100%;
+    height: 16%; 
+    // background-image: url("../../../../../assets/cityScreen/tableTr2.png");
+    // background-size: 100% 100%;
+    border-bottom: 1px dashed #eee;
+    margin-bottom: 2px;
+    display: flex;
+    cursor: pointer;
+}
+.tableTd{
+    width: auto;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    color: #ccc;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.header{
+    color: #ccc;
+    width: 25%;
+    height: 100%;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 26px;
 }
 
-/* 标题行 */
-::v-deep .el-table__header-wrapper {
-  /* border: 1px solid #15c0ff !important; */
-  background-color: rgba(65, 129, 255, 0.4);
+::-webkit-scrollbar{
+  width: 4px;
+  height: 4px;
+}
+//定义背景颜色和圆角
+::-webkit-scrollbar-thumb{
+  border-radius: 1em;
+  background-color: rgba(50,50,50,.3);
+}
+//定义滚动条轨道 内阴影+圆角
+::-webkit-scrollbar-track{
+  border-radius: 1em;
+  background-color: rgba(50,50,50,.1);
 }
 
-::v-deep .el-table .cell {
-  // color: #15c0ff !important;
-  color: #fff;
-  font-size: 10px!important;
-}
-::v-deep .el-table th.el-table__cell > .cell {
-  color: #e1f1fe !important;
-  font-size: 10px!important;
-}
-
-/* 高亮当前行 */
-::v-deep .el-table__body tr.current-row > td {
-  background-color: #15c0ff20 !important; 
-}
-::v-deep .el-table__body tr.current-row .cell {
-  color: #ffffff !important;
-  
-}
-::v-deep .el-table__body tr:hover > td {
-  background-color: #15c0ff20 !important;
-}
-@media screen and (min-width: 1920px) { 
+@media screen and (min-width: 1080px) { 
     .title{
         font-size: 10px; 
     } 
@@ -200,23 +186,20 @@ export default {
         margin: 0 2px;
     }
     .unit{
-        font-size: 10px; 
+        font-size: 8px; 
     }
     .icon{
-        width: 30px;
-        height: 30px;
+        width: 35px;
+        height: 35px;
     }
     .text{ 
         font-size: 10px;
     }
-    ::v-deep .el-table .cell {
-    // color: #15c0ff !important;
-    color: #fff;
-    font-size: 10px!important;
-    }
-    ::v-deep .el-table th.el-table__cell > .cell {
-    color: #e1f1fe !important;
-    font-size: 10px!important;
+    .header{ 
+        font-size: 10px;
+    } 
+    .tableTd{ 
+        font-size: 8px; 
     }
 }
 @media screen and (min-width: 3000px) { 
@@ -229,23 +212,20 @@ export default {
         margin: 0 10px;
     }
     .unit{
-        font-size: 20px; 
+        font-size: 16px; 
     }
     .icon{
-        width: 60px;
-        height: 60px;
+        width: 70px;
+        height: 70px;
     }
     .text{ 
-        font-size: 20px;
+        font-size: 26px;
     }
-    ::v-deep .el-table .cell {
-    // color: #15c0ff !important;
-    color: #fff;
-        font-size: 20px!important;
-    }
-    ::v-deep .el-table th.el-table__cell > .cell {
-        color: #e1f1fe !important;
-        font-size: 20px!important;
+    .header{ 
+        font-size: 26px;
+    } 
+    .tableTd{ 
+        font-size: 24px; 
     }
 }
 
diff --git a/src/views/screen/cityScreen/components/retire/index.vue b/src/views/screen/cityScreen/components/retire/index.vue
index 466b39a9..3a3b3d04 100644
--- a/src/views/screen/cityScreen/components/retire/index.vue
+++ b/src/views/screen/cityScreen/components/retire/index.vue
@@ -8,17 +8,33 @@
         <div class="content-view">
             <div style="width: 100%;height: 12%;display: flex;align-items: center;justify-content: center;">
                 <img src="../../../../../assets/cityScreen/icon2.png" class="icon" />
-                <span class="text" style="">退役预警总数:</span>
-                <span class="num">10</span>
+                <span class="label" style="">退役预警总数:</span>
+                <span class="num">{{totalNum}}</span>
                 <span class="unit">台</span>
             </div>
             <div style="width: 100%;height: 85%;overflow-y: auto;">
-                <el-table :data="tableList">
-                    <el-table-column label="序号" align="center" type="index"></el-table-column>
-                    <el-table-column label="工序" align="center" prop="process"/>
-                    <el-table-column label="设备" align="center" prop="equipment"/>
-                    <el-table-column label="预警情况" align="center" prop="maintenanceStatus"/> 
-                </el-table> 
+                <div class="tableHeader">
+                    <div class="header" style="width: 15%;">序号</div>
+                    <div class="header" style="width: 30%;">工序</div> 
+                    <div class="header" style="width: 30%;">设备</div>
+                    <div class="header" style="width: 25%;">预警情况</div>
+                </div>
+                <div class="tableBox">
+                    <div class="tableTr" v-for="(item,index) in tableList" :key="index">
+                        <div class="tableTd" style="width: 15%;">
+                            {{ index+1 }}
+                        </div>
+                        <div class="tableTd" style="width: 30%;">
+                            {{ item.procedureName }}
+                        </div>
+                        <div class="tableTd" style="width: 30%;">
+                            {{ item.deviceName }}
+                        </div>
+                        <div class="tableTd" style="width: 25%;color: #E3C54E;">
+                            {{ item.situation }}
+                        </div>
+                    </div>
+                </div>
             </div> 
 
         </div>
@@ -26,65 +42,28 @@
 </template>
 
 <script> 
+import { retirementAlarmApi } from "@/api/screen/cityScreen"; 
 export default {
     data() {
         return { 
-            tableList:[
-                {
-                    process:"组塔施工",
-                    equipment:"抱杆",
-                    maintenanceStatus:"正常",
-                },
-                {
-                    process:"组塔施工",
-                    equipment:"抱杆",
-                    maintenanceStatus:"正常",
-                },
-                {
-                    process:"组塔施工",
-                    equipment:"抱杆",
-                    maintenanceStatus:"正常",
-                },
-                {
-                    process:"组塔施工",
-                    equipment:"抱杆",
-                    maintenanceStatus:"正常",
-                },
-                {
-                    process:"组塔施工",
-                    equipment:"抱杆",
-                    maintenanceStatus:"正常",
-                },
-                {
-                    process:"组塔施工",
-                    equipment:"抱杆",
-                    maintenanceStatus:"正常",
-                },
-                {
-                    process:"组塔施工",
-                    equipment:"抱杆",
-                    maintenanceStatus:"正常",
-                },
-                {
-                    process:"组塔施工",
-                    equipment:"抱杆",
-                    maintenanceStatus:"正常",
-                },
-                {
-                    process:"组塔施工",
-                    equipment:"抱杆",
-                    maintenanceStatus:"正常",
-                },
-
-            ]
+            totalNum:0,
+            tableList:[]
         }
     },
-    created() {
-
-    },
+    created() {},
     mounted() {
+        this.getRetirementAlarm()
     },
     methods: {
+        getRetirementAlarm(){
+            retirementAlarmApi({companyId:sessionStorage.getItem('companyId')}).then(response => { 
+                console.log(response,'retirementAlarmApi')
+                if(response.code==200){
+                    this.totalNum = response.data.total
+                    this.tableList = response.data.list
+                }
+            });
+        } 
     },
 }
 </script>
@@ -92,7 +71,7 @@ export default {
 .content{
     width: 100%;
     height: 100%; 
-    background-image: url("../../../../../assets/cityScreen/maintenanceBg.png");
+    background-image: url("../../../../../assets/cityScreen/retireBg.png");
     background-size: 110% 100%;
     
 }   
@@ -113,9 +92,9 @@ export default {
     height: 85%; 
     padding-left: 8%;
 }
-.text{
+.label{
     color: #C0C2C6;
-    font-size: 26px;
+    font-size: 24px;
 }
 .num{
     color: #83D3F8;
@@ -128,67 +107,58 @@ export default {
     color: #ccc; 
 }
 .icon{
-    width: 60px;
-        height: 60px;
-}
-/*最外层透明*/
-::v-deep .el-table,
-::v-deep .el-table__expanded-cell {
-  background-color: transparent !important;
-}
-/* 表格内背景颜色 */
-::v-deep .el-table th,
-::v-deep .el-table tr,
-::v-deep .el-table td {
-  background-color: transparent !important; 
-  border: 1px solid rgba(3, 40, 70, 0.9) !important;
-}
-/*去除底边框*/
-::v-deep.el-table td.el-table__cell {
-  border: 0;
-}
-::v-deep.el-table th.el-table__cell.is-leaf {
-  border: 0;
-}
-::v-deep.el-table::before {
-  height: 0;
+    width: 70px;
+    height: 70px;
 }
 
-/* 滚动条 */
-::v-deep .el-table__body-wrapper::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+.tableHeader{
+    width: 100%;
+    height: 12%;  
+    background-color: #082D6E;
+    opacity: 0.8;
+    display: flex; 
+    align-items: center;
 }
-::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
-  background-color: #2893cc;
-  border-radius: 3px;
+.tableBox{
+    width: 100%;
+    height: 84%; 
+    overflow-y: auto;
+}
+.tableTr{
+    width: 100%;
+    height: 16%; 
+    border-bottom: 1px dashed #eee;
+    // background-image: url("../../../../../assets/cityScreen/tableTr2.png");
+    // background-size: 100% 100%;
+    margin-bottom: 2px;
+    display: flex;
+    cursor: pointer;
+}
+.tableTd{
+    width: auto;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    color: #ccc;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.header{
+    color: #ccc;
+    width: 25%;
+    height: 100%;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 26px;
 }
 
-/* 标题行 */
-::v-deep .el-table__header-wrapper {
-  /* border: 1px solid #15c0ff !important; */
-  background-color: rgba(65, 129, 255, 0.4);
-}
 
-::v-deep .el-table .cell {
-  // color: #15c0ff !important;
-  color: #fff;
-}
-::v-deep .el-table th.el-table__cell > .cell {
-  color: #e1f1fe !important;
-}
-
-/* 高亮当前行 */
-::v-deep .el-table__body tr.current-row > td {
-  background-color: #15c0ff20 !important;
-}
-::v-deep .el-table__body tr.current-row .cell {
-  color: #ffffff !important;
-}
-::v-deep .el-table__body tr:hover > td {
-  background-color: #15c0ff20 !important;
-}
-@media screen and (min-width: 1920px) { 
+@media screen and (min-width: 1080px) { 
     .title{
         font-size: 10px; 
     } 
@@ -198,23 +168,20 @@ export default {
         margin: 0 2px;
     }
     .unit{
-        font-size: 10px; 
+        font-size: 8px; 
     }
     .icon{
-        width: 30px;
-        height: 30px;
+        width: 35px;
+        height: 35px;
     }
-    .text{ 
+    .label{ 
         font-size: 10px;
     }
-    ::v-deep .el-table .cell {
-    // color: #15c0ff !important;
-    color: #fff;
-        font-size: 10px!important;
-    }
-    ::v-deep .el-table th.el-table__cell > .cell {
-        color: #e1f1fe !important;
-        font-size: 10px!important;
+    .header{ 
+        font-size: 10px;
+    } 
+    .tableTd{ 
+        font-size: 8px; 
     }
 }
 @media screen and (min-width: 3000px) { 
@@ -227,23 +194,20 @@ export default {
         margin: 0 10px;
     }
     .unit{
-        font-size: 20px; 
+        font-size: 16px; 
     }
     .icon{
-        width: 60px;
-        height: 60px;
+        width: 70px;
+        height: 70px;
     }
-    .text{ 
-        font-size: 20px;
+    .label{ 
+        font-size: 26px;
     }
-      ::v-deep .el-table .cell {
-    // color: #15c0ff !important;
-    color: #fff;
-        font-size: 20px!important;
-    }
-    ::v-deep .el-table th.el-table__cell > .cell {
-        color: #e1f1fe !important;
-        font-size: 20px!important;
+    .header{ 
+        font-size: 26px;
+    } 
+    .tableTd{ 
+        font-size: 24px; 
     }
 }
 
diff --git a/src/views/screen/cityScreen/components/topIcons/index.vue b/src/views/screen/cityScreen/components/topIcons/index.vue
index d8bd06a7..949571ed 100644
--- a/src/views/screen/cityScreen/components/topIcons/index.vue
+++ b/src/views/screen/cityScreen/components/topIcons/index.vue
@@ -4,7 +4,7 @@
             <div class="item-box" style="right: -8%;">
                 <div class="title">装备总量</div>
                 <div class="num">
-                    <span style="font-weight: 600;">73</span>
+                    <span style="font-weight: 600;">{{totalCount}}</span>
                     <span class="unit">台</span>
                 </div>
             </div>
@@ -14,8 +14,10 @@
             <div class="item-box" style="right: -10%;">
                 <div class="title">装备总价值</div>
                 <div class="num">
-                    <span style="font-weight: 600;">0.027</span>
-                    <span class="unit">亿元</span>
+                    <span style="font-weight: 600;" v-if="totalValue>99999999">{{(totalValue/100000000).toFixed(3)}}</span>
+                    <span style="font-weight: 600;" v-else>{{(totalValue/10000).toFixed(2)}}</span>
+                    <span class="unit" v-if="totalValue>99999999">亿元</span> 
+                    <span class="unit" v-else>万元</span>
                 </div>
             </div>
          </div>
@@ -23,7 +25,7 @@
             <div class="item-box" style="right: -8%;">
                 <div class="title">装备配置率</div>
                 <div class="num">
-                    <span style="font-weight: 600;">100</span>
+                    <span style="font-weight: 600;">{{allocationRate}}</span>
                     <span class="unit">%</span>
                 </div>
             </div>
@@ -31,18 +33,31 @@
     </div>
 </template>
 
-<script> 
+<script>  
+import { getBasicHeadApi } from "@/api/screen/cityScreen"; 
 export default {
     data() {
         return { 
+            totalCount:0,
+            totalValue:0,
+            allocationRate:0,
         }
     },
-    created() {
-
-    },
+    created() {},
     mounted() {
+        this.getBasicHeader()
     },
     methods: {
+        getBasicHeader(){
+            getBasicHeadApi({companyId:sessionStorage.getItem('companyId')}).then(response => {
+                console.log(response,'getBasicHeadApi')
+                if(response.code==200){
+                    this.totalCount=response.data.totalCount
+                    this.totalValue=response.data.totalValue
+                    this.allocationRate=response.data.allocationRate 
+                }
+            });
+        } 
     },
 }
 </script>
@@ -93,7 +108,7 @@ export default {
     margin-left: 10px;
 }
 
-@media screen and (min-width: 1920px) {
+@media screen and (min-width: 1080px) {
     .title{ 
         font-size: 12px; 
     }
diff --git a/src/views/screen/cityScreen/components/topIconsTwo/index.vue b/src/views/screen/cityScreen/components/topIconsTwo/index.vue
index fe15771a..97bb15a4 100644
--- a/src/views/screen/cityScreen/components/topIconsTwo/index.vue
+++ b/src/views/screen/cityScreen/components/topIconsTwo/index.vue
@@ -4,7 +4,7 @@
             <div class="item-box" style="right: -12%;">
                 <div class="title">今日入库</div>
                 <div class="num">
-                    <span style="font-weight: 600;">5</span>
+                    <span style="font-weight: 600;">{{enterNum}}</span>
                     <span class="unit">台</span>
                 </div>
             </div> 
@@ -13,7 +13,7 @@
             <div class="item-box" style="right: 8%;">
                 <div class="title">今日出库</div>
                 <div class="num">
-                    <span style="font-weight: 600;">10</span>
+                    <span style="font-weight: 600;">{{outNum}}</span>
                     <span class="unit">台</span>
                 </div>
             </div>
@@ -22,17 +22,27 @@
 </template>
 
 <script> 
+import { getBasicHeadApi } from "@/api/screen/cityScreen"; 
 export default {
     data() {
         return { 
+            enterNum:0,
+            outNum:0,
         }
     },
-    created() {
-
-    },
+    created() {},
     mounted() {
+        this.getBasicHeader()
     },
     methods: {
+        getBasicHeader(){
+            getBasicHeadApi({companyId:sessionStorage.getItem('companyId')}).then(response => { 
+                if(response.code==200){
+                    this.enterNum=response.data.enterNum
+                    this.outNum=response.data.outNum 
+                }
+            });
+        } 
     },
 }
 </script>
@@ -81,7 +91,7 @@ export default {
     margin-left: 10px;
 }
 
-@media screen and (min-width: 1920px) {
+@media screen and (min-width: 1080px) {
     .title{ 
         font-size: 12px; 
     }
diff --git a/src/views/screen/cityScreen/index.vue b/src/views/screen/cityScreen/index.vue
index 7514486e..388377e1 100644
--- a/src/views/screen/cityScreen/index.vue
+++ b/src/views/screen/cityScreen/index.vue
@@ -78,7 +78,7 @@ export default {
     background-size: 100% 100%;
     display: flex;
 }
-@media screen and (min-width: 1920px) {
+@media screen and (min-width: 1080px) {
   .main-view {
     height: 60vh;
   }
@@ -98,6 +98,7 @@ export default {
 .center_view{
     width: 36%;
     height: 100%; 
+    border: 1px solid red;
 }
 
 .right_view{
@@ -106,6 +107,19 @@ export default {
     padding: 2%;
     //   border: 1px solid red;
 }
-
+::-webkit-scrollbar{
+  width: 4px;
+  height: 4px;
+}
+//定义背景颜色和圆角
+::-webkit-scrollbar-thumb{
+  border-radius: 1em;
+  background-color: rgba(50,50,50,.3);
+}
+//定义滚动条轨道 内阴影+圆角
+::-webkit-scrollbar-track{
+  border-radius: 1em;
+  background-color: rgba(50,50,50,.1);
+}
 
 </style>
diff --git a/src/views/screen/cityScreen/temp.vue b/src/views/screen/cityScreen/temp.vue
deleted file mode 100644
index 768fa8af..00000000
--- a/src/views/screen/cityScreen/temp.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-    <div class="content">
-        <div class="content-title">
-            <div class="title">
-                装备数量价值
-            </div> 
-        </div>
-        <div class="content-view">
-
-
-        </div>
-    </div>
-</template>
-
-<script> 
-export default {
-    data() {
-        return { 
-        }
-    },
-    created() {
-
-    },
-    mounted() {
-    },
-    methods: {
-    },
-}
-</script>
-<style lang="scss" scoped>
-.content{
-    width: 100%;
-    height: 100%; 
-}   
-.content-title{
-    width: 105%;
-    height: 20%;
-    margin-top: -4%;
-    margin-left: -8%;
-    position: relative;
-    color: #78D6FF;
-}
-.title{
-    font-size: 24px;
-    position: absolute;
-    top: 42%;
-    left: 18%;
-}
-.content-view{
-    width: 100%;
-    height: 85%; 
-}
- 
-@media screen and (min-width: 1920px) { 
-    .title{
-        font-size: 10px;
-        position: absolute;
-        top: 42%;
-        left: 18%;
-    } 
-    
-}
-@media screen and (min-width: 3000px) { 
-    .title{
-        font-size: 24px;
-        position: absolute;
-        top: 42%;
-        left: 18%;
-    }
-}
-
-
-</style>