From 29f1bd6bd0b9971318eaa5e68c228c0547f4928f Mon Sep 17 00:00:00 2001
From: unknown <2548700810@qq.com>
Date: Wed, 8 Mar 2023 11:51:24 +0800
Subject: [PATCH] echarts

---
 .env.localhost                                |   2 +-
 package-lock.json                             |  31 +++++
 package.json                                  |   1 +
 src/views/dashboard/components/Echarts.vue    | 124 ++++++++++++++++++
 src/views/dashboard/components/OneMap.vue     |   3 +-
 .../dashboard/components/WarningDrawer.vue    |   4 +-
 6 files changed, 162 insertions(+), 3 deletions(-)
 create mode 100644 src/views/dashboard/components/Echarts.vue

diff --git a/.env.localhost b/.env.localhost
index cebbe88..d8f8dfb 100644
--- a/.env.localhost
+++ b/.env.localhost
@@ -5,7 +5,7 @@ VITE_PUBLIC_PATH = '/'
 VITE_APP_USE_MOCK = false
 
 # proxy
-VITE_PROXY = [["/api-local","http://127.0.0.1:8002/api"],["/api-mock","http://127.0.0.1:8003"]]
+VITE_PROXY = [["/api-local","https://lcxj-test.t-aaron.com/api"],["/api-mock","http://127.0.0.1:8003"]]
 
 # base api
 VITE_APP_GLOB_BASE_API = '/api-local'
diff --git a/package-lock.json b/package-lock.json
index 2f8f5ed..e48f813 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3475,6 +3475,22 @@
       "integrity": "sha512-wK2sCs4feiiJeFXn3zvY0p41mdU5VUgbgs1rNsc/y5ngFUijdWd+iIN8eoyuZHKB8xN6BL4PdWmzqFmxNg6V2w==",
       "dev": true
     },
+    "echarts": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.4.1.tgz",
+      "integrity": "sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==",
+      "requires": {
+        "tslib": "2.3.0",
+        "zrender": "5.4.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
@@ -8454,6 +8470,21 @@
           "dev": true
         }
       }
+    },
+    "zrender": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.4.1.tgz",
+      "integrity": "sha512-M4Z05BHWtajY2241EmMPHglDQAJ1UyHQcYsxDNzD9XLSkPDqMq4bB28v9Pb4mvHnVQ0GxyTklZ/69xCFP6RXBA==",
+      "requires": {
+        "tslib": "2.3.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index d806ab1..02d1bd4 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "ali-oss": "^6.17.1",
     "axios": "^0.26.1",
     "dayjs": "^1.11.2",
+    "echarts": "^5.4.1",
     "mockjs": "^1.1.0",
     "ol": "^6.15.1",
     "pinia": "^2.0.13",
diff --git a/src/views/dashboard/components/Echarts.vue b/src/views/dashboard/components/Echarts.vue
new file mode 100644
index 0000000..015d818
--- /dev/null
+++ b/src/views/dashboard/components/Echarts.vue
@@ -0,0 +1,124 @@
+<template>
+    <div class="content" id="myChart">
+
+    </div>
+</template>
+<script>
+import * as echarts from 'echarts'
+import { ref, reactive, toRefs, watch, onMounted } from 'vue'
+export default {
+    name: 'Echarts',
+    setup(props) {
+
+        const initMyChart = () => {
+            const chartDom = document.getElementById('myChart');
+            const myChart = echarts.init(chartDom);
+            var option;
+            option = {
+                legend: {
+                    top: '12',
+                    data: ['速度', '高度'],
+                    icon: 'roundRect',
+                    itemHeight: 1,
+                    itemWidth: 31,
+                    textStyle: {
+                        color: '#ffffff'
+                    }
+
+                },
+                grid: {
+                    top: '60',
+                    bottom: '23',
+                    left: '50',
+                    right: '60'
+                },
+                xAxis: {
+                    type: 'category',
+                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+                    show: false
+                },
+                yAxis: [
+                    {
+                        type: 'value',
+                        name: '速度(m/s)',
+                        nameTextStyle: {
+                            color: "rgba(255,255,255,1)"
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                color: 'rgba(255,255,255,1)'
+                            }
+                        }
+                    },
+                    {
+                        type: 'value',
+                        name: '高度(s)',
+                        position: "right",
+                        nameTextStyle: {
+                            color: "rgba(255,255,255,1)"
+                        },
+                        axisLabel: {
+                            textStyle: {
+                                color: "rgba(255,255,255,1)",
+                            },
+                            formatter: "{value}",
+                        },
+                 
+
+                    }
+                ],
+                series: [
+                    {
+                        name: '速度',
+                        data: [150, 230, 224, 218, 135, 147, 260],
+                        type: 'line',
+                        symbol: 'none',
+                        smooth: true,
+                        itemStyle: {
+                            normal: {
+                                color: 'rgba(255,141,26,1)',
+                                width: 2
+                            }
+                        },
+                        yAxisIndex: 0,
+                    },
+                    {
+                        name: '高度',
+                        data: [500, 2000, 3000, 1000, 1200, 1300, 2310],
+                        type: 'line',
+                        smooth: true,
+                        symbol: 'none',
+                        yAxisIndex: 1,
+                        itemStyle: {
+                            normal: {
+                                color: 'rgba(165, 214, 63, 1)',
+                                width: 2
+                            }
+                        }
+                    }
+                ]
+            };
+
+            option && myChart.setOption(option);
+        }
+        onMounted(
+            () => {
+                initMyChart()
+            })
+    }
+}
+</script>
+<style>
+.content {
+    position: absolute;
+    bottom: 16px;
+    left: 24px;
+    background-color: rgba(0, 0, 0, 1);
+    width: 734px;
+    height: 216px;
+    font-size: 16px;
+    font-weight: 400;
+    color: rgba(255, 255, 255, 1)
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/OneMap.vue b/src/views/dashboard/components/OneMap.vue
index 508c194..e38469f 100644
--- a/src/views/dashboard/components/OneMap.vue
+++ b/src/views/dashboard/components/OneMap.vue
@@ -32,7 +32,7 @@
   <fire-alarm ref="Warning" :data="warningDetail" :airport="airportsAll" @start="handleExecute" />
 
   <WarningDrawer v-model:visible="drawerShow" />
-
+  
 </template>
 
 <script>
@@ -61,6 +61,7 @@ import ProblemInfo from './ProblemInfo.vue'
 import SuppliesInfo from './SuppliesInfo.vue'
 import FireAlarm from './FireAlarm.vue'
 import WarningDrawer from './WarningDrawer.vue'
+
 import VideoPlayer from '@/components/VideoPlayer/index.vue'
 
 export default {
diff --git a/src/views/dashboard/components/WarningDrawer.vue b/src/views/dashboard/components/WarningDrawer.vue
index e59e044..d23aaf7 100644
--- a/src/views/dashboard/components/WarningDrawer.vue
+++ b/src/views/dashboard/components/WarningDrawer.vue
@@ -55,6 +55,7 @@
       <div ref="videoRef" class="inner">
         111111111111
       </div>
+     <Echarts/>
     </n-drawer-content>
   </n-drawer>
 </template>
@@ -63,9 +64,10 @@
 import { defineComponent, ref, reactive, toRefs, computed, onMounted, watch, nextTick } from 'vue'
 import Underlay from './Underlay.vue'
 import ControlPanel from './ControlPanel.vue'
+import Echarts from './Echarts.vue'
 export default defineComponent({
   name: 'WarningDrawer',
-  components: { Underlay, ControlPanel },
+  components: { Underlay, ControlPanel,Echarts },
   props: {
     /* 可见 */
     visible: {
-- 
2.27.0