feat: 界面修改

src/App.vue

@@ -5,11 +5,13 @@
   </div>
   <router-view/> -->
 
-  <v-scale-screen width="1920" height="960">
-    <router-view />
-  </v-scale-screen>
+  <router-view />
 </template>
 
+<script>
+export default {};
+</script>
+
 <style lang="less">
 #app {
   // height: 100%;

src/main.js

@@ -5,6 +5,5 @@ import store from "./store";
 import Antd from "ant-design-vue";
 // import "./utils/rem";
 import "ant-design-vue/dist/antd.css";
-import VScaleScreen from "v-scale-screen";
 
-createApp(App).use(store).use(Antd).use(router).use(VScaleScreen).mount("#app");
+createApp(App).use(store).use(Antd).use(router).mount("#app");

src/views/screen/index.vue

 <template>
-  <div class="screen">
-    <header>太原理工大学专利成果转移转化仪表盘</header>
-    <div class="center">
-      <div class="center_left">
-        <patentType></patentType>
-      </div>
-      <div class="center_map">
-        <patentMap></patentMap>
-      </div>
-      <div class="center_right">
-        <patentPerson></patentPerson>
-      </div>
-    </div>
-    <div class="bottom">
-      <div class="bottom_echart">
-        <div class="bottom_title">
-          <span>专利发展趋势图</span>
-          <div class="bottom_title_btn">
-            <span
-              :class="[activeTrend == 'apply_num' ? 'active' : '']"
-              @click="changetrend('apply_num')"
-              >申请量</span
-            >
-            <span
-              :class="[activeTrend == 'publish_num' ? 'active' : '']"
-              @click="changetrend('publish_num')"
-              >公布量</span
-            >
-            <span
-              :class="[activeTrend == 'authorize_num' ? 'active' : '']"
-              @click="changetrend('authorize_num')"
-              >授权量</span
-            >
-            <a-select
-              ref="select"
-              v-model:value="trend_year"
-              style="width: 120px"
-              :options="yearOptions"
-              @change="handleChange"
-            >
-            </a-select>
-          </div>
+  <v-scale-screen width="1920" height="960">
+    <div class="screen">
+      <header>太原理工大学专利成果转移转化仪表盘</header>
+      <div class="center">
+        <div class="center_left">
+          <patentType></patentType>
         </div>
-        <div class="echarts_container">
-          <EchartsCon
-            :id="'patent_trend'"
-            :option="option5"
-            v-if="option5"
-          ></EchartsCon>
+        <div class="center_map">
+          <patentMap></patentMap>
         </div>
-      </div>
-      <div class="bottom_echart">
-        <div class="bottom_title">
-          <span>专利产业布局分布（山西十大产业）</span>
+        <div class="center_right">
+          <patentPerson></patentPerson>
         </div>
-        <div class="rank_con">
-          <div class="rank_con_left">
-            <div class="rank_progress" v-for="item in rankArr.slice(0, 5)">
-              <span class="index1 index" v-if="item.index == '1'">{{
-                item.index
-              }}</span>
-              <span class="index2 index" v-else-if="item.index == '2'">{{
-                item.index
-              }}</span>
-              <span class="index3 index" v-else-if="item.index == '3'">{{
-                item.index
-              }}</span>
-              <span class="index4 index" v-else>{{ item.index }}</span>
-              <span
-                class="name1 name"
-                :title="item.name"
-                v-if="item.index == '1'"
-                >{{ item.name }}</span
-              >
-              <span
-                class="name2 name"
-                :title="item.name"
-                v-else-if="item.index == '2'"
-                >{{ item.name }}</span
-              >
-              <span
-                class="name3 name"
-                :title="item.name"
-                v-else-if="item.index == '3'"
-                >{{ item.name }}</span
-              >
-              <span class="name4 name" :title="item.name" v-else>{{
-                item.name
-              }}</span>
-
-              <a-progress
-                v-if="item.index == '1'"
-                class="progress"
-                :percent="item.percent"
-                :stroke-color="gradientColor1"
-                :trail-color="'rgba(19, 40, 71, 1)'"
-                :show-info="false"
-                :stroke-linecap="'round'"
-              >
-              </a-progress>
-              <a-progress
-                v-else-if="item.index == '2'"
-                class="progress"
-                :percent="item.percent"
-                :stroke-color="gradientColor2"
-                :trail-color="'rgba(19, 40, 71, 1)'"
-                :show-info="false"
-                :stroke-linecap="'round'"
-              >
-              </a-progress>
-              <a-progress
-                v-else-if="item.index == '3'"
-                class="progress"
-                :percent="item.percent"
-                :stroke-color="gradientColor3"
-                :trail-color="'rgba(19, 40, 71, 1)'"
-                :show-info="false"
-                :stroke-linecap="'round'"
-              >
-              </a-progress>
-              <a-progress
-                v-else
-                class="progress"
-                :percent="item.percent"
-                :stroke-color="gradientColor4"
-                :trail-color="'rgba(19, 40, 71, 1)'"
-                :show-info="false"
-                :stroke-linecap="'round'"
+      </div>
+      <div class="bottom">
+        <div class="bottom_echart">
+          <div class="bottom_title">
+            <span>专利发展趋势图</span>
+            <div class="bottom_title_btn">
+              <span :class="[activeTrend == 'apply_num' ? 'active' : '']" @click="changetrend('apply_num')"
+                >申请量</span
               >
-              </a-progress>
-              <span class="num1 num" v-if="item.index == '1'"
-                >{{ item.value }}个</span
+              <span :class="[activeTrend == 'publish_num' ? 'active' : '']" @click="changetrend('publish_num')"
+                >公布量</span
               >
-              <span class="num2 num" v-else-if="item.index == '2'"
-                >{{ item.value }}个</span
+              <span :class="[activeTrend == 'authorize_num' ? 'active' : '']" @click="changetrend('authorize_num')"
+                >授权量</span
               >
-              <span class="num3 num" v-else-if="item.index == '3'"
-                >{{ item.value }}个</span
+              <a-select
+                ref="select"
+                v-model:value="trend_year"
+                style="width: 120px"
+                :options="yearOptions"
+                @change="handleChange"
               >
-              <span class="num4 num" v-else>{{ item.value }}个</span>
+              </a-select>
             </div>
           </div>
-          <div class="rank_con_right">
-            <div class="rank_progress" v-for="item in rankArr.slice(5, 10)">
-              <span class="index4 index">{{ item.index }}</span>
-              <span class="name4 name" :title="item.name">{{ item.name }}</span>
-              <a-progress
-                class="progress"
-                :percent="item.percent"
-                :stroke-color="gradientColor4"
-                :trail-color="'rgba(19, 40, 71, 1)'"
-                :show-info="false"
-                :stroke-linecap="'round'"
-              >
-              </a-progress>
-              <span class="num4 num">{{ item.value }}个</span>
+          <div class="echarts_container">
+            <EchartsCon :id="'patent_trend'" :option="option5" v-if="option5"></EchartsCon>
+          </div>
+        </div>
+        <div class="bottom_echart">
+          <div class="bottom_title">
+            <span>专利产业布局分布（山西十大产业）</span>
+          </div>
+          <div class="rank_con">
+            <div class="rank_con_left">
+              <div class="rank_progress" v-for="item in rankArr.slice(0, 5)">
+                <span class="index1 index" v-if="item.index == '1'">{{ item.index }}</span>
+                <span class="index2 index" v-else-if="item.index == '2'">{{ item.index }}</span>
+                <span class="index3 index" v-else-if="item.index == '3'">{{ item.index }}</span>
+                <span class="index4 index" v-else>{{ item.index }}</span>
+                <span class="name1 name" :title="item.name" v-if="item.index == '1'">{{ item.name }}</span>
+                <span class="name2 name" :title="item.name" v-else-if="item.index == '2'">{{ item.name }}</span>
+                <span class="name3 name" :title="item.name" v-else-if="item.index == '3'">{{ item.name }}</span>
+                <span class="name4 name" :title="item.name" v-else>{{ item.name }}</span>
+
+                <a-progress
+                  v-if="item.index == '1'"
+                  class="progress"
+                  :percent="item.percent"
+                  :stroke-color="gradientColor1"
+                  :trail-color="'rgba(19, 40, 71, 1)'"
+                  :show-info="false"
+                  :stroke-linecap="'round'"
+                >
+                </a-progress>
+                <a-progress
+                  v-else-if="item.index == '2'"
+                  class="progress"
+                  :percent="item.percent"
+                  :stroke-color="gradientColor2"
+                  :trail-color="'rgba(19, 40, 71, 1)'"
+                  :show-info="false"
+                  :stroke-linecap="'round'"
+                >
+                </a-progress>
+                <a-progress
+                  v-else-if="item.index == '3'"
+                  class="progress"
+                  :percent="item.percent"
+                  :stroke-color="gradientColor3"
+                  :trail-color="'rgba(19, 40, 71, 1)'"
+                  :show-info="false"
+                  :stroke-linecap="'round'"
+                >
+                </a-progress>
+                <a-progress
+                  v-else
+                  class="progress"
+                  :percent="item.percent"
+                  :stroke-color="gradientColor4"
+                  :trail-color="'rgba(19, 40, 71, 1)'"
+                  :show-info="false"
+                  :stroke-linecap="'round'"
+                >
+                </a-progress>
+                <span class="num1 num" v-if="item.index == '1'">{{ item.value }}个</span>
+                <span class="num2 num" v-else-if="item.index == '2'">{{ item.value }}个</span>
+                <span class="num3 num" v-else-if="item.index == '3'">{{ item.value }}个</span>
+                <span class="num4 num" v-else>{{ item.value }}个</span>
+              </div>
+            </div>
+            <div class="rank_con_right">
+              <div class="rank_progress" v-for="item in rankArr.slice(5, 10)">
+                <span class="index4 index">{{ item.index }}</span>
+                <span class="name4 name" :title="item.name">{{ item.name }}</span>
+                <a-progress
+                  class="progress"
+                  :percent="item.percent"
+                  :stroke-color="gradientColor4"
+                  :trail-color="'rgba(19, 40, 71, 1)'"
+                  :show-info="false"
+                  :stroke-linecap="'round'"
+                >
+                </a-progress>
+                <span class="num4 num">{{ item.value }}个</span>
+              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
+  </v-scale-screen>
 </template>
 <script>
 import { patentDevelop, patentIndustryTopN } from "@/utils/screen.js";
@@ -168,6 +131,7 @@ import EchartsCon from "@/components/EchartsCon.vue";
 import patentType from "./components/patentType.vue";
 import patentMap from "./components/patentMap.vue";
 import patentPerson from "./components/patentPerson.vue";
+import VScaleScreen from "v-scale-screen";
 export default {
   name: "screen",
   data() {
@@ -243,6 +207,7 @@ export default {
     patentType,
     patentMap,
     patentPerson,
+    VScaleScreen,
   },
   methods: {
     init() {
@@ -274,26 +239,24 @@ export default {
         yData4: [],
       };
 
-      patentDevelop({ type: this.activeTrend, year: this.trend_year }).then(
-        (res) => {
-          if (res.code == 0) {
-            res.data.patent_all.forEach((item) => {
-              data.xData.push(item.name);
-              data.yData1.push(item.value);
-            });
-            res.data.invention_patent.forEach((item) => {
-              data.yData2.push(item.value);
-            });
-            res.data.utility_model.forEach((item) => {
-              data.yData3.push(item.value);
-            });
-            res.data.appearance_design.forEach((item) => {
-              data.yData4.push(item.value);
-            });
-            this.getTrendData(data);
-          }
+      patentDevelop({ type: this.activeTrend, year: this.trend_year }).then((res) => {
+        if (res.code == 0) {
+          res.data.patent_all.forEach((item) => {
+            data.xData.push(item.name);
+            data.yData1.push(item.value);
+          });
+          res.data.invention_patent.forEach((item) => {
+            data.yData2.push(item.value);
+          });
+          res.data.utility_model.forEach((item) => {
+            data.yData3.push(item.value);
+          });
+          res.data.appearance_design.forEach((item) => {
+            data.yData4.push(item.value);
+          });
+          this.getTrendData(data);
         }
-      );
+      });
     },
     getTrendData(data) {
       this.option5 = {
@@ -505,7 +468,7 @@ export default {
   background-image: url("../../static/screen/bg-all.png");
   background-size: 100% 100%;
   width: 100%;
-  height: 100%;
+  height: 960px;
   overflow: auto;
   // height: 885px;
   header {
@@ -569,9 +532,7 @@ export default {
             color: #fff;
             text-shadow: 0px 2px 8px #f6f9fe;
           }
-          :deep(
-              .ant-select:not(.ant-select-customize-input) .ant-select-selector
-            ) {
+          :deep(.ant-select:not(.ant-select-customize-input) .ant-select-selector) {
             background-color: #2d58b8;
             color: #99b1dd;
           }
@@ -599,25 +560,13 @@ export default {
           background: linear-gradient(to right, red, transparent);
         }
         .index2 {
-          background: linear-gradient(
-            to right,
-            rgba(255, 108, 0, 1),
-            transparent
-          );
+          background: linear-gradient(to right, rgba(255, 108, 0, 1), transparent);
         }
         .index3 {
-          background: linear-gradient(
-            to right,
-            rgba(221, 205, 66, 1),
-            transparent
-          );
+          background: linear-gradient(to right, rgba(221, 205, 66, 1), transparent);
         }
         .index4 {
-          background: linear-gradient(
-            to right,
-            rgba(44, 61, 81, 1),
-            transparent
-          );
+          background: linear-gradient(to right, rgba(44, 61, 81, 1), transparent);
         }
         .name {
           font-size: 12px;

vue.config.js

@@ -3,13 +3,13 @@ function resolve(dir) {
   return path.join(__dirname, dir);
 }
 // 引入等比适配插件
-const px2rem = require("postcss-px2rem");
+// const px2rem = require("postcss-px2rem");
 
-// 配置基本大小
-const postcss = px2rem({
-  // 基准大小 baseSize，需要和rem.js中相同
-  remUnit: 16,
-});
+// // 配置基本大小
+// const postcss = px2rem({
+//   // 基准大小 baseSize，需要和rem.js中相同
+//   remUnit: 16,
+// });
 
 module.exports = {
   devServer: {