From e713b378b01d189f972cfb5b9eae749ee95a8b51 Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期六, 29 十月 2022 13:48:00 +0800
Subject: [PATCH] 1.解决两个账号登录，是否被挤掉的问题
---
src/views/bbgl/pzyc.vue | 297 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 295 insertions(+), 2 deletions(-)
diff --git a/src/views/bbgl/pzyc.vue b/src/views/bbgl/pzyc.vue
index 3c912e0..d5b8cea 100644
--- a/src/views/bbgl/pzyc.vue
+++ b/src/views/bbgl/pzyc.vue
@@ -1,8 +1,301 @@
-<template />
+<template>
+ <div>
+ <div class="body" :style="{height:mainHeight+'px'}">
+ <div style="margin: 10px auto;width: 1680px;background-color: #fff" :style="{height:mainHeight+'px'}">
+
+ <div style="margin: 20px auto;width: 1600px" :style="{height:(mainHeight-60)+'px'}">
+ <div id="Echarts" style="width: 100%;height: 100%" />
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
<script>
+import * as echarts from 'echarts'
+import { QuaneryDefectReportSearch } from '@/api/bbgl'
+
export default {
- name: 'Pzyc'
+ name: 'Pzyc',
+ data() {
+ return {
+ mainHeight: 400,
+ echartsData: []
+ }
+ },
+ created() {
+ window.addEventListener('resize', this.getHeight)
+ this.getHeight()
+ },
+ mounted() {
+ this.getQuaneryDefectReportSearch()
+ },
+ methods: {
+ // 鑾峰彇椤甸潰楂樺害
+ getHeight() {
+ this.$nextTick(() => {
+ this.mainHeight = window.innerHeight - 85
+ })
+ },
+ async getQuaneryDefectReportSearch() {
+ const res = await QuaneryDefectReportSearch()
+ if (res.code === '200') {
+ this.echartsData = res.data
+ this.getEcharts()
+ }
+ },
+ getEcharts() {
+ const option = {
+ title: {
+ text: '鍝佽川寮傚父鎺掕鎶ヨ〃',
+ left: '50%',
+ top: '5%',
+ textAlign: 'center',
+ textStyle: {
+ // color: '#fff',
+ color: '#000',
+ fontSize: '20',
+ fontWeight: 'bolder'
+ }
+ },
+ // backgroundColor: '#323a5e',
+ backgroundColor: 'transparent',
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: { // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥
+ type: 'shadow' // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow'
+ }
+ },
+ grid: {
+ left: '2%',
+ right: '4%',
+ bottom: '10%',
+ top: '15%',
+ containLabel: true
+ },
+ // legend: {
+ // data: ['1', '2', '3'],
+ // right: 10,
+ // top: 12,
+ // textStyle: {
+ // color: '#fff'
+ // },
+ // itemWidth: 12,
+ // itemHeight: 10
+ // // itemGap: 35
+ // },
+ xAxis: {
+ name: '绉嶇被',
+ nameTextStyle: {
+ color: '#000',
+ fontSize: 16,
+ lineHeight: 20
+ },
+ type: 'category',
+ data: this.echartsData.map(r => r.name),
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: true
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#000'
+ }
+ },
+ axisLabel: {
+ interval: 0,
+ rotate: 20,
+ textStyle: {
+ fontSize: 16,
+ color: '#000',
+ fontFamily: 'Microsoft YaHei'
+ }
+ }
+ },
+ yAxis: {
+ name: '鏁伴噺',
+ max: Math.ceil(Math.max(...this.echartsData.map(r => r.cont)) * 1.1), // 鍙栨暟缁勯噷闈㈡渶澶х殑鍊间箻1.1鍊嶇殑鏁存暟鐨勫ぉ鑺辨澘
+ interval: 1,
+ nameTextStyle: {
+ color: '#000',
+ fontSize: 16,
+ lineHeight: 20
+ },
+ type: 'value',
+ // max: '1200',
+ axisTick: {
+ show: true
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#000'
+ }
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ // color: 'rgba(255,255,255,0.3)'
+ color: '#000'
+ }
+ },
+ axisLabel: {
+ // interval: 0,
+ // rotate: 20,
+ textStyle: {
+ fontSize: 16,
+ color: '#000',
+ fontFamily: 'Microsoft YaHei'
+ }
+ }
+ },
+ dataZoom: [{
+ show: true,
+ height: 30,
+ xAxisIndex: [
+ 0
+ ],
+ bottom: 30,
+ start: 10,
+ end: 80,
+ handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
+ handleSize: '110%',
+ handleStyle: {
+ // color: '#d3dee5'
+ color: '#000'
+ },
+ textStyle: {
+ color: '#000'
+ },
+ // borderColor: '#90979c'
+ borderColor: '#000',
+ fillerColor: `rgba(42, 197, 137, 0.1)`
+ }, {
+ type: 'inside',
+ show: true,
+ height: 15,
+ start: 1,
+ end: 35
+ }
+ ],
+ series: [{
+ name: '鏁伴噺',
+ type: 'bar',
+ barWidth: '15%',
+ label: {
+ show: true,
+ position: 'top',
+ textStyle: {
+ color: '#000'
+ }
+ },
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ // color: '#fccb05'
+ color: `rgba(42, 197, 137, 1)`// 0% 澶勭殑棰滆壊
+ }, {
+ offset: 1,
+ color: `rgba(187, 236, 218, 1)` // 100% 澶勭殑棰滆壊
+ // color: '#f5804d'
+ }]),
+ barBorderRadius: 12
+ }
+ },
+ data: this.echartsData.map(r => r.cont)
+ }
+ // {
+ // name: '2',
+ // type: 'bar',
+ // barWidth: '15%',
+ // itemStyle: {
+ // normal: {
+ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ // offset: 0,
+ // color: '#8bd46e'
+ // }, {
+ // offset: 1,
+ // color: '#09bcb7'
+ // }]),
+ // barBorderRadius: 11,
+ // }
+ // },
+ // data: [400, 500, 500, 500, 500, 400,400, 500, 500]
+ // },
+ // {
+ // name: '3',
+ // type: 'bar',
+ // barWidth: '15%',
+ // itemStyle: {
+ // normal: {
+ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ // offset: 0,
+ // color: '#248ff7'
+ // }, {
+ // offset: 1,
+ // color: '#6851f1'
+ // }]),
+ // barBorderRadius: 11,
+ // }
+ // },
+ // data: [400, 600, 700, 700, 1000, 400, 400, 600, 700]
+ // }
+ ]
+ }
+
+ var app = {
+ currentIndex: -1
+ }
+
+ const myChart = echarts.init(document.getElementById('Echarts'))
+
+ // setInterval(function() {
+ // var dataLen = option.series[0].data.length
+ //
+ // // 鍙栨秷涔嬪墠楂樹寒鐨勫浘褰�
+ // myChart.dispatchAction({
+ // type: 'downplay',
+ // seriesIndex: 0,
+ // dataIndex: app.currentIndex
+ // })
+ // app.currentIndex = (app.currentIndex + 1) % dataLen
+ // // console.log(app.currentIndex);
+ // // 楂樹寒褰撳墠鍥惧舰
+ // myChart.dispatchAction({
+ // type: 'highlight',
+ // seriesIndex: 0,
+ // dataIndex: app.currentIndex
+ // })
+ // // 鏄剧ず tooltip
+ // myChart.dispatchAction({
+ // type: 'showTip',
+ // seriesIndex: 0,
+ // dataIndex: app.currentIndex
+ // })
+ // }, 1000)
+
+ if (option.textStyle == null) {
+ option.textStyle = {
+ fontFamily: 'Microsoft YaHei',
+ color: '#ffffff'
+ }
+ }
+
+ // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆�
+ myChart.clear()
+ myChart.setOption(option, true)
+
+ window.addEventListener('resize', function() {
+ myChart.resize()
+ })
+
+ return myChart
+ }
+ }
}
</script>
--
Gitblit v1.9.3