perf: 重构布局

app/plugins/px2viewport.js

@@ -1,79 +0,0 @@
-/* eslint-env node */
-const postcss = require("postcss");
-
-// excluding regex trick: http://www.rexegg.com/regex-best-trick.html
-// Not anything inside double quotes
-// Not anything inside single quotes
-// Not anything inside url()
-// Any digit followed by px
-// !singlequotes|!doublequotes|!url()|pixelunit
-const pxRegex = /"[^"]+"|'[^']+'|url\([^\)]+\)|(\d*\.?\d+)px/gi;
-
-const defaults = {
-  viewportWidth: 750,
-  viewportUnit: "vmin",
-  propertyBlacklist: [],
-  minPixelValue: 2,
-  enableConvertComment: "on",
-  disableConvertComment: "off",
-  mediaQuery: false,
-};
-
-module.exports = postcss.plugin(
-  "postcss-pixel-to-viewport",
-  function (options) {
-    const opts = Object.assign({}, defaults, options);
-    const pxReplace = createPxReplace(
-      opts.viewportWidth,
-      opts.minPixelValue,
-      opts.viewportUnit
-    );
-
-    return function (css) {
-      css.walkDecls(function (decl, i) {
-        const next = decl.next();
-        const commentText = next && next.type == "comment" && next.text;
-        if (
-          decl.value.indexOf("px") === -1 ||
-          commentText === opts.disableConvertComment
-        ) {
-          commentText === opts.disableConvertComment && next.remove();
-          return;
-        }
-        if (
-          commentText === opts.enableConvertComment ||
-          !blacklistedProperty(opts.propertyBlacklist, decl.prop)
-        ) {
-          commentText === opts.enableConvertComment && next.remove();
-          decl.value = decl.value.replace(pxRegex, pxReplace);
-        }
-      });
-
-      if (opts.mediaQuery) {
-        css.walkAtRules("media", function (rule) {
-          if (rule.params.indexOf("px") === -1) return;
-          rule.params = rule.params.replace(pxRegex, pxReplace);
-        });
-      }
-    };
-  }
-);
-
-function createPxReplace(viewportSize, minPixelValue, viewportUnit) {
-  return function (m, $1) {
-    if (!$1) return m;
-    const pixels = parseFloat($1);
-    if (pixels <= minPixelValue) return m;
-    return (
-      parseFloat(((pixels / viewportSize) * 100).toFixed(5)) + viewportUnit
-    );
-  };
-}
-
-function blacklistedProperty(blacklist, property) {
-  if (typeof property !== "string") return;
-  return blacklist.some(function (regex) {
-    if (typeof regex === "string") return property.indexOf(regex) !== -1;
-    return property.match(regex);
-  });
-}

app/src/assets/main.css → app/src/assets/css/main.css

@@ -14,7 +14,7 @@ html,body {
   width: 100vw;
   font-family: 'abel';
   color: #fff;
-  background: url("../../src/assets/homebg.png") center no-repeat;
+  background: url("../../src/assets/images/homebg.png") center no-repeat;
   background-size: 100% 100%;
   background-color: #000;
 }

app/src/components/Headers.vue

@@ -3,7 +3,7 @@
     <div class="header">
       <div class="title-card">
         <li class="bg-img" @click="ConfirmBtn(1)" :class="getClass(1)">
-          <img src="../assets/Vector.png" alt="" />
+          <img src="../assets/images/Vector.png" alt="" />
           <linear-text
             text="总览"
             startColor="#95CCFF"
@@ -42,7 +42,7 @@
           </li>
         </ul>
         <li class="bg-img" @click="ConfirmBtn(8)" :class="getClass(8)">
-          <img src="../assets/out.png" alt="" />
+          <img src="../assets/images/out.png" alt="" />
         </li>
       </div>
     </div>
@@ -50,10 +50,10 @@
 </template>
 
 <script>
-import Image1 from "../assets/fxyj2.png";
-import Image2 from "../assets/fxyj4.png";
-import Image3 from "../assets/fxyj7.png";
-import Image4 from "../assets/fxyj8.png";
+import Image1 from "../assets/images/fxyj2.png";
+import Image2 from "../assets/images/fxyj4.png";
+import Image3 from "../assets/images/fxyj7.png";
+import Image4 from "../assets/images/fxyj8.png";
 export default {
   // eslint-disable-next-line vue/multi-word-component-names
   name: "Headers",
@@ -119,7 +119,7 @@ export default {
   width: 100%;
   height: 120px;
   /* background: url('../assets/top.png') center no-repeat; */
-  background: url("../assets/top.png") center no-repeat;
+  background: url("../assets/images/top.png") center no-repeat;
 
   display: flex;
   justify-content: space-between;
@@ -144,7 +144,7 @@ img {
   width: 118px;
   height: 48px;
   font-size: 18px;
-  background: url("../assets/btn.png") no-repeat;
+  background: url("../assets/images/btn.png") no-repeat;
   background-size: 100% 100%;
   text-align: center;
   display: flex;
@@ -161,7 +161,7 @@ img {
   width: 150px;
   height: 48px;
   font-size: 18px;
-  background: url("../assets/active-btn.png") no-repeat !important;
+  background: url("../assets/images/active-btn.png") no-repeat !important;
   background-size: 100% 100%;
   text-align: center;
   line-height: 49px;

app/src/components/PieChart3D.vue

@@ -405,7 +405,7 @@ function getPie3D(pieData, internalDiameterRatio) {
   position: absolute;
   width: 290px;
   height: 198px;
-  background: url("../assets/1.png") no-repeat;
+  background: url("../assets/images/1.png") no-repeat;
   background-size: 100% 100%;
   left: calc(50% - 145px);
   bottom: 1%;

app/src/layouts/BasicLayout.vue

@@ -0,0 +1,24 @@
+<script>
+import Headers from "@/components/Headers.vue";
+export default {
+  name: 'BasicLayout',
+  components: {
+    Headers
+  }
+}
+</script>
+
+<template >
+  <div class="basic-layout">
+    <Headers />
+    <router-view />
+  </div>
+</template>
+
+<style scoped lang='less'>
+.basic-layout {
+  background: url("@/assets/homebg.png") center no-repeat;
+  background-size: 100% 100%;
+  width: 100%;
+}
+</style>

app/src/main.js

@@ -4,7 +4,7 @@ import DataVComponent from "@zhgkpt/components";
 import App from "./App.vue";
 import router from "./router";
 
-import "./assets/main.css";
+import "./assets/css/main.css";
 
 Vue.use(PiniaVuePlugin);
 Vue.use(DataVComponent);

app/src/router/index.js

@@ -1,6 +1,7 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
-import HomeView from "../views/HomeView.vue";
+import BasicLayout from '@/layouts/BasicLayout.vue'
+import HomePage from "../views/Home/index.vue";
 
 Vue.use(VueRouter);
 
@@ -10,17 +11,17 @@ const router = new VueRouter({
   routes: [
     {
       path: "/",
-      name: "home",
-      component: HomeView,
-    },
-    {
-      path: "/about",
-      name: "about",
-      // route level code-splitting
-      // this generates a separate chunk (About.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      component: () => import("../views/AboutView.vue"),
-    },
+      name: "basic-layout",
+      component: BasicLayout,
+      redirect: '/home',
+      children: [
+        {
+          path: '/home',
+          name: 'home-page',
+          component: HomePage
+        }
+      ]
+    }
   ],
 });
 

app/src/views/AboutView.vue

@@ -1,26 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-    <ButtonView2 />
-  </div>
-</template>
-
-<script>
-// import { ButtonView } from '@zhgkpt/components'
-
-export default {
-  components: {
-    // ButtonView
-  },
-};
-</script>
-
-<style>
-@media (min-width: 1024px) {
-  .about {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-  }
-}
-</style>

app/src/views/components/MapCharts.vue → app/src/views/Home/components/MapCharts.vue

@@ -7,7 +7,7 @@ import * as echarts from "echarts";
 //   import { getDataMap } from "@/api/data-view";
 
 //   const jsonCq = require("@/assets/json/cq.json");
-import jsonCq from "../../assets/json/cq.json";
+import jsonCq from "@/assets/json/cq.json";
 
 export default {
   // name: "ChartMap",
@@ -51,7 +51,7 @@ export default {
         川东: [107.3488646, 29.68233099],
       },
       activeMap: jsonCq,
-      // mapIcon: require("@/assets/img/map-icon.png"),
+      // mapIcon: require("@/assets/images/map-icon.png"),
       activeName: "重庆市",
       activeMapData: [],
       heatData: [],

app/src/views/components/WisdomFire.vue → app/src/views/Home/components/WisdomFire.vue

@@ -5,7 +5,7 @@
       <div class="build-num">
         <div class="build">
           <span
-            ><img src="../../assets/Vector (3).png" alt="" />
+            ><img src="@/assets/images/Vector (3).png" alt="" />
             <span>已接入物联网建筑数</span>
           </span>
           <span class="num">1542</span>
@@ -40,7 +40,7 @@
                 <span>在线</span>
                 <img
                   class="pressure-img"
-                  src="../../assets/Ellipse 275.png"
+                  src="../../assets/images/Ellipse 275.png"
                   alt=""
                 />
                 <span class="bumer">2670 </span>
@@ -50,7 +50,7 @@
                 <span>告警</span>
                 <img
                   class="pressure-img"
-                  src="../../assets/Ellipse 275 (1).png"
+                  src="../../assets/images/Ellipse 275 (1).png"
                   alt=""
                 />
                 <span class="bumer">3144</span>
@@ -66,7 +66,7 @@
                 <span>在线</span>
                 <img
                   class="pressure-img"
-                  src="../../assets/Ellipse 275.png"
+                  src="../../assets/images/Ellipse 275.png"
                   alt=""
                 />
                 <span class="bumer">2670 </span>
@@ -76,7 +76,7 @@
                 <span>告警</span>
                 <img
                   class="pressure-img"
-                  src="../../assets/Ellipse 275 (1).png"
+                  src="../../assets/images/Ellipse 275 (1).png"
                   alt=""
                 />
                 <span class="bumer">31</span>
@@ -92,7 +92,7 @@
                 <span>在线</span>
                 <img
                   class="pressure-img"
-                  src="../../assets/Ellipse 275.png"
+                  src="../../assets/images/Ellipse 275.png"
                   alt=""
                 />
                 <span class="bumer">2670 </span>
@@ -102,7 +102,7 @@
                 <span>告警</span>
                 <img
                   class="pressure-img"
-                  src="../../assets/Ellipse 275 (1).png"
+                  src="../../assets/images/Ellipse 275 (1).png"
                   alt=""
                 />
                 <span class="bumer">31</span>
@@ -188,7 +188,7 @@ img {
 .pressure-bg {
   width: 66px;
   height: 77px;
-  background: url("../../assets/water.png") no-repeat;
+  background: url("../../assets/images/water.png") no-repeat;
   font-size: 24px;
   text-align: center;
   padding-left: 3px;

app/src/views/HomeView.vue → app/src/views/Home/index.vue

@@ -1,7 +1,5 @@
 <template>
-  <div class="home">
-    <Headers />
-    <div>
+  <div>
       <div
         style="padding: 0px 35px; display: flex; justify-content: space-between"
       >
@@ -63,11 +61,9 @@
           </border-panel>
         </div>
       </div>
-    </div>
   </div>
 </template>
 <script>
-import Headers from "@/components/Headers.vue";
 import BasicInfo from "./components/BasicInfo.vue";
 import AlarmingSituationDynamics from "./components/AlarmingSituationDynamics.vue";
 import AutonomousManagement from "./components/AutonomousManagement.vue";
@@ -76,8 +72,8 @@ import MapCharts from "./components/MapCharts.vue";
 import RiskWarning from "./components/RiskWarning.vue";
 import WisdomFire from "./components/WisdomFire.vue";
 export default {
+  name: "HomePage",
   components: {
-    Headers,
     BasicInfo,
     WisdomFire,
     AlarmingSituationDynamics,
@@ -89,11 +85,6 @@ export default {
 };
 </script>
 <style scoped>
-.home {
-  background: url("../../src/assets/homebg.png") center no-repeat;
-  background-size: 100% 100%;
-  width: 100%;
-}
 .map {
   flex: 1;
 }