VITE_APP_USE_MOCK = false | VITE_APP_USE_MOCK = false | ||||
# proxy | # 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 | # base api | ||||
VITE_APP_GLOB_BASE_API = '/api-local' | VITE_APP_GLOB_BASE_API = '/api-local' |
"integrity": "sha512-wK2sCs4feiiJeFXn3zvY0p41mdU5VUgbgs1rNsc/y5ngFUijdWd+iIN8eoyuZHKB8xN6BL4PdWmzqFmxNg6V2w==", | "integrity": "sha512-wK2sCs4feiiJeFXn3zvY0p41mdU5VUgbgs1rNsc/y5ngFUijdWd+iIN8eoyuZHKB8xN6BL4PdWmzqFmxNg6V2w==", | ||||
"dev": true | "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": { | "ee-first": { | ||||
"version": "1.1.1", | "version": "1.1.1", | ||||
"resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz", | "resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz", | ||||
"dev": true | "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==" | |||||
} | |||||
} | |||||
} | } | ||||
} | } | ||||
} | } |
"ali-oss": "^6.17.1", | "ali-oss": "^6.17.1", | ||||
"axios": "^0.26.1", | "axios": "^0.26.1", | ||||
"dayjs": "^1.11.2", | "dayjs": "^1.11.2", | ||||
"echarts": "^5.4.1", | |||||
"mockjs": "^1.1.0", | "mockjs": "^1.1.0", | ||||
"ol": "^6.15.1", | "ol": "^6.15.1", | ||||
"pinia": "^2.0.13", | "pinia": "^2.0.13", |
<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> |
import SuppliesInfo from './SuppliesInfo.vue' | import SuppliesInfo from './SuppliesInfo.vue' | ||||
import FireAlarm from './FireAlarm.vue' | import FireAlarm from './FireAlarm.vue' | ||||
import WarningDrawer from './WarningDrawer.vue' | import WarningDrawer from './WarningDrawer.vue' | ||||
import VideoPlayer from '@/components/VideoPlayer/index.vue' | import VideoPlayer from '@/components/VideoPlayer/index.vue' | ||||
export default { | export default { |
<div ref="videoRef" class="inner"> | <div ref="videoRef" class="inner"> | ||||
111111111111 | 111111111111 | ||||
</div> | </div> | ||||
<Echarts/> | |||||
</n-drawer-content> | </n-drawer-content> | ||||
</n-drawer> | </n-drawer> | ||||
</template> | </template> | ||||
import { defineComponent, ref, reactive, toRefs, computed, watch, nextTick } from 'vue' | import { defineComponent, ref, reactive, toRefs, computed, watch, nextTick } from 'vue' | ||||
import Underlay from './Underlay.vue' | import Underlay from './Underlay.vue' | ||||
import ControlPanel from './ControlPanel.vue' | import ControlPanel from './ControlPanel.vue' | ||||
import Echarts from './Echarts.vue' | |||||
export default defineComponent({ | export default defineComponent({ | ||||
name: 'WarningDrawer', | name: 'WarningDrawer', | ||||
components: { Underlay, ControlPanel }, | |||||
components: { Underlay, ControlPanel,Echarts }, | |||||
props: { | props: { | ||||
/* 可见 */ | /* 可见 */ | ||||
visible: { | visible: { |