|
|
@@ -0,0 +1,295 @@
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="MaterialStatistics_Contain">
|
|
|
+ <el-radio-group v-model="currentMenu" style="margin-bottom: 20px;" @input="toModule">
|
|
|
+ <el-radio-button label="0">用料统计</el-radio-button>
|
|
|
+ <el-radio-button label="1">进度统计</el-radio-button>
|
|
|
+ <el-radio-button label="2">可视化统计</el-radio-button>
|
|
|
+ <el-radio-button label="3">可视化进度</el-radio-button>
|
|
|
+ </el-radio-group>
|
|
|
+ <!-- <div class="topContain">-->
|
|
|
+ <div style="width: 100%;height: 100%;display: flex;">
|
|
|
+ <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
|
|
+ <el-form-item label="工程周期" prop="enginCycle">
|
|
|
+ <el-select v-model="queryParams.enginCycle" filterable clearable placeholder="请选择规格"
|
|
|
+ @change="getsumStatus(queryParams.enginCycle)"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="dict in dict.type.engin_cycle"
|
|
|
+ :key="dict.value"
|
|
|
+ :label="dict.label"
|
|
|
+ :value="dict.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div style="height: 800px;width: 1700px">
|
|
|
+<div id="main" style="height: 100%;width: 100%"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import * as echarts from 'echarts';
|
|
|
+import {getsumStatus} from "@/api/zdsz/overhead";
|
|
|
+export default {
|
|
|
+ name:'EchartsStatistics',
|
|
|
+ dicts:['engin_cycle'],
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ currentMenu:2, // 0:用料管理 1:进度统计 2:可视化进度
|
|
|
+ showSearch:true,
|
|
|
+ queryParams:{enginCycle:'0'},
|
|
|
+ option:{
|
|
|
+ backgroundColor: '#feffff',
|
|
|
+ title: {
|
|
|
+ text: '',
|
|
|
+ left: 'center',
|
|
|
+ top: 20,
|
|
|
+ textStyle: {
|
|
|
+ color: '#ccc'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item'
|
|
|
+ },
|
|
|
+ visualMap: {
|
|
|
+ show: false,
|
|
|
+ min: 80,
|
|
|
+ max: 600,
|
|
|
+ inRange: {
|
|
|
+ colorLightness: [0, 1]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: 'Access From',
|
|
|
+ type: 'pie',
|
|
|
+ radius: '55%',
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ data: [
|
|
|
+ { value: 335, name: 'Direct' },
|
|
|
+ { value: 310, name: 'Email' },
|
|
|
+ { value: 274, name: 'Union Ads' },
|
|
|
+ { value: 235, name: 'Video Ads' },
|
|
|
+ { value: 400, name: 'Search Engine' }
|
|
|
+ ],
|
|
|
+ roseType: 'radius',
|
|
|
+ label: {
|
|
|
+ color: 'rgba(255, 255, 255, 0.3)'
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(255, 255, 255, 0.3)'
|
|
|
+ },
|
|
|
+ smooth: 0.2,
|
|
|
+ length: 10,
|
|
|
+ length2: 20
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: '#e81610',
|
|
|
+ shadowBlur: 200,
|
|
|
+ shadowColor: 'rgba(241,9,9,0.5)'
|
|
|
+ },
|
|
|
+ animationType: 'scale',
|
|
|
+ animationEasing: 'elasticOut',
|
|
|
+ animationDelay: function (idx) {
|
|
|
+ return Math.random() * 200;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ this.getsumStatus(0)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getsumStatus(val)
|
|
|
+ {
|
|
|
+ getsumStatus(val).then(res=>{
|
|
|
+ let data=[{
|
|
|
+ value: parseInt(res.data.done),name:'完工数量'
|
|
|
+ },{
|
|
|
+ value: parseInt(res.data.notstart),name:'未开工数量'
|
|
|
+ },{
|
|
|
+ value: parseInt(res.data.willDone),name:'未完工数量'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ let option={
|
|
|
+ backgroundColor: '#feffff',
|
|
|
+ title: {
|
|
|
+ text: '',
|
|
|
+ left: 'center',
|
|
|
+ top: 20,
|
|
|
+ textStyle: {
|
|
|
+ color: '#dc0e0e'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item'
|
|
|
+ },
|
|
|
+ visualMap: {
|
|
|
+ show: false,
|
|
|
+ min: 0,
|
|
|
+ max: 800000,
|
|
|
+ inRange: {
|
|
|
+ colorLightness: [0, 1]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '',
|
|
|
+ type: 'pie',
|
|
|
+ radius: '55%',
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ data: data.sort(function (a, b) {
|
|
|
+ return a.value - b.value;
|
|
|
+ }),
|
|
|
+ roseType: 'radius',
|
|
|
+ label: {
|
|
|
+ color: 'rgb(1,11,17)'
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgb(32,155,229)'
|
|
|
+ },
|
|
|
+ smooth: 0.2,
|
|
|
+ length: 10,
|
|
|
+ length2: 20
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: '#98201d',
|
|
|
+ shadowBlur: 200,
|
|
|
+ shadowColor: 'rgb(254,255,255)'
|
|
|
+ },
|
|
|
+ animationType: 'scale',
|
|
|
+ animationEasing: 'elasticOut',
|
|
|
+ animationDelay: function (idx) {
|
|
|
+ return Math.random() * 200;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ this.initmian(option)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ initmian(option)
|
|
|
+ {
|
|
|
+ console.log(option)
|
|
|
+ var chartDom = document.getElementById('main');
|
|
|
+ var myChart = echarts.init(chartDom);
|
|
|
+ myChart.clear()
|
|
|
+ myChart.setOption(option,true)
|
|
|
+ },
|
|
|
+ toModule(){
|
|
|
+ console.log(this.$router)
|
|
|
+ const currentPage = this.currentMenu == 0 ? 'material_statistics' : this.currentMenu == 1 ? 'progres_statistics' :this.currentMenu == 2 ? 'echarts_statistics': 'progres_visual'
|
|
|
+ this.$router.push({
|
|
|
+ path:`/${currentPage}`
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.tags-view-container{
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+.MaterialStatistics_Contain{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 1%;
|
|
|
+ .topContain{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+
|
|
|
+ ::v-deep .projectSelect{
|
|
|
+ width: 16%;
|
|
|
+ .el-input__inner{
|
|
|
+ // font-size: 15px;
|
|
|
+ // height: 40px ;
|
|
|
+ // background-color: #1890FF;
|
|
|
+ background: linear-gradient(to right, #2197F2, #0BB0DE);
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .districtSelect{
|
|
|
+ width: 200px;
|
|
|
+ }
|
|
|
+ ::v-deep .communitySelect{
|
|
|
+ margin-left: 2%;
|
|
|
+ width: 200px;
|
|
|
+ }
|
|
|
+ ::v-deep .projectSelect:not(:nth-child(1)){
|
|
|
+ margin-left: 1%;
|
|
|
+ }
|
|
|
+ ::v-deep .projectSelect:nth-child(3){
|
|
|
+ width: 10%;
|
|
|
+ }
|
|
|
+ ::v-deep .projectSelect:nth-child(4){
|
|
|
+ width: 10%;
|
|
|
+ }
|
|
|
+ .projectDropDown{
|
|
|
+ background-color: #1890FF;
|
|
|
+ .el-select-dropdown__item{
|
|
|
+ background-color: #1890FF;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ ::v-deep .el-select-dropdown__list {
|
|
|
+ padding-top: 0 !important;
|
|
|
+ padding-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .projectDropDown >ul{
|
|
|
+ padding-top: 0 ;
|
|
|
+ padding-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .materialStatisticsTable{
|
|
|
+ margin-top: 1%;
|
|
|
+ border: 2px solid #000066 !important;
|
|
|
+
|
|
|
+ }
|
|
|
+ .materialStatisticsTable::before{
|
|
|
+ background-color:#000066 ;
|
|
|
+ }
|
|
|
+ .materialStatisticsTable::after{
|
|
|
+ background-color:#000066 ;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.customTable{
|
|
|
+ .el-table__header-wrapper th{
|
|
|
+ background-color: #199ED8;
|
|
|
+ }
|
|
|
+ .el-table--border th.el-table__cell{
|
|
|
+ border: 2px solid #000066 !important;
|
|
|
+ }
|
|
|
+ .el-table__empty-block{
|
|
|
+ background-color: #199ED8;
|
|
|
+ }
|
|
|
+ .el-table__empty-text{
|
|
|
+ color: #000066;
|
|
|
+ }
|
|
|
+ .el-table__cell{
|
|
|
+ background-color: #199ED8 ;
|
|
|
+ border: 2px solid #000066 !important;
|
|
|
+ }
|
|
|
+ .el-table__cell >div{
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .el-button{
|
|
|
+ background-color: #169BD5;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|
wangtong