diff --git a/src/assets/cityScreen/engineerUsingBg.png b/src/assets/cityScreen/engineerUsingBg.png
new file mode 100644
index 00000000..298f37db
Binary files /dev/null and b/src/assets/cityScreen/engineerUsingBg.png differ
diff --git a/src/assets/cityScreen/equiQuantityBg.png b/src/assets/cityScreen/equiQuantityBg.png
new file mode 100644
index 00000000..478eaba0
Binary files /dev/null and b/src/assets/cityScreen/equiQuantityBg.png differ
diff --git a/src/assets/cityScreen/equiQuantityTitle.png b/src/assets/cityScreen/equiQuantityTitle.png
new file mode 100644
index 00000000..2f96ae85
Binary files /dev/null and b/src/assets/cityScreen/equiQuantityTitle.png differ
diff --git a/src/assets/cityScreen/equiStatusBg.png b/src/assets/cityScreen/equiStatusBg.png
new file mode 100644
index 00000000..83da4080
Binary files /dev/null and b/src/assets/cityScreen/equiStatusBg.png differ
diff --git a/src/assets/cityScreen/equiTurnoverBg.png b/src/assets/cityScreen/equiTurnoverBg.png
new file mode 100644
index 00000000..c5860ebc
Binary files /dev/null and b/src/assets/cityScreen/equiTurnoverBg.png differ
diff --git a/src/assets/cityScreen/equiUseBg.png b/src/assets/cityScreen/equiUseBg.png
new file mode 100644
index 00000000..22cd3653
Binary files /dev/null and b/src/assets/cityScreen/equiUseBg.png differ
diff --git a/src/assets/cityScreen/mainBg.png b/src/assets/cityScreen/mainBg.png
new file mode 100644
index 00000000..1d6ec3e0
Binary files /dev/null and b/src/assets/cityScreen/mainBg.png differ
diff --git a/src/assets/cityScreen/maintenanceBg.png b/src/assets/cityScreen/maintenanceBg.png
new file mode 100644
index 00000000..0618ae18
Binary files /dev/null and b/src/assets/cityScreen/maintenanceBg.png differ
diff --git a/src/assets/cityScreen/quantityIcon1.png b/src/assets/cityScreen/quantityIcon1.png
new file mode 100644
index 00000000..7d52e9c9
Binary files /dev/null and b/src/assets/cityScreen/quantityIcon1.png differ
diff --git a/src/assets/cityScreen/quantityIcon2.png b/src/assets/cityScreen/quantityIcon2.png
new file mode 100644
index 00000000..401a1238
Binary files /dev/null and b/src/assets/cityScreen/quantityIcon2.png differ
diff --git a/src/assets/cityScreen/quantityIcon3.png b/src/assets/cityScreen/quantityIcon3.png
new file mode 100644
index 00000000..16639150
Binary files /dev/null and b/src/assets/cityScreen/quantityIcon3.png differ
diff --git a/src/assets/cityScreen/retireBg.png b/src/assets/cityScreen/retireBg.png
new file mode 100644
index 00000000..5e986bf0
Binary files /dev/null and b/src/assets/cityScreen/retireBg.png differ
diff --git a/src/assets/cityScreen/topIconsBg.png b/src/assets/cityScreen/topIconsBg.png
new file mode 100644
index 00000000..03620724
Binary files /dev/null and b/src/assets/cityScreen/topIconsBg.png differ
diff --git a/src/assets/cityScreen/topIconsBg2.png b/src/assets/cityScreen/topIconsBg2.png
new file mode 100644
index 00000000..9518f664
Binary files /dev/null and b/src/assets/cityScreen/topIconsBg2.png differ
diff --git a/src/permission.js b/src/permission.js
index 35b9ff31..dbc1f535 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -8,7 +8,7 @@ import { isRelogin } from "@/utils/request";
 
 NProgress.configure({ showSpinner: false });
 
-const whiteList = ["/login", "/register", "/qrCode/qrCodePage"];
+const whiteList = ["/login", "/register", "/qrCode/qrCodePage","/screen/cityScreen"];
 
 router.beforeEach((to, from, next) => {
   NProgress.start();
diff --git a/src/views/screen/cityScreen/components/engineerUsing/index.vue b/src/views/screen/cityScreen/components/engineerUsing/index.vue
new file mode 100644
index 00000000..a3989048
--- /dev/null
+++ b/src/views/screen/cityScreen/components/engineerUsing/index.vue
@@ -0,0 +1,69 @@
+<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%; 
+    background-image: url("../../../../../assets/cityScreen/engineerUsingBg.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%; 
+}   
+.content-title{
+    width: 100%;
+    height: 18%;
+    position: relative;
+    color: #78D6FF;
+}
+.title{
+    font-size: 24px;
+    position: absolute;
+    top: 23%;
+    left: 8%;
+}
+.content-view{
+    width: 100%;
+    height: 85%; 
+    padding-left: 5%;
+}
+ 
+@media screen and (min-width: 1920px) { 
+    .title{
+        font-size: 10px; 
+    } 
+    
+}
+@media screen and (min-width: 3000px) { 
+    .title{
+        font-size: 24px; 
+    }
+}
+
+
+</style>
diff --git a/src/views/screen/cityScreen/components/equiQuantity/index.vue b/src/views/screen/cityScreen/components/equiQuantity/index.vue
new file mode 100644
index 00000000..5c23b35a
--- /dev/null
+++ b/src/views/screen/cityScreen/components/equiQuantity/index.vue
@@ -0,0 +1,130 @@
+<template>
+    <div class="content">
+        <div class="content-title">
+            <img src="../../../../../assets/cityScreen/equiQuantityBg.png" style="width: 100%;height: 100%;" />
+            <div class="title">
+                装备数量价值
+            </div> 
+        </div>
+        <div class="content-view">
+            <div class="content-view-item">
+                <div style="width: 20%;height: 90%;display: flex;align-items: center;justify-content: center;">
+                    <img src="../../../../../assets/cityScreen/quantityIcon1.png" style="width: 90%;height: 80%;" />
+                </div>
+                <div style="width: 80%;height: 90%;display: flex;flex-direction: column;">
+                    <div class="item-title">
+                        <span class="title2">线路装备</span>
+                    </div> 
+                    
+ 
+                    
+                </div>
+            </div>
+            <div class="content-view-item">
+                <div style="width: 20%;height: 90%;display: flex;align-items: center;justify-content: center;">
+                    <img src="../../../../../assets/cityScreen/quantityIcon2.png" style="width: 90%;height: 80%;" />
+                </div>
+                <div style="width: 80%;height: 90%;display: flex;flex-direction: column;">
+                    <div class="item-title">
+                        <span class="title2">变电装备</span>
+                    </div> 
+
+                </div>
+            </div>
+            <div class="content-view-item">
+                <div style="width: 20%;height: 90%;display: flex;align-items: center;justify-content: center;">
+                    <img src="../../../../../assets/cityScreen/quantityIcon3.png" style="width: 90%;height: 80%;" />
+                </div>
+                <div style="width: 80%;height: 90%;display: flex;flex-direction: column;">
+                    <div class="item-title">
+                        <span class="title2">电缆装备</span>
+                    </div> 
+
+
+
+                </div>
+            </div>
+
+        </div>
+    </div>
+</template>
+
+<script> 
+export default {
+    data() {
+        return { 
+        }
+    },
+    created() {
+
+    },
+    mounted() {
+    },
+    methods: {
+    },
+}
+</script>
+<style lang="scss" scoped>
+.content{
+    width: 100%;
+    height: 100%; 
+}   
+.content-title{
+    width: 100%;
+    height: 18%; 
+    position: relative;
+    color: #78D6FF;
+}
+.title{
+    font-size: 24px;
+    position: absolute;
+    top: 42%;
+    left: 15%;
+}
+.content-view{
+    width: 100%;
+    height: 80%; 
+    padding-left: 8%;
+}
+.content-view-item{
+    width: 100%;
+    height: 32%;
+    margin-bottom: 1%; 
+ 
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.item-title{
+    width: 100%;
+    height: 30%;
+    background-image: url("../../../../../assets/cityScreen/equiQuantityTitle.png");
+    background-size: 100% 100%;
+    display: flex;
+    align-items: center;
+    padding-left: 10px;
+}
+.title2{
+     font-size: 20px;
+     color: #fff;
+}
+@media screen and (min-width: 1920px) { 
+    .title{
+        font-size: 10px; 
+    }
+    .title2{
+        font-size: 10px; 
+    }
+    
+}
+@media screen and (min-width: 3000px) { 
+    .title{
+        font-size: 24px;
+    }
+    .title2{
+        font-size: 20px; 
+    }
+}
+
+
+</style>
diff --git a/src/views/screen/cityScreen/components/equiStatus/index.vue b/src/views/screen/cityScreen/components/equiStatus/index.vue
new file mode 100644
index 00000000..99da3f6a
--- /dev/null
+++ b/src/views/screen/cityScreen/components/equiStatus/index.vue
@@ -0,0 +1,75 @@
+<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%; 
+    background-image: url("../../../../../assets/cityScreen/equiStatusBg.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%; 
+}   
+.content-title{
+    width: 100%;
+    height: 18%;
+    position: relative;
+    color: #78D6FF;
+}
+.title{
+    font-size: 24px;
+    position: absolute;
+    top: 42%;
+    left: 18%;
+}
+.content-view{
+    width: 100%;
+    height: 85%; 
+    padding-left: 8%;
+}
+ 
+@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>
diff --git a/src/views/screen/cityScreen/components/equiTurnover/index.vue b/src/views/screen/cityScreen/components/equiTurnover/index.vue
new file mode 100644
index 00000000..85ef350f
--- /dev/null
+++ b/src/views/screen/cityScreen/components/equiTurnover/index.vue
@@ -0,0 +1,69 @@
+<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%; 
+    background-image: url("../../../../../assets/cityScreen/equiTurnoverBg.png");
+    background-size: 110% 100%;
+    
+}   
+.content-title{
+    width: 100%;
+    height: 18%;
+    position: relative;
+    color: #78D6FF;
+}
+.title{
+    font-size: 24px;
+    position: absolute;
+    top: 35%;
+    left: 18%;
+}
+.content-view{
+    width: 100%;
+    height: 85%; 
+    padding-left: 8%;
+}
+ 
+@media screen and (min-width: 1920px) { 
+    .title{
+        font-size: 10px; 
+    } 
+    
+}
+@media screen and (min-width: 3000px) { 
+    .title{
+        font-size: 24px;
+    }
+}
+
+
+</style>
diff --git a/src/views/screen/cityScreen/components/equiUse/index.vue b/src/views/screen/cityScreen/components/equiUse/index.vue
new file mode 100644
index 00000000..48a93d59
--- /dev/null
+++ b/src/views/screen/cityScreen/components/equiUse/index.vue
@@ -0,0 +1,69 @@
+<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%; 
+    background-image: url("../../../../../assets/cityScreen/equiUseBg.png");
+    background-size: 110% 100%;
+    
+}   
+.content-title{
+    width: 100%;
+    height: 18%;
+    position: relative;
+    color: #78D6FF;
+}
+.title{
+    font-size: 24px;
+    position: absolute;
+    top: 35%;
+    left: 18%;
+}
+.content-view{
+    width: 100%;
+    height: 85%; 
+    padding-left: 8%;
+}
+ 
+@media screen and (min-width: 1920px) { 
+    .title{
+        font-size: 10px; 
+    } 
+    
+}
+@media screen and (min-width: 3000px) { 
+    .title{
+        font-size: 24px;
+    }
+}
+
+
+</style>
diff --git a/src/views/screen/cityScreen/components/maintenance/index.vue b/src/views/screen/cityScreen/components/maintenance/index.vue
new file mode 100644
index 00000000..5dd5b769
--- /dev/null
+++ b/src/views/screen/cityScreen/components/maintenance/index.vue
@@ -0,0 +1,69 @@
+<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%; 
+    background-image: url("../../../../../assets/cityScreen/maintenanceBg.png");
+    background-size: 110% 100%;
+    
+}   
+.content-title{
+    width: 100%;
+    height: 18%;
+    position: relative;
+    color: #78D6FF;
+}
+.title{
+    font-size: 24px;
+    position: absolute;
+    top: 35%;
+    left: 18%;
+}
+.content-view{
+    width: 100%;
+    height: 85%; 
+    padding-left: 8%;
+}
+ 
+@media screen and (min-width: 1920px) { 
+    .title{
+        font-size: 10px; 
+    } 
+    
+}
+@media screen and (min-width: 3000px) { 
+    .title{
+        font-size: 24px;
+    }
+}
+
+
+</style>
diff --git a/src/views/screen/cityScreen/components/retire/index.vue b/src/views/screen/cityScreen/components/retire/index.vue
new file mode 100644
index 00000000..2bc38fd6
--- /dev/null
+++ b/src/views/screen/cityScreen/components/retire/index.vue
@@ -0,0 +1,69 @@
+<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%; 
+    background-image: url("../../../../../assets/cityScreen/retireBg.png");
+    background-size: 110% 100%;
+    
+}   
+.content-title{
+    width: 100%;
+    height: 18%;
+    position: relative;
+    color: #78D6FF;
+}
+.title{
+    font-size: 24px;
+    position: absolute;
+    top: 35%;
+    left: 18%;
+}
+.content-view{
+    width: 100%;
+    height: 85%; 
+    padding-left: 8%;
+}
+ 
+@media screen and (min-width: 1920px) { 
+    .title{
+        font-size: 10px; 
+    } 
+    
+}
+@media screen and (min-width: 3000px) { 
+    .title{
+        font-size: 24px; 
+    }
+}
+
+
+</style>
diff --git a/src/views/screen/cityScreen/components/topIcons/index.vue b/src/views/screen/cityScreen/components/topIcons/index.vue
new file mode 100644
index 00000000..d8bd06a7
--- /dev/null
+++ b/src/views/screen/cityScreen/components/topIcons/index.vue
@@ -0,0 +1,121 @@
+<template>
+    <div class="content">
+         <div class="iconItem">
+            <div class="item-box" style="right: -8%;">
+                <div class="title">装备总量</div>
+                <div class="num">
+                    <span style="font-weight: 600;">73</span>
+                    <span class="unit">台</span>
+                </div>
+            </div>
+           
+         </div>
+         <div class="iconItem">
+            <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>
+                </div>
+            </div>
+         </div>
+         <div class="iconItem">
+            <div class="item-box" style="right: -8%;">
+                <div class="title">装备配置率</div>
+                <div class="num">
+                    <span style="font-weight: 600;">100</span>
+                    <span class="unit">%</span>
+                </div>
+            </div>
+         </div>
+    </div>
+</template>
+
+<script> 
+export default {
+    data() {
+        return { 
+        }
+    },
+    created() {
+
+    },
+    mounted() {
+    },
+    methods: {
+    },
+}
+</script>
+<style lang="scss" scoped>
+.content{
+    width: 100%;
+    height: 100%;
+    background-image: url("../../../../../assets/cityScreen/topIconsBg.png");
+    background-size: 100% 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    // border: 1px solid red;
+   
+}  
+.iconItem{
+    width: 25%;
+    height: 100%;
+    margin-right: 6%;
+    // border: 1px solid red;
+    position: relative;
+}
+.item-box{
+    width: 70%;
+    height: 100%;
+    position: absolute;
+    right: 0%; 
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+.title{
+    color: #fff;
+    font-size: 32px;
+    margin-right: 15%;
+    
+}
+.num{
+    color: #FCFAC4;
+    font-size: 32px;
+    margin-right: 25%;
+    margin-top: 5%;
+}
+.unit{
+    font-size: 24px;
+    color: #ccc;
+    margin-left: 10px;
+}
+
+@media screen and (min-width: 1920px) {
+    .title{ 
+        font-size: 12px; 
+    }
+    .num{ 
+        font-size: 12px; 
+    }
+    .unit{
+        font-size: 10px; 
+        margin-left: 2px;
+    }
+}
+@media screen and (min-width: 3000px) {
+    .title{ 
+        font-size: 32px; 
+    }
+    .num{ 
+        font-size: 32px;
+    }
+    .unit{
+        font-size: 24px; 
+        margin-left: 10px;
+    }
+}
+
+</style>
diff --git a/src/views/screen/cityScreen/components/topIconsTwo/index.vue b/src/views/screen/cityScreen/components/topIconsTwo/index.vue
new file mode 100644
index 00000000..fe15771a
--- /dev/null
+++ b/src/views/screen/cityScreen/components/topIconsTwo/index.vue
@@ -0,0 +1,109 @@
+<template>
+    <div class="content">
+         <div class="iconItem">
+            <div class="item-box" style="right: -12%;">
+                <div class="title">今日入库</div>
+                <div class="num">
+                    <span style="font-weight: 600;">5</span>
+                    <span class="unit">台</span>
+                </div>
+            </div> 
+         </div>
+         <div class="iconItem">
+            <div class="item-box" style="right: 8%;">
+                <div class="title">今日出库</div>
+                <div class="num">
+                    <span style="font-weight: 600;">10</span>
+                    <span class="unit">台</span>
+                </div>
+            </div>
+         </div> 
+    </div>
+</template>
+
+<script> 
+export default {
+    data() {
+        return { 
+        }
+    },
+    created() {
+
+    },
+    mounted() {
+    },
+    methods: {
+    },
+}
+</script>
+<style lang="scss" scoped>
+.content{
+    width: 100%;
+    height: 100%;
+    background-image: url("../../../../../assets/cityScreen/topIconsBg2.png");
+    background-size: 100% 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;  
+}  
+.iconItem{
+    width: 50%;
+    height: 100%;
+    margin-right: 6%;
+    // border: 1px solid red;
+    position: relative;
+}
+.item-box{
+    width: 70%;
+    height: 100%;
+    position: absolute;
+    right: 0%; 
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+.title{
+    color: #fff;
+    font-size: 32px;
+    margin-right: 15%;
+    
+}
+.num{
+    color: #FCFAC4;
+    font-size: 32px;
+    margin-right: 25%;
+    margin-top: 5%;
+}
+.unit{
+    font-size: 24px;
+    color: #ccc;
+    margin-left: 10px;
+}
+
+@media screen and (min-width: 1920px) {
+    .title{ 
+        font-size: 12px; 
+    }
+    .num{ 
+        font-size: 12px; 
+    }
+    .unit{
+        font-size: 10px; 
+        margin-left: 2px;
+    }
+}
+@media screen and (min-width: 3000px) {
+    .title{ 
+        font-size: 32px; 
+    }
+    .num{ 
+        font-size: 32px;
+    }
+    .unit{
+        font-size: 24px; 
+        margin-left: 10px;
+    }
+}
+
+</style>
diff --git a/src/views/screen/cityScreen/index.vue b/src/views/screen/cityScreen/index.vue
index 1e109676..faf628bd 100644
--- a/src/views/screen/cityScreen/index.vue
+++ b/src/views/screen/cityScreen/index.vue
@@ -1,211 +1,111 @@
 <template>
-    <div style="width: 100%">
-        <div style="width: 100%; padding: 10px">
-            <div class="item-box">
-                <div>设备类型:</div>
-                <div style="margin-left: 10px; color: blue">{{
-                    queryParams.deviceType
-                }}</div>
-            </div>
-            <div class="item-box">
-                <div>规格型号:</div>
-                <div style="margin-left: 10px">
-                    {{ queryParams.specificationType }}</div
-                >
-            </div>
-            <div class="item-box">
-                <div>二维码编码:</div>
-                <div style="margin-left: 10px">{{ queryParams.qrCode }}</div>
-            </div>
-            <div class="item-box">
-                <div>设备编码:</div>
-                <div style="margin-left: 10px">{{ queryParams.maCode }}</div>
-            </div>
-            <div class="item-box">
-                <div>设备状态:</div>
-                <div style="margin-left: 10px">{{
-                    queryParams.maStatusName
-                }}</div>
-            </div>
-            <!-- <div class="item-box">
-            <div >本次检修人员:</div>
-            <div style="margin-left: 10px;">{{queryParams.checkMan}}</div>
-          </div>   -->
-            <div class="item-box">
-                <div>本次检修时间:</div>
-                <div style="margin-left: 10px; color: blue">{{
-                    queryParams.thisCheckTime
-                }}</div>
-            </div>
-            <div class="item-box">
-                <div>下次检修时间:</div>
-                <div style="margin-left: 10px; color: blue">{{
-                    queryParams.nextCheckTime
-                }}</div>
-            </div>
-            <div class="item-box">
-                <div>检验人员:</div>
-                <div style="margin-left: 10px">{{ queryParams.checkMan }}</div>
-            </div>
-            <div class="item-box">
-                <div>检验结论:</div>
-                <div style="margin-left: 10px; color: blue">{{
-                    queryParams.inspectStatus || '合格'
-                }}</div>
-            </div>
-            <div class="item-box">
-                <div>联系电话:</div>
-                <div style="margin-left: 10px">{{ queryParams.phone }}</div>
-            </div>
-            <div class="item-box">
-                <div>生产厂家:</div>
-                <div style="margin-left: 10px">{{ queryParams.maVender }}</div>
-            </div>
-            <div class="item-box">
-                <div>出厂日期:</div>
-                <div style="margin-left: 10px">{{
-                    queryParams.outFacTime
-                }}</div>
-            </div>
-            <div class="item-box">
-                <div>出入库次数:</div>
-                <div style="margin-left: 10px">{{ queryParams.inOutNum }}</div>
-            </div>
-            <div class="item-box">
-                <div>领料单位:</div>
-                <div style="margin-left: 10px"
-                    >{{ queryParams.leaseUnit }}
+    <div class="page">
+        <div class="main-view">
+            <div class="left_view">
+                <TopIcons style="width: 96%;height: 13%;margin: 0 auto;"></TopIcons>
+                <div style="width: 98%;height: 42%;margin: 0 auto;display: flex;align-items: center;">
+                    <EquiQuantity style="width: 50%;height: 100%;"></EquiQuantity>
+                    <EquiStatus style="width: 50%;height: 100%;"></EquiStatus>
+                </div>
+                <div style="width: 98%;height: 42%;margin: 0 auto;display: flex;align-items: center;">
+                    <Maintenance style="width: 50%;height: 100%;"></Maintenance>
+                    <Retire style="width: 50%;height: 100%;"></Retire>
                 </div>
             </div>
-            <div class="item-box">
-                <div>领料工程:</div>
-                <div style="margin-left: 10px">{{ queryParams.leasePro }} </div>
-            </div>
-            <div class="item-box">
-                <div>领料时间:</div>
-                <div style="margin-left: 10px"
-                    >{{ queryParams.leaseTime }}
+            <div class="center_view"></div>
+            <div class="right_view">
+                <TopIconsTwo style="width: 96%;height: 13%;margin: 0 auto;"></TopIconsTwo>
+                <div style="width: 98%;height: 42%;margin: 0 auto;display: flex;align-items: center;">
+                    <EquiUse style="width: 50%;height: 100%;"></EquiUse>
+                    <EquiTurnover style="width: 50%;height: 100%;"></EquiTurnover>
+                </div>
+                <div style="width: 98%;height: 42%;margin: 0 auto;display: flex;align-items: center;">
+                    <EngineerUsing style="width: 100%;height: 100%;"></EngineerUsing>
                 </div>
-            </div>
-            <div class="item-box">
-                <div>退料单位:</div>
-                <div style="margin-left: 10px">{{ queryParams.backUnit }} </div>
-            </div>
-            <div class="item-box">
-                <div>退料工程:</div>
-                <div style="margin-left: 10px">{{ queryParams.backPro }} </div>
-            </div>
-            <div class="item-box">
-                <div>退料时间:</div>
-                <div style="margin-left: 10px">{{ queryParams.backTime }} </div>
-            </div>
-        </div>
-        <div class="bottom-box">
-            <div
-                style="
-                    width: 100%;
-                    text-align: center;
-                    margin-bottom: 20px;
-                    color: green;
-                    margin-top: 10px;
-                "
-            >
-                检 验 合 格 证
-            </div>
-            <div style="width: 50%; display: flex; margin-bottom: 10px">
-                <div style="color: green">名 称：</div>
-                <div style="border-bottom: 1px solid green">{{
-                    queryParams.deviceType
-                }}</div>
-            </div>
-            <div style="width: 50%; display: flex; margin-bottom: 10px">
-                <div style="color: green">检验结论：</div>
-                <div style="color: red; font-size: 18px; font-weight: 600">{{
-                    queryParams.inspectStatus || '合格'
-                }}</div>
-            </div>
-            <div style="width: 100%; display: flex; margin-bottom: 10px">
-                <div style="color: green">型 号：</div>
-                <div style="border-bottom: 1px solid green">{{
-                    queryParams.specificationType
-                }}</div>
-            </div>
-            <div style="width: 100%; display: flex; margin-bottom: 10px">
-                <div style="color: green">编 号：</div>
-                <div style="border-bottom: 1px solid green">{{
-                    queryParams.maCode
-                }}</div>
-            </div>
-            <div style="width: 100%; display: flex; margin-bottom: 10px">
-                <div style="color: green">本次检验日期：</div>
-                <div style="border-bottom: 1px solid green">{{
-                    queryParams.thisCheckTime
-                }}</div>
-            </div>
-            <div style="width: 100%; display: flex; margin-bottom: 10px">
-                <div style="color: green">下次检验日期：：</div>
-                <div style="border-bottom: 1px solid green">{{
-                    queryParams.nextCheckTime
-                }}</div>
-            </div>
-            <div style="position: absolute; top: 0%; left: 25%">
-                <canvas id="canvas" width="180" height="180"></canvas>
             </div>
         </div>
     </div>
 </template>
 
 <script> 
+import TopIcons from './components/topIcons/index'
+import TopIconsTwo from './components/topIconsTwo/index'
+import EquiQuantity from './components/equiQuantity/index'
+import EquiStatus from './components/equiStatus/index'
+import Maintenance from './components/maintenance/index'
+import Retire from './components/retire/index'
+import EquiTurnover from './components/equiTurnover/index'
+import EquiUse from './components/equiUse/index'
+import EngineerUsing from './components/engineerUsing/index'
 export default {
+    name: 'cityScreen',
+    components: {
+      TopIcons,
+      TopIconsTwo,
+      EquiQuantity,
+      EquiStatus,
+      Maintenance,
+      Retire,
+      EquiTurnover,
+      EquiUse,
+      EngineerUsing
+    },
     data() {
-        return {
-            qrCode: '',
-            queryParams: {
-                deviceType: '', //设备类型
-                specificationType: '', //规格型号
-                qrCode: '', //二维码
-                maCode: '', //设备编码
-                maStatusName: '', //设备状态
-                checkMan: '', //本次检验人
-                thisCheckTime: '', //本次检验日期
-                nextCheckTime: '', //下次检验日期
-                // maStatusName:'',//设备状态
-                inspectMan: '', //检验人员
-                inspectStatus: '', //检验结论
-                phone: '', //联系电话
-                maVender: '', //厂家名称
-                outFacTime: '', //出厂日期
-                inOutNum: '', //出入库次数
-                leaseUnit: '', // 领料单位
-                leasePro: '', // 领料工程
-                leaseTime: '', // 领料时间
-                backUnit: '', //  退料单位
-                backPro: '', // 退料工程
-                backTime: '', // 退料时间
-            },
+        return { 
         }
     },
-    created() { 
+    created() {
+
     },
-    mounted() { 
+    mounted() {
     },
     methods: {
     },
 }
 </script>
 <style lang="scss" scoped>
-.item-box {
+.page{
+    background: #333;
+    width: 100vw;
+    height: 100vh; 
     display: flex;
-    width: 100%;
-    border-bottom: 1px solid green;
-    margin-bottom: 10px;
+    align-items: center;
 }
-.bottom-box {
+.main-view{
+    width: 100vw;
+    height: 100vh;
+    background-image: url("../../../assets/cityScreen/mainBg.png");
+    background-size: 100% 100%;
     display: flex;
-    width: 99%;
-    border: 4px solid rgb(2, 196, 2);
-    flex-wrap: wrap;
-    margin: auto;
-    position: relative;
 }
+@media screen and (min-width: 1920px) {
+  .main-view {
+    height: 50vh;
+  }
+}
+@media screen and (min-width: 3300px) {
+  .main-view {
+    height: 100vh;
+  }
+}
+
+.left_view{
+    width: 32%;
+    height: 100%; 
+    padding: 2%;
+}
+
+.center_view{
+    width: 36%;
+    height: 100%; 
+}
+
+.right_view{
+    width: 32%;
+    height: 100%;
+    padding: 2%;
+    //   border: 1px solid red;
+}
+
+
 </style>
diff --git a/src/views/screen/cityScreen/temp.vue b/src/views/screen/cityScreen/temp.vue
new file mode 100644
index 00000000..768fa8af
--- /dev/null
+++ b/src/views/screen/cityScreen/temp.vue
@@ -0,0 +1,73 @@
+<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>