vor 3 Jahren · 8a2024265b
--- a/.browserslistrc
+++ b/.browserslistrc
@@ -0,0 +1,3 @@
 
				+> 1%
			
 
				+last 2 versions
			
 
				+not dead
			
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -0,0 +1,14 @@
 
				+module.exports = {
			
 
				+  root: true,
			
 
				+  env: {
			
 
				+    node: true,
			
 
				+  },
			
 
				+  extends: ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/prettier"],
			
 
				+  parserOptions: {
			
 
				+    parser: "babel-eslint",
			
 
				+  },
			
 
				+  rules: {
			
 
				+    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
			
 
				+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
			
 
				+  },
			
 
				+};
			
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,23 @@
 
				+.DS_Store
			
 
				+node_modules
			
 
				+/dist
			
 
				+
			
 
				+
			
 
				+# local env files
			
 
				+.env.local
			
 
				+.env.*.local
			
 
				+
			
 
				+# Log files
			
 
				+npm-debug.log*
			
 
				+yarn-debug.log*
			
 
				+yarn-error.log*
			
 
				+pnpm-debug.log*
			
 
				+
			
 
				+# Editor directories and files
			
 
				+.idea
			
 
				+.vscode
			
 
				+*.suo
			
 
				+*.ntvs*
			
 
				+*.njsproj
			
 
				+*.sln
			
 
				+*.sw?
			
--- a/README.md
+++ b/README.md
@@ -0,0 +1,24 @@
 
				+# code
			
 
				+
			
 
				+## Project setup
			
 
				+```
			
 
				+npm install
			
 
				+```
			
 
				+
			
 
				+### Compiles and hot-reloads for development
			
 
				+```
			
 
				+npm run serve
			
 
				+```
			
 
				+
			
 
				+### Compiles and minifies for production
			
 
				+```
			
 
				+npm run build
			
 
				+```
			
 
				+
			
 
				+### Lints and fixes files
			
 
				+```
			
 
				+npm run lint
			
 
				+```
			
 
				+
			
 
				+### Customize configuration
			
 
				+See [Configuration Reference](https://cli.vuejs.org/config/).
			
--- a/babel.config.js
+++ b/babel.config.js
@@ -0,0 +1,3 @@
 
				+module.exports = {
			
 
				+  presets: ["@vue/cli-plugin-babel/preset"],
			
 
				+};
			
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,33 @@
 
				+{
			
 
				+  "name": "code",
			
 
				+  "version": "0.1.0",
			
 
				+  "private": true,
			
 
				+  "scripts": {
			
 
				+    "serve": "vue-cli-service serve",
			
 
				+    "build": "vue-cli-service build",
			
 
				+    "lint": "vue-cli-service lint"
			
 
				+  },
			
 
				+  "dependencies": {
			
 
				+    "core-js": "^3.6.5",
			
 
				+    "echarts": "^5.2.2",
			
 
				+    "swiper": "^7.3.1",
			
 
				+    "v-viewer": "^1.6.4",
			
 
				+    "vue": "^3.0.0",
			
 
				+    "vue-router": "^4.0.0-0"
			
 
				+  },
			
 
				+  "devDependencies": {
			
 
				+    "@vue/cli-plugin-babel": "~4.5.0",
			
 
				+    "@vue/cli-plugin-eslint": "~4.5.0",
			
 
				+    "@vue/cli-plugin-router": "~4.5.0",
			
 
				+    "@vue/cli-service": "~4.5.0",
			
 
				+    "@vue/compiler-sfc": "^3.0.0",
			
 
				+    "@vue/eslint-config-prettier": "^6.0.0",
			
 
				+    "babel-eslint": "^10.1.0",
			
 
				+    "eslint": "^6.7.2",
			
 
				+    "eslint-plugin-prettier": "^3.3.1",
			
 
				+    "eslint-plugin-vue": "^7.0.0",
			
 
				+    "less": "^3.0.4",
			
 
				+    "less-loader": "^5.0.0",
			
 
				+    "prettier": "^2.2.1"
			
 
				+  }
			
 
				+}
			
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,17 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="">
			
 
				+  <head>
			
 
				+    <meta charset="utf-8">
			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
			
 
				+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
			
 
				+    <title><%= htmlWebpackPlugin.options.title %></title>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <noscript>
			
 
				+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
			
 
				+    </noscript>
			
 
				+    <div id="app"></div>
			
 
				+    <!-- built files will be auto injected -->
			
 
				+  </body>
			
 
				+</html>
			
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,18 @@
 
				+<template>
			
 
				+  <router-view />
			
 
				+</template>
			
 
				+
			
 
				+<style lang="less">
			
 
				+html,
			
 
				+body {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+}
			
 
				+
			
 
				+#app {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  overflow: hidden;
			
 
				+  color: #fff;
			
 
				+}
			
 
				+</style>
			
--- a/src/assets/images/bg_line.png
+++ b/src/assets/images/bg_line.png
--- a/src/assets/images/gaikuang/1.png
+++ b/src/assets/images/gaikuang/1.png
--- a/src/assets/images/gaikuang/2.png
+++ b/src/assets/images/gaikuang/2.png
--- a/src/assets/images/gaikuang/3.png
+++ b/src/assets/images/gaikuang/3.png
--- a/src/assets/images/gdjiankong/1.png
+++ b/src/assets/images/gdjiankong/1.png
--- a/src/assets/images/gdjiankong/2.png
+++ b/src/assets/images/gdjiankong/2.png
--- a/src/assets/images/gdjiankong/3.png
+++ b/src/assets/images/gdjiankong/3.png
--- a/src/assets/images/gdjiankong/4.png
+++ b/src/assets/images/gdjiankong/4.png
--- a/src/assets/images/gdjiankong/t1.png
+++ b/src/assets/images/gdjiankong/t1.png
--- a/src/assets/images/gdjiankong/t2.png
+++ b/src/assets/images/gdjiankong/t2.png
--- a/src/assets/images/gdjiankong/t3.png
+++ b/src/assets/images/gdjiankong/t3.png
--- a/src/assets/images/jiankong/1.png
+++ b/src/assets/images/jiankong/1.png
--- a/src/assets/images/jiankong/2.png
+++ b/src/assets/images/jiankong/2.png
--- a/src/assets/images/jiankong/3.png
+++ b/src/assets/images/jiankong/3.png
--- a/src/assets/images/jiankong/4.png
+++ b/src/assets/images/jiankong/4.png
--- a/src/assets/images/jiankong/bg.png
+++ b/src/assets/images/jiankong/bg.png
--- a/src/assets/images/jiankong/right_icon.png
+++ b/src/assets/images/jiankong/right_icon.png
--- a/src/assets/images/jiankong/thumb.png
+++ b/src/assets/images/jiankong/thumb.png
--- a/src/assets/images/jiankong/top.png
+++ b/src/assets/images/jiankong/top.png
--- a/src/assets/images/jiankong/路径
+++ b/src/assets/images/jiankong/路径
--- a/src/assets/images/jiankong/路径
+++ b/src/assets/images/jiankong/路径
--- a/src/assets/images/nenghao/1.png
+++ b/src/assets/images/nenghao/1.png
--- a/src/assets/images/nenghao/2.png
+++ b/src/assets/images/nenghao/2.png
--- a/src/assets/images/nenghao/3.png
+++ b/src/assets/images/nenghao/3.png
--- a/src/assets/images/nenghao/w1.png
+++ b/src/assets/images/nenghao/w1.png
--- a/src/assets/images/nenghao/w2.png
+++ b/src/assets/images/nenghao/w2.png
--- a/src/assets/images/nenghao/w3.png
+++ b/src/assets/images/nenghao/w3.png
--- a/src/assets/images/title_icon.png
+++ b/src/assets/images/title_icon.png
--- a/src/assets/images/wulianwang/1.png
+++ b/src/assets/images/wulianwang/1.png
--- a/src/assets/images/wulianwang/2.png
+++ b/src/assets/images/wulianwang/2.png
--- a/src/assets/images/wulianwang/3.png
+++ b/src/assets/images/wulianwang/3.png
--- a/src/assets/images/wulianwang/4.png
+++ b/src/assets/images/wulianwang/4.png
--- a/src/assets/images/wulianwang/5.png
+++ b/src/assets/images/wulianwang/5.png
--- a/src/assets/images/wulianwang/6.png
+++ b/src/assets/images/wulianwang/6.png
--- a/src/assets/images/wulianwang/7.png
+++ b/src/assets/images/wulianwang/7.png
--- a/src/assets/images/wulianwang/8.png
+++ b/src/assets/images/wulianwang/8.png
--- a/src/assets/images/wulianwang/组
+++ b/src/assets/images/wulianwang/组
--- a/src/assets/images/wulianwang/组
+++ b/src/assets/images/wulianwang/组
--- a/src/assets/images/wulianwang/组
+++ b/src/assets/images/wulianwang/组
--- a/src/assets/images/wulianwang/组
+++ b/src/assets/images/wulianwang/组
--- a/src/assets/images/wurenji/top.png
+++ b/src/assets/images/wurenji/top.png
--- a/src/assets/images/能耗管理_slices.zip
+++ b/src/assets/images/能耗管理_slices.zip
--- a/src/assets/images/能耗管理_slices/减去
+++ b/src/assets/images/能耗管理_slices/减去
--- a/src/assets/images/能耗管理_slices/减去
+++ b/src/assets/images/能耗管理_slices/减去
--- a/src/assets/images/能耗管理_slices/减去
+++ b/src/assets/images/能耗管理_slices/减去
--- a/src/assets/images/能耗管理_slices/椭圆
+++ b/src/assets/images/能耗管理_slices/椭圆
--- a/src/assets/images/能耗管理_slices/椭圆
+++ b/src/assets/images/能耗管理_slices/椭圆
--- a/src/assets/images/能耗管理_slices/椭圆
+++ b/src/assets/images/能耗管理_slices/椭圆
--- a/src/assets/images/能耗管理_slices/椭圆
+++ b/src/assets/images/能耗管理_slices/椭圆
--- a/src/assets/images/能耗管理_slices/矩形
+++ b/src/assets/images/能耗管理_slices/矩形
--- a/src/assets/images/能耗管理_slices/矩形
+++ b/src/assets/images/能耗管理_slices/矩形
--- a/src/assets/images/能耗管理_slices/矩形
+++ b/src/assets/images/能耗管理_slices/矩形
--- a/src/assets/images/能耗管理_slices/组
+++ b/src/assets/images/能耗管理_slices/组
--- a/src/assets/images/能耗管理_slices/组
+++ b/src/assets/images/能耗管理_slices/组
--- a/src/assets/images/能耗管理_slices/组
+++ b/src/assets/images/能耗管理_slices/组
--- a/src/assets/images/能耗管理_slices/组
+++ b/src/assets/images/能耗管理_slices/组
--- a/src/assets/images/能耗管理_slices/组
+++ b/src/assets/images/能耗管理_slices/组
--- a/src/assets/images/能耗管理_slices/组
+++ b/src/assets/images/能耗管理_slices/组
--- a/src/assets/images/能耗管理_slices/组
+++ b/src/assets/images/能耗管理_slices/组
--- a/src/assets/images/能耗管理_slices/组
+++ b/src/assets/images/能耗管理_slices/组
--- a/src/assets/images/能耗管理_slices/组
+++ b/src/assets/images/能耗管理_slices/组
--- a/src/assets/images/能耗管理_slices/组
+++ b/src/assets/images/能耗管理_slices/组
--- a/src/assets/images/能耗管理_slices/组
+++ b/src/assets/images/能耗管理_slices/组
--- a/src/assets/images/能耗管理_slices/路径
+++ b/src/assets/images/能耗管理_slices/路径
--- a/src/assets/images/能耗管理_slices/路径
+++ b/src/assets/images/能耗管理_slices/路径
--- a/src/assets/images/能耗管理_slices/路径
+++ b/src/assets/images/能耗管理_slices/路径
--- a/src/assets/images/能耗管理_slices/飞控.png
+++ b/src/assets/images/能耗管理_slices/飞控.png
--- a/src/assets/images/能耗管理_slices/鹏城实验室LOGO.png
+++ b/src/assets/images/能耗管理_slices/鹏城实验室LOGO.png
--- a/src/assets/style/public.less
+++ b/src/assets/style/public.less
@@ -0,0 +1,21 @@
 
				+@color: #3b6156;
			
 
				+.container{
			
 
				+  display: flex;
			
 
				+  align-items: center;
			
 
				+  flex-direction: column;
			
 
				+  justify-content: space-between;
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+}
			
 
				+
			
 
				+.body{
			
 
				+  background-color: rgba(1, 9, 29, 0.8);
			
 
				+  padding: 30px;
			
 
				+  border-radius: 4px;
			
 
				+  width: 100%;
			
 
				+}
			
 
				+
			
 
				+.time {
			
 
				+  font-size: 14px;
			
 
				+  color: rgba(255, 255, 255, 0.7);
			
 
				+}
			
--- a/src/assets/style/reset.less
+++ b/src/assets/style/reset.less
@@ -0,0 +1,48 @@
 
				+/* reset */
			
 
				+html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
			
 
				+header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
			
 
				+table{border-collapse:collapse;border-spacing:0;}
			
 
				+caption,th{text-align:left;font-weight:normal;}
			
 
				+html,body,fieldset,img,iframe,abbr{border:0;}
			
 
				+i,cite,em,var,address,dfn{font-style:normal;}
			
 
				+[hidefocus],summary{outline:0;}
			
 
				+li{list-style:none;}
			
 
				+h1,h2,h3,h4,h5,h6,small{font-size:100%;}
			
 
				+sup,sub{font-size:83%;}
			
 
				+pre,code,kbd,samp{font-family:inherit;}
			
 
				+q:before,q:after{content:none;}
			
 
				+textarea{overflow:auto;resize:none;}
			
 
				+label,summary{cursor:default;}
			
 
				+a,button{cursor:pointer;}
			
 
				+h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
			
 
				+del,ins,u,s,a,a:hover{text-decoration:none;}
			
 
				+body,textarea,input,button,select,keygen,legend{font-size: 14px;;outline:0;color:#fff;}
			
 
				+*{box-sizing: border-box}
			
 
				+a{text-decoration: none;}
			
 
				+input{  
			
 
				+	background:none;  
			
 
				+	outline:none;  
			
 
				+	border:none;
			
 
				+}
			
 
				+input:focus{   
			
 
				+	border:none;
			
 
				+}
			
 
				+
			
 
				+::-webkit-scrollbar {
			
 
				+  width: 2px;
			
 
				+  height: 8px;
			
 
				+}
			
 
				+
			
 
				+::-webkit-scrollbar-thumb {
			
 
				+  height: 50px;
			
 
				+  background-color: #ddd;
			
 
				+  -webkit-border-radius: 4px;
			
 
				+  outline: 2px solid #fff;
			
 
				+}
			
 
				+
			
 
				+::-webkit-scrollbar-thumb:hover {
			
 
				+  height: 50px;
			
 
				+  background-color: #9f9f9f;
			
 
				+  -webkit-border-radius: 4px;
			
 
				+}
			
 
				+
			
--- a/src/components/gaikuang/index.vue
+++ b/src/components/gaikuang/index.vue
@@ -0,0 +1,119 @@
 
				+<template>
			
 
				+  <div class="body">
			
 
				+    <vTitle>园区概况</vTitle>
			
 
				+    <div class="con">
			
 
				+      <div class="top">大楼名称</div>
			
 
				+      <div class="bottom" id="gk"></div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  components: {},
			
 
				+  data() {
			
 
				+    return {
			
 
				+      options: {
			
 
				+        tooltip: {
			
 
				+          trigger: "item",
			
 
				+        },
			
 
				+
			
 
				+        series: [
			
 
				+          {
			
 
				+            type: "pie",
			
 
				+            radius: ["40%", "70%"],
			
 
				+            avoidLabelOverlap: true,
			
 
				+            label: {
			
 
				+              color: "rgba(255, 255, 255, 1)",
			
 
				+              position: "outside",
			
 
				+              formatter: "{d}%  {name|{b}}",
			
 
				+              rich: {
			
 
				+                name: {
			
 
				+                  fontSize: 16,
			
 
				+                  color: "rgba(224, 184, 34, 1)",
			
 
				+                },
			
 
				+              },
			
 
				+            },
			
 
				+            labelLine: {
			
 
				+              showAbove: false,
			
 
				+              lineStyle: {
			
 
				+                color: "#ffffff",
			
 
				+                cap: "round",
			
 
				+              },
			
 
				+            },
			
 
				+            // labelLayout(params) {
			
 
				+            //   console.log(params);
			
 
				+            //   return {
			
 
				+            //     x: "56%",
			
 
				+            //     y: 30 + params.dataIndex * 40,
			
 
				+            //     verticalAlign: "middle",
			
 
				+            //     align: "left",
			
 
				+            //   };
			
 
				+            // },
			
 
				+            data: [
			
 
				+              {
			
 
				+                value: 1048,
			
 
				+                name: "综合大楼",
			
 
				+              },
			
 
				+              { value: 735, name: "学术交流中心" },
			
 
				+              { value: 580, name: "公寓楼" },
			
 
				+              { value: 484, name: "综合服务中心" },
			
 
				+              { value: 300, name: "科研楼" },
			
 
				+            ],
			
 
				+            itemStyle: {
			
 
				+              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
			
 
				+                {
			
 
				+                  offset: 1,
			
 
				+                  color: "rgba(38, 159, 152, 1)",
			
 
				+                },
			
 
				+                {
			
 
				+                  offset: 0.2,
			
 
				+                  color: "rgba(38, 159, 152, 0.34)",
			
 
				+                },
			
 
				+                {
			
 
				+                  offset: 0,
			
 
				+                  color: "rgba(38, 159, 152, 0)",
			
 
				+                },
			
 
				+              ]),
			
 
				+              emphasis: {
			
 
				+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
			
 
				+                  {
			
 
				+                    offset: 0,
			
 
				+                    color: "rgba(224, 184, 34, 1)",
			
 
				+                  },
			
 
				+                  {
			
 
				+                    offset: 0.5,
			
 
				+                    color: "rgba(224, 184, 34, 0.5)",
			
 
				+                  },
			
 
				+                  {
			
 
				+                    offset: 1,
			
 
				+                    color: "rgba(255, 255, 255, 1)",
			
 
				+                  },
			
 
				+                ]),
			
 
				+              },
			
 
				+            },
			
 
				+          },
			
 
				+        ],
			
 
				+      },
			
 
				+    };
			
 
				+  },
			
 
				+  mounted() {
			
 
				+    var myChart = this.$echarts.init(document.getElementById("gk"));
			
 
				+    myChart.setOption(this.options);
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.con {
			
 
				+  width: 100%;
			
 
				+  .top {
			
 
				+    font-size: 16px;
			
 
				+    margin-top: 14px;
			
 
				+  }
			
 
				+  .bottom {
			
 
				+    width: 100%;
			
 
				+    height: 220px;
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/components/gaikuang1/index.vue
+++ b/src/components/gaikuang1/index.vue
@@ -0,0 +1,88 @@
 
				+<template>
			
 
				+  <div class="body">
			
 
				+    <vTitle>各楼宇人干数统计</vTitle>
			
 
				+    <ul class="con">
			
 
				+      <li v-for="(item, i) in data" :key="i">
			
 
				+        <span :style="{ color: item.color }">{{ item.num }}</span>
			
 
				+        <img :src="require(`@/assets/images/gaikuang/${item.img}`)" alt="" />
			
 
				+        <span>{{ item.name }}</span>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  components: {},
			
 
				+  data() {
			
 
				+    return {
			
 
				+      data: [
			
 
				+        {
			
 
				+          name: "综合大楼",
			
 
				+          num: "376,23",
			
 
				+          img: "1.png",
			
 
				+          color: "#0ad5ff",
			
 
				+        },
			
 
				+        {
			
 
				+          name: "学术交流中心",
			
 
				+          num: "276,23",
			
 
				+          img: "2.png",
			
 
				+          color: "#66B0C9",
			
 
				+        },
			
 
				+        {
			
 
				+          name: "公寓楼",
			
 
				+          num: "453",
			
 
				+          img: "3.png",
			
 
				+          color: "#E0B822",
			
 
				+        },
			
 
				+        {
			
 
				+          name: "综合服务中心",
			
 
				+          num: "376,23",
			
 
				+          img: "1.png",
			
 
				+          color: "#0ad5ff",
			
 
				+        },
			
 
				+        {
			
 
				+          name: "科研楼",
			
 
				+          num: "276,23",
			
 
				+          img: "2.png",
			
 
				+          color: "#66B0C9",
			
 
				+        },
			
 
				+        {
			
 
				+          name: "综合大楼",
			
 
				+          num: "376,23",
			
 
				+          img: "3.png",
			
 
				+          color: "#E0B822",
			
 
				+        },
			
 
				+      ],
			
 
				+    };
			
 
				+  },
			
 
				+  mounted() {},
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.con {
			
 
				+  width: 100%;
			
 
				+  display: flex;
			
 
				+  flex-wrap: wrap;
			
 
				+  align-items: center;
			
 
				+  justify-content: space-between;
			
 
				+  li {
			
 
				+    width: 30%;
			
 
				+    margin: 10px 0;
			
 
				+    display: flex;
			
 
				+    flex-direction: column;
			
 
				+    align-items: center;
			
 
				+    > span {
			
 
				+      font-size: 16px;
			
 
				+      &:first-of-type {
			
 
				+        font-size: 24px;
			
 
				+      }
			
 
				+    }
			
 
				+    > img {
			
 
				+      width: 90%;
			
 
				+      margin: 10px 0;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/components/gdjiankong/index.vue
+++ b/src/components/gdjiankong/index.vue
@@ -0,0 +1,209 @@
 
				+<template>
			
 
				+  <div class="body">
			
 
				+    <vTitle
			
 
				+      ><span>环境情况</span><span class="time">2021 / 11 / 25</span></vTitle
			
 
				+    >
			
 
				+    <div class="con">
			
 
				+      <ul>
			
 
				+        <li v-for="(item, i) in data" :key="i">
			
 
				+          <div class="item" :style="{ color: item.color }">
			
 
				+            <img
			
 
				+              :src="require(`@/assets/images/gdjiankong/${item.img}`)"
			
 
				+              alt=""
			
 
				+            />
			
 
				+            <div>
			
 
				+              <p>{{ item.num }}</p>
			
 
				+              <p>{{ item.danwei }}</p>
			
 
				+            </div>
			
 
				+            <span class="s-t">{{ item.name }}</span>
			
 
				+          </div>
			
 
				+          <span>{{ item.status }}</span>
			
 
				+        </li>
			
 
				+      </ul>
			
 
				+      <ul class="btm">
			
 
				+        <li v-for="(item, i) in data1" :key="i">
			
 
				+          <div class="item">
			
 
				+            <img
			
 
				+              :src="require(`@/assets/images/gdjiankong/${item.img}`)"
			
 
				+              alt=""
			
 
				+            />
			
 
				+            <div>
			
 
				+              <p>{{ item.num }}</p>
			
 
				+            </div>
			
 
				+            <span class="bs-t">{{ item.name }}</span>
			
 
				+          </div>
			
 
				+        </li>
			
 
				+      </ul>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  components: {},
			
 
				+  data() {
			
 
				+    return {
			
 
				+      data: [
			
 
				+        {
			
 
				+          name: "温度",
			
 
				+          danwei: "℃",
			
 
				+          num: "28",
			
 
				+          status: "正常",
			
 
				+          img: "t1.png",
			
 
				+          color: "#0AD5FF",
			
 
				+        },
			
 
				+        {
			
 
				+          name: "湿度",
			
 
				+          danwei: "%",
			
 
				+          num: "45",
			
 
				+          status: "正常",
			
 
				+          img: "t2.png",
			
 
				+          color: "#269F98",
			
 
				+        },
			
 
				+        {
			
 
				+          name: "PM2.5",
			
 
				+          danwei: "μg/m³",
			
 
				+          num: "98",
			
 
				+          status: "正常",
			
 
				+          img: "t3.png",
			
 
				+          color: "#D11B14",
			
 
				+        },
			
 
				+      ],
			
 
				+      data1: [
			
 
				+        {
			
 
				+          name: "PM 10",
			
 
				+          num: "22",
			
 
				+          img: "1.png",
			
 
				+          color: "#0ad5ff",
			
 
				+        },
			
 
				+        {
			
 
				+          name: "噪音",
			
 
				+          num: "16",
			
 
				+          img: "2.png",
			
 
				+          color: "#66B0C9",
			
 
				+        },
			
 
				+        {
			
 
				+          name: "风速",
			
 
				+          num: "22",
			
 
				+          img: "3.png",
			
 
				+          color: "#E0B822",
			
 
				+        },
			
 
				+        {
			
 
				+          name: "AIQ",
			
 
				+          num: "24",
			
 
				+          img: "4.png",
			
 
				+          color: "#E0B822",
			
 
				+        },
			
 
				+      ],
			
 
				+    };
			
 
				+  },
			
 
				+  mounted() {},
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.content {
			
 
				+  flex: flex;
			
 
				+  align-items: center;
			
 
				+  flex-direction: column;
			
 
				+  text-align: center;
			
 
				+  justify-content: space-between;
			
 
				+  > span {
			
 
				+    width: 100%;
			
 
				+    font-size: 16px;
			
 
				+    text-align: center;
			
 
				+    &:first-of-type {
			
 
				+      color: #e0b822;
			
 
				+      font-size: 30px;
			
 
				+      display: inline-block;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+.con {
			
 
				+  background-position: top left;
			
 
				+  background-size: 100% 70%;
			
 
				+  background-repeat: no-repeat;
			
 
				+  padding-top: 10px;
			
 
				+
			
 
				+  > ul {
			
 
				+    width: 100%;
			
 
				+    display: flex;
			
 
				+    flex-wrap: wrap;
			
 
				+    align-items: center;
			
 
				+    justify-content: space-between;
			
 
				+    > li {
			
 
				+      width: 28%;
			
 
				+      align-items: center;
			
 
				+      position: relative;
			
 
				+      padding: 20px 0;
			
 
				+      margin: 10px 0;
			
 
				+      display: flex;
			
 
				+      justify-content: space-between;
			
 
				+      .item {
			
 
				+        position: relative;
			
 
				+        width: 70%;
			
 
				+        .s-t {
			
 
				+          position: absolute;
			
 
				+          top: -30px;
			
 
				+          left: 50%;
			
 
				+          transform: translateX(-50%);
			
 
				+          color: #fff;
			
 
				+        }
			
 
				+        > img {
			
 
				+          width: 100%;
			
 
				+        }
			
 
				+        > div {
			
 
				+          position: absolute;
			
 
				+          top: 50%;
			
 
				+          left: 50%;
			
 
				+          width: 50%;
			
 
				+          transform: translate(-50%, -50%);
			
 
				+          font-size: 14px;
			
 
				+          text-align: center;
			
 
				+          > p {
			
 
				+            width: 100%;
			
 
				+            padding: 2px 0;
			
 
				+            &:first-of-type {
			
 
				+              font-size: 24px;
			
 
				+              border-bottom: 1px solid #fff;
			
 
				+            }
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+      > span {
			
 
				+        width: 30%;
			
 
				+        display: inline-block;
			
 
				+        margin-left: 10px;
			
 
				+        font-size: 14px;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .btm {
			
 
				+    > li {
			
 
				+      width: 25%;
			
 
				+      .item {
			
 
				+        position: relative;
			
 
				+        width: 100%;
			
 
				+        .bs-t {
			
 
				+          position: absolute;
			
 
				+          top: 10px;
			
 
				+          right: 10px;
			
 
				+        }
			
 
				+        > img {
			
 
				+          width: 100%;
			
 
				+        }
			
 
				+        > div {
			
 
				+          > p {
			
 
				+            padding: 0;
			
 
				+            &:first-of-type {
			
 
				+              font-size: 18px;
			
 
				+              border-bottom: none;
			
 
				+            }
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/components/gdjiankong1/index.vue
+++ b/src/components/gdjiankong1/index.vue
@@ -0,0 +1,133 @@
 
				+<template>
			
 
				+  <div class="body">
			
 
				+    <vTitle
			
 
				+      ><span>视频监控</span><span class="time">2021 / 11 / 25</span></vTitle
			
 
				+    >
			
 
				+    <div class="con">
			
 
				+      <img :src="require(`@/assets/images/jiankong/thumb.png`)" alt="" />
			
 
				+      <p>鹏城云脑主干道</p>
			
 
				+      <swiper
			
 
				+        :slides-per-view="3"
			
 
				+        :space-between="16"
			
 
				+        :centered-slides-bounds="true"
			
 
				+        :centered-slides="true"
			
 
				+        :initial-slide="1"
			
 
				+        navigation
			
 
				+        @swiper="onSwiper"
			
 
				+        @slideChange="onSlideChange"
			
 
				+        class="ul"
			
 
				+      >
			
 
				+        <swiper-slide class="li" v-for="(item, i) in 10" :key="i">
			
 
				+          <img :src="require(`@/assets/images/jiankong/thumb.png`)" alt="" />
			
 
				+        </swiper-slide>
			
 
				+      </swiper>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import { Navigation, Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js";
			
 
				+// Import Swiper styles
			
 
				+import "swiper/swiper.min.css";
			
 
				+export default {
			
 
				+  data() {
			
 
				+    return {
			
 
				+      data: [
			
 
				+        {
			
 
				+          name: "综合大楼",
			
 
				+          num: "376,23",
			
 
				+          img: "1.png",
			
 
				+          color: "#0ad5ff",
			
 
				+        },
			
 
				+        {
			
 
				+          name: "学术交流中心",
			
 
				+          num: "276,23",
			
 
				+          img: "2.png",
			
 
				+          color: "#66B0C9",
			
 
				+        },
			
 
				+        {
			
 
				+          name: "公寓楼",
			
 
				+          num: "453",
			
 
				+          img: "3.png",
			
 
				+          color: "#E0B822",
			
 
				+        },
			
 
				+      ],
			
 
				+    };
			
 
				+  },
			
 
				+  components: {
			
 
				+    Swiper,
			
 
				+    SwiperSlide,
			
 
				+  },
			
 
				+  setup() {
			
 
				+    const onSwiper = (swiper) => {
			
 
				+      console.log(swiper);
			
 
				+    };
			
 
				+    const onSlideChange = () => {
			
 
				+      console.log("slide change");
			
 
				+    };
			
 
				+    return {
			
 
				+      onSwiper,
			
 
				+      onSlideChange,
			
 
				+      modules: [Navigation],
			
 
				+    };
			
 
				+  },
			
 
				+  mounted() {},
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.con {
			
 
				+  text-align: center;
			
 
				+  > p {
			
 
				+    font-size: 20px;
			
 
				+    text-align: left;
			
 
				+    margin: 4px 0;
			
 
				+  }
			
 
				+  > img {
			
 
				+    width: 98%;
			
 
				+  }
			
 
				+  > ul {
			
 
				+    width: 100%;
			
 
				+    display: flex;
			
 
				+    flex-wrap: wrap;
			
 
				+    align-items: center;
			
 
				+    justify-content: space-between;
			
 
				+
			
 
				+    li {
			
 
				+      width: 30%;
			
 
				+      margin: 10px 0;
			
 
				+      display: flex;
			
 
				+      flex-direction: column;
			
 
				+      align-items: center;
			
 
				+      > span {
			
 
				+        font-size: 16px;
			
 
				+        &:first-of-type {
			
 
				+          font-size: 24px;
			
 
				+        }
			
 
				+      }
			
 
				+      > img {
			
 
				+        width: 90%;
			
 
				+        margin: 10px 0;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+  .ul {
			
 
				+    padding: 20px 6px;
			
 
				+    .li {
			
 
				+      > img {
			
 
				+        width: 100%;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
 
				+
			
 
				+<style lang="less">
			
 
				+.swiper-slide {
			
 
				+  opacity: 0.6;
			
 
				+}
			
 
				+.swiper-slide-active {
			
 
				+  opacity: 1;
			
 
				+  box-shadow: 0 3px 20px #00f5e7;
			
 
				+}
			
 
				+</style>
			
--- a/src/components/jiankong/index.vue
+++ b/src/components/jiankong/index.vue
@@ -0,0 +1,177 @@
 
				+<template>
			
 
				+  <div class="body">
			
 
				+    <vTitle
			
 
				+      ><span>网点视频监控</span><span class="time">2021 / 11 / 25</span></vTitle
			
 
				+    >
			
 
				+    <div
			
 
				+      class="con"
			
 
				+      :style="{
			
 
				+        backgroundImage: `url(${require('@/assets/images/jiankong/bg.png')})`,
			
 
				+      }"
			
 
				+    >
			
 
				+      <div class="top">
			
 
				+        <div>
			
 
				+          <img :src="require(`@/assets/images/jiankong/top.png`)" alt="" />
			
 
				+          <div class="center content">
			
 
				+            <span>1900</span>
			
 
				+            <span>运行中的摄像头</span>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+        <div>
			
 
				+          <img
			
 
				+            :src="require(`@/assets/images/jiankong/right_icon.png`)"
			
 
				+            alt=""
			
 
				+          />
			
 
				+          <div class="content">
			
 
				+            <span>2000</span>
			
 
				+            <span>摄像头总数</span>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      <ul>
			
 
				+        <li v-for="(item, i) in data" :key="i">
			
 
				+          <img :src="require(`@/assets/images/jiankong/${item.img}`)" alt="" />
			
 
				+          <span>{{ item.num }}</span>
			
 
				+          <span>{{ item.name }}</span>
			
 
				+        </li>
			
 
				+      </ul>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  components: {},
			
 
				+  data() {
			
 
				+    return {
			
 
				+      data: [
			
 
				+        {
			
 
				+          name: "正常",
			
 
				+          num: "1676",
			
 
				+          img: "1.png",
			
 
				+          color: "#0ad5ff",
			
 
				+        },
			
 
				+        {
			
 
				+          name: "故障",
			
 
				+          num: "16",
			
 
				+          img: "2.png",
			
 
				+          color: "#66B0C9",
			
 
				+        },
			
 
				+        {
			
 
				+          name: "室内",
			
 
				+          num: "1676",
			
 
				+          img: "3.png",
			
 
				+          color: "#E0B822",
			
 
				+        },
			
 
				+        {
			
 
				+          name: "室外",
			
 
				+          num: "316",
			
 
				+          img: "4.png",
			
 
				+          color: "#E0B822",
			
 
				+        },
			
 
				+      ],
			
 
				+    };
			
 
				+  },
			
 
				+  mounted() {},
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.content {
			
 
				+  flex: flex;
			
 
				+  align-items: center;
			
 
				+  flex-direction: column;
			
 
				+  text-align: center;
			
 
				+  justify-content: space-between;
			
 
				+  > span {
			
 
				+    width: 100%;
			
 
				+    font-size: 16px;
			
 
				+    text-align: center;
			
 
				+    &:first-of-type {
			
 
				+      color: #e0b822;
			
 
				+      font-size: 30px;
			
 
				+      display: inline-block;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+.con {
			
 
				+  background-position: top left;
			
 
				+  background-size: 100% 70%;
			
 
				+  background-repeat: no-repeat;
			
 
				+  padding-top: 10px;
			
 
				+  .top {
			
 
				+    width: 100%;
			
 
				+    display: flex;
			
 
				+    justify-content: space-between;
			
 
				+    > div {
			
 
				+      &:first-of-type {
			
 
				+        flex: 2;
			
 
				+        padding: 30px;
			
 
				+        position: relative;
			
 
				+        > img {
			
 
				+          width: 100%;
			
 
				+        }
			
 
				+        .center {
			
 
				+          position: absolute;
			
 
				+          top: 50%;
			
 
				+          left: 50%;
			
 
				+          transform: translate(-50%, -50%);
			
 
				+        }
			
 
				+      }
			
 
				+      &:last-of-type {
			
 
				+        flex: 1;
			
 
				+        > img {
			
 
				+          width: 80%;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+  > ul {
			
 
				+    width: 100%;
			
 
				+    display: flex;
			
 
				+    flex-wrap: wrap;
			
 
				+    align-items: center;
			
 
				+    justify-content: space-between;
			
 
				+
			
 
				+    li {
			
 
				+      width: 24%;
			
 
				+      margin: 10px 0;
			
 
				+      display: flex;
			
 
				+      flex-direction: column;
			
 
				+      align-items: center;
			
 
				+      position: relative;
			
 
				+      > span {
			
 
				+        font-size: 16px;
			
 
				+        &:first-of-type {
			
 
				+          font-size: 26px;
			
 
				+          color: #e0b822;
			
 
				+          margin-top: 4px;
			
 
				+        }
			
 
				+      }
			
 
				+      > img {
			
 
				+        width: 50%;
			
 
				+        margin: 10px 0;
			
 
				+      }
			
 
				+      &:not(&:last-of-type) {
			
 
				+        &::before {
			
 
				+          content: "";
			
 
				+          display: inline-block;
			
 
				+          width: 1px;
			
 
				+          height: 100%;
			
 
				+          position: absolute;
			
 
				+          top: 0;
			
 
				+          right: 0;
			
 
				+          opacity: 0.5;
			
 
				+          background: linear-gradient(
			
 
				+            0,
			
 
				+            rgba(102, 176, 201, 0.1) 0%,
			
 
				+            #66b0c9 30%,
			
 
				+            #66b0c9 64%,
			
 
				+            rgba(102, 176, 201, 0.1) 100%
			
 
				+          );
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/components/jiankong1/index.vue
+++ b/src/components/jiankong1/index.vue
@@ -0,0 +1,133 @@
 
				+<template>
			
 
				+  <div class="body">
			
 
				+    <vTitle
			
 
				+      ><span>网点视频监控</span><span class="time">2021 / 11 / 25</span></vTitle
			
 
				+    >
			
 
				+    <div class="con">
			
 
				+      <img :src="require(`@/assets/images/jiankong/thumb.png`)" alt="" />
			
 
				+      <p>鹏城云脑主干道</p>
			
 
				+      <swiper
			
 
				+        :slides-per-view="3"
			
 
				+        :space-between="16"
			
 
				+        :centered-slides-bounds="true"
			
 
				+        :centered-slides="true"
			
 
				+        :initial-slide="1"
			
 
				+        navigation
			
 
				+        @swiper="onSwiper"
			
 
				+        @slideChange="onSlideChange"
			
 
				+        class="ul"
			
 
				+      >
			
 
				+        <swiper-slide class="li" v-for="(item, i) in 10" :key="i">
			
 
				+          <img :src="require(`@/assets/images/jiankong/thumb.png`)" alt="" />
			
 
				+        </swiper-slide>
			
 
				+      </swiper>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import { Navigation, Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js";
			
 
				+// Import Swiper styles
			
 
				+import "swiper/swiper.min.css";
			
 
				+export default {
			
 
				+  data() {
			
 
				+    return {
			
 
				+      data: [
			
 
				+        {
			
 
				+          name: "综合大楼",
			
 
				+          num: "376,23",
			
 
				+          img: "1.png",
			
 
				+          color: "#0ad5ff",
			
 
				+        },
			
 
				+        {
			
 
				+          name: "学术交流中心",
			
 
				+          num: "276,23",
			
 
				+          img: "2.png",
			
 
				+          color: "#66B0C9",
			
 
				+        },
			
 
				+        {
			
 
				+          name: "公寓楼",
			
 
				+          num: "453",
			
 
				+          img: "3.png",
			
 
				+          color: "#E0B822",
			
 
				+        },
			
 
				+      ],
			
 
				+    };
			
 
				+  },
			
 
				+  components: {
			
 
				+    Swiper,
			
 
				+    SwiperSlide,
			
 
				+  },
			
 
				+  setup() {
			
 
				+    const onSwiper = (swiper) => {
			
 
				+      console.log(swiper);
			
 
				+    };
			
 
				+    const onSlideChange = () => {
			
 
				+      console.log("slide change");
			
 
				+    };
			
 
				+    return {
			
 
				+      onSwiper,
			
 
				+      onSlideChange,
			
 
				+      modules: [Navigation],
			
 
				+    };
			
 
				+  },
			
 
				+  mounted() {},
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.con {
			
 
				+  text-align: center;
			
 
				+  > p {
			
 
				+    font-size: 20px;
			
 
				+    text-align: left;
			
 
				+    margin: 4px 0;
			
 
				+  }
			
 
				+  > img {
			
 
				+    width: 98%;
			
 
				+  }
			
 
				+  > ul {
			
 
				+    width: 100%;
			
 
				+    display: flex;
			
 
				+    flex-wrap: wrap;
			
 
				+    align-items: center;
			
 
				+    justify-content: space-between;
			
 
				+
			
 
				+    li {
			
 
				+      width: 30%;
			
 
				+      margin: 10px 0;
			
 
				+      display: flex;
			
 
				+      flex-direction: column;
			
 
				+      align-items: center;
			
 
				+      > span {
			
 
				+        font-size: 16px;
			
 
				+        &:first-of-type {
			
 
				+          font-size: 24px;
			
 
				+        }
			
 
				+      }
			
 
				+      > img {
			
 
				+        width: 90%;
			
 
				+        margin: 10px 0;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+  .ul {
			
 
				+    padding: 20px 6px;
			
 
				+    .li {
			
 
				+      > img {
			
 
				+        width: 100%;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
 
				+
			
 
				+<style lang="less">
			
 
				+.swiper-slide {
			
 
				+  opacity: 0.6;
			
 
				+}
			
 
				+.swiper-slide-active {
			
 
				+  opacity: 1;
			
 
				+  box-shadow: 0 3px 20px #00f5e7;
			
 
				+}
			
 
				+</style>
			
--- a/src/components/nenghao/index.vue
+++ b/src/components/nenghao/index.vue
@@ -0,0 +1,93 @@
 
				+<template>
			
 
				+  <div class="body">
			
 
				+    <vTitle>园区概况</vTitle>
			
 
				+    <ul class="con">
			
 
				+      <li v-for="(item, i) in data" :key="i">
			
 
				+        <div class="img">
			
 
				+          <img :src="require(`@/assets/images/nenghao/${item.img}`)" alt="" />
			
 
				+          <img :src="require(`@/assets/images/nenghao/w${item.img}`)" alt="" />
			
 
				+        </div>
			
 
				+        <span>{{ item.num }}</span>
			
 
				+        <span v-html="item.danwei"></span>
			
 
				+        <span>{{ item.name }}</span>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  components: {},
			
 
				+  data() {
			
 
				+    return {
			
 
				+      data: [
			
 
				+        {
			
 
				+          name: "用电总量",
			
 
				+          num: "12,376,23",
			
 
				+          danwei: "(kwh)",
			
 
				+          img: "1.png",
			
 
				+        },
			
 
				+        {
			
 
				+          name: "同比节能",
			
 
				+          num: "16%",
			
 
				+          danwei: "&nbsp;",
			
 
				+          img: "2.png",
			
 
				+        },
			
 
				+        {
			
 
				+          name: "今日用电量",
			
 
				+          num: "26.587",
			
 
				+          danwei: "(kwh)",
			
 
				+          img: "3.png",
			
 
				+        },
			
 
				+      ],
			
 
				+    };
			
 
				+  },
			
 
				+  mounted() {},
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.con {
			
 
				+  width: 100%;
			
 
				+  display: flex;
			
 
				+  flex-wrap: wrap;
			
 
				+  align-items: center;
			
 
				+  justify-content: space-between;
			
 
				+  margin-top: 60px;
			
 
				+  li {
			
 
				+    width: 30%;
			
 
				+    margin: 10px 0;
			
 
				+    display: flex;
			
 
				+    flex-direction: column;
			
 
				+    align-items: center;
			
 
				+    > span {
			
 
				+      font-size: 16px;
			
 
				+      color: #66b0c9;
			
 
				+      display: inline-block;
			
 
				+      margin-bottom: 8px;
			
 
				+      &:first-of-type {
			
 
				+        font-size: 24px;
			
 
				+      }
			
 
				+      &:last-of-type {
			
 
				+        color: #fff;
			
 
				+      }
			
 
				+    }
			
 
				+    .img {
			
 
				+      width: 90%;
			
 
				+      position: relative;
			
 
				+      > img {
			
 
				+        margin: 10px 0;
			
 
				+        width: 100%;
			
 
				+        &:last-of-type {
			
 
				+          position: absolute;
			
 
				+          top: -40%;
			
 
				+          left: 50%;
			
 
				+          transform: translateX(-50%);
			
 
				+          width: 48%;
			
 
				+          z-index: 9;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/components/nenghao1/index.vue
+++ b/src/components/nenghao1/index.vue
@@ -0,0 +1,141 @@
 
				+<template>
			
 
				+  <div class="body">
			
 
				+    <vTitle>实时用电监控</vTitle>
			
 
				+    <div class="con">
			
 
				+      <div class="bottom" id="nh1"></div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  components: {},
			
 
				+  data() {
			
 
				+    return {
			
 
				+      options: {
			
 
				+        grid: {
			
 
				+          bottom: 20,
			
 
				+          right: 20,
			
 
				+        },
			
 
				+        legend: {
			
 
				+          data: ["当前值", "近三年均值"],
			
 
				+          type: "plain",
			
 
				+          right: 0,
			
 
				+          top: 10,
			
 
				+          textStyle: {
			
 
				+            color: "#ffffff",
			
 
				+          },
			
 
				+        },
			
 
				+        xAxis: {
			
 
				+          type: "category",
			
 
				+          boundaryGap: false,
			
 
				+          axisLabel: {
			
 
				+            color: "rgba(255,255,255,0.8)",
			
 
				+          },
			
 
				+          axisLine: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+          axisTick: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+          splitLine: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+          data: [
			
 
				+            "1月",
			
 
				+            "2月",
			
 
				+            "3月",
			
 
				+            "4月",
			
 
				+            "5月",
			
 
				+            "6月",
			
 
				+            "7月",
			
 
				+            "8月",
			
 
				+            "9月",
			
 
				+            "10月",
			
 
				+            "11月",
			
 
				+            "12月",
			
 
				+          ],
			
 
				+        },
			
 
				+        yAxis: {
			
 
				+          type: "value",
			
 
				+          axisLine: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+          axisTick: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+          splitLine: {
			
 
				+            show: true,
			
 
				+            lineStyle: {
			
 
				+              type: "dashed",
			
 
				+              color: "#269F98",
			
 
				+            },
			
 
				+          },
			
 
				+          axisLabel: {
			
 
				+            formatter: "{value}万",
			
 
				+            color: "rgba(255,255,255,0.8)",
			
 
				+          },
			
 
				+        },
			
 
				+        series: [
			
 
				+          {
			
 
				+            name: "近三年均值",
			
 
				+            data: [160, 140, 160, 120, 100, 100, 90, 120, 80, 100, 140, 150],
			
 
				+            type: "line",
			
 
				+            areaStyle: {
			
 
				+              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
			
 
				+                {
			
 
				+                  offset: 1,
			
 
				+                  color: "rgba(38, 159, 152, 1)",
			
 
				+                },
			
 
				+                {
			
 
				+                  offset: 0.2,
			
 
				+                  color: "rgba(38, 159, 152, 0.34)",
			
 
				+                },
			
 
				+                {
			
 
				+                  offset: 0,
			
 
				+                  color: "rgba(38, 159, 152, 0)",
			
 
				+                },
			
 
				+              ]),
			
 
				+            },
			
 
				+            lineStyle: {
			
 
				+              color: "#269F98",
			
 
				+            },
			
 
				+            itemStyle: {
			
 
				+              color: "#ffffff",
			
 
				+            },
			
 
				+          },
			
 
				+          {
			
 
				+            name: "当前值",
			
 
				+            data: [100, 140, 100, 120, 100, 120, 90, 120, 80, 110, 130, 120],
			
 
				+            type: "line",
			
 
				+            lineStyle: {
			
 
				+              color: "#E0B822",
			
 
				+            },
			
 
				+            itemStyle: {
			
 
				+              color: "#ffffff",
			
 
				+            },
			
 
				+          },
			
 
				+        ],
			
 
				+      },
			
 
				+    };
			
 
				+  },
			
 
				+  mounted() {
			
 
				+    var myChart = this.$echarts.init(document.getElementById("nh1"));
			
 
				+    myChart.setOption(this.options);
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.con {
			
 
				+  width: 100%;
			
 
				+  .top {
			
 
				+    font-size: 16px;
			
 
				+    margin-top: 14px;
			
 
				+  }
			
 
				+  .bottom {
			
 
				+    width: 100%;
			
 
				+    height: 220px;
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/components/nenghao2/index.vue
+++ b/src/components/nenghao2/index.vue
@@ -0,0 +1,140 @@
 
				+<template>
			
 
				+  <div class="body">
			
 
				+    <vTitle>月度节能情况</vTitle>
			
 
				+    <div class="con">
			
 
				+      <div class="bottom" id="nh2"></div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  components: {},
			
 
				+  data() {
			
 
				+    return {
			
 
				+      options: {
			
 
				+        grid: {
			
 
				+          bottom: 20,
			
 
				+          right: 20,
			
 
				+        },
			
 
				+        legend: {
			
 
				+          data: ["同比增长", "均值（kwh）"],
			
 
				+          type: "plain",
			
 
				+          right: 0,
			
 
				+          top: 10,
			
 
				+          textStyle: {
			
 
				+            color: "#ffffff",
			
 
				+          },
			
 
				+        },
			
 
				+        xAxis: {
			
 
				+          type: "category",
			
 
				+          boundaryGap: false,
			
 
				+          axisLabel: {
			
 
				+            color: "rgba(255,255,255,0.8)",
			
 
				+          },
			
 
				+          axisLine: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+          axisTick: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+          splitLine: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+          data: [
			
 
				+            "1月",
			
 
				+            "2月",
			
 
				+            "3月",
			
 
				+            "4月",
			
 
				+            "5月",
			
 
				+            "6月",
			
 
				+            "7月",
			
 
				+            "8月",
			
 
				+            "9月",
			
 
				+            "10月",
			
 
				+            "11月",
			
 
				+            "12月",
			
 
				+          ],
			
 
				+        },
			
 
				+        yAxis: {
			
 
				+          type: "value",
			
 
				+          offset: 10,
			
 
				+          axisLine: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+          axisTick: {
			
 
				+            show: false,
			
 
				+          },
			
 
				+          splitLine: {
			
 
				+            show: true,
			
 
				+            lineStyle: {
			
 
				+              type: "dashed",
			
 
				+              color: "#269F98",
			
 
				+            },
			
 
				+          },
			
 
				+          axisLabel: {
			
 
				+            formatter: "{value}",
			
 
				+            color: "rgba(255,255,255,0.8)",
			
 
				+          },
			
 
				+        },
			
 
				+        series: [
			
 
				+          {
			
 
				+            name: "同比增长",
			
 
				+            data: [160, 140, 160, 120, 100, 100, 90, 120, 80, 100, 140, 150],
			
 
				+            type: "bar",
			
 
				+            lineStyle: {
			
 
				+              color: "#269F98",
			
 
				+            },
			
 
				+            barWidth: 14,
			
 
				+            itemStyle: {
			
 
				+              borderRadius: [8, 8, 0, 0],
			
 
				+              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
			
 
				+                {
			
 
				+                  offset: 0,
			
 
				+                  color: "rgba(38, 159, 152, 1)",
			
 
				+                },
			
 
				+                {
			
 
				+                  offset: 0.2,
			
 
				+                  color: "rgba(38, 159, 152, 0.34)",
			
 
				+                },
			
 
				+                {
			
 
				+                  offset: 1,
			
 
				+                  color: "rgba(38, 159, 152, 0)",
			
 
				+                },
			
 
				+              ]),
			
 
				+            },
			
 
				+          },
			
 
				+          {
			
 
				+            name: "均值（kwh）",
			
 
				+            data: [100, 140, 100, 120, 100, 120, 90, 120, 80, 110, 130, 120],
			
 
				+            type: "line",
			
 
				+            smooth: 0.6,
			
 
				+            lineStyle: {
			
 
				+              color: "#E0B822",
			
 
				+            },
			
 
				+            symbol: "none",
			
 
				+          },
			
 
				+        ],
			
 
				+      },
			
 
				+    };
			
 
				+  },
			
 
				+  mounted() {
			
 
				+    var myChart = this.$echarts.init(document.getElementById("nh2"));
			
 
				+    myChart.setOption(this.options);
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.con {
			
 
				+  width: 100%;
			
 
				+  .top {
			
 
				+    font-size: 16px;
			
 
				+    margin-top: 14px;
			
 
				+  }
			
 
				+  .bottom {
			
 
				+    width: 100%;
			
 
				+    height: 220px;
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/components/vTitle.vue
+++ b/src/components/vTitle.vue
@@ -0,0 +1,39 @@
 
				+<template>
			
 
				+  <div class="title">
			
 
				+    <img :src="require(`@/assets/images/title_icon.png`)" alt="" />
			
 
				+    <div class="name">
			
 
				+      <slot></slot>
			
 
				+    </div>
			
 
				+    <img class="line" :src="require(`@/assets/images/bg_line.png`)" alt="" />
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.title {
			
 
				+  display: flex;
			
 
				+  align-items: center;
			
 
				+  position: relative;
			
 
				+  padding-bottom: 10px;
			
 
				+  > img {
			
 
				+    width: 20px;
			
 
				+  }
			
 
				+  .line {
			
 
				+    position: absolute;
			
 
				+    bottom: 0;
			
 
				+    width: 100%;
			
 
				+    height: 2px;
			
 
				+  }
			
 
				+  .name {
			
 
				+    margin-left: 10px;
			
 
				+    font-size: 18px;
			
 
				+    display: flex;
			
 
				+    justify-content: space-between;
			
 
				+    width: 100%;
			
 
				+    align-items: center;
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/components/wulianwang/index.vue
+++ b/src/components/wulianwang/index.vue
@@ -0,0 +1,186 @@
 
				+<template>
			
 
				+  <div class="body">
			
 
				+    <vTitle
			
 
				+      ><span>设备统计</span><span class="time">2021 / 11 / 25</span></vTitle
			
 
				+    >
			
 
				+    <div
			
 
				+      class="con"
			
 
				+      :style="{
			
 
				+        backgroundImage: `url(${require('@/assets/images/jiankong/bg.png')})`,
			
 
				+      }"
			
 
				+    >
			
 
				+      <ul>
			
 
				+        <li v-for="(item, i) in data" :key="i">
			
 
				+          <div>
			
 
				+            <img
			
 
				+              :src="require(`@/assets/images/wulianwang/${item.img}`)"
			
 
				+              alt=""
			
 
				+            />
			
 
				+            <p>{{ item.name }}</p>
			
 
				+          </div>
			
 
				+          <span>{{ item.num }}</span>
			
 
				+        </li>
			
 
				+      </ul>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  components: {},
			
 
				+  data() {
			
 
				+    return {
			
 
				+      data: [
			
 
				+        {
			
 
				+          name: "摄像头",
			
 
				+          num: "1676",
			
 
				+          img: "1.png",
			
 
				+          color: "#0ad5ff",
			
 
				+        },
			
 
				+        {
			
 
				+          name: "巡逻车",
			
 
				+          num: "16",
			
 
				+          img: "2.png",
			
 
				+          color: "#66B0C9",
			
 
				+        },
			
 
				+        {
			
 
				+          name: "门锁禁",
			
 
				+          num: "1676",
			
 
				+          img: "3.png",
			
 
				+          color: "#E0B822",
			
 
				+        },
			
 
				+        {
			
 
				+          name: "无人机",
			
 
				+          num: "316",
			
 
				+          img: "4.png",
			
 
				+          color: "#E0B822",
			
 
				+        },
			
 
				+      ],
			
 
				+    };
			
 
				+  },
			
 
				+  mounted() {},
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.content {
			
 
				+  flex: flex;
			
 
				+  align-items: center;
			
 
				+  flex-direction: column;
			
 
				+  text-align: center;
			
 
				+  justify-content: space-between;
			
 
				+  > span {
			
 
				+    width: 100%;
			
 
				+    font-size: 16px;
			
 
				+    text-align: center;
			
 
				+    &:first-of-type {
			
 
				+      color: #e0b822;
			
 
				+      font-size: 30px;
			
 
				+      display: inline-block;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+.con {
			
 
				+  background-position: top left;
			
 
				+  background-size: 100% 100%;
			
 
				+  background-repeat: no-repeat;
			
 
				+  padding-top: 10px;
			
 
				+
			
 
				+  > ul {
			
 
				+    width: 100%;
			
 
				+    display: flex;
			
 
				+    flex-wrap: wrap;
			
 
				+    align-items: center;
			
 
				+    justify-content: space-between;
			
 
				+
			
 
				+    li {
			
 
				+      width: 50%;
			
 
				+      padding: 10px;
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      justify-content: center;
			
 
				+      position: relative;
			
 
				+      > div {
			
 
				+        flex: 1;
			
 
				+        text-align: center;
			
 
				+        > p {
			
 
				+          margin-bottom: 20px;
			
 
				+        }
			
 
				+        > img {
			
 
				+          width: 50%;
			
 
				+          margin: 10px 0;
			
 
				+        }
			
 
				+      }
			
 
				+      span {
			
 
				+        flex: 1;
			
 
				+        font-size: 26px;
			
 
				+        color: #e0b822;
			
 
				+        margin-top: 4px;
			
 
				+      }
			
 
				+
			
 
				+      &::before {
			
 
				+        content: "";
			
 
				+        display: inline-block;
			
 
				+        position: absolute;
			
 
				+        opacity: 0.5;
			
 
				+        background: linear-gradient(
			
 
				+          270deg,
			
 
				+          rgba(102, 176, 201, 0.1) 0%,
			
 
				+          #66b0c9 50%,
			
 
				+          rgba(102, 176, 201, 0.1) 100%
			
 
				+        );
			
 
				+      }
			
 
				+      &:nth-of-type(1) {
			
 
				+        &::before {
			
 
				+          content: "";
			
 
				+          bottom: 0;
			
 
				+          left: 0;
			
 
				+          width: 100%;
			
 
				+          height: 1px;
			
 
				+        }
			
 
				+      }
			
 
				+      &:nth-of-type(2) {
			
 
				+        &::before {
			
 
				+          content: "";
			
 
				+          bottom: 0;
			
 
				+          left: 0;
			
 
				+          height: 100%;
			
 
				+          width: 1px;
			
 
				+          background: linear-gradient(
			
 
				+            0deg,
			
 
				+            rgba(102, 176, 201, 0.1) 0%,
			
 
				+            #66b0c9 30%,
			
 
				+            #66b0c9 64%,
			
 
				+            rgba(102, 176, 201, 0.1) 100%
			
 
				+          );
			
 
				+        }
			
 
				+      }
			
 
				+      &:nth-of-type(3) {
			
 
				+        &::before {
			
 
				+          content: "";
			
 
				+          bottom: 0;
			
 
				+          right: 0;
			
 
				+          height: 100%;
			
 
				+          width: 1px;
			
 
				+          background: linear-gradient(
			
 
				+            0deg,
			
 
				+            rgba(102, 176, 201, 0.1) 0%,
			
 
				+            #66b0c9 30%,
			
 
				+            #66b0c9 64%,
			
 
				+            rgba(102, 176, 201, 0.1) 100%
			
 
				+          );
			
 
				+        }
			
 
				+      }
			
 
				+      &:nth-of-type(4) {
			
 
				+        &::before {
			
 
				+          content: "";
			
 
				+          top: 0;
			
 
				+          left: 0;
			
 
				+          width: 100%;
			
 
				+          height: 1px;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/components/wulianwang1/index.vue
+++ b/src/components/wulianwang1/index.vue
@@ -0,0 +1,188 @@
 
				+<template>
			
 
				+  <div class="body">
			
 
				+    <vTitle
			
 
				+      ><span>设备情况</span><span class="time">2021 / 11 / 25</span></vTitle
			
 
				+    >
			
 
				+    <div
			
 
				+      class="con"
			
 
				+      :style="{
			
 
				+        backgroundImage: `url(${require('@/assets/images/jiankong/bg.png')})`,
			
 
				+      }"
			
 
				+    >
			
 
				+      <ul>
			
 
				+        <li v-for="(item, i) in data" :key="i">
			
 
				+          <div>
			
 
				+            <img
			
 
				+              :src="require(`@/assets/images/wulianwang/${item.img}`)"
			
 
				+              alt=""
			
 
				+            />
			
 
				+            <p>{{ item.name }}</p>
			
 
				+          </div>
			
 
				+          <div>
			
 
				+            <span>{{ item.num }}/2</span>
			
 
				+            <p>启用/停用</p>
			
 
				+          </div>
			
 
				+        </li>
			
 
				+      </ul>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  components: {},
			
 
				+  data() {
			
 
				+    return {
			
 
				+      data: [
			
 
				+        {
			
 
				+          name: "监控",
			
 
				+          num: "1676",
			
 
				+          img: "5.png",
			
 
				+          color: "#0ad5ff",
			
 
				+        },
			
 
				+        {
			
 
				+          name: "消防",
			
 
				+          num: "16",
			
 
				+          img: "6.png",
			
 
				+          color: "#66B0C9",
			
 
				+        },
			
 
				+        {
			
 
				+          name: "监测",
			
 
				+          num: "1676",
			
 
				+          img: "7.png",
			
 
				+          color: "#269F98",
			
 
				+        },
			
 
				+        {
			
 
				+          name: "功能",
			
 
				+          num: "316",
			
 
				+          img: "8.png",
			
 
				+          color: "#269F98",
			
 
				+        },
			
 
				+      ],
			
 
				+    };
			
 
				+  },
			
 
				+  mounted() {},
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.content {
			
 
				+  flex: flex;
			
 
				+  align-items: center;
			
 
				+  flex-direction: column;
			
 
				+  text-align: center;
			
 
				+  justify-content: space-between;
			
 
				+  > span {
			
 
				+    width: 100%;
			
 
				+    font-size: 16px;
			
 
				+    text-align: center;
			
 
				+    &:first-of-type {
			
 
				+      color: #269f98;
			
 
				+      font-size: 30px;
			
 
				+      display: inline-block;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+.con {
			
 
				+  background-position: top left;
			
 
				+  background-size: 100% 100%;
			
 
				+  background-repeat: no-repeat;
			
 
				+  padding-top: 10px;
			
 
				+
			
 
				+  > ul {
			
 
				+    width: 100%;
			
 
				+    display: flex;
			
 
				+    flex-wrap: wrap;
			
 
				+    align-items: center;
			
 
				+    justify-content: space-between;
			
 
				+
			
 
				+    li {
			
 
				+      width: 50%;
			
 
				+      padding: 10px;
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      justify-content: center;
			
 
				+      position: relative;
			
 
				+      > div {
			
 
				+        flex: 1;
			
 
				+        text-align: center;
			
 
				+        > p {
			
 
				+          margin-bottom: 20px;
			
 
				+        }
			
 
				+        > img {
			
 
				+          width: 50%;
			
 
				+          margin: 10px 0;
			
 
				+        }
			
 
				+      }
			
 
				+      span {
			
 
				+        font-size: 26px;
			
 
				+        color: #269f98;
			
 
				+        margin-top: 4px;
			
 
				+      }
			
 
				+
			
 
				+      &::before {
			
 
				+        content: "";
			
 
				+        display: inline-block;
			
 
				+        position: absolute;
			
 
				+        opacity: 0.5;
			
 
				+        background: linear-gradient(
			
 
				+          270deg,
			
 
				+          rgba(102, 176, 201, 0.1) 0%,
			
 
				+          #66b0c9 50%,
			
 
				+          rgba(102, 176, 201, 0.1) 100%
			
 
				+        );
			
 
				+      }
			
 
				+      &:nth-of-type(1) {
			
 
				+        &::before {
			
 
				+          content: "";
			
 
				+          bottom: 0;
			
 
				+          left: 0;
			
 
				+          width: 100%;
			
 
				+          height: 1px;
			
 
				+        }
			
 
				+      }
			
 
				+      &:nth-of-type(2) {
			
 
				+        &::before {
			
 
				+          content: "";
			
 
				+          bottom: 0;
			
 
				+          left: 0;
			
 
				+          height: 100%;
			
 
				+          width: 1px;
			
 
				+          background: linear-gradient(
			
 
				+            0deg,
			
 
				+            rgba(102, 176, 201, 0.1) 0%,
			
 
				+            #66b0c9 30%,
			
 
				+            #66b0c9 64%,
			
 
				+            rgba(102, 176, 201, 0.1) 100%
			
 
				+          );
			
 
				+        }
			
 
				+      }
			
 
				+      &:nth-of-type(3) {
			
 
				+        &::before {
			
 
				+          content: "";
			
 
				+          bottom: 0;
			
 
				+          right: 0;
			
 
				+          height: 100%;
			
 
				+          width: 1px;
			
 
				+          background: linear-gradient(
			
 
				+            0deg,
			
 
				+            rgba(102, 176, 201, 0.1) 0%,
			
 
				+            #66b0c9 30%,
			
 
				+            #66b0c9 64%,
			
 
				+            rgba(102, 176, 201, 0.1) 100%
			
 
				+          );
			
 
				+        }
			
 
				+      }
			
 
				+      &:nth-of-type(4) {
			
 
				+        &::before {
			
 
				+          content: "";
			
 
				+          top: 0;
			
 
				+          left: 0;
			
 
				+          width: 100%;
			
 
				+          height: 1px;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/components/wulianwang2/index.vue
+++ b/src/components/wulianwang2/index.vue
@@ -0,0 +1,94 @@
 
				+<template>
			
 
				+  <div class="body">
			
 
				+    <vTitle>今日报警</vTitle>
			
 
				+    <div class="con">
			
 
				+      <section class="s2">
			
 
				+        <div class="jiaotong-table">
			
 
				+          <div class="t-header">
			
 
				+            <span>报警设备</span>
			
 
				+            <span>设备位置</span>
			
 
				+            <span>报警时间</span>
			
 
				+          </div>
			
 
				+          <div class="t-main">
			
 
				+            <div class="t-body" v-for="(item, i) in 10" :key="i">
			
 
				+              <span>摄像头004</span>
			
 
				+              <span>停车场</span>
			
 
				+              <span>2021/02/03</span>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </section>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  components: {},
			
 
				+  mounted() {
			
 
				+    let $scroll = document.querySelector(".t-main");
			
 
				+    let last;
			
 
				+    setInterval(() => {
			
 
				+      if ($scroll.scrollTop === last) {
			
 
				+        $scroll.scrollTop = 0;
			
 
				+      }
			
 
				+      last = $scroll.scrollTop;
			
 
				+      $scroll.scrollTop += 1;
			
 
				+    }, 50);
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.con {
			
 
				+  .jiaotong-table {
			
 
				+    height: 220px;
			
 
				+    margin-top: 2%;
			
 
				+    overflow: hidden;
			
 
				+  }
			
 
				+
			
 
				+  .jiaotong-table .t-main {
			
 
				+    overflow-y: scroll;
			
 
				+    height: 220px;
			
 
				+    margin-top: 15px;
			
 
				+    &::-webkit-scrollbar {
			
 
				+      width: 0;
			
 
				+      height: 0;
			
 
				+      display: none;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .jiaotong-table span {
			
 
				+    display: inline-block;
			
 
				+    text-align: center;
			
 
				+    flex: 1;
			
 
				+  }
			
 
				+
			
 
				+  .jiaotong-table .t-header {
			
 
				+    color: #fff;
			
 
				+    font-size: 16px;
			
 
				+    display: flex;
			
 
				+    justify-content: space-between;
			
 
				+    padding: 4px 0;
			
 
				+    background: linear-gradient(
			
 
				+      to right,
			
 
				+      rgba(38, 159, 152, 0) 0,
			
 
				+      rgba(38, 159, 152, 0.35) 50%,
			
 
				+      rgba(38, 159, 152, 0) 100%
			
 
				+    );
			
 
				+  }
			
 
				+
			
 
				+  .jiaotong-table .t-body {
			
 
				+    display: flex;
			
 
				+    justify-content: space-between;
			
 
				+    font-size: 14px;
			
 
				+    padding-bottom: 10px;
			
 
				+    margin-bottom: 5px;
			
 
				+    border-bottom: 1px dotted #fff;
			
 
				+    color: #e0b822;
			
 
				+    &:last-of-type {
			
 
				+      border-bottom: none;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/components/wurenji/index.vue
+++ b/src/components/wurenji/index.vue
@@ -0,0 +1,151 @@
 
				+<template>
			
 
				+  <div class="body">
			
 
				+    <vTitle
			
 
				+      ><span>数据统计</span><span class="time">2021 / 11 / 25</span></vTitle
			
 
				+    >
			
 
				+    <div class="con">
			
 
				+      <div class="top">
			
 
				+        <div>
			
 
				+          <img :src="require(`@/assets/images/wurenji/top.png`)" alt="" />
			
 
				+          <p>无人机巡视</p>
			
 
				+        </div>
			
 
				+        <ul>
			
 
				+          <li v-for="(item, i) in data" :key="i">
			
 
				+            <span>{{ item.name }}</span>
			
 
				+            <p>
			
 
				+              <span>{{ item.num }}</span>
			
 
				+              <span>次</span>
			
 
				+            </p>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </div>
			
 
				+      <div class="readmore">
			
 
				+        <img :src="require(`@/assets/images/title_icon.png`)" alt="" />
			
 
				+        <span>查看更多</span>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  components: {},
			
 
				+  data() {
			
 
				+    return {
			
 
				+      data: [
			
 
				+        {
			
 
				+          name: "巡检次",
			
 
				+          num: "15",
			
 
				+          img: "1.png",
			
 
				+          color: "#0ad5ff",
			
 
				+        },
			
 
				+        {
			
 
				+          name: "拍照次数",
			
 
				+          num: "16",
			
 
				+          img: "2.png",
			
 
				+          color: "#66B0C9",
			
 
				+        },
			
 
				+        {
			
 
				+          name: "录像次数",
			
 
				+          num: "16",
			
 
				+          img: "3.png",
			
 
				+          color: "#E0B822",
			
 
				+        },
			
 
				+      ],
			
 
				+    };
			
 
				+  },
			
 
				+  mounted() {},
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.con {
			
 
				+  background-position: top left;
			
 
				+  background-size: 100% 70%;
			
 
				+  background-repeat: no-repeat;
			
 
				+  padding-top: 10px;
			
 
				+  .top {
			
 
				+    width: 100%;
			
 
				+    display: flex;
			
 
				+    justify-content: space-between;
			
 
				+    > div {
			
 
				+      flex: 1;
			
 
				+      padding: 30px;
			
 
				+      position: relative;
			
 
				+      > img {
			
 
				+        width: 100%;
			
 
				+      }
			
 
				+      > p {
			
 
				+        font-size: 12px;
			
 
				+        position: absolute;
			
 
				+        top: 65%;
			
 
				+        left: 50%;
			
 
				+        transform: translateX(-50%) scale(0.8);
			
 
				+      }
			
 
				+    }
			
 
				+    > ul {
			
 
				+      flex: 1;
			
 
				+      display: flex;
			
 
				+      flex-wrap: wrap;
			
 
				+      align-items: center;
			
 
				+      justify-content: center;
			
 
				+      flex-direction: column;
			
 
				+      li {
			
 
				+        width: 100%;
			
 
				+        display: flex;
			
 
				+        margin: 20px 0;
			
 
				+        padding-right: 30px;
			
 
				+        align-items: center;
			
 
				+        justify-content: space-between;
			
 
				+        position: relative;
			
 
				+        > span {
			
 
				+          font-size: 16px;
			
 
				+        }
			
 
				+        > p {
			
 
				+          > span {
			
 
				+            &:first-of-type {
			
 
				+              font-size: 26px;
			
 
				+              color: #e0b822;
			
 
				+              margin-top: 4px;
			
 
				+              margin-right: 10px;
			
 
				+            }
			
 
				+          }
			
 
				+        }
			
 
				+
			
 
				+        &:not(&:last-of-type) {
			
 
				+          &::before {
			
 
				+            content: "";
			
 
				+            display: inline-block;
			
 
				+            height: 1px;
			
 
				+            width: 100%;
			
 
				+            position: absolute;
			
 
				+            bottom: 0;
			
 
				+            left: 0;
			
 
				+            opacity: 0.5;
			
 
				+            background: linear-gradient(
			
 
				+              45deg,
			
 
				+              #66b0c9 0%,
			
 
				+              #66b0c9 64%,
			
 
				+              rgba(102, 176, 201, 0.1) 100%
			
 
				+            );
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .readmore {
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+    justify-content: flex-end;
			
 
				+    cursor: pointer;
			
 
				+    > img {
			
 
				+      width: 22px;
			
 
				+      margin-right: 10px;
			
 
				+    }
			
 
				+    > span {
			
 
				+      font-size: 20px;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/components/wurenji1/index.vue
+++ b/src/components/wurenji1/index.vue
@@ -0,0 +1,132 @@
 
				+<template>
			
 
				+  <div class="body">
			
 
				+    <vTitle>巡检管理</vTitle>
			
 
				+    <div class="con">
			
 
				+      <div class="bottom" id="wurenji"></div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  components: {},
			
 
				+  data() {
			
 
				+    return {
			
 
				+      options: {
			
 
				+        tooltip: {
			
 
				+          trigger: "item",
			
 
				+        },
			
 
				+        legend: {
			
 
				+          show: true,
			
 
				+          bottom: 0,
			
 
				+          textStyle: {
			
 
				+            color: "#ffffff",
			
 
				+          },
			
 
				+        },
			
 
				+        series: [
			
 
				+          {
			
 
				+            type: "pie",
			
 
				+            top: 14,
			
 
				+            radius: ["36%", "80%"],
			
 
				+            width: "100%",
			
 
				+            height: "70%",
			
 
				+            avoidLabelOverlap: true,
			
 
				+            label: {
			
 
				+              color: "rgba(255, 255, 255, 1)",
			
 
				+              position: "outside",
			
 
				+              formatter: "{d}%",
			
 
				+            },
			
 
				+            labelLine: {
			
 
				+              showAbove: false,
			
 
				+              lineStyle: {
			
 
				+                color: "#ffffff",
			
 
				+                cap: "round",
			
 
				+              },
			
 
				+            },
			
 
				+            data: [
			
 
				+              {
			
 
				+                value: 1048,
			
 
				+                name: "可视化监拍设备",
			
 
				+                itemStyle: {
			
 
				+                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
			
 
				+                    {
			
 
				+                      offset: 0,
			
 
				+                      color: "rgba(224, 184, 34, 1)",
			
 
				+                    },
			
 
				+                    {
			
 
				+                      offset: 0.6,
			
 
				+                      color: "rgba(224, 184, 34, 0.34)",
			
 
				+                    },
			
 
				+                    {
			
 
				+                      offset: 1,
			
 
				+                      color: "rgba(224, 184, 34, 0)",
			
 
				+                    },
			
 
				+                  ]),
			
 
				+                },
			
 
				+              },
			
 
				+              {
			
 
				+                value: 735,
			
 
				+                name: "跨视频监控",
			
 
				+                itemStyle: {
			
 
				+                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
			
 
				+                    {
			
 
				+                      offset: 1,
			
 
				+                      color: "rgba(38,  159, 152, 1)",
			
 
				+                    },
			
 
				+                    {
			
 
				+                      offset: 0.4,
			
 
				+                      color: "rgba(38,  159, 152, 0.34)",
			
 
				+                    },
			
 
				+                    {
			
 
				+                      offset: 0,
			
 
				+                      color: "rgba(38,  159, 152, 0)",
			
 
				+                    },
			
 
				+                  ]),
			
 
				+                },
			
 
				+              },
			
 
				+              {
			
 
				+                value: 580,
			
 
				+                name: "螺旋式无人机",
			
 
				+                itemStyle: {
			
 
				+                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
			
 
				+                    {
			
 
				+                      offset: 1,
			
 
				+                      color: "rgba(10, 213, 255, 1)",
			
 
				+                    },
			
 
				+                    {
			
 
				+                      offset: 0.4,
			
 
				+                      color: "rgba(10, 213, 255, 0.34)",
			
 
				+                    },
			
 
				+                    {
			
 
				+                      offset: 0,
			
 
				+                      color: "rgba(10, 213, 255, 0)",
			
 
				+                    },
			
 
				+                  ]),
			
 
				+                },
			
 
				+              },
			
 
				+            ],
			
 
				+          },
			
 
				+        ],
			
 
				+      },
			
 
				+    };
			
 
				+  },
			
 
				+  mounted() {
			
 
				+    var myChart = this.$echarts.init(document.getElementById("wurenji"));
			
 
				+    myChart.setOption(this.options);
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.con {
			
 
				+  width: 100%;
			
 
				+  .top {
			
 
				+    font-size: 16px;
			
 
				+    margin-top: 14px;
			
 
				+  }
			
 
				+  .bottom {
			
 
				+    width: 100%;
			
 
				+    height: 300px;
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/main.js
+++ b/src/main.js
@@ -0,0 +1,13 @@
 
				+import { createApp } from "vue";
			
 
				+import App from "./App.vue";
			
 
				+import router from "./router";
			
 
				+import "@/assets/style/reset.less";
			
 
				+import "@/assets/style/public.less";
			
 
				+import * as echarts from "echarts";
			
 
				+import vTitle from "@/components/vTitle";
			
 
				+
			
 
				+let app = createApp(App);
			
 
				+
			
 
				+app.config.globalProperties.$echarts = echarts;
			
 
				+
			
 
				+app.use(router).component("vTitle", vTitle).mount("#app");
			
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -0,0 +1,50 @@
 
				+import { createRouter, createWebHashHistory } from "vue-router";
			
 
				+import Home from "../views/Home.vue";
			
 
				+
			
 
				+const routes = [
			
 
				+  {
			
 
				+    path: "/",
			
 
				+    name: "Home",
			
 
				+    component: Home,
			
 
				+  },
			
 
				+  {
			
 
				+    path: "/page1",
			
 
				+    name: "Page1",
			
 
				+    component: () => import("../views/page1/index.vue"),
			
 
				+  },
			
 
				+  {
			
 
				+    path: "/page2",
			
 
				+    name: "Page2",
			
 
				+    component: () => import("../views/page2/index.vue"),
			
 
				+  },
			
 
				+
			
 
				+  {
			
 
				+    path: "/page3",
			
 
				+    name: "Page3",
			
 
				+    component: () => import("../views/page3/index.vue"),
			
 
				+  },
			
 
				+
			
 
				+  {
			
 
				+    path: "/page4",
			
 
				+    name: "Page4",
			
 
				+    component: () => import("../views/page4/index.vue"),
			
 
				+  },
			
 
				+
			
 
				+  {
			
 
				+    path: "/page5",
			
 
				+    name: "Page5",
			
 
				+    component: () => import("../views/page5/index.vue"),
			
 
				+  },
			
 
				+  {
			
 
				+    path: "/page6",
			
 
				+    name: "Page6",
			
 
				+    component: () => import("../views/page6/index.vue"),
			
 
				+  },
			
 
				+];
			
 
				+
			
 
				+const router = createRouter({
			
 
				+  history: createWebHashHistory(),
			
 
				+  routes,
			
 
				+});
			
 
				+
			
 
				+export default router;
			
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -0,0 +1,9 @@
 
				+<template>
			
 
				+  <div class="home"></div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: "Home",
			
 
				+};
			
 
				+</script>
			
--- a/src/views/page1/index.vue
+++ b/src/views/page1/index.vue
@@ -0,0 +1,19 @@
 
				+<template>
			
 
				+  <div class="container">
			
 
				+    <gaikuang />
			
 
				+    <gaikuang1 />
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import gaikuang from "@/components/gaikuang";
			
 
				+import gaikuang1 from "@/components/gaikuang1";
			
 
				+export default {
			
 
				+  components: {
			
 
				+    gaikuang,
			
 
				+    gaikuang1,
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped></style>
			
--- a/src/views/page2/index.vue
+++ b/src/views/page2/index.vue
@@ -0,0 +1,22 @@
 
				+<template>
			
 
				+  <div class="container">
			
 
				+    <nenghao />
			
 
				+    <nenghao1 />
			
 
				+    <nenghao2 />
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import nenghao from "@/components/nenghao";
			
 
				+import nenghao1 from "@/components/nenghao1";
			
 
				+import nenghao2 from "@/components/nenghao2";
			
 
				+export default {
			
 
				+  components: {
			
 
				+    nenghao,
			
 
				+    nenghao1,
			
 
				+    nenghao2,
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped></style>
			
--- a/src/views/page3/index.vue
+++ b/src/views/page3/index.vue