feat: 1.细节调整；2.视频源切换为公开源；3.监听关闭视频通话的事件

.eslintignore

@@ -7,3 +7,4 @@ package.json
 postcss.config.js
 .eslintrc.js
 vite.config.js
+*/Middle.vue

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",

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;

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>
 

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>

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>

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>

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);

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,
   );

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>
 

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>

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>

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>

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',

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',

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: [
       {