|
@@ -1,220 +1,421 @@
|
|
<template>
|
|
<template>
|
|
- <view>
|
|
|
|
-
|
|
|
|
- <web-view :src="url" class="map"></web-view>
|
|
|
|
- <view class="charts-box">
|
|
|
|
- <qiun-data-charts
|
|
|
|
- @getIndex='getdata'
|
|
|
|
- type="ring"
|
|
|
|
- :opts='ringoptions'
|
|
|
|
- :chartData="Ring"
|
|
|
|
- background= "#24262D"
|
|
|
|
- />
|
|
|
|
- <qiun-data-charts
|
|
|
|
- @getIndex='getdata'
|
|
|
|
- type="ring"
|
|
|
|
- :opts='ringoptions1'
|
|
|
|
- :chartData="Ring1"
|
|
|
|
- background= "#24262D"
|
|
|
|
- />
|
|
|
|
- <qiun-data-charts
|
|
|
|
- @getIndex='getdata'
|
|
|
|
- type="column"
|
|
|
|
- :chartData="chartData"
|
|
|
|
- background="none"
|
|
|
|
- />
|
|
|
|
- </view>
|
|
|
|
|
|
+ <view class="content">
|
|
|
|
+ <view class="title">库点流向分布</view>
|
|
|
|
+ <iframe id="mainIframe" ref="mainIframe" name="mainIframe" :src="url" class="map"></iframe>
|
|
|
|
+ <view class="charts-box" v-for="(item,index) in chartlist" :key='index'>
|
|
|
|
+ <div class="bottom-tip" v-if='index==0||index==3'>统计单位:吨</div>
|
|
|
|
+ <div class="bottom-tip" v-if='index!=0&&index!=3' :class='index==2?"title-margin":""'>统计单位:元</div>
|
|
|
|
+ <view v-if="index==0" class="title">采购合同完成进度</view>
|
|
|
|
+ <qiun-data-charts type="ring" :opts='item.ringoptions' :chartData="item.Ring" background="#24262D" />
|
|
|
|
+ <view v-if="index==2" class="title">销售合同完成进度</view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="content2">
|
|
|
|
+ <view class="title">在途信息统计</view>
|
|
|
|
+ <view class="row">
|
|
|
|
+ <view class="item">
|
|
|
|
+ <view class="item-top">在途车辆</view>
|
|
|
|
+ <view class="item-bottom">
|
|
|
|
+ <view style="color: #50cad4;font-size: 50rpx;">{{carCount1}} </view>台
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="item">
|
|
|
|
+ <view class="item-top">装车车辆</view>
|
|
|
|
+ <view class="item-bottom">
|
|
|
|
+ <view style="color: rgb(255, 165, 35);font-size: 50rpx;">{{carCount2}}</view>台
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="item">
|
|
|
|
+ <view class="item-top">卸货车辆</view>
|
|
|
|
+ <view class="item-bottom">
|
|
|
|
+ <view style="color: rgb(36, 131, 255);font-size: 50rpx;">{{carCount3}}</view>台
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="content3">
|
|
|
|
+ <view class="title">粮食总储量</view>
|
|
|
|
+ <qiun-data-charts type="column" :chartData="chartData" :opts='ringoptions' background="none" />
|
|
|
|
+ </view>
|
|
|
|
+ <view class="content4">
|
|
|
|
+ <view class="title">库存成本</view>
|
|
|
|
+ <view class="row">
|
|
|
|
+ <view class="item">
|
|
|
|
+ <view class="item-top">总库存量</view>
|
|
|
|
+ <view class="item-bottom">
|
|
|
|
+ <view style="color: #50cad4;font-size: 50rpx;">{{inventoryCost}}</view>吨
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="item">
|
|
|
|
+ <view class="item-top">库存价值</view>
|
|
|
|
+ <view class="item-bottom">
|
|
|
|
+ <view style="color: rgb(255, 165, 35);font-size: 50rpx;">{{inventoryValue}}</view>元
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
-
|
|
|
|
- <!-- <web-view v-if="flag" :src="url"></web-view> -->
|
|
|
|
- <!-- <iframe v-else :src="url" width="340" height="360" allowfullscreen allow="autoplay; fullscreen; microphone;"></iframe> -->
|
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
export default {
|
|
export default {
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
|
|
+ chartlist: [],
|
|
|
|
+ carCount1: '',
|
|
|
|
+ carCount2: '',
|
|
|
|
+ carCount3: '',
|
|
|
|
+ inventoryCost: '',
|
|
|
|
+ inventoryValue: '',
|
|
|
|
+ ZChart: {},
|
|
// url:"https://datav.aliyuncs.com/share/235518097ffd673bc1eb05011b9a02b6",
|
|
// url:"https://datav.aliyuncs.com/share/235518097ffd673bc1eb05011b9a02b6",
|
|
- url: 'http://192.168.1.116:8011',
|
|
|
|
|
|
+ url: '',
|
|
flag: true,
|
|
flag: true,
|
|
- chartData:{
|
|
|
|
- categories:['2016','2017','2018','2019','2020','2021'],
|
|
|
|
- series:[{
|
|
|
|
- name:'目标值',
|
|
|
|
- data:[35, 36, 31, 33, 13, 34]
|
|
|
|
- },{
|
|
|
|
- name:'完成量',
|
|
|
|
- data:[18, 27, 21, 24, 6, 28]
|
|
|
|
- }]
|
|
|
|
- },
|
|
|
|
- ringoptions:{
|
|
|
|
- "type": "ring",
|
|
|
|
- "canvasId": "",
|
|
|
|
- "canvas2d": false,
|
|
|
|
- "background": "#24262D",
|
|
|
|
- "borderColor":'#24262D',
|
|
|
|
- "animation": true,
|
|
|
|
- "timing": "easeOut",
|
|
|
|
- "duration": 1000,
|
|
|
|
- "color": [
|
|
|
|
- '#75d1f4', '#3a3b40'
|
|
|
|
- ],
|
|
|
|
- "rotate": false,
|
|
|
|
- "errorReload": true,
|
|
|
|
- "fontSize": 13,
|
|
|
|
- "fontColor": "#666666",
|
|
|
|
- "enableScroll": false,
|
|
|
|
- "touchMoveLimit": 60,
|
|
|
|
- "enableMarkLine": false,
|
|
|
|
- "dataLabel": true,
|
|
|
|
- "dataPointShape": false,
|
|
|
|
- "dataPointShapeType": "solid",
|
|
|
|
- "tapLegend": true,
|
|
|
|
- "legend": {
|
|
|
|
- "show": true,
|
|
|
|
- "position": "top",
|
|
|
|
- "padding": 5,
|
|
|
|
- "margin": 5,
|
|
|
|
- "backgroundColor": "rgba(0,0,0,0)",
|
|
|
|
- "borderColor": "rgba(0,0,0,0)",
|
|
|
|
- "borderWidth": 0,
|
|
|
|
- "fontSize": 13,
|
|
|
|
- "fontColor": "#fff",
|
|
|
|
- "lineHeight": 25,
|
|
|
|
- "hiddenColor": "#CECECE",
|
|
|
|
- "itemGap": 10
|
|
|
|
- },
|
|
|
|
- "title": {
|
|
|
|
- "name": "总量合计",
|
|
|
|
- "fontSize": 15,
|
|
|
|
- "color": "#fff",
|
|
|
|
- },
|
|
|
|
- "subtitle": {
|
|
|
|
- "name": "70%",
|
|
|
|
- "fontSize": 25,
|
|
|
|
- "color": "#fff",
|
|
|
|
- },
|
|
|
|
- "extra": {
|
|
|
|
- "ring": {
|
|
|
|
- "ringWidth": 20,
|
|
|
|
- "centerColor": "#24262D",
|
|
|
|
- "activeOpacity": 0.5,
|
|
|
|
- "activeRadius": 10,
|
|
|
|
- "offsetAngle": 0,
|
|
|
|
- "customRadius": 0,
|
|
|
|
- "labelWidth": 15,
|
|
|
|
- "border": true,
|
|
|
|
- "borderWidth": 3,
|
|
|
|
- "borderColor": "#24262D",
|
|
|
|
- "linearType": "none"
|
|
|
|
- },
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- ringoptions1:{
|
|
|
|
- "type": "ring",
|
|
|
|
- "canvasId": "",
|
|
|
|
- "canvas2d": false,
|
|
|
|
- "background": "#24262D",
|
|
|
|
- "borderColor":'#24262D',
|
|
|
|
- "animation": true,
|
|
|
|
- "timing": "easeOut",
|
|
|
|
- "duration": 1000,
|
|
|
|
- "color": [
|
|
|
|
- '#247ef4', '#3a3b40'
|
|
|
|
- ],
|
|
|
|
- "rotate": false,
|
|
|
|
- "errorReload": true,
|
|
|
|
- "fontSize": 13,
|
|
|
|
- "fontColor": "#666666",
|
|
|
|
- "enableScroll": false,
|
|
|
|
- "touchMoveLimit": 60,
|
|
|
|
- "enableMarkLine": false,
|
|
|
|
- "dataLabel": true,
|
|
|
|
- "dataPointShape": false,
|
|
|
|
- "dataPointShapeType": "solid",
|
|
|
|
- "tapLegend": true,
|
|
|
|
- "legend": {
|
|
|
|
- "show": true,
|
|
|
|
- "position": "top",
|
|
|
|
- "padding": 5,
|
|
|
|
- "margin": 5,
|
|
|
|
- "backgroundColor": "rgba(0,0,0,0)",
|
|
|
|
- "borderColor": "rgba(0,0,0,0)",
|
|
|
|
- "borderWidth": 0,
|
|
|
|
- "fontSize": 13,
|
|
|
|
- "fontColor": "#fff",
|
|
|
|
- "lineHeight": 25,
|
|
|
|
- "hiddenColor": "#CECECE",
|
|
|
|
- "itemGap": 10
|
|
|
|
- },
|
|
|
|
- "title": {
|
|
|
|
- "name": "总量合计",
|
|
|
|
- "fontSize": 15,
|
|
|
|
- "color": "#fff",
|
|
|
|
- },
|
|
|
|
- "subtitle": {
|
|
|
|
- "name": "70%",
|
|
|
|
- "fontSize": 25,
|
|
|
|
- "color": "#fff",
|
|
|
|
- },
|
|
|
|
- "extra": {
|
|
|
|
- "ring": {
|
|
|
|
- "ringWidth": 20,
|
|
|
|
- "centerColor": "#24262D",
|
|
|
|
- "activeOpacity": 0.5,
|
|
|
|
- "activeRadius": 10,
|
|
|
|
- "offsetAngle": 0,
|
|
|
|
- "customRadius": 0,
|
|
|
|
- "labelWidth": 15,
|
|
|
|
- "border": true,
|
|
|
|
- "borderWidth": 3,
|
|
|
|
- "borderColor": "#24262D",
|
|
|
|
- "linearType": "none"
|
|
|
|
- },
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- "Ring":{
|
|
|
|
- "series":[{
|
|
|
|
- "name":"已完成量",
|
|
|
|
- "data":50
|
|
|
|
- },{
|
|
|
|
- "name":"未完成量",
|
|
|
|
- "data":30
|
|
|
|
- }]
|
|
|
|
- },
|
|
|
|
- "Ring1":{
|
|
|
|
- "series":[{
|
|
|
|
- "name":"已开票",
|
|
|
|
- "data":50
|
|
|
|
- },{
|
|
|
|
- "name":"未开票",
|
|
|
|
- "data":30
|
|
|
|
- }]
|
|
|
|
- }
|
|
|
|
|
|
+ chartData: {},
|
|
|
|
+ ringoptions: {},
|
|
}
|
|
}
|
|
},
|
|
},
|
|
onLoad: function(option) {
|
|
onLoad: function(option) {
|
|
- if (option.url) {
|
|
|
|
- this.url = option.url;
|
|
|
|
- uni.setNavigationBarTitle({
|
|
|
|
- title: "库点监控"
|
|
|
|
|
|
+ uni.showLoading({
|
|
|
|
+ title: "加载中",
|
|
|
|
+ mask: true
|
|
|
|
+ })
|
|
|
|
+ this.url = "http://192.168.1.116:8011?id="+uni.getStorageSync('pcUserInfo').compId
|
|
|
|
+ this.init()
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ init() {
|
|
|
|
+ this.$api.doRequest('get', '/biInfoController/selectBiInfo?compId='+uni.getStorageSync('pcUserInfo').compId).then(res => {
|
|
|
|
+ console.log(res)
|
|
|
|
+ uni.hideLoading()
|
|
|
|
+ let _list = []
|
|
|
|
+ for (let i = 0; i < res.data.data.length; i++) {
|
|
|
|
+ let _obj = {}
|
|
|
|
+ let _color = []
|
|
|
|
+ let _title = ""
|
|
|
|
+ let _subtitle = ''
|
|
|
|
+ let _name = ''
|
|
|
|
+ let _count = ''
|
|
|
|
+ let _data = []
|
|
|
|
+ switch (i) {
|
|
|
|
+ case 0:
|
|
|
|
+ _color = ['#75d1f4', '#3a3b40'];
|
|
|
|
+ _title = '总量合计'
|
|
|
|
+ _data = [{
|
|
|
|
+ name: '已完成量',
|
|
|
|
+ data: Number(res.data.data[i].biViewInfoList[0].count)
|
|
|
|
+ }, {
|
|
|
|
+ name: '待完成量',
|
|
|
|
+ data: Number(res.data.data[i].biViewInfoList[1].count)
|
|
|
|
+ }]
|
|
|
|
+ break;
|
|
|
|
+ case 1:
|
|
|
|
+ _color = ['#247ef4', '#3a3b40'];
|
|
|
|
+ _title = '开票合计'
|
|
|
|
+ _data = [{
|
|
|
|
+ name: '已开票',
|
|
|
|
+ data: Number(res.data.data[i].biViewInfoList[0].count)
|
|
|
|
+ }, {
|
|
|
|
+ name: '待开票',
|
|
|
|
+ data: Number(res.data.data[i].biViewInfoList[1].count)
|
|
|
|
+ }]
|
|
|
|
+ break;
|
|
|
|
+ case 2:
|
|
|
|
+ _color = ['#f49f23', '#3a3b40'];
|
|
|
|
+ _title = '付款合计'
|
|
|
|
+ _data = [{
|
|
|
|
+ name: '已付款',
|
|
|
|
+ data: Number(res.data.data[i].biViewInfoList[0].count)
|
|
|
|
+ }, {
|
|
|
|
+ name: '待付款',
|
|
|
|
+ data: Number(res.data.data[i].biViewInfoList[1].count)
|
|
|
|
+ }]
|
|
|
|
+ break;
|
|
|
|
+ case 3:
|
|
|
|
+ _color = ['#75d1f4', '#3a3b40'];
|
|
|
|
+ _title = '总量合计'
|
|
|
|
+ _data = [{
|
|
|
|
+ name: '已完成量',
|
|
|
|
+ data: Number(res.data.data[i].biViewInfoList[0].count)
|
|
|
|
+ }, {
|
|
|
|
+ name: '待完成量',
|
|
|
|
+ data: Number(res.data.data[i].biViewInfoList[1].count)
|
|
|
|
+ }]
|
|
|
|
+ break;
|
|
|
|
+ case 4:
|
|
|
|
+ _color = ['#247ef4', '#3a3b40'];
|
|
|
|
+ _title = '开票合计'
|
|
|
|
+ _data = [{
|
|
|
|
+ name: '已开票',
|
|
|
|
+ data: Number(res.data.data[i].biViewInfoList[0].count)
|
|
|
|
+ }, {
|
|
|
|
+ name: '待开票',
|
|
|
|
+ data: Number(res.data.data[i].biViewInfoList[1].count)
|
|
|
|
+ }]
|
|
|
|
+ break;
|
|
|
|
+ case 5:
|
|
|
|
+ _color = ['#f49f23', '#3a3b40'];
|
|
|
|
+ _title = '付款合计'
|
|
|
|
+ _data = [{
|
|
|
|
+ name: '待付款',
|
|
|
|
+ data: Number(res.data.data[i].biViewInfoList[0].count)
|
|
|
|
+ }, {
|
|
|
|
+ name: '待完成量',
|
|
|
|
+ data: Number(res.data.data[i].biViewInfoList[1].count)
|
|
|
|
+ }]
|
|
|
|
+ break;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ if (i < 6) {
|
|
|
|
+ _subtitle = Number(Number(res.data.data[i].total).toFixed(0))
|
|
|
|
+ _obj.ringoptions = {
|
|
|
|
+ "type": "ring",
|
|
|
|
+ "animation": true,
|
|
|
|
+ "timing": "easeOut",
|
|
|
|
+ "duration": 1000,
|
|
|
|
+ "color": _color,
|
|
|
|
+ "fontSize": 13,
|
|
|
|
+ "fontColor": "#666666",
|
|
|
|
+ "legend": {
|
|
|
|
+ "show": true,
|
|
|
|
+ "position": "top",
|
|
|
|
+ "padding": 5,
|
|
|
|
+ "margin": 5,
|
|
|
|
+ "backgroundColor": "rgba(0,0,0,0)",
|
|
|
|
+ "borderColor": "rgba(0,0,0,0)",
|
|
|
|
+ "fontSize": 13,
|
|
|
|
+ "fontColor": "#CECECE",
|
|
|
|
+ "hiddenColor": "#CECECE",
|
|
|
|
+ },
|
|
|
|
+ "title": {
|
|
|
|
+ "name": _title,
|
|
|
|
+ "fontSize": 15,
|
|
|
|
+ "color": "#fff",
|
|
|
|
+ },
|
|
|
|
+ "subtitle": {
|
|
|
|
+ "name": _subtitle,
|
|
|
|
+ "fontSize": 20,
|
|
|
|
+ "color": "#fff",
|
|
|
|
+ },
|
|
|
|
+ "extra": {
|
|
|
|
+ "ring": {
|
|
|
|
+ "ringWidth": 15,
|
|
|
|
+ "centerColor": "#24262D",
|
|
|
|
+ "activeOpacity": 0.5,
|
|
|
|
+ "activeRadius": 10,
|
|
|
|
+ "borderColor": "#24262D",
|
|
|
|
+ "linearType": "none"
|
|
|
|
+ },
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ _obj.Ring = {
|
|
|
|
+ "series": _data
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ _list.push(_obj)
|
|
|
|
+ } else if (i == 6) {
|
|
|
|
+ this.carCount1 = res.data.data[i].biViewInfoList[0].count
|
|
|
|
+ this.carCount2 = res.data.data[i].biViewInfoList[1].count
|
|
|
|
+ this.carCount3 = res.data.data[i].biViewInfoList[2].count
|
|
|
|
+ } else if (i == 7) {
|
|
|
|
+ this.inventoryCost =Number(res.data.data[i].biViewInfoList[0].count)
|
|
|
|
+ this.inventoryValue =Number(res.data.data[i].biViewInfoList[1].count)
|
|
|
|
+ } else if (i == 8) {
|
|
|
|
+
|
|
|
|
+ let _x = []
|
|
|
|
+ let _y = []
|
|
|
|
+ for (let k = 0; k < res.data.data[i].biViewInfoList.length; k++) {
|
|
|
|
+ _x.push(res.data.data[i].biViewInfoList[k].name)
|
|
|
|
+ _y.push( Number(res.data.data[i].biViewInfoList[k].count))
|
|
|
|
+ }
|
|
|
|
+ this.chartData = {
|
|
|
|
+ categories: _x,
|
|
|
|
+ series: [{
|
|
|
|
+ "name": '储量',
|
|
|
|
+ "data": _y
|
|
|
|
+ }]
|
|
|
|
+ }
|
|
|
|
+ this.ringoptions = {
|
|
|
|
+ "type": "column",
|
|
|
|
+ "canvasId": "",
|
|
|
|
+ "canvas2d": false,
|
|
|
|
+ "background": "none",
|
|
|
|
+ "animation": true,
|
|
|
|
+ "timing": "easeOut",
|
|
|
|
+ "duration": 1000,
|
|
|
|
+ "padding": [
|
|
|
|
+ 15,
|
|
|
|
+ 15,
|
|
|
|
+ 20,
|
|
|
|
+ 5
|
|
|
|
+ ],
|
|
|
|
+ "rotate": false,
|
|
|
|
+ "errorReload": true,
|
|
|
|
+ "fontSize": 13,
|
|
|
|
+ "fontColor": "#666666",
|
|
|
|
+ "enableScroll": false,
|
|
|
|
+ "touchMoveLimit": 60,
|
|
|
|
+ "enableMarkLine": false,
|
|
|
|
+ "dataLabel": true,
|
|
|
|
+ "dataPointShape": true,
|
|
|
|
+ "dataPointShapeType": "solid",
|
|
|
|
+ "legend": {
|
|
|
|
+ "show": false,
|
|
|
|
+ },
|
|
|
|
+ "xAxis": {
|
|
|
|
+ "disabled": false,
|
|
|
|
+ "axisLine": true,
|
|
|
|
+ "axisLineColor": "#CCCCCC",
|
|
|
|
+ "calibration": false,
|
|
|
|
+ "fontColor": "#666666",
|
|
|
|
+ "fontSize": 13,
|
|
|
|
+ "itemCount": 5,
|
|
|
|
+ "boundaryGap": "center",
|
|
|
|
+ "disableGrid": true,
|
|
|
|
+ "gridColor": "#CCCCCC",
|
|
|
|
+ "gridType": "solid",
|
|
|
|
+ "dashLength": 4,
|
|
|
|
+ "gridEval": 1,
|
|
|
|
+ "scrollShow": false,
|
|
|
|
+ "scrollAlign": "left",
|
|
|
|
+ "scrollColor": "#A6A6A6",
|
|
|
|
+ "scrollBackgroundColor": "#EFEBEF",
|
|
|
|
+ "rotateLabel": true,
|
|
|
|
+ },
|
|
|
|
+ "yAxis": {
|
|
|
|
+ "disabled": false,
|
|
|
|
+ "disableGrid": false,
|
|
|
|
+ "splitNumber": 5,
|
|
|
|
+ "gridType": "solid",
|
|
|
|
+ "dashLength": 8,
|
|
|
|
+ "gridColor": "#CCCCCC",
|
|
|
|
+ "padding": 10,
|
|
|
|
+ "showTitle": false,
|
|
|
|
+ "data": [{
|
|
|
|
+ "type": "value",
|
|
|
|
+ "position": "left",
|
|
|
|
+ "disabled": false,
|
|
|
|
+ "axisLine": false,
|
|
|
|
+ "axisLineColor": "#CCCCCC",
|
|
|
|
+ "calibration": false,
|
|
|
|
+ "fontColor": "#666666",
|
|
|
|
+ "fontSize": 13,
|
|
|
|
+ "textAlign": "right",
|
|
|
|
+ "titleFontSize": 13,
|
|
|
|
+ "titleFontColor": "#666666",
|
|
|
|
+ }]
|
|
|
|
+ },
|
|
|
|
+ "extra": {
|
|
|
|
+ "column": {
|
|
|
|
+ "type": "group",
|
|
|
|
+ "width": 30,
|
|
|
|
+ "seriesGap": 2,
|
|
|
|
+ "categoryGap": 3,
|
|
|
|
+ "barBorderCircle": false,
|
|
|
|
+ "linearType": "none",
|
|
|
|
+ "linearOpacity": 1,
|
|
|
|
+ "colorStop": 0,
|
|
|
|
+ "meterBorder": 1,
|
|
|
|
+ "meterFillColor": "#FFFFFF",
|
|
|
|
+ "activeBgColor": "#000000",
|
|
|
|
+ "activeBgOpacity": 0.08,
|
|
|
|
+ "meterBorde": 1
|
|
|
|
+ },
|
|
|
|
+ "tooltip": {
|
|
|
|
+ "showBox": true,
|
|
|
|
+ "showArrow": true,
|
|
|
|
+ "showCategory": false,
|
|
|
|
+ "borderWidth": 0,
|
|
|
|
+ "borderRadius": 0,
|
|
|
|
+ "borderColor": "#000000",
|
|
|
|
+ "borderOpacity": 0.7,
|
|
|
|
+ "bgColor": "#000000",
|
|
|
|
+ "bgOpacity": 0.7,
|
|
|
|
+ "gridType": "solid",
|
|
|
|
+ "dashLength": 4,
|
|
|
|
+ "gridColor": "#CCCCCC",
|
|
|
|
+ "fontColor": "#FFFFFF",
|
|
|
|
+ "splitLine": true,
|
|
|
|
+ "horizentalLine": false,
|
|
|
|
+ "xAxisLabel": false,
|
|
|
|
+ "yAxisLabel": false,
|
|
|
|
+ "labelBgColor": "#FFFFFF",
|
|
|
|
+ "labelBgOpacity": 0.7,
|
|
|
|
+ "labelFontColor": "#666666"
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ } else if (i == 9) {
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ this.chartlist = _list
|
|
|
|
+
|
|
})
|
|
})
|
|
- this.flag = false
|
|
|
|
|
|
+ },
|
|
|
|
+ getdata(e) {
|
|
|
|
+ console.log(e)
|
|
}
|
|
}
|
|
- },
|
|
|
|
- methods: {}
|
|
|
|
|
|
+ }
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
-<style>
|
|
|
|
- /* .map {
|
|
|
|
- position:relative;
|
|
|
|
- height: 400px;
|
|
|
|
- } */
|
|
|
|
- .charts-box{
|
|
|
|
- position:relative;
|
|
|
|
- top:70vh;
|
|
|
|
|
|
+<style scoped lang="scss">
|
|
|
|
+ .map {
|
|
|
|
+ top: 90rpx;
|
|
|
|
+ height: 60vh;
|
|
|
|
+ width: 100%;
|
|
|
|
+ border: 0;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .title {
|
|
|
|
+ background: black;
|
|
|
|
+ color: white;
|
|
|
|
+ text-align: center;
|
|
|
|
+ font-size: 1.25rem;
|
|
|
|
+ padding: 0.625rem;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .content {
|
|
|
|
+ background: black;
|
|
|
|
+ padding-bottom: 100rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .charts-box {
|
|
|
|
+ // background: black;
|
|
|
|
+ position: relative;
|
|
|
|
+ // top: 70vh;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .content2 .row,
|
|
|
|
+ .content4 .row {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-around;
|
|
|
|
+ background: #24262d;
|
|
|
|
+ padding: 40rpx 20rpx;
|
|
|
|
+
|
|
|
|
+ .item-top,
|
|
|
|
+ .item-bottom {
|
|
|
|
+ color: #d5d5d5;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .item-bottom {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .bottom-tip {
|
|
|
|
+ position: absolute;
|
|
|
|
+ z-index: 11;
|
|
|
|
+ color: #8c8c8d;
|
|
|
|
+ right: 10px;
|
|
|
|
+ bottom: 10px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .title-margin {
|
|
|
|
+ bottom: 120rpx;
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|