yiliangyiyun-pc-jj/src/views/profitable/contractprofits.vue

//合同利润
<template>
  <div class="container">
    <!-- <el-row class="row_top">
      <el-col :span="12">
        <h2 class="bg-left title">盈收概览</h2>
      </el-col>
      <el-col :span="12" class="bg-right"></el-col>
    </el-row> -->
    <div class="center">
      <el-row class='row_top'>
      <el-col :span="12">
        <div class="datascreen">
        <el-date-picker v-model="value" type="daterange" align="right" unlink-panels range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
        </el-date-picker>
        


        
      </div>
      </el-col>
      <el-col :span="12" class="bg-right"><el-button type='primary' @click='detail'>利润详情</el-button></el-col>
    </el-row>
      <div class="chart_css">
        <div class="table">
          <div ref="myEchart7" style="height: 410px;"></div>
        </div>
        <div class="makeWord_css">
          <!-- <div ref="myEchart6" style="height: 410px"></div> -->
        </div>
      </div>
      <div class="table_css">
        <div style='margin:0 auto;' ><div class='title' style='margin-bottom:10px;'>合同利润汇总表</div>
        <div class='time' style=''>{{value[0]}}-{{value[1]}}</div></div>
        <ws-form>
          <ws-info-table>
          <ws-form-item label="采购重量（吨）" span="1" prop="contractNo" class="readonly">
            
          </ws-form-item>
          <ws-form-item label="销售重量（吨）" span="1" prop="settlementMethod">
            
          </ws-form-item>
          <ws-form-item label="支付粮款（万元）" span="1" prop="contractNo" class="readonly">
            
          </ws-form-item>
          <ws-form-item label="收入粮款（万元）" span="1" prop="settlementMethod">
            
          </ws-form-item>
          <ws-form-item label="其他支付（万元）" span="1" prop="contractNo" class="readonly">
            
          </ws-form-item>
          <ws-form-item label="其他收入（万元）" span="1" prop="settlementMethod">
            
          </ws-form-item>
          <ws-form-item label="运费（万元）" span="1" prop="contractNo" class="readonly">
            
          </ws-form-item>
          <ws-form-item label="总利润（万元）" span="1" prop="settlementMethod">
            
          </ws-form-item>
        </ws-info-table>
        </ws-form>
        
        
        <!-- <el-table :data="valueData" style="width: 100%">
          <el-table-column prop="date" label="货名/货值" min-width="110">
            <div slot-scope="scope">
              <span v-if="scope.$index == 0">期初货值（元）</span>
              <span v-if="scope.$index == 1">期末货值（元）</span>
            </div>

          </el-table-column>
          <el-table-column prop="date" label="玉米"></el-table-column>
          <el-table-column prop="date" label="玉米"></el-table-column>
          <el-table-column prop="date" label="玉米"></el-table-column>
          <el-table-column prop="date" label="货名"></el-table-column>
          <el-table-column prop="date" label="货名"></el-table-column>
          <el-table-column prop="date" label="货名"></el-table-column>
          <el-table-column prop="date" label="货名"></el-table-column>
          <el-table-column prop="date" label="货名"></el-table-column>
          <el-table-column prop="date" label="货名"></el-table-column>
          <el-table-column prop="date" label="合计" min-width="130">
            <div slot-scope="scope">
              <span v-if="scope.$index == 0">合计：</span>
              <span v-if="scope.$index == 1">合计：1000000000</span>
            </div>
          </el-table-column>
        </el-table> -->

      </div>
    </div>
  </div>
</template>
<script>
  import {} from '@/model/profitable/index'
  export default {
    components: {},
    data() {
      return {
        value: [],
        profitList: [{
          name: "玉米",
          count: 2000,
        }],
        deptBudgetList:{},
        makeWordData: {},
        valueData: [{
            date: 10
          },
          {
            date: 20
          }
        ], //货值

      }
    },
    activated() {
      this.makeWordData = this.getData(2)
      this.initCharts()
      this.getPassYearFormatDate()
      this.getList()
    },
    methods: {
      getList() {
        // getceshi({
        //  driverId:'8f1f3c624d7946d79a9d44a4057d969b'
        // })
        // .toPromise()
        // .then((response) => {
        // debugger
        // console.log(response)
        // })

      },
      detail(){
        this.$router.push({name:'contractprofitsdetails'})
      },
      getPassYearFormatDate() {
        var nowDate = new Date()
        var _date = new Date()
        var year = nowDate.getFullYear()-1
        var year1 = _date.getFullYear()
        var month = nowDate.getMonth() + 1
        var month1 = _date.getMonth() + 1
        var strDate = nowDate.getDate()
        var strDate1 = _date.getDate()
        if (month >= 1 && month <= 9) {
          month = '0' + month
        }
        if (month1 >= 1 && month1 <= 9) {
          month1 = '0' + month1
        }

        if (strDate >= 0 && strDate <= 9) {
          strDate = '0' + strDate
        }
        if (strDate1 >= 0 && strDate1 <= 9) {
          strDate1 = '0' + strDate1
        }
        this.startDate = year + '-' + month + '-' + strDate
        this.endDate = year1 + '-' + month1 + '-' + strDate1
        this.value = [this.startDate, this.endDate]
      },
      pickerOptions() {

      },
      initCharts() {
        let app = this;
        let myChart7 = app.$echarts.init(this.$refs.myEchart7);
        var option;
        option = {
            // title: {
            //   text: 'Rainfall vs Evaporation',
            //   subtext: 'Fake Data'
            // },
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: ['支出', '收入']
            },
            toolbox: {
              show: true,
              feature: {
                dataView: {
                  show: false,
                  readOnly: false
                },
                magicType: {
                  show: false,
                  type: ['line', 'bar']
                },
                restore: {
                  show: false
                },
                saveAsImage: {
                  show: false
                }
              }
            },
            calculable: true,
            xAxis: [{
              name: '种类',
              type: 'category',
              // prettier-ignore
              data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct']
            }],
            yAxis: [{
              name: '利润（万元）',
              type: 'value'
            }],
            series: [{
                name: '支出',
                type: 'bar',
                right: 0,
                // label: {
                //   show: true,
                //   position: 'inside'
                // },
                 label: {
                  show: true,
                  precision: 1,
                  position: 'top',
                  valueAnimation: true,
                  fontFamily: 'monospace'
                },
                data: [
                  6.0, 60.9, 90.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0
                ],
                color: ['#5878E8 '],
                formatter: '{value} 元',

              },
              {
                name: '收入',
                type: 'bar',
                right: 20,
                label: {
                  show: true,
                  precision: 1,
                  position: 'top',
                  valueAnimation: true,
                  fontFamily: 'monospace'
                },
                data: [
                  102.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8
                ],
                color: ['#FF9F24'],
                formatter: '{value} 元',
              }
            ]
          },
          myChart7.setOption(option)
      },
      getData(count) {
        // prettier-ignore
        const nameList = [
          '支出', '收入'
        ];
        const legendData = [];
        const seriesData = [];
        for (var i = 0; i < count; i++) {
          var name = nameList[i]
          // Math.random() > 0.65 ?  makeWord(4, 1) + '·' + makeWord(3, 0) :  makeWord(2, 1);
          legendData.push(name);
          seriesData.push({
            name: name,
            value: Math.round(Math.random() * 100000)
          });
        }

        return {
          legendData: legendData,
          seriesData: seriesData
        };

        // function makeWord(max, min) {
        //   debugger
        //   const nameLen = Math.ceil(Math.random() * max + min);
        //   const name = [];
        //   for (var i = 0; i < nameLen; i++) {
        //     name.push(nameList[Math.round(Math.random() * nameList.length - 1)]);
        //   }
        //   return name.join('');
        // }

      }
    },
  }
</script>
<style lang="scss" scoped>
/deep/.ws-info-table{
  border-left: 1px solid #D8DCE6;
  border-top: 1px solid #D8DCE6;
.el-form-item {
    border-right: 1px solid #D8DCE6;
    border-bottom: 1px solid #D8DCE6;
}
}
/deep/.ws-info-table .el-form-item .el-form-item__label {
    background-color: #F6F7FB;
}
  .container {
    background: #E8ECF6;
  }

  .center {
    margin: 0 auto;
    background: #ffffff;
    height: calc(100vh - 13vh);
    border-radius: 4px;
    margin-top: 10px;
    overflow:scroll;
  }

  .row_top {
    // background: #F6F7FC;
    border-radius: 4px;

    .bg-left {
      padding-left: 30px;
    }

  .bg-right {
      padding-right: 10px;
      text-align: right;
      height:60px;
      padding-top:15px;
    }
  }

  .datascreen {
    // margin-top: 10px;
    width: 500px;
    height: 60px;
    line-height: 60px;
    margin-left: 30px;

  }

  .chart_css {
    display: flex;
    height: 410px;

    .table {
      width: 70%;
      height: 410px;
    }

    .makeWord_css {
      width: 30%;
      height: 410px;
      margin-left: 30px;
    }
  }

  .table_css {

    text-align:center;
    margin-bottom:30px;
  }
  .flex-between{
    justify-content: space-between;
  }
  /deep/.el-form{
    width:90%;
    margin:0 auto;
  }
  /deep/.el-form-item {
    width: 50%;
}
.title{
  background:#F6F7FC;
  padding:20px 10px;
  text-align:left;
  position:relative;
  font-size:18px;
}
.title::before{
  content:'';
  display:block;
  background:#5473E8;
  width:5px;height:30px;
  position:absolute;
  left:0;
  top:50%;
  transform: translateY(-50%);
}
.time{
  text-align:right;
  width:90%;
  margin:10px auto;
  color:#8890B1;
}
</style>