|
@@ -1,1162 +0,0 @@
|
|
|
-<template>
|
|
|
|
|
- <div class="app-container">
|
|
|
|
|
- <el-row>
|
|
|
|
|
- <el-col :span="12">
|
|
|
|
|
- <div class="generalTitle"> 现代牧业设备管理系统 </div>
|
|
|
|
|
- </el-col>
|
|
|
|
|
- <el-col :span="12">
|
|
|
|
|
- <div class="date"> {{ row1.date }} </div>
|
|
|
|
|
- </el-col>
|
|
|
|
|
- </el-row>
|
|
|
|
|
-
|
|
|
|
|
- <el-row :gutter="5" class="row2">
|
|
|
|
|
- <el-col :span="10">
|
|
|
|
|
- <dv-border-box-8 :dur="-1" style="height:500px;">
|
|
|
|
|
- <!-- <div class="Title">费用统计</div> -->
|
|
|
|
|
- <div id="row2Chart1" style="width: 100%;height:450px;" />
|
|
|
|
|
- <el-row :gutter="5" class="groupNews">
|
|
|
|
|
- <el-col :span="8">
|
|
|
|
|
- <dv-border-box-8 :dur="-1" class="news">
|
|
|
|
|
- <b>设备指标预算</b><br>
|
|
|
|
|
- <span>{{ row2.chart1.list.monthBudgets }}万元</span>
|
|
|
|
|
- </dv-border-box-8>
|
|
|
|
|
- </el-col>
|
|
|
|
|
- <el-col :span="8">
|
|
|
|
|
- <dv-border-box-8 :dur="-1" class="news">
|
|
|
|
|
- <b>设备指标实际</b><br>
|
|
|
|
|
- <span>{{ row2.chart1.list.sumPrice }}万元</span>
|
|
|
|
|
- </dv-border-box-8>
|
|
|
|
|
- </el-col>
|
|
|
|
|
- <el-col :span="8">
|
|
|
|
|
- <dv-border-box-8 :dur="-1" class="news">
|
|
|
|
|
- <b>迄今达成率</b><br>
|
|
|
|
|
- <span>{{ row2.chart1.list.donerate }}</span>
|
|
|
|
|
- </dv-border-box-8>
|
|
|
|
|
- </el-col>
|
|
|
|
|
- </el-row>
|
|
|
|
|
- <div v-if="row2.chart1.isPastureList" class="pastureNews">
|
|
|
|
|
- <dv-border-box-8 :dur="-1" class="newsTitle"><b>{{ row2.chart1.pasture.pastureName }}</b></dv-border-box-8>
|
|
|
|
|
- <dv-border-box-8 :dur="-1" class="news2">
|
|
|
|
|
- <div>
|
|
|
|
|
- <b>设备指标预算:</b><span>{{ row2.chart1.pasture.list.monthBudgets }}万元</span><br>
|
|
|
|
|
- <b>设备指标实际:</b><span>{{ row2.chart1.pasture.list.sumPrice }}万元</span><br>
|
|
|
|
|
- <b>迄今达成率:</b><span>{{ row2.chart1.pasture.list.donerate }}</span>
|
|
|
|
|
- </div>
|
|
|
|
|
- </dv-border-box-8>
|
|
|
|
|
- </div>
|
|
|
|
|
- </dv-border-box-8>
|
|
|
|
|
- </el-col>
|
|
|
|
|
- <el-col :span="14">
|
|
|
|
|
- <el-row>
|
|
|
|
|
- <el-col :span="12">
|
|
|
|
|
- <dv-border-box-8 :dur="-1" style="height:500px;">
|
|
|
|
|
- <div class="Title">设备状态统计</div>
|
|
|
|
|
- <div id="row2Chart2" style="width: 100%;height:480px;" />
|
|
|
|
|
- <div class="Indexbutton">
|
|
|
|
|
- <a @click="form_seeDetails('row2Chart2')">查看详情</a>
|
|
|
|
|
- </div>
|
|
|
|
|
- </dv-border-box-8>
|
|
|
|
|
- </el-col>
|
|
|
|
|
- <el-col :span="12">
|
|
|
|
|
- <dv-border-box-8 :dur="-1" style="height:500px;">
|
|
|
|
|
- <div class="Title">保养完成率</div>
|
|
|
|
|
- <div class="IndexTable">
|
|
|
|
|
- <el-table
|
|
|
|
|
- :key="row2.chart3.tableKey"
|
|
|
|
|
- v-loading="row2.chart3.listLoading"
|
|
|
|
|
- element-loading-text="给我一点时间"
|
|
|
|
|
- :data="row2.chart3.list"
|
|
|
|
|
- fit
|
|
|
|
|
- style="width: 100%;"
|
|
|
|
|
- :cell-style="cellStyle"
|
|
|
|
|
- :row-style="rowStyle"
|
|
|
|
|
- class="table-fixed Indextable"
|
|
|
|
|
- :height="480"
|
|
|
|
|
- :header-cell-style="{background:'#003366',color:'#fff',fontSize:'8px',lineHeight:'12px'}"
|
|
|
|
|
- >
|
|
|
|
|
- <el-table-column v-if="row2.chart3.isPasture" label="牧场" min-width="80px" align="center" prop="name" />
|
|
|
|
|
- <el-table-column v-if="row2.chart3.isType" label="设备类型" min-width="80px" align="center" prop="typeName" />
|
|
|
|
|
- <el-table-column label="保养计划" min-width="70px" align="center" prop="totaluk" />
|
|
|
|
|
- <el-table-column label="完成数" min-width="60px" align="center" prop="doneuk" />
|
|
|
|
|
- <el-table-column label="保养完成率" min-width="80px" align="center" prop="donerate" />
|
|
|
|
|
- </el-table>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="Indexbutton">
|
|
|
|
|
- <a @click="form_seeDetails('row2Chart3')">查看详情</a>
|
|
|
|
|
- </div>
|
|
|
|
|
- </dv-border-box-8>
|
|
|
|
|
- </el-col>
|
|
|
|
|
- <el-col :span="24" style="display:none">
|
|
|
|
|
- <dv-border-box-8 :dur="-1" style="height:250px;">
|
|
|
|
|
- <div class="Title">资产运转率</div>
|
|
|
|
|
- <div id="row2Chart4" style="width: 100%;height:190px;" />
|
|
|
|
|
- <div class="Indexbutton">
|
|
|
|
|
- <a @click="form_seeDetails('row2Chart4')">查看详情</a>
|
|
|
|
|
- </div>
|
|
|
|
|
- </dv-border-box-8>
|
|
|
|
|
- </el-col>
|
|
|
|
|
- </el-row>
|
|
|
|
|
- </el-col>
|
|
|
|
|
- </el-row>
|
|
|
|
|
-
|
|
|
|
|
- <el-row :gutter="5" style="height:300px;color: #fff;">
|
|
|
|
|
- <el-col :span="24">
|
|
|
|
|
- <dv-border-box-8 :dur="-1" style="height:300px;">
|
|
|
|
|
- <div class="Title">费用统计</div>
|
|
|
|
|
- <div class="costStatistics">
|
|
|
|
|
- <div class="content">
|
|
|
|
|
- <dv-border-box-8 :dur="-1" style="height:260px;">
|
|
|
|
|
- <div class="title">
|
|
|
|
|
- <svg-icon icon-class="维修成本分析" />
|
|
|
|
|
- 维修费
|
|
|
|
|
- </div>
|
|
|
|
|
- <el-row :gutter="5" style="height:260px;color: #fff;">
|
|
|
|
|
- <el-col :span="8" style="padding:0 0 0 10px;">
|
|
|
|
|
- <div class="contentLeft">
|
|
|
|
|
- <div>
|
|
|
|
|
- <b>预算</b><span>{{ row3.chart1.list.data1 }}元</span>
|
|
|
|
|
- <b>实际</b><span>{{ row3.chart1.list.data2 }}元</span>
|
|
|
|
|
- <b>单头牛实际</b><span>{{ row3.chart1.list.data3 }}元</span>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="Indexbutton">
|
|
|
|
|
- <a @click="form_seeDetails('row3Chart1')">查看详情</a>
|
|
|
|
|
- </div>
|
|
|
|
|
- </el-col>
|
|
|
|
|
- <el-col :span="16" style="padding:0 10px 0 0 ;">
|
|
|
|
|
- <dv-border-box-8 :dur="-1" style="height:200px;">
|
|
|
|
|
- <div id="row3Chart1" style="width: 100%;height:200px;" />
|
|
|
|
|
- </dv-border-box-8>
|
|
|
|
|
- </el-col>
|
|
|
|
|
- </el-row>
|
|
|
|
|
- </dv-border-box-8>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="content">
|
|
|
|
|
- <dv-border-box-8 :dur="-1" style="height:260px;">
|
|
|
|
|
- <div class="title">
|
|
|
|
|
- <svg-icon icon-class="水量分析" />
|
|
|
|
|
- 水费
|
|
|
|
|
- </div>
|
|
|
|
|
- <el-row :gutter="5" style="height:260px;color: #fff;">
|
|
|
|
|
- <el-col :span="8" style="padding:0 0 0 10px;">
|
|
|
|
|
- <div class="contentLeft">
|
|
|
|
|
- <div>
|
|
|
|
|
- <b>预算</b><span>{{ row3.chart2.list.data1 }}元</span>
|
|
|
|
|
- <b>实际</b><span>{{ row3.chart2.list.data2 }}元</span>
|
|
|
|
|
- <b>单头牛实际</b><span>{{ row3.chart2.list.data3 }}元</span>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="Indexbutton">
|
|
|
|
|
- <a @click="form_seeDetails('row3Chart2')">查看详情</a>
|
|
|
|
|
- </div>
|
|
|
|
|
- </el-col>
|
|
|
|
|
- <el-col :span="16" style="padding:0 10px 0 0 ;">
|
|
|
|
|
- <dv-border-box-8 :dur="-1" style="height:200px;">
|
|
|
|
|
- <div id="row3Chart2" style="width: 100%;height:200px;" />
|
|
|
|
|
- </dv-border-box-8>
|
|
|
|
|
- </el-col>
|
|
|
|
|
- </el-row>
|
|
|
|
|
- </dv-border-box-8>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="content">
|
|
|
|
|
- <dv-border-box-8 :dur="-1" style="height:260px;">
|
|
|
|
|
- <div class="title">
|
|
|
|
|
- <svg-icon icon-class="电量分析" />
|
|
|
|
|
- 电费
|
|
|
|
|
- </div>
|
|
|
|
|
- <el-row :gutter="5" style="height:260px;color: #fff;">
|
|
|
|
|
- <el-col :span="8" style="padding:0 0 0 10px;">
|
|
|
|
|
- <div class="contentLeft">
|
|
|
|
|
- <div>
|
|
|
|
|
- <b>预算</b><span>{{ row3.chart3.list.data1 }}元</span>
|
|
|
|
|
- <b>实际</b><span>{{ row3.chart3.list.data2 }}元</span>
|
|
|
|
|
- <b>单头牛实际</b><span>{{ row3.chart3.list.data3 }}元</span>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="Indexbutton">
|
|
|
|
|
- <a @click="form_seeDetails('row3Chart3')">查看详情</a>
|
|
|
|
|
- </div>
|
|
|
|
|
- </el-col>
|
|
|
|
|
- <el-col :span="16" style="padding:0 10px 0 0 ;">
|
|
|
|
|
- <dv-border-box-8 :dur="-1" style="height:200px;">
|
|
|
|
|
- <div id="row3Chart3" style="width: 100%;height:200px;" />
|
|
|
|
|
- </dv-border-box-8>
|
|
|
|
|
- </el-col>
|
|
|
|
|
- </el-row>
|
|
|
|
|
- </dv-border-box-8>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="content">
|
|
|
|
|
- <dv-border-box-8 :dur="-1" style="height:260px;">
|
|
|
|
|
- <div class="title">
|
|
|
|
|
- <svg-icon icon-class="燃动分析" />
|
|
|
|
|
- 燃动费
|
|
|
|
|
- </div>
|
|
|
|
|
- <el-row :gutter="5" style="height:260px;color: #fff;">
|
|
|
|
|
- <el-col :span="8" style="padding:0 0 0 10px;">
|
|
|
|
|
- <div class="contentLeft">
|
|
|
|
|
- <div>
|
|
|
|
|
- <b>预算</b><span>{{ row3.chart4.list.data1 }}元</span>
|
|
|
|
|
- <b>实际</b><span>{{ row3.chart4.list.data2 }}元</span>
|
|
|
|
|
- <b>单头牛实际</b><span>{{ row3.chart4.list.data3 }}元</span>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="Indexbutton">
|
|
|
|
|
- <a @click="form_seeDetails('row3Chart4')">查看详情</a>
|
|
|
|
|
- </div>
|
|
|
|
|
- </el-col>
|
|
|
|
|
- <el-col :span="16" style="padding:0 10px 0 0 ;">
|
|
|
|
|
- <dv-border-box-8 :dur="-1" style="height:200px;">
|
|
|
|
|
- <div id="row3Chart4" style="width: 100%;height:200px;" />
|
|
|
|
|
- </dv-border-box-8>
|
|
|
|
|
- </el-col>
|
|
|
|
|
- </el-row>
|
|
|
|
|
- </dv-border-box-8>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </dv-border-box-8>
|
|
|
|
|
- </el-col>
|
|
|
|
|
- </el-row>
|
|
|
|
|
- </div>
|
|
|
|
|
-</template>
|
|
|
|
|
-
|
|
|
|
|
-<script>
|
|
|
|
|
-import { GetReportform, GetDataByName } from '@/api/common'
|
|
|
|
|
-import Cookies from 'js-cookie'
|
|
|
|
|
-import { parseTime } from '@/utils/index.js'
|
|
|
|
|
-import echarts from 'echarts'
|
|
|
|
|
-import 'echarts/map/js/china'
|
|
|
|
|
-import $ from 'jquery'
|
|
|
|
|
-require('echarts/theme/macarons')
|
|
|
|
|
-export default {
|
|
|
|
|
- name: 'DashboardEditor',
|
|
|
|
|
- data() {
|
|
|
|
|
- return {
|
|
|
|
|
- row1: {
|
|
|
|
|
- date: parseTime(new Date(), '{y}-{m}-{d}')
|
|
|
|
|
- },
|
|
|
|
|
-
|
|
|
|
|
- row2: {
|
|
|
|
|
- chart1: {
|
|
|
|
|
- // 地图
|
|
|
|
|
- getdataListParm: {
|
|
|
|
|
- name: 'homepagePastureInfor',
|
|
|
|
|
- parammaps: {}
|
|
|
|
|
- },
|
|
|
|
|
- data: [],
|
|
|
|
|
- Chart: null,
|
|
|
|
|
- // 预算、实际、达成率
|
|
|
|
|
- get_table_dataParm: {
|
|
|
|
|
- name: 'homepageRate',
|
|
|
|
|
- parammaps: {
|
|
|
|
|
- pastureName: '现代牧业'
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- list: {},
|
|
|
|
|
- isPastureList: false,
|
|
|
|
|
- pasture: {
|
|
|
|
|
- getdataListParm: {
|
|
|
|
|
- name: 'homepageRate',
|
|
|
|
|
- page: 1,
|
|
|
|
|
- offset: 1,
|
|
|
|
|
- pagecount: 10,
|
|
|
|
|
- returntype: 'Map',
|
|
|
|
|
- parammaps: {
|
|
|
|
|
- pastureName: ''
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- pastureName: '',
|
|
|
|
|
- listLoading: true,
|
|
|
|
|
- total: 0,
|
|
|
|
|
- list: []
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- chart2: {
|
|
|
|
|
- getdataListParm: {
|
|
|
|
|
- name: 'homepageEqstatus',
|
|
|
|
|
- parammaps: {
|
|
|
|
|
- pastureName: '现代牧业'
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- data: [],
|
|
|
|
|
- Chart: null
|
|
|
|
|
- },
|
|
|
|
|
- chart3: {
|
|
|
|
|
- getdataListParm: {
|
|
|
|
|
- name: 'homepageUkdoneRatePasture',
|
|
|
|
|
- page: 1,
|
|
|
|
|
- offset: 1,
|
|
|
|
|
- pagecount: 0,
|
|
|
|
|
- returntype: 'Map',
|
|
|
|
|
- parammaps: {}
|
|
|
|
|
- },
|
|
|
|
|
- tableKey: 0,
|
|
|
|
|
- listLoading: true,
|
|
|
|
|
- total: 0,
|
|
|
|
|
- list: [],
|
|
|
|
|
- isType: false,
|
|
|
|
|
- isPasture: true
|
|
|
|
|
- },
|
|
|
|
|
- chart4: {
|
|
|
|
|
- getdataListParm: {
|
|
|
|
|
- name: 'homepageEqRunstatueListPasture',
|
|
|
|
|
- parammaps: {
|
|
|
|
|
- type: '牧场'
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- data: [],
|
|
|
|
|
- Chart: null
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
-
|
|
|
|
|
- row3: {
|
|
|
|
|
- chart1: {
|
|
|
|
|
- getdataListParm: {
|
|
|
|
|
- name: 'homepageFeeWX',
|
|
|
|
|
- parammaps: {
|
|
|
|
|
- type: '至今',
|
|
|
|
|
- pastureName: '现代牧业'
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- data: [],
|
|
|
|
|
- Chart: null,
|
|
|
|
|
- list: {}
|
|
|
|
|
- },
|
|
|
|
|
- chart2: {
|
|
|
|
|
- getdataListParm: {
|
|
|
|
|
- name: 'homepageFeeWater',
|
|
|
|
|
- parammaps: {
|
|
|
|
|
- type: '至今',
|
|
|
|
|
- pastureName: '现代牧业'
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- data: [],
|
|
|
|
|
- Chart: null,
|
|
|
|
|
- list: {}
|
|
|
|
|
- },
|
|
|
|
|
- chart3: {
|
|
|
|
|
- getdataListParm: {
|
|
|
|
|
- name: 'homepageFeeElec',
|
|
|
|
|
- parammaps: {
|
|
|
|
|
- type: '至今',
|
|
|
|
|
- pastureName: '现代牧业'
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- data: [],
|
|
|
|
|
- Chart: null,
|
|
|
|
|
- list: {}
|
|
|
|
|
- },
|
|
|
|
|
- chart4: {
|
|
|
|
|
- getdataListParm: {
|
|
|
|
|
- name: 'homepageFeeDiesel',
|
|
|
|
|
- parammaps: {
|
|
|
|
|
- type: '至今',
|
|
|
|
|
- pastureName: '现代牧业'
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- data: [],
|
|
|
|
|
- Chart: null,
|
|
|
|
|
- list: {}
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- rowStyle: { maxHeight: 20 + 'px', height: 20 + 'px', background: '#003366', color: '#fff', fontSize: '8px' },
|
|
|
|
|
- cellStyle: { padding: 0 + 'px', background: '#003366', color: '#fff', fontSize: '8px' }
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- created() {
|
|
|
|
|
- this.getRow2List1()
|
|
|
|
|
- this.getRow2Chart1()
|
|
|
|
|
- },
|
|
|
|
|
- methods: {
|
|
|
|
|
- form_seeDetails(item) {
|
|
|
|
|
- if (item == 'row2Chart2') {
|
|
|
|
|
- console.log('设备状态统计')
|
|
|
|
|
- this.$router.push('/report/EquipmentOverview')
|
|
|
|
|
- } else if (item == 'row2Chart3') {
|
|
|
|
|
- console.log('保养完成率')
|
|
|
|
|
- this.$router.push('/report/CompletionRateMaintenance')
|
|
|
|
|
- } else if (item == 'row2Chart4') {
|
|
|
|
|
- console.log('资产运转率')
|
|
|
|
|
- this.$router.push('/report/EquipmentOperation')
|
|
|
|
|
- } else if (item == 'row3Chart1') {
|
|
|
|
|
- console.log('维修费')
|
|
|
|
|
- this.$router.push('/report/QueryRepair')
|
|
|
|
|
- } else if (item == 'row3Chart2') {
|
|
|
|
|
- console.log('水费')
|
|
|
|
|
- this.$router.push('/report/QueryWater')
|
|
|
|
|
- } else if (item == 'row3Chart3') {
|
|
|
|
|
- console.log('电费')
|
|
|
|
|
- this.$router.push('/report/QueryElec')
|
|
|
|
|
- } else if (item == 'row3Chart4') {
|
|
|
|
|
- console.log('燃动费')
|
|
|
|
|
- this.$router.push('/report/QueryCombustion')
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- getRow2List1() {
|
|
|
|
|
- GetDataByName(this.row2.chart1.get_table_dataParm).then(response => {
|
|
|
|
|
- if (response.data.list !== null) {
|
|
|
|
|
- this.row2.chart1.list = response.data.list[0]
|
|
|
|
|
- } else {
|
|
|
|
|
- this.row2.chart1.list.donerate = ''
|
|
|
|
|
- this.row2.chart1.list.monthBudgets = ''
|
|
|
|
|
- this.row2.chart1.list.sumPrice = ''
|
|
|
|
|
- }
|
|
|
|
|
- })
|
|
|
|
|
- },
|
|
|
|
|
- getRow2Chart1() {
|
|
|
|
|
- GetReportform(this.row2.chart1.getdataListParm).then(response => {
|
|
|
|
|
- console.log('row2图2', response)
|
|
|
|
|
- if (response.data !== null) {
|
|
|
|
|
- this.row2.chart1.data = response.data
|
|
|
|
|
- } else {
|
|
|
|
|
- this.row2.chart1.data = []
|
|
|
|
|
- }
|
|
|
|
|
- this.getRow2Chart2()
|
|
|
|
|
- this.roadRow2Chart1(this.row2.chart1.data)
|
|
|
|
|
- })
|
|
|
|
|
- },
|
|
|
|
|
- roadRow2Chart1(chart_data1) {
|
|
|
|
|
- if (this.row2.chart1.Chart != null) {
|
|
|
|
|
- this.row2.chart1.Chart.dispose()
|
|
|
|
|
- }
|
|
|
|
|
- this.row2.chart1.Chart = echarts.init(document.getElementById('row2Chart1'))
|
|
|
|
|
- var uploadedDataURL = '/datas/myMap.json'
|
|
|
|
|
- var that = this
|
|
|
|
|
- $.getJSON(uploadedDataURL, function(geoJson) {
|
|
|
|
|
- echarts.registerMap('china', geoJson)
|
|
|
|
|
- var geoCoordMap = chart_data1.data1[0]
|
|
|
|
|
- var data = chart_data1.data2
|
|
|
|
|
-
|
|
|
|
|
- console.log('geoCoordMap', JSON.stringify(geoCoordMap) )
|
|
|
|
|
- console.log('data', JSON.stringify(data))
|
|
|
|
|
- var max = 480; var min = 9
|
|
|
|
|
- var maxSize4Pin = 100; var minSize4Pin = 20
|
|
|
|
|
- var convertData = function(data) {
|
|
|
|
|
- var res = []
|
|
|
|
|
- for (var i = 0; i < data.length; i++) {
|
|
|
|
|
- var geoCoord = geoCoordMap[data[i].name]
|
|
|
|
|
- if (geoCoord) {
|
|
|
|
|
- res.push({ name: data[i].name, value: geoCoord.concat(data[i].value) })
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- return res
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- console.log('convertData', JSON.stringify(convertData))
|
|
|
|
|
- var conDatatest1 = convertData(data)
|
|
|
|
|
- console.log('convertData Data', JSON.stringify(conDatatest1))
|
|
|
|
|
- var symbolImg = 'image://' + require('@/assets/images/1.png') // 或者import引入在拼接也行
|
|
|
|
|
-
|
|
|
|
|
- var option = {
|
|
|
|
|
- title: '',
|
|
|
|
|
- legend: {
|
|
|
|
|
- orient: 'vertical',
|
|
|
|
|
- y: 'bottom',
|
|
|
|
|
- x: 'right',
|
|
|
|
|
- data: ['pm2.5'],
|
|
|
|
|
- textStyle: {
|
|
|
|
|
- color: '#fff'
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- visualMap: {
|
|
|
|
|
- show: false,
|
|
|
|
|
- min: 0,
|
|
|
|
|
- max: 600,
|
|
|
|
|
- left: 'left',
|
|
|
|
|
- top: 'bottom',
|
|
|
|
|
- text: ['高', '低'], // 文本，默认为数值文本
|
|
|
|
|
- calculable: true,
|
|
|
|
|
- seriesIndex: [1],
|
|
|
|
|
- inRange: {}
|
|
|
|
|
- },
|
|
|
|
|
- geo: {
|
|
|
|
|
- map: 'china',
|
|
|
|
|
- show: true,
|
|
|
|
|
- roam: true, // 鼠标滚动放大缩小
|
|
|
|
|
- label: {
|
|
|
|
|
- normal: {
|
|
|
|
|
- show: false
|
|
|
|
|
- },
|
|
|
|
|
- emphasis: {
|
|
|
|
|
- show: false
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- itemStyle: {
|
|
|
|
|
- normal: {
|
|
|
|
|
- areaColor: '#3a7fd5',
|
|
|
|
|
- borderColor: '#0a53e9', // 线
|
|
|
|
|
- shadowColor: '#092f8f', // 外发光
|
|
|
|
|
- shadowBlur: 20
|
|
|
|
|
- },
|
|
|
|
|
- emphasis: {
|
|
|
|
|
- areaColor: '#0a2dae' // 悬浮区背景
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- series: [{
|
|
|
|
|
- symbolSize: 5,
|
|
|
|
|
- label: {
|
|
|
|
|
- normal: {
|
|
|
|
|
- formatter: '{b}',
|
|
|
|
|
- position: 'bottom',
|
|
|
|
|
- lineHeight: 30,
|
|
|
|
|
- show: true
|
|
|
|
|
- },
|
|
|
|
|
- emphasis: {
|
|
|
|
|
- show: true
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- itemStyle: {
|
|
|
|
|
- normal: {
|
|
|
|
|
- color: '#fff'
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- name: 'light',
|
|
|
|
|
- type: 'scatter',
|
|
|
|
|
- coordinateSystem: 'geo',
|
|
|
|
|
- data: convertData(data)
|
|
|
|
|
- }, {
|
|
|
|
|
- type: 'map',
|
|
|
|
|
- map: 'china',
|
|
|
|
|
- geoIndex: 0,
|
|
|
|
|
- aspectScale: 0.75, // 长宽比
|
|
|
|
|
- showLegendSymbol: false, // 存在legend时显示
|
|
|
|
|
- label: {
|
|
|
|
|
- normal: {
|
|
|
|
|
- show: false
|
|
|
|
|
- },
|
|
|
|
|
- emphasis: {
|
|
|
|
|
- show: false,
|
|
|
|
|
- textStyle: {
|
|
|
|
|
- color: '#fff'
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- roam: true,
|
|
|
|
|
- itemStyle: {
|
|
|
|
|
- normal: {
|
|
|
|
|
- areaColor: '#031525',
|
|
|
|
|
- borderColor: '#FFFFFF'
|
|
|
|
|
- },
|
|
|
|
|
- emphasis: {
|
|
|
|
|
- areaColor: '#2B91B7'
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- animation: false,
|
|
|
|
|
- data: data
|
|
|
|
|
- }, {
|
|
|
|
|
- name: 'Top 5',
|
|
|
|
|
- type: 'scatter',
|
|
|
|
|
- coordinateSystem: 'geo',
|
|
|
|
|
- // symbol: 'pin',
|
|
|
|
|
- symbol: symbolImg,
|
|
|
|
|
- symbolSize: [20, 20],
|
|
|
|
|
- right: 100,
|
|
|
|
|
- label: {
|
|
|
|
|
- normal: {
|
|
|
|
|
- show: false,
|
|
|
|
|
- textStyle: { color: '#fff', fontSize: 9 },
|
|
|
|
|
- formatter(value) {
|
|
|
|
|
- return value.data.value[2]
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- itemStyle: {
|
|
|
|
|
- normal: {
|
|
|
|
|
- color: '#D8BC37',
|
|
|
|
|
- marginRight: 100
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- data: convertData(data),
|
|
|
|
|
- showEffectOn: 'render',
|
|
|
|
|
- rippleEffect: {
|
|
|
|
|
- brushType: 'stroke'
|
|
|
|
|
- },
|
|
|
|
|
- hoverAnimation: true,
|
|
|
|
|
- zlevel: 1
|
|
|
|
|
- }]
|
|
|
|
|
- }
|
|
|
|
|
- that.row2.chart1.Chart.setOption(option)
|
|
|
|
|
- that.row2.chart1.Chart.on('click', function(param, i) {
|
|
|
|
|
- if (param.value.length !== undefined) {
|
|
|
|
|
- console.log(param)
|
|
|
|
|
- that.row2.chart2.getdataListParm.parammaps.pastureName = param.name
|
|
|
|
|
-
|
|
|
|
|
- that.row2.chart3.getdataListParm.name = 'homepageUkdoneRateEqclass'
|
|
|
|
|
- that.row2.chart3.getdataListParm.parammaps.pastureName = param.name
|
|
|
|
|
- that.row2.chart3.isType = true
|
|
|
|
|
- that.row2.chart3.isPasture = false
|
|
|
|
|
- that.row2.chart4.getdataListParm.name = 'homepageEqRunstatueListEqclass'
|
|
|
|
|
- that.row2.chart4.getdataListParm.parammaps.pastureName = param.name
|
|
|
|
|
- that.row2.chart4.getdataListParm.parammaps.type = '设备类别'
|
|
|
|
|
-
|
|
|
|
|
- that.row2.chart1.pasture.getdataListParm.parammaps.pastureName = param.name
|
|
|
|
|
- that.row3.chart1.getdataListParm.parammaps.pastureName = param.name
|
|
|
|
|
- that.row3.chart2.getdataListParm.parammaps.pastureName = param.name
|
|
|
|
|
- that.row3.chart3.getdataListParm.parammaps.pastureName = param.name
|
|
|
|
|
- that.row3.chart4.getdataListParm.parammaps.pastureName = param.name
|
|
|
|
|
- that.row2.chart1.pasture.pastureName = param.name
|
|
|
|
|
- that.getRow2PastureList()
|
|
|
|
|
- that.getRow2Chart2()
|
|
|
|
|
- } else {
|
|
|
|
|
- that.row2.chart2.getdataListParm.parammaps.pastureName = '现代牧业'
|
|
|
|
|
- that.row2.chart3.isType = false
|
|
|
|
|
- that.row2.chart3.isPasture = true
|
|
|
|
|
- that.row2.chart3.getdataListParm.name = 'homepageUkdoneRatePasture'
|
|
|
|
|
- that.row2.chart3.getdataListParm.parammaps.pastureName = '现代牧业'
|
|
|
|
|
- that.row2.chart4.getdataListParm.name = 'homepageEqRunstatueListPasture'
|
|
|
|
|
- that.row2.chart4.getdataListParm.parammaps.type = '牧场'
|
|
|
|
|
- that.row2.chart4.getdataListParm.parammaps.pastureName = '现代牧业'
|
|
|
|
|
- that.row3.chart1.getdataListParm.parammaps.pastureName = '现代牧业'
|
|
|
|
|
- that.row3.chart2.getdataListParm.parammaps.pastureName = '现代牧业'
|
|
|
|
|
- that.row3.chart3.getdataListParm.parammaps.pastureName = '现代牧业'
|
|
|
|
|
- that.row3.chart4.getdataListParm.parammaps.pastureName = '现代牧业'
|
|
|
|
|
- that.getRow2Chart1()
|
|
|
|
|
- that.row2.chart1.isPastureList = false
|
|
|
|
|
- }
|
|
|
|
|
- })
|
|
|
|
|
- window.onresize = function() {
|
|
|
|
|
- that.row2.chart1.Chart.resize()
|
|
|
|
|
- }
|
|
|
|
|
- })
|
|
|
|
|
- },
|
|
|
|
|
- // 牧场
|
|
|
|
|
- getRow2PastureList() {
|
|
|
|
|
- this.row2.chart1.pasture.listLoading = true
|
|
|
|
|
- GetDataByName(this.row2.chart1.pasture.getdataListParm).then(response => {
|
|
|
|
|
- if (response.data.list !== null) {
|
|
|
|
|
- this.row2.chart1.pasture.list = response.data.list[0]
|
|
|
|
|
- console.log('牧场数据', this.row2.chart1.pasture.list)
|
|
|
|
|
- this.row2.chart1.isPastureList = true
|
|
|
|
|
- } else {
|
|
|
|
|
- this.row2.chart1.pasture.list.donerate = ''
|
|
|
|
|
- this.row2.chart1.pasture.list.monthBudgets = ''
|
|
|
|
|
- this.row2.chart1.pasture.list.sumPrice = ''
|
|
|
|
|
- }
|
|
|
|
|
- setTimeout(() => {
|
|
|
|
|
- this.row2.chart1.pasture.listLoading = false
|
|
|
|
|
- }, 100)
|
|
|
|
|
- })
|
|
|
|
|
- },
|
|
|
|
|
-
|
|
|
|
|
- // 设备状态统计
|
|
|
|
|
- getRow2Chart2() {
|
|
|
|
|
- GetReportform(this.row2.chart2.getdataListParm).then(response => {
|
|
|
|
|
- console.log('row2图2', response)
|
|
|
|
|
- if (response.data !== null) {
|
|
|
|
|
- this.row2.chart2.data = response.data
|
|
|
|
|
- } else {
|
|
|
|
|
- this.row2.chart2.data = []
|
|
|
|
|
- }
|
|
|
|
|
- this.getRow2Chart3()
|
|
|
|
|
- this.roadRow2Chart2(this.row2.chart2.data)
|
|
|
|
|
- })
|
|
|
|
|
- },
|
|
|
|
|
- roadRow2Chart2(chart_data1) {
|
|
|
|
|
- if (this.row2.chart2.Chart != null) {
|
|
|
|
|
- this.row2.chart2.Chart.dispose()
|
|
|
|
|
- }
|
|
|
|
|
- this.row2.chart2.Chart = echarts.init(document.getElementById('row2Chart2'))
|
|
|
|
|
- var option = {
|
|
|
|
|
- title: { text: '', textStyle: { color: '#769cfc' }},
|
|
|
|
|
- tooltip: { trigger: 'axis' },
|
|
|
|
|
- color: ['#769cfc'],
|
|
|
|
|
- grid: { left: '3%', right: '13%', top: '15%', bottom: '4%', containLabel: true },
|
|
|
|
|
- xAxis: [{ type: 'category', name: '状态', data: chart_data1.data1, axisLabel: { interval: 0 }, axisLine: { lineStyle: { color: '#fff' }}}],
|
|
|
|
|
- yAxis: [{ type: 'value', name: '台数', axisLabel: { formatter: '{value}' }, axisLine: { lineStyle: { color: '#fff' }}}],
|
|
|
|
|
- series: [
|
|
|
|
|
- {
|
|
|
|
|
- type: 'bar',
|
|
|
|
|
- barWidth: 30,
|
|
|
|
|
- data: chart_data1.data2,
|
|
|
|
|
- emphasis: { label: { show: true, position: 'inside' }}
|
|
|
|
|
- }
|
|
|
|
|
- ]
|
|
|
|
|
- }
|
|
|
|
|
- this.row2.chart2.Chart.setOption(option)
|
|
|
|
|
- window.onresize = function() {
|
|
|
|
|
- this.row2.chart2.Chart.resize()
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
-
|
|
|
|
|
- // 保养完成率
|
|
|
|
|
- getRow2Chart3() {
|
|
|
|
|
- this.row2.chart3.listLoading = true
|
|
|
|
|
- GetDataByName(this.row2.chart3.getdataListParm).then(response => {
|
|
|
|
|
- if (response.data.list !== null) {
|
|
|
|
|
- this.row2.chart3.list = response.data.list
|
|
|
|
|
- } else {
|
|
|
|
|
- this.row2.chart3.list = []
|
|
|
|
|
- }
|
|
|
|
|
- this.getRow2Chart4()
|
|
|
|
|
- setTimeout(() => {
|
|
|
|
|
- this.row2.chart3.listLoading = false
|
|
|
|
|
- }, 100)
|
|
|
|
|
- })
|
|
|
|
|
- },
|
|
|
|
|
-
|
|
|
|
|
- // 资产运转率
|
|
|
|
|
- getRow2Chart4() {
|
|
|
|
|
- GetReportform(this.row2.chart4.getdataListParm).then(response => {
|
|
|
|
|
- console.log('row2图4', response)
|
|
|
|
|
- if (response.data !== null) {
|
|
|
|
|
- this.row2.chart4.data = response.data
|
|
|
|
|
- } else {
|
|
|
|
|
- this.row2.chart4.data = []
|
|
|
|
|
- }
|
|
|
|
|
- this.getRow3Chart1()
|
|
|
|
|
- this.roadRow2Chart4(this.row2.chart4.data)
|
|
|
|
|
- })
|
|
|
|
|
- },
|
|
|
|
|
- roadRow2Chart4(chart_data1) {
|
|
|
|
|
- if (this.row2.chart4.Chart != null) {
|
|
|
|
|
- this.row2.chart4.Chart.dispose()
|
|
|
|
|
- }
|
|
|
|
|
- this.row2.chart4.Chart = echarts.init(document.getElementById('row2Chart4'))
|
|
|
|
|
- var option = {
|
|
|
|
|
- title: { text: '', textStyle: { color: '#769cfc' }},
|
|
|
|
|
- tooltip: { trigger: 'axis' },
|
|
|
|
|
- color: ['#769cfc'],
|
|
|
|
|
- grid: { left: '3%', right: '8%', top: '15%', bottom: '4%', containLabel: true },
|
|
|
|
|
- xAxis: [{ type: 'category', name: chart_data1.data3[0],
|
|
|
|
|
- axisLabel: {
|
|
|
|
|
- interval: 0,
|
|
|
|
|
- rotate: 40
|
|
|
|
|
- },
|
|
|
|
|
- data: chart_data1.data1, axisLine: { lineStyle: { color: '#fff' }}}],
|
|
|
|
|
- yAxis: [{ type: 'value', name: '%', axisLabel: { formatter: '{value}' }, axisLine: { lineStyle: { color: '#fff' }}}],
|
|
|
|
|
- series: [
|
|
|
|
|
- {
|
|
|
|
|
- type: 'bar',
|
|
|
|
|
- data: chart_data1.data2,
|
|
|
|
|
- emphasis: { label: { show: true, position: 'inside' }}
|
|
|
|
|
- }
|
|
|
|
|
- ]
|
|
|
|
|
- }
|
|
|
|
|
- this.row2.chart4.Chart.setOption(option)
|
|
|
|
|
- window.onresize = function() {
|
|
|
|
|
- this.row2.chart4.Chart.resize()
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
-
|
|
|
|
|
- getRow3Chart1() {
|
|
|
|
|
- GetReportform(this.row3.chart1.getdataListParm).then(response => {
|
|
|
|
|
- console.log('row3图1', response)
|
|
|
|
|
- if (response.data !== null) {
|
|
|
|
|
- this.row3.chart1.data.data1 = response.data.data1
|
|
|
|
|
- this.row3.chart1.data.data2 = response.data.data2
|
|
|
|
|
- this.row3.chart1.data.data3 = response.data.data3
|
|
|
|
|
- this.row3.chart1.data.data4 = response.data.data4
|
|
|
|
|
- this.row3.chart1.data.data5 = response.data.data5
|
|
|
|
|
- this.row3.chart1.list.data1 = response.data.data6[0]
|
|
|
|
|
- this.row3.chart1.list.data2 = response.data.data7[0]
|
|
|
|
|
- this.row3.chart1.list.data3 = response.data.data8[0]
|
|
|
|
|
- this.$forceUpdate()
|
|
|
|
|
- } else {
|
|
|
|
|
- this.row3.chart1.data = {}
|
|
|
|
|
- this.row3.chart1.list = {}
|
|
|
|
|
- }
|
|
|
|
|
- this.getRow3Chart2()
|
|
|
|
|
- this.roadRow3Chart1(this.row3.chart1.data)
|
|
|
|
|
- })
|
|
|
|
|
- },
|
|
|
|
|
- roadRow3Chart1(chart_data1) {
|
|
|
|
|
- if (this.row3.chart1.Chart != null) {
|
|
|
|
|
- this.row3.chart1.Chart.dispose()
|
|
|
|
|
- }
|
|
|
|
|
- this.row3.chart1.Chart = echarts.init(document.getElementById('row3Chart1'))
|
|
|
|
|
- var option = {
|
|
|
|
|
- title: { text: '', textStyle: { color: '#769cfc' }},
|
|
|
|
|
- tooltip: { trigger: 'axis' },
|
|
|
|
|
- legend: {
|
|
|
|
|
- data: [
|
|
|
|
|
- { name: '今年预算', icon: 'circle' },
|
|
|
|
|
- { name: '今年实际', icon: 'circle' },
|
|
|
|
|
- { name: '今年内控', icon: 'circle' },
|
|
|
|
|
- { name: '去年同期实际', icon: 'circle' }
|
|
|
|
|
- ],
|
|
|
|
|
- itemWidth: 5,
|
|
|
|
|
- itemHeight: 5,
|
|
|
|
|
- itemGap: 5,
|
|
|
|
|
- y: 10,
|
|
|
|
|
- textStyle: { color: '#fff', fontSize: '10' }
|
|
|
|
|
- },
|
|
|
|
|
- color: ['#2dc0e8', '#769cfc', '#e69cfc', '#FFB800'],
|
|
|
|
|
- grid: { left: '3%', right: '10%', bottom: '4%', containLabel: true },
|
|
|
|
|
- xAxis: [{ type: 'category', name: '时间', nameTextStyle: { padding: [0, 0, -20, -30] }, data: chart_data1.data1, axisLabel: { interval: 0 }, axisLine: { lineStyle: { color: '#fff' }}}],
|
|
|
|
|
- yAxis: [{ type: 'value', name: '', axisLabel: { formatter: '{value}' }, axisLine: { lineStyle: { color: '#fff', width: 1 }}}],
|
|
|
|
|
- series: [
|
|
|
|
|
- {
|
|
|
|
|
- name: '今年预算',
|
|
|
|
|
- textStyle: {
|
|
|
|
|
- fontSize: 12,
|
|
|
|
|
- fontWeight: 'bolder',
|
|
|
|
|
- color: '#fff'
|
|
|
|
|
- },
|
|
|
|
|
- type: 'bar',
|
|
|
|
|
- barWidth: 10,
|
|
|
|
|
- data: chart_data1.data2,
|
|
|
|
|
- emphasis: { label: { show: true, position: 'inside' }}
|
|
|
|
|
- }, {
|
|
|
|
|
- name: '今年实际',
|
|
|
|
|
- type: 'bar',
|
|
|
|
|
- barWidth: 10,
|
|
|
|
|
- data: chart_data1.data3,
|
|
|
|
|
- emphasis: { label: { show: true, position: 'inside' }}
|
|
|
|
|
- }, {
|
|
|
|
|
- name: '今年内控',
|
|
|
|
|
- type: 'bar',
|
|
|
|
|
- barWidth: 10,
|
|
|
|
|
- data: chart_data1.data4,
|
|
|
|
|
- emphasis: { label: { show: true, position: 'inside' }}
|
|
|
|
|
- }, {
|
|
|
|
|
- name: '去年同期实际',
|
|
|
|
|
- type: 'bar',
|
|
|
|
|
- barWidth: 10,
|
|
|
|
|
- data: chart_data1.data5,
|
|
|
|
|
- emphasis: { label: { show: true, position: 'inside' }}
|
|
|
|
|
- }
|
|
|
|
|
- ]
|
|
|
|
|
- }
|
|
|
|
|
- this.row3.chart1.Chart.setOption(option)
|
|
|
|
|
- window.onresize = function() {
|
|
|
|
|
- this.row3.chart1.Chart.resize()
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
-
|
|
|
|
|
- getRow3Chart2() {
|
|
|
|
|
- GetReportform(this.row3.chart2.getdataListParm).then(response => {
|
|
|
|
|
- console.log('row3图2', response)
|
|
|
|
|
- if (response.data !== null) {
|
|
|
|
|
- this.row3.chart2.data.data1 = response.data.data1
|
|
|
|
|
- this.row3.chart2.data.data2 = response.data.data2
|
|
|
|
|
- this.row3.chart2.data.data3 = response.data.data3
|
|
|
|
|
- this.row3.chart2.data.data4 = response.data.data4
|
|
|
|
|
- this.row3.chart2.data.data5 = response.data.data5
|
|
|
|
|
- this.row3.chart2.list.data1 = response.data.data6[0]
|
|
|
|
|
- this.row3.chart2.list.data2 = response.data.data7[0]
|
|
|
|
|
- this.row3.chart2.list.data3 = response.data.data8[0]
|
|
|
|
|
- this.$forceUpdate()
|
|
|
|
|
- } else {
|
|
|
|
|
- this.row3.chart2.data = {}
|
|
|
|
|
- this.row3.chart2.list = {}
|
|
|
|
|
- }
|
|
|
|
|
- this.getRow3Chart3()
|
|
|
|
|
- this.roadRow3Chart2(this.row3.chart2.data)
|
|
|
|
|
- })
|
|
|
|
|
- },
|
|
|
|
|
- roadRow3Chart2(chart_data1) {
|
|
|
|
|
- if (this.row3.chart2.Chart != null) {
|
|
|
|
|
- this.row3.chart2.Chart.dispose()
|
|
|
|
|
- }
|
|
|
|
|
- this.row3.chart2.Chart = echarts.init(document.getElementById('row3Chart2'))
|
|
|
|
|
- var option = {
|
|
|
|
|
- title: { text: '', textStyle: { color: '#769cfc' }},
|
|
|
|
|
- tooltip: { trigger: 'axis' },
|
|
|
|
|
- legend: {
|
|
|
|
|
- data: [
|
|
|
|
|
- { name: '今年预算', icon: 'circle' },
|
|
|
|
|
- { name: '今年实际', icon: 'circle' },
|
|
|
|
|
- { name: '今年内控', icon: 'circle' },
|
|
|
|
|
- { name: '去年同期实际', icon: 'circle' }
|
|
|
|
|
- ],
|
|
|
|
|
- itemWidth: 5,
|
|
|
|
|
- itemHeight: 5,
|
|
|
|
|
- itemGap: 5,
|
|
|
|
|
- y: 10,
|
|
|
|
|
- textStyle: { color: '#fff', fontSize: '10' }
|
|
|
|
|
- },
|
|
|
|
|
- color: ['#2dc0e8', '#769cfc', '#e69cfc', '#FFB800'],
|
|
|
|
|
- grid: { left: '3%', right: '10%', bottom: '4%', containLabel: true },
|
|
|
|
|
- xAxis: [{ type: 'category', name: '时间', nameTextStyle: { padding: [0, 0, -20, -30] }, data: chart_data1.data1, axisLabel: { interval: 0 }, axisLine: { lineStyle: { color: '#fff' }}}],
|
|
|
|
|
- yAxis: [{ type: 'value', name: '', axisLabel: { formatter: '{value}' }, axisLine: { lineStyle: { color: '#fff', width: 1 }}}],
|
|
|
|
|
- series: [
|
|
|
|
|
- {
|
|
|
|
|
- name: '今年预算',
|
|
|
|
|
- textStyle: {
|
|
|
|
|
- fontSize: 12,
|
|
|
|
|
- fontWeight: 'bolder',
|
|
|
|
|
- color: '#fff'
|
|
|
|
|
- },
|
|
|
|
|
- type: 'bar',
|
|
|
|
|
- barWidth: 10,
|
|
|
|
|
- data: chart_data1.data2,
|
|
|
|
|
- emphasis: { label: { show: true, position: 'inside' }}
|
|
|
|
|
- }, {
|
|
|
|
|
- name: '今年实际',
|
|
|
|
|
- type: 'bar',
|
|
|
|
|
- barWidth: 10,
|
|
|
|
|
- data: chart_data1.data3,
|
|
|
|
|
- emphasis: { label: { show: true, position: 'inside' }}
|
|
|
|
|
- }, {
|
|
|
|
|
- name: '今年内控',
|
|
|
|
|
- type: 'bar',
|
|
|
|
|
- barWidth: 10,
|
|
|
|
|
- data: chart_data1.data4,
|
|
|
|
|
- emphasis: { label: { show: true, position: 'inside' }}
|
|
|
|
|
- }, {
|
|
|
|
|
- name: '去年同期实际',
|
|
|
|
|
- type: 'bar',
|
|
|
|
|
- barWidth: 10,
|
|
|
|
|
- data: chart_data1.data5,
|
|
|
|
|
- emphasis: { label: { show: true, position: 'inside' }}
|
|
|
|
|
- }
|
|
|
|
|
- ]
|
|
|
|
|
- }
|
|
|
|
|
- this.row3.chart2.Chart.setOption(option)
|
|
|
|
|
- window.onresize = function() {
|
|
|
|
|
- this.row3.chart2.Chart.resize()
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
-
|
|
|
|
|
- getRow3Chart3() {
|
|
|
|
|
- GetReportform(this.row3.chart3.getdataListParm).then(response => {
|
|
|
|
|
- console.log('row3图3', response)
|
|
|
|
|
- if (response.data !== null) {
|
|
|
|
|
- this.row3.chart3.data.data1 = response.data.data1
|
|
|
|
|
- this.row3.chart3.data.data2 = response.data.data2
|
|
|
|
|
- this.row3.chart3.data.data3 = response.data.data3
|
|
|
|
|
- this.row3.chart3.data.data4 = response.data.data4
|
|
|
|
|
- this.row3.chart3.data.data5 = response.data.data5
|
|
|
|
|
- this.row3.chart3.list.data1 = response.data.data6[0]
|
|
|
|
|
- this.row3.chart3.list.data2 = response.data.data7[0]
|
|
|
|
|
- this.row3.chart3.list.data3 = response.data.data8[0]
|
|
|
|
|
- this.$forceUpdate()
|
|
|
|
|
- } else {
|
|
|
|
|
- this.row3.chart3.data = {}
|
|
|
|
|
- this.row3.chart3.list = {}
|
|
|
|
|
- }
|
|
|
|
|
- this.getRow3Chart4()
|
|
|
|
|
- this.roadRow3Chart3(this.row3.chart3.data)
|
|
|
|
|
- })
|
|
|
|
|
- },
|
|
|
|
|
- roadRow3Chart3(chart_data1) {
|
|
|
|
|
- if (this.row3.chart3.Chart != null) {
|
|
|
|
|
- this.row3.chart3.Chart.dispose()
|
|
|
|
|
- }
|
|
|
|
|
- this.row3.chart3.Chart = echarts.init(document.getElementById('row3Chart3'))
|
|
|
|
|
- var option = {
|
|
|
|
|
- title: { text: '', textStyle: { color: '#769cfc' }},
|
|
|
|
|
- tooltip: { trigger: 'axis' },
|
|
|
|
|
- legend: {
|
|
|
|
|
- data: [
|
|
|
|
|
- { name: '今年预算', icon: 'circle' },
|
|
|
|
|
- { name: '今年实际', icon: 'circle' },
|
|
|
|
|
- { name: '今年内控', icon: 'circle' },
|
|
|
|
|
- { name: '去年同期实际', icon: 'circle' }
|
|
|
|
|
- ],
|
|
|
|
|
- itemWidth: 5,
|
|
|
|
|
- itemHeight: 5,
|
|
|
|
|
- itemGap: 5,
|
|
|
|
|
- y: 10,
|
|
|
|
|
- textStyle: { color: '#fff', fontSize: '10' }
|
|
|
|
|
- },
|
|
|
|
|
- color: ['#2dc0e8', '#769cfc', '#e69cfc', '#FFB800'],
|
|
|
|
|
- grid: { left: '3%', right: '10%', bottom: '4%', containLabel: true },
|
|
|
|
|
- xAxis: [{ type: 'category', name: '时间', nameTextStyle: { padding: [0, 0, -20, -30] }, data: chart_data1.data1, axisLabel: { interval: 0 }, axisLine: { lineStyle: { color: '#fff' }}}],
|
|
|
|
|
- yAxis: [{ type: 'value', name: '', axisLabel: { formatter: '{value}' }, axisLine: { lineStyle: { color: '#fff', width: 1 }}}],
|
|
|
|
|
- series: [
|
|
|
|
|
- {
|
|
|
|
|
- name: '今年预算',
|
|
|
|
|
- textStyle: {
|
|
|
|
|
- fontSize: 12,
|
|
|
|
|
- fontWeight: 'bolder',
|
|
|
|
|
- color: '#fff'
|
|
|
|
|
- },
|
|
|
|
|
- type: 'bar',
|
|
|
|
|
- barWidth: 10,
|
|
|
|
|
- data: chart_data1.data2,
|
|
|
|
|
- emphasis: { label: { show: true, position: 'inside' }}
|
|
|
|
|
- }, {
|
|
|
|
|
- name: '今年实际',
|
|
|
|
|
- type: 'bar',
|
|
|
|
|
- barWidth: 10,
|
|
|
|
|
- data: chart_data1.data3,
|
|
|
|
|
- emphasis: { label: { show: true, position: 'inside' }}
|
|
|
|
|
- }, {
|
|
|
|
|
- name: '今年内控',
|
|
|
|
|
- type: 'bar',
|
|
|
|
|
- barWidth: 10,
|
|
|
|
|
- data: chart_data1.data4,
|
|
|
|
|
- emphasis: { label: { show: true, position: 'inside' }}
|
|
|
|
|
- }, {
|
|
|
|
|
- name: '去年同期实际',
|
|
|
|
|
- type: 'bar',
|
|
|
|
|
- barWidth: 10,
|
|
|
|
|
- data: chart_data1.data5,
|
|
|
|
|
- emphasis: { label: { show: true, position: 'inside' }}
|
|
|
|
|
- }
|
|
|
|
|
- ]
|
|
|
|
|
- }
|
|
|
|
|
- this.row3.chart3.Chart.setOption(option)
|
|
|
|
|
- window.onresize = function() {
|
|
|
|
|
- this.row3.chart3.Chart.resize()
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
-
|
|
|
|
|
- getRow3Chart4() {
|
|
|
|
|
- GetReportform(this.row3.chart4.getdataListParm).then(response => {
|
|
|
|
|
- console.log('row3图4', response)
|
|
|
|
|
- if (response.data !== null) {
|
|
|
|
|
- this.row3.chart4.data.data1 = response.data.data1
|
|
|
|
|
- this.row3.chart4.data.data2 = response.data.data2
|
|
|
|
|
- this.row3.chart4.data.data3 = response.data.data3
|
|
|
|
|
- this.row3.chart4.data.data4 = response.data.data4
|
|
|
|
|
- this.row3.chart4.data.data5 = response.data.data5
|
|
|
|
|
- this.row3.chart4.list.data1 = response.data.data6[0]
|
|
|
|
|
- this.row3.chart4.list.data2 = response.data.data7[0]
|
|
|
|
|
- this.row3.chart4.list.data3 = response.data.data8[0]
|
|
|
|
|
- this.$forceUpdate()
|
|
|
|
|
- } else {
|
|
|
|
|
- this.row3.chart4.data = {}
|
|
|
|
|
- this.row3.chart4.list = {}
|
|
|
|
|
- }
|
|
|
|
|
- this.roadRow3Chart4(this.row3.chart4.data)
|
|
|
|
|
- })
|
|
|
|
|
- },
|
|
|
|
|
- roadRow3Chart4(chart_data1) {
|
|
|
|
|
- if (this.row3.chart4.Chart != null) {
|
|
|
|
|
- this.row3.chart4.Chart.dispose()
|
|
|
|
|
- }
|
|
|
|
|
- this.row3.chart4.Chart = echarts.init(document.getElementById('row3Chart4'))
|
|
|
|
|
- var option = {
|
|
|
|
|
- title: { text: '', textStyle: { color: '#769cfc' }},
|
|
|
|
|
- tooltip: { trigger: 'axis' },
|
|
|
|
|
- legend: {
|
|
|
|
|
- data: [
|
|
|
|
|
- { name: '今年预算', icon: 'circle' },
|
|
|
|
|
- { name: '今年实际', icon: 'circle' },
|
|
|
|
|
- { name: '今年内控', icon: 'circle' },
|
|
|
|
|
- { name: '去年同期实际', icon: 'circle' }
|
|
|
|
|
- ],
|
|
|
|
|
- itemWidth: 5,
|
|
|
|
|
- itemHeight: 5,
|
|
|
|
|
- itemGap: 5,
|
|
|
|
|
- y: 10,
|
|
|
|
|
- textStyle: { color: '#fff', fontSize: '10' }
|
|
|
|
|
- },
|
|
|
|
|
- color: ['#2dc0e8', '#769cfc', '#e69cfc', '#FFB800'],
|
|
|
|
|
- grid: { left: '3%', right: '10%', bottom: '4%', containLabel: true },
|
|
|
|
|
- xAxis: [{ type: 'category', name: '时间', nameTextStyle: { padding: [0, 0, -20, -30] }, data: chart_data1.data1, axisLabel: { interval: 0 }, axisLine: { lineStyle: { color: '#fff' }}}],
|
|
|
|
|
- yAxis: [{ type: 'value', name: '', axisLabel: { formatter: '{value}' }, axisLine: { lineStyle: { color: '#fff', width: 1 }}}],
|
|
|
|
|
- series: [
|
|
|
|
|
- {
|
|
|
|
|
- name: '今年预算',
|
|
|
|
|
- textStyle: {
|
|
|
|
|
- fontSize: 12,
|
|
|
|
|
- fontWeight: 'bolder',
|
|
|
|
|
- color: '#fff'
|
|
|
|
|
- },
|
|
|
|
|
- type: 'bar',
|
|
|
|
|
- barWidth: 10,
|
|
|
|
|
- data: chart_data1.data2,
|
|
|
|
|
- emphasis: { label: { show: true, position: 'inside' }}
|
|
|
|
|
- }, {
|
|
|
|
|
- name: '今年实际',
|
|
|
|
|
- type: 'bar',
|
|
|
|
|
- barWidth: 10,
|
|
|
|
|
- data: chart_data1.data3,
|
|
|
|
|
- emphasis: { label: { show: true, position: 'inside' }}
|
|
|
|
|
- }, {
|
|
|
|
|
- name: '今年内控',
|
|
|
|
|
- type: 'bar',
|
|
|
|
|
- barWidth: 10,
|
|
|
|
|
- data: chart_data1.data4,
|
|
|
|
|
- emphasis: { label: { show: true, position: 'inside' }}
|
|
|
|
|
- }, {
|
|
|
|
|
- name: '去年同期实际',
|
|
|
|
|
- type: 'bar',
|
|
|
|
|
- barWidth: 10,
|
|
|
|
|
- data: chart_data1.data5,
|
|
|
|
|
- emphasis: { label: { show: true, position: 'inside' }}
|
|
|
|
|
- }
|
|
|
|
|
- ]
|
|
|
|
|
- }
|
|
|
|
|
- this.row3.chart4.Chart.setOption(option)
|
|
|
|
|
- window.onresize = function() {
|
|
|
|
|
- this.row3.chart4.Chart.resize()
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
-}
|
|
|
|
|
-</script>
|
|
|
|
|
-<style lang="scss" scoped>
|
|
|
|
|
- .app-container {
|
|
|
|
|
- background-color: #003366; color: #fff;min-height: 100vh;
|
|
|
|
|
- .Title{height: 30px;line-height: 30px;text-align: left;padding-left: 10px;}
|
|
|
|
|
- .title{height: 30px;line-height: 30px;text-align: center;}
|
|
|
|
|
- .generalTitle{width: 100%;margin-left:150px;text-align: right;font-size: 30px;line-height: 60px;font-weight: 600;}
|
|
|
|
|
- .date{width: 100%;text-align: right;font-size: 14px;line-height: 60px;padding-right: 20px;}
|
|
|
|
|
- .Indexbutton{
|
|
|
|
|
- height: 20px;position: relative;width: 100%;
|
|
|
|
|
- a{display: inline-block;height: 20px;line-height: 20px;font-size:10px;text-align: center;background: #769cfc;color: #fff;border-radius: 2px;width: 55px;position: absolute;left: 0;right: 0;top: 5px;bottom: 0;margin: 0 auto;}
|
|
|
|
|
- }
|
|
|
|
|
- .IndexTable{
|
|
|
|
|
- padding: 0 10px;
|
|
|
|
|
- .Indextable{background: #003366;}
|
|
|
|
|
- }
|
|
|
|
|
- .row2{
|
|
|
|
|
- height:500px;position: relative;
|
|
|
|
|
- .groupNews{
|
|
|
|
|
- height:60px;width:70%;z-index: 1;position:absolute;top: 5px;left: 10px;
|
|
|
|
|
- .news{
|
|
|
|
|
- height:60px;text-align: center;
|
|
|
|
|
- b{line-height: 30px;font-size: 14px;}
|
|
|
|
|
- span{line-height: 20px;font-size: 12px;}
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- .pastureNews{
|
|
|
|
|
- height:150px;width:40%;z-index: 1;position:absolute;bottom: 20px;left: 10px;background: #055597;
|
|
|
|
|
- .newsTitle{height: 30px;line-height: 30px;padding-left: 10px;}
|
|
|
|
|
- .news2{
|
|
|
|
|
- height: 120px;padding-left: 10px;font-size: 12px;
|
|
|
|
|
- div{
|
|
|
|
|
- padding-top: 10px;line-height: 30px;
|
|
|
|
|
- b{font-weight: 400;}
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- // row3
|
|
|
|
|
- .costStatistics{
|
|
|
|
|
- display: flex;justify-content: space-between;margin: 0 5px;
|
|
|
|
|
- .content{
|
|
|
|
|
- flex: 1 1 1 1 auto;
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- .contentLeft{
|
|
|
|
|
- height: 200px;position:relative;
|
|
|
|
|
- div{
|
|
|
|
|
- font-size: 10px;width: 100%;text-align: center;height: 130px;
|
|
|
|
|
- position: absolute; top: 0; bottom:0; left: 0; right: 0; margin: auto;
|
|
|
|
|
- b{display: block;line-height: 22px;height: 22px;margin-top: 10px;}
|
|
|
|
|
- span{display: block;line-height: 22px;height: 22px;}
|
|
|
|
|
- }
|
|
|
|
|
- b:nth-child(1){
|
|
|
|
|
- margin-top: -10px;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- /deep/ .el-table__body-wrapper::-webkit-scrollbar {
|
|
|
|
|
- display:block;
|
|
|
|
|
- width: 8px;
|
|
|
|
|
- height: 8px;
|
|
|
|
|
- background-color: rgba(245, 245, 245, 0.47);
|
|
|
|
|
- }
|
|
|
|
|
- /*定义滚动条的轨道，内阴影及圆角*/
|
|
|
|
|
- /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
|
|
|
|
|
- -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
|
|
|
|
|
- border-radius: 10px;
|
|
|
|
|
- background-color: #f5f5f5;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- /*定义滑块，内阴影及圆角*/
|
|
|
|
|
- /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
|
|
|
|
|
- /*width: 10px;*/
|
|
|
|
|
- height: 20px;
|
|
|
|
|
- border-radius: 10px;
|
|
|
|
|
- -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
|
|
|
|
|
- background-color: rgba(85, 85, 85, 0.25);
|
|
|
|
|
- }
|
|
|
|
|
-</style>
|
|
|
