|
|
@@ -33,162 +33,162 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { huiJiaApi } from "@/api"
|
|
|
+ import { huiJiaApi } from "@/api"
|
|
|
|
|
|
-export default {
|
|
|
- name: 'SmartDoor',
|
|
|
- data () {
|
|
|
- return {
|
|
|
- state: {
|
|
|
- count: '921',
|
|
|
- accessControlProjectCount: '92',
|
|
|
- openCount: '900000',
|
|
|
- chartInstance: null,
|
|
|
- // 模拟的通行流量数据
|
|
|
- list: [
|
|
|
- { statData: '01:00', count: 150 },
|
|
|
- { statData: '04:00', count: 250 },
|
|
|
- { statData: '07:00', count: 420 },
|
|
|
- { statData: '10:00', count: 380 },
|
|
|
- { statData: '13:00', count: 320 },
|
|
|
- { statData: '16:00', count: 230 },
|
|
|
- { statData: '19:00', count: 220 },
|
|
|
- { statData: '22:00', count: 300 }
|
|
|
- ]
|
|
|
+ export default {
|
|
|
+ name: "SmartDoor",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ state: {
|
|
|
+ count: "921",
|
|
|
+ accessControlProjectCount: "92",
|
|
|
+ openCount: "900000",
|
|
|
+ chartInstance: null,
|
|
|
+ // 模拟的通行流量数据
|
|
|
+ list: [
|
|
|
+ { statData: "01:00", count: 150 },
|
|
|
+ { statData: "04:00", count: 250 },
|
|
|
+ { statData: "07:00", count: 420 },
|
|
|
+ { statData: "10:00", count: 380 },
|
|
|
+ { statData: "13:00", count: 320 },
|
|
|
+ { statData: "16:00", count: 230 },
|
|
|
+ { statData: "19:00", count: 220 },
|
|
|
+ { statData: "22:00", count: 300 },
|
|
|
+ ],
|
|
|
+ },
|
|
|
}
|
|
|
- }
|
|
|
- },
|
|
|
- mounted () {
|
|
|
- this.initChart()
|
|
|
- window.addEventListener('resize', this.handleResize)
|
|
|
- this.getData()
|
|
|
- },
|
|
|
- beforeDestroy () {
|
|
|
- window.removeEventListener('resize', this.handleResize)
|
|
|
- if (this.chartInstance) {
|
|
|
- this.chartInstance.dispose()
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- getData () {
|
|
|
- huiJiaApi.getFaceDeviceData().then((res) => {
|
|
|
- if (res && res.data) {
|
|
|
- this.state = res.data.data
|
|
|
- }
|
|
|
- console.log("业务数据----", res.data.data)
|
|
|
- })
|
|
|
},
|
|
|
- initChart () {
|
|
|
- const echarts = require('echarts')
|
|
|
- this.chartInstance = echarts.init(this.$refs.trafficChart)
|
|
|
-
|
|
|
- const option = {
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
|
|
- borderColor: 'rgba(64, 158, 255, 0.3)',
|
|
|
- textStyle: {
|
|
|
- color: '#fff'
|
|
|
- },
|
|
|
- formatter: (params) => {
|
|
|
- return `${params[0].name}<br/>${params[0].seriesName}: ${params[0].value}`
|
|
|
+ mounted() {
|
|
|
+ this.getData()
|
|
|
+ this.initChart()
|
|
|
+ window.addEventListener("resize", this.handleResize)
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ window.removeEventListener("resize", this.handleResize)
|
|
|
+ if (this.chartInstance) {
|
|
|
+ this.chartInstance.dispose()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getData() {
|
|
|
+ huiJiaApi.getFaceDeviceData().then((res) => {
|
|
|
+ if (res && res.data) {
|
|
|
+ this.state = res.data.data
|
|
|
+ this.initChart()
|
|
|
}
|
|
|
- },
|
|
|
- legend: {
|
|
|
- data: ['开门次数'],
|
|
|
- textStyle: {
|
|
|
- color: '#fff'
|
|
|
- },
|
|
|
- top: '0%',
|
|
|
- right: '0%'
|
|
|
- },
|
|
|
- grid: {
|
|
|
- left: '3%',
|
|
|
- right: '4%',
|
|
|
- bottom: '10%',
|
|
|
- top: '20%',
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: this.state.list.map((item) => item.statData),
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: 'rgba(160, 179, 214, 0.6)'
|
|
|
- }
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- color: 'rgba(160, 179, 214, 0.7)',
|
|
|
- fontSize: 14
|
|
|
+ })
|
|
|
+ },
|
|
|
+ initChart() {
|
|
|
+ const echarts = require("echarts")
|
|
|
+ this.chartInstance = echarts.init(this.$refs.trafficChart)
|
|
|
+
|
|
|
+ const option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ backgroundColor: "rgba(0, 0, 0, 0.8)",
|
|
|
+ borderColor: "rgba(64, 158, 255, 0.3)",
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ formatter: (params) => {
|
|
|
+ return `${params[0].name}<br/>${params[0].seriesName}: ${params[0].value}`
|
|
|
+ },
|
|
|
},
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
+ legend: {
|
|
|
+ data: ["开门次数"],
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ top: "0%",
|
|
|
+ right: "0%",
|
|
|
},
|
|
|
- splitLine: {
|
|
|
- show: true,
|
|
|
- // 将坐标轴内的线设置为虚线
|
|
|
- lineStyle: {
|
|
|
- color: 'rgba(160, 179, 214, 0.3)',
|
|
|
- type: 'dashed'
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'value',
|
|
|
- axisLine: {
|
|
|
- show: false
|
|
|
+ grid: {
|
|
|
+ left: "3%",
|
|
|
+ right: "4%",
|
|
|
+ bottom: "10%",
|
|
|
+ top: "20%",
|
|
|
+ containLabel: true,
|
|
|
},
|
|
|
- axisLabel: {
|
|
|
- color: 'rgba(160, 179, 214, 0.7)',
|
|
|
- fontSize: 12
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ data: this.state.list.map((item) => item.staData),
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(160, 179, 214, 0.6)",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: "rgba(160, 179, 214, 0.7)",
|
|
|
+ fontSize: 14,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ // 将坐标轴内的线设置为虚线
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(160, 179, 214, 0.3)",
|
|
|
+ type: "dashed",
|
|
|
+ },
|
|
|
+ },
|
|
|
},
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
+ yAxis: {
|
|
|
+ type: "value",
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: "rgba(160, 179, 214, 0.7)",
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ // 将坐标轴内的线设置为虚线
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(160, 179, 214, 0.3)",
|
|
|
+ type: "dashed",
|
|
|
+ },
|
|
|
+ },
|
|
|
},
|
|
|
- splitLine: {
|
|
|
- // 将坐标轴内的线设置为虚线
|
|
|
- lineStyle: {
|
|
|
- color: 'rgba(160, 179, 214, 0.3)',
|
|
|
- type: 'dashed'
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: '开门次数',
|
|
|
- type: 'bar',
|
|
|
- data: this.state.list.map((item) => item.count),
|
|
|
- barWidth: '30%',
|
|
|
- // 添加标签配置，设置颜色为白色
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- position: 'top',
|
|
|
- color: '#fff',
|
|
|
- fontSize: 14
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "开门次数",
|
|
|
+ type: "bar",
|
|
|
+ data: this.state.list.map((item) => item.count),
|
|
|
+ barWidth: "30%",
|
|
|
+ // 添加标签配置，设置颜色为白色
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: "top",
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: 14,
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
|
+ { offset: 0, color: "#F6688B" },
|
|
|
+ { offset: 1, color: "#F89877" },
|
|
|
+ ]),
|
|
|
+ },
|
|
|
},
|
|
|
- itemStyle: {
|
|
|
- color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
|
- { offset: 0, color: '#F6688B' },
|
|
|
- { offset: 1, color: '#F89877' }
|
|
|
- ])
|
|
|
- }
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
+ ],
|
|
|
+ }
|
|
|
|
|
|
- this.chartInstance.setOption(option)
|
|
|
- },
|
|
|
- handleResize () {
|
|
|
- if (this.chartInstance) {
|
|
|
- this.chartInstance.resize()
|
|
|
- }
|
|
|
+ this.chartInstance.setOption(option)
|
|
|
+ },
|
|
|
+ handleResize() {
|
|
|
+ if (this.chartInstance) {
|
|
|
+ this.chartInstance.resize()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 模拟数据更新方法
|
|
|
+ updateData() {
|
|
|
+ // 这里可以根据实际需求从API获取数据
|
|
|
+ },
|
|
|
},
|
|
|
- // 模拟数据更新方法
|
|
|
- updateData () {
|
|
|
- // 这里可以根据实际需求从API获取数据
|
|
|
- }
|
|
|
}
|
|
|
-}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
