From fa3d9d791cd6c1d280d65a7dad56de6ed5050b7d Mon Sep 17 00:00:00 2001
From: wally <18603454788@163.com>
Date: Tue, 7 Dec 2021 16:52:24 +0800
Subject: [PATCH] =?UTF-8?q?feat:=201.=E7=BB=86=E8=8A=82=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=EF=BC=9B2.=E8=A7=86=E9=A2=91=E6=BA=90=E5=88=87=E6=8D=A2?=
 =?UTF-8?q?=E4=B8=BA=E5=85=AC=E5=BC=80=E6=BA=90=EF=BC=9B3.=E7=9B=91?=
 =?UTF-8?q?=E5=90=AC=E5=85=B3=E9=97=AD=E8=A7=86=E9=A2=91=E9=80=9A=E8=AF=9D?=
 =?UTF-8?q?=E7=9A=84=E4=BA=8B=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintignore                        |  1 +
 package.json                         |  4 +---
 src/App.vue                          | 16 +++++++++++-----
 src/components/Center/Left.vue       |  5 +++--
 src/components/Center/Middle.vue     |  6 ++++--
 src/components/Center/Right.vue      |  7 ++++---
 src/components/Common/FaultChart.vue | 14 ++++++++------
 src/components/Common/Map.vue        |  1 -
 src/components/Common/Modal.vue      |  6 +++++-
 src/components/Common/Monitor.vue    |  7 +++++--
 src/components/Farm/Left.vue         |  8 ++++----
 src/components/Farm/Middle.vue       |  6 ++++--
 src/components/Farm/Right.vue        |  5 +++--
 src/config/layout/dataCenterBody.js  | 14 +++++++-------
 src/config/layout/dataFarmBody.js    | 18 +++++++++---------
 src/utils/map.js                     |  3 +++
 16 files changed, 72 insertions(+), 49 deletions(-)

diff --git a/.eslintignore b/.eslintignore
index c622f86..37eed05 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -7,3 +7,4 @@ package.json
 postcss.config.js
 .eslintrc.js
 vite.config.js
+*/Middle.vue
diff --git a/package.json b/package.json
index 3251259..b4933f2 100644
--- a/package.json
+++ b/package.json
@@ -2,10 +2,8 @@
   "name": "vue3-vite-template",
   "version": "0.0.0",
   "scripts": {
-    "dev-test": "vite --mode development",
     "dev": "vite --mode test",
-    "build": "vite build --mode test",
-    "build:prod": "vite build --mode production",
+    "build": "vite build --mode production",
     "serve": "vite preview",
     "cz": "git add . && git cz",
     "format": "prettier --write ./src",
diff --git a/src/App.vue b/src/App.vue
index a7708cc..279c91b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -29,15 +29,21 @@ onMounted(() => {
 <style>
 html,
 body,
-#app {
-  height: 100%;
-}
+#app,
 .page {
-  width: 100%;
   height: 100%;
-  background: url('@/assets/bg.png') no-repeat center center;
+}
+
+* {
+  user-select: none;
+}
+
+html {
   background-size: cover;
+  background: url('@/assets/bg.png') no-repeat fixed center center;
+  overflow: hidden;
 }
+
 .clear:after {
   content: '';
   display: block;
diff --git a/src/components/Center/Left.vue b/src/components/Center/Left.vue
index c8e45cd..c98c1a4 100644
--- a/src/components/Center/Left.vue
+++ b/src/components/Center/Left.vue
@@ -6,7 +6,7 @@
       :style="{
         width: body.left.data[0].width,
         height: body.left.data[0].height,
-        'background-image': `url(${body.left.data[0].background.image})`,
+        'background-image': `url(${prefix}${body.left.data[0].background.image})`,
       }"
     >
       <!--      区块标题-->
@@ -21,7 +21,7 @@
       :style="{
         width: body.left.data[1].width,
         height: body.left.data[1].height,
-        'background-image': `url(${body.left.data[1].background.image})`,
+        'background-image': `url(${prefix}${body.left.data[1].background.image})`,
       }"
     >
       <!--      区块标题-->
@@ -41,6 +41,7 @@ import DataCenterNews from 'components/Center/News.vue';
 import DataCenterTall from 'components/Common/Tall.vue';
 import useLayoutConfig from '@/hooks/useLayoutConfig';
 
+const prefix = import.meta.env.PROD ? '/farm/' : 'src/';
 const body = useLayoutConfig();
 </script>
 
diff --git a/src/components/Center/Middle.vue b/src/components/Center/Middle.vue
index 90ed223..a712f65 100644
--- a/src/components/Center/Middle.vue
+++ b/src/components/Center/Middle.vue
@@ -5,7 +5,7 @@
       :style="{
         width: body.middle.data[0].width,
         height: body.middle.data[0].height,
-        'background-image': `url(${body.middle.data[0].background.image})`,
+        'background-image': `url(${prefix}${body.middle.data[0].background.image})`,
       }"
     >
       <!--      标题-->
@@ -21,7 +21,7 @@
       :style="{
         width: body.middle.data[1].width,
         height: body.middle.data[1].height,
-        'background-image': `url(${body.middle.data[1].background.image})`,
+        'background-image': `url(${prefix}${body.middle.data[1].background.image})`,
       }"
     >
       <!--      标题-->
@@ -39,6 +39,8 @@ import DataCenterTitle from 'components/Common/Title.vue';
 import DataCenterMapContainer from 'components/Common/MapContainer.vue';
 import DataCenterComplexChart from 'components/Common/ComplexChart.vue';
 import { body } from '@/config/layout/dataCenterBody';
+
+const prefix = import.meta.env.PROD ? '/farm/' : 'src/';
 </script>
 
 <style scoped>
diff --git a/src/components/Center/Right.vue b/src/components/Center/Right.vue
index 1467928..dd596e5 100644
--- a/src/components/Center/Right.vue
+++ b/src/components/Center/Right.vue
@@ -5,7 +5,7 @@
       :style="{
         width: body.right.data[0].width,
         height: body.right.data[0].height,
-        'background-image': `url(${body.right.data[0].background.image})`,
+        'background-image': `url(${prefix}${body.right.data[0].background.image})`,
       }"
     >
       <!--      区块标题-->
@@ -17,7 +17,7 @@
       :style="{
         width: body.right.data[1].width,
         height: body.right.data[1].height,
-        'background-image': `url(${body.right.data[1].background.image})`,
+        'background-image': `url(${prefix}${body.right.data[1].background.image})`,
       }"
     >
       <!--      区块标题-->
@@ -32,7 +32,7 @@
       :style="{
         width: body.right.data[2].width,
         height: body.right.data[2].height,
-        'background-image': `url(${body.right.data[2].background.image})`,
+        'background-image': `url(${prefix}${body.right.data[2].background.image})`,
       }"
     >
       <!--      区块标题-->
@@ -51,6 +51,7 @@ import DataCenterFaultChart from 'components/Common/FaultChart.vue';
 import useLayoutConfig from '@/hooks/useLayoutConfig';
 
 const body = useLayoutConfig();
+const prefix = import.meta.env.PROD ? '/farm/' : 'src/';
 </script>
 
 <style scoped>
diff --git a/src/components/Common/FaultChart.vue b/src/components/Common/FaultChart.vue
index c9873ee..d5aeb10 100644
--- a/src/components/Common/FaultChart.vue
+++ b/src/components/Common/FaultChart.vue
@@ -10,7 +10,7 @@
         {{ data[key] }}
       </div>
       <div class="title">{{ item.title }}</div>
-      <img :src="item.image" class="image" />
+      <img :src="`${prefix}${item.image}`" class="image" />
     </div>
   </div>
 </template>
@@ -25,26 +25,28 @@ const data = ref({
   in: 29,
 });
 
+const prefix = import.meta.env.PROD ? '/farm/' : 'src/';
+
 const styles = ref({
   total: {
     title: '设备总数',
     color: ['#08967e', '#08eb94'],
-    image: 'src/assets/circle-green.png',
+    image: 'assets/circle-green.png',
   },
   error: {
     title: '设备异常',
     color: ['#e0a912', '#fde053'],
-    image: 'src/assets/circle-yellow.png',
+    image: 'assets/circle-yellow.png',
   },
   fault: {
     title: '设备预警',
     color: ['#fc4768', '#f8d03f'],
-    image: 'src/assets/circle-red.png',
+    image: 'assets/circle-red.png',
   },
   in: {
-    title: '接入设备',
+    title: '设备接入',
     color: ['#08dcf4', '#09b4c9'],
-    image: 'src/assets/circle-blue.png',
+    image: 'assets/circle-blue.png',
   },
 });
 </script>
diff --git a/src/components/Common/Map.vue b/src/components/Common/Map.vue
index 8b59f95..837f5fa 100644
--- a/src/components/Common/Map.vue
+++ b/src/components/Common/Map.vue
@@ -12,7 +12,6 @@ import { initOptions } from '@/utils/map';
 onMounted(async () => {
   await nextTick();
   const chartDom = document.getElementById('map');
-  console.log('chartDom: ', chartDom);
   const myChart = echarts.init(chartDom);
 
   echarts.registerMap('shanxi', ShanXiMap);
diff --git a/src/components/Common/Modal.vue b/src/components/Common/Modal.vue
index 67bdfbe..e09ca70 100644
--- a/src/components/Common/Modal.vue
+++ b/src/components/Common/Modal.vue
@@ -28,8 +28,12 @@ onMounted(() => {
       console.log('event: ', event.data);
       if (event.data === 'onInvitationReceived') {
         store.commit('setModal', true);
+        return;
+      }
+
+      if (event.data === 'hide') {
+        store.commit('setModal', false);
       }
-      console.log('event origin: ', event.source.origin);
     },
     false,
   );
diff --git a/src/components/Common/Monitor.vue b/src/components/Common/Monitor.vue
index 1afa2d6..b202d6a 100644
--- a/src/components/Common/Monitor.vue
+++ b/src/components/Common/Monitor.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="frame-container" v-show="monitorDisplay">
-    <iframe src="https://www.tall.wiki/kangfu/v1/?key=230659446" frameborder="0"></iframe>
+    <iframe :src="src" frameborder="0"></iframe>
   </div>
 </template>
 
@@ -9,7 +9,10 @@ import { computed } from 'vue';
 import { useStore } from 'vuex';
 
 const store = useStore();
-
+/* eslint-disable */
+const src =
+  'https://open.ys7.com/ezopen/h5/iframe?url=ezopen://open.ys7.com/C78957921/1.hd.live&autoplay=1&audio=1&accessToken=ra.ccw2p99v1qzzuu9yd6xwgos5098ve4bk-6pmcuhy94r-1tm6dwc-soxrhgmlm&templete=0';
+/* eslint-enable */
 const monitorDisplay = computed(() => store.state.monitor);
 </script>
 
diff --git a/src/components/Farm/Left.vue b/src/components/Farm/Left.vue
index d1c989b..dba139f 100644
--- a/src/components/Farm/Left.vue
+++ b/src/components/Farm/Left.vue
@@ -6,7 +6,7 @@
       :style="{
         width: body.left.data[0].width,
         height: body.left.data[0].height,
-        'background-image': `url(${body.left.data[0].background.image})`,
+        'background-image': `url(${prefix}${body.left.data[0].background.image})`,
       }"
     >
       <!--      区块标题-->
@@ -21,7 +21,7 @@
       :style="{
         width: body.left.data[1].width,
         height: body.left.data[1].height,
-        'background-image': `url(${body.left.data[1].background.image})`,
+        'background-image': `url(${prefix}${body.left.data[1].background.image})`,
       }"
     >
       <!--      区块标题-->
@@ -36,7 +36,7 @@
       :style="{
         width: body.left.data[2].width,
         height: body.left.data[2].height,
-        'background-image': `url(${body.left.data[2].background.image})`,
+        'background-image': `url(${prefix}${body.left.data[2].background.image})`,
       }"
     >
       <!--      区块标题-->
@@ -58,7 +58,7 @@ import DataFarmSoilHumidity from 'components/Farm/SoilHumidity.vue';
 import useLayoutConfig from '@/hooks/useLayoutConfig';
 
 const body = useLayoutConfig();
-console.log(body);
+const prefix = import.meta.env.PROD ? '/farm/' : 'src/';
 </script>
 
 <style scoped>
diff --git a/src/components/Farm/Middle.vue b/src/components/Farm/Middle.vue
index 90ed223..a712f65 100644
--- a/src/components/Farm/Middle.vue
+++ b/src/components/Farm/Middle.vue
@@ -5,7 +5,7 @@
       :style="{
         width: body.middle.data[0].width,
         height: body.middle.data[0].height,
-        'background-image': `url(${body.middle.data[0].background.image})`,
+        'background-image': `url(${prefix}${body.middle.data[0].background.image})`,
       }"
     >
       <!--      标题-->
@@ -21,7 +21,7 @@
       :style="{
         width: body.middle.data[1].width,
         height: body.middle.data[1].height,
-        'background-image': `url(${body.middle.data[1].background.image})`,
+        'background-image': `url(${prefix}${body.middle.data[1].background.image})`,
       }"
     >
       <!--      标题-->
@@ -39,6 +39,8 @@ import DataCenterTitle from 'components/Common/Title.vue';
 import DataCenterMapContainer from 'components/Common/MapContainer.vue';
 import DataCenterComplexChart from 'components/Common/ComplexChart.vue';
 import { body } from '@/config/layout/dataCenterBody';
+
+const prefix = import.meta.env.PROD ? '/farm/' : 'src/';
 </script>
 
 <style scoped>
diff --git a/src/components/Farm/Right.vue b/src/components/Farm/Right.vue
index 428128e..edd4e03 100644
--- a/src/components/Farm/Right.vue
+++ b/src/components/Farm/Right.vue
@@ -5,7 +5,7 @@
       :style="{
         width: body.right.data[0].width,
         height: body.right.data[0].height,
-        'background-image': `url(${body.right.data[0].background.image})`,
+        'background-image': `url(${prefix}${body.right.data[0].background.image})`,
       }"
     >
       <!--      区块标题-->
@@ -21,7 +21,7 @@
       :style="{
         width: body.right.data[1].width,
         height: body.right.data[1].height,
-        'background-image': `url(${body.right.data[1].background.image})`,
+        'background-image': `url(${prefix}${body.right.data[1].background.image})`,
       }"
     >
       <!--      区块标题-->
@@ -40,6 +40,7 @@ import DataCenterFaultChart from 'components/Common/FaultChart.vue';
 import useLayoutConfig from '@/hooks/useLayoutConfig';
 
 const body = useLayoutConfig();
+const prefix = import.meta.env.PROD ? '/farm/' : 'src/';
 </script>
 
 <style scoped>
diff --git a/src/config/layout/dataCenterBody.js b/src/config/layout/dataCenterBody.js
index 9a4212b..d22a97c 100644
--- a/src/config/layout/dataCenterBody.js
+++ b/src/config/layout/dataCenterBody.js
@@ -6,7 +6,7 @@ export const body = {
       {
         width: '480rem',
         height: '308rem',
-        background: { image: 'src/assets/border-1.png' },
+        background: { image: 'assets/border-1.png' },
         title: {
           text: '行业热点',
           color: '#fff',
@@ -19,7 +19,7 @@ export const body = {
       {
         width: '480rem',
         height: '618rem',
-        background: { image: 'src/assets/border-2.png' },
+        background: { image: 'assets/border-2.png' },
         title: {
           text: '时物链',
           color: '#fff',
@@ -37,7 +37,7 @@ export const body = {
       {
         width: '920rem',
         height: '626rem',
-        background: { image: 'src/assets/border-main.png' },
+        background: { image: 'assets/border-main.png' },
         title: {
           hide: true,
           text: '3D地图',
@@ -47,7 +47,7 @@ export const body = {
       {
         width: '920rem',
         height: '300rem',
-        background: { image: 'src/assets/border-3.png' },
+        background: { image: 'assets/border-3.png' },
         title: {
           text: '综合曲线',
           color: '#fff',
@@ -65,7 +65,7 @@ export const body = {
       {
         width: '480rem',
         height: '308rem',
-        background: { image: 'src/assets/border-5.png' },
+        background: { image: 'assets/border-5.png' },
         title: {
           hide: true,
           text: '专家会诊统计',
@@ -79,7 +79,7 @@ export const body = {
       {
         width: '480rem',
         height: '308rem',
-        background: { image: 'src/assets/border-1.png' },
+        background: { image: 'assets/border-1.png' },
         title: {
           text: '全省产量对比',
           color: '#fff',
@@ -92,7 +92,7 @@ export const body = {
       {
         width: '480rem',
         height: '300rem',
-        background: { image: 'src/assets/border-1.png' },
+        background: { image: 'assets/border-1.png' },
         title: {
           text: '全省报警统计',
           color: '#fff',
diff --git a/src/config/layout/dataFarmBody.js b/src/config/layout/dataFarmBody.js
index d598dfe..1bbf599 100644
--- a/src/config/layout/dataFarmBody.js
+++ b/src/config/layout/dataFarmBody.js
@@ -6,7 +6,7 @@ export const body = {
       {
         width: '480rem',
         height: '308rem',
-        background: { image: 'src/assets/border-1.png' },
+        background: { image: 'assets/border-1.png' },
         title: {
           text: '室内/外温度折线',
           color: '#fff',
@@ -19,7 +19,7 @@ export const body = {
       {
         width: '480rem',
         height: '308rem',
-        background: { image: 'src/assets/border-1.png' },
+        background: { image: 'assets/border-1.png' },
         title: {
           text: '室内/外湿度折线',
           color: '#fff',
@@ -31,8 +31,8 @@ export const body = {
       },
       {
         width: '480rem',
-        height: '308rem',
-        background: { image: 'src/assets/border-1.png' },
+        height: '300rem',
+        background: { image: 'assets/border-1.png' },
         title: {
           text: '土壤湿度',
           color: '#fff',
@@ -50,7 +50,7 @@ export const body = {
       {
         width: '920rem',
         height: '626rem',
-        background: { image: 'src/assets/border-main.png' },
+        background: { image: 'assets/border-main.png' },
         title: {
           hide: true,
           text: '3D地图',
@@ -60,7 +60,7 @@ export const body = {
       {
         width: '920rem',
         height: '300rem',
-        background: { image: 'src/assets/border-3.png' },
+        background: { image: 'assets/border-3.png' },
         title: {
           text: '综合曲线',
           color: '#fff',
@@ -77,8 +77,8 @@ export const body = {
     data: [
       {
         width: '480rem',
-        height: '618rem',
-        background: { image: 'src/assets/border-2.png' },
+        height: '626rem',
+        background: { image: 'assets/border-2.png' },
         title: {
           text: '时物链',
           color: '#fff',
@@ -91,7 +91,7 @@ export const body = {
       {
         width: '480rem',
         height: '300rem',
-        background: { image: 'src/assets/border-1.png' },
+        background: { image: 'assets/border-1.png' },
         title: {
           text: '实时报警',
           color: '#fff',
diff --git a/src/utils/map.js b/src/utils/map.js
index d75411c..e592006 100644
--- a/src/utils/map.js
+++ b/src/utils/map.js
@@ -29,6 +29,8 @@ function initValues() {
       label: {
         show: true,
         textStyle: { color: '#000' },
+        fontWeight: 'bold',
+        formatter: '{b} ({c})',
       },
     };
   });
@@ -46,6 +48,7 @@ export function initOptions() {
       inRange: {
         color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026'],
       },
+      textStyle: { color: '#fff'}
     },
     series: [
       {