vue-elemnt-gin/src/views/echarts/echarts1.vue

<template>
  
  <div class="Echarts">
    <div v-if="echartsShow==1">
      <div class="gva-search-box">
      <el-form ref="searchForm" :inline="true" :model="searchInfo">
        <el-form-item label="考核指标">
          <el-select multiple @change='clickTarget' v-model="searchInfo.targetid" clearable placeholder="请选择考核维度">
                <el-option
                v-for="item in tableData"
                :key="item.outid"
                :label="item.title"
                :value="item.outid">
                </el-option>
            </el-select>
        </el-form-item>
         <el-form-item label="组织">
          <el-select multiple v-model="searchInfo.targetid" clearable placeholder="请选择组织">
                <el-option
                v-for="item in grouplist"
                :key="item.outid"
                :label="item.title"
                :value="item.outid">
                </el-option>
            </el-select>
        </el-form-item>
         <el-form-item label="时间">
          <el-select multiple v-model="searchInfo.targetid" clearable placeholder="请选择时间">
                <el-option
                v-for="item in timelist"
                :key="item.outid"
                :label="item.title"
                :value="item.outid">
                </el-option>
            </el-select>
        </el-form-item>
         <el-form-item label="计数方式">
          <el-select multiple v-model="searchInfo.targetid" clearable placeholder="请选择考核维度">
                <el-option
                v-for="item in timelist"
                :key="item.outid"
                :label="item.title"
                :value="item.outid">
                </el-option>
            </el-select>
        </el-form-item>
        <!-- <el-form-item label="考核维度状态">
          <el-select v-model="searchInfo.state" clearable placeholder="请选择状态">
            <el-option :value=1 label="正常">正常</el-option>
            <el-option :value=2 label="禁止">禁止</el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
          
        </el-form-item>
      </el-form>
    </div>
    <div id="main" style="width: 80%;height: 800px;"></div>
    </div>
    <div v-if="echartsShow==2" style="padding:50px;">
      <div class="gva-search-box">
        <el-form ref="searchForm" :inline="true" :model="searchVersion">
        <el-form-item label="所属公司">
          <el-select filterable v-model="searchVersion.group" clearable placeholder="请选择" @change="selectGroup">
            <el-option
              v-for="item in companyList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属部门">
          <el-cascader filterable clearable v-model="searchVersion.deaprtid" :options="departmentList" :show-all-levels="false" :props="props1"></el-cascader>
          
        </el-form-item>
        <el-form-item label="年度">
          <el-select v-model="searchVersion.year" placeholder="请选择">
            <el-option
              v-for="item in yearList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
          
        </el-form-item>
      </el-form>
      </div>
      <el-table height='725' style="width: 100%" :data="data" border :span-method="objectSpanMethod" :cell-style="{padding:'0px'}" >
        <el-table-column prop="departmentname" align="center" label="部门" width="80"></el-table-column>
        <el-table-column prop="dimensionname" align="center" label="考核维度" width="80"></el-table-column>
        <el-table-column prop="dimensionweight" label="维度权重" align="center" width="50"></el-table-column>
        <el-table-column prop="targetname" align="center" label="考核指标" width="100">
          <template slot-scope="scope">
            <el-link v-if="scope.row.type==1" type="primary" >{{scope.row.targetname}}</el-link>
            <div v-if="scope.row.type==2">{{scope.row.targetname}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="targetweight" label="指标权重" align="center" width="50"></el-table-column>
        
        <el-table-column prop="unit" label="单位" align="center" width="50"/>
        
        <el-table-column  prop="cycle" label="周期" align="center" width="80"> 
          <template slot-scope="scope">
            <el-tag v-if="scope.row.cycle==1">班</el-tag>
            <el-tag v-if="scope.row.cycle==2">天</el-tag>
            <el-tag v-if="scope.row.cycle==3">周</el-tag>
            <el-tag v-if="scope.row.cycle==4">月</el-tag>
            <el-tag v-if="scope.row.cycle==5">季度</el-tag>
            <el-tag v-if="scope.row.cycle==6">年</el-tag>
          </template>
        </el-table-column>
         <el-table-column align="center" prop="cycleattr" label="频次" width="80">
          <template slot-scope="scope">
            <div v-if="scope.row.cycle==1">每班{{scope.row.cycleattr}}次</div>
            <div v-if="scope.row.cycle==2">每天{{scope.row.cycleattr}}次</div>
            <div v-if="scope.row.cycle==3">每周{{scope.row.cycleattr}}次</div>
            <div v-if="scope.row.cycle==4">每月{{scope.row.cycleattr}}次</div>
            <div v-if="scope.row.cycle==5">每季度{{scope.row.cycleattr}}次</div>
            <div v-if="scope.row.cycle==6">每年{{scope.row.cycleattr}}次</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="执行部门" width="100">
            <template #default="scope">
              <el-collapse>
                <el-collapse-item title="详情">
                  <div v-for="(iteam,index) in scope.row.executivedepartment">
                    {{iteam}}
                  </div>
                </el-collapse-item>
              </el-collapse>
              <!-- <div v-for="item in scope.row.relevantdepartmentsmap" :key="item.key">{{item.title}}</div> -->
            </template>
        </el-table-column>
         <el-table-column align="center" label="分值名称" width="70">
            <template #default="scope">
              <div style='border-bottom: 1px solid #EBEEF5;' v-for='(item,index) in scope.row.statisticsname' :key='index'>
                {{item}}
              </div>
              <!-- <el-descriptions :column="1" border>
                <el-descriptions-item v-for='(item,index) in scope.row.statisticsname' :key='index'>{{item}}</el-descriptions-item>
                
              </el-descriptions> -->
              <!-- <div v-for="item in scope.row.relevantdepartmentsmap" :key="item.key">{{item.title}}</div> -->
            </template>
        </el-table-column>
        
        <!-- <el-table-column align="center" v-for="(iteam,index) in yueList" :key="index" :label="iteam">
           <template slot-scope="scope">
             <el-descriptions direction="vertical" :column="1" border>
                <el-descriptions-item :label="全奖值">{{scope.row}}</el-descriptions-item>
              </el-descriptions>
          </template>
        </el-table-column> -->
        <el-table-column align="center" v-for="(iteam,index) in yueList" :key="index" :label="iteam.title"  width="50">
          <el-table-column
            v-for="(iteam1,index1) in iteam.child"
            :key="index1"
            
            :label="iteam1.title"
            >
            <template slot-scope="scope">
              {{scope.row}}
              <!-- <template  v-for="(g,index2) in scope.row.score" >
                {{g.score[index].allprize}}
              </template> -->
              
            </template>
          </el-table-column>
          
          <!-- <template slot-scope="scope">
             <div style='border-bottom: 1px solid #EBEEF5;'>
              {{scope.row.score[index].allprize}}
            </div>
            <div style='border-bottom: 1px solid #EBEEF5;'>
              {{scope.row.score[index].zeroprize}}
            </div>
            <div style='border-bottom: 1px solid #EBEEF5;'>
              {{scope.row.score[index].scoreval}}
            </div>
            <div style='border-bottom: 1px solid #EBEEF5;'>
              {{scope.row.score[index].achievement}}
            </div>
            <div style='border-bottom: 1px solid #EBEEF5;'>
              {{scope.row.score[index].actualscore}}
            </div>
              
          </template> -->
          <!-- <el-descriptions :column="1" border>
                <el-descriptions-item ></el-descriptions-item>
                <el-descriptions-item >{{scope.row.score[index].zeroprize}}</el-descriptions-item>
                <el-descriptions-item >{{scope.row.score[index].scoreval}}</el-descriptions-item>
                <el-descriptions-item >{{scope.row.score[index].achievement}}%</el-descriptions-item>
                <el-descriptions-item >{{scope.row.score[index].actualscore}}</el-descriptions-item>
              </el-descriptions> -->
        </el-table-column>
        
       </el-table>
       
    </div>
    <!-- 得分弹框 -->
      <!-- <el-dialog :visible.sync="showUser" title="得分详情" width="50%">
        
        <el-table
          :data="userlistary"
          style="width: 100%">
          <el-table-column
            prop="date"
            label="头像">
            <template slot-scope="scope">
              <el-avatar shape="square" size="large" :src="scope.row.icon"></el-avatar>
            </template>
          </el-table-column>
          <el-table-column
            prop="number"
            label="工号">
          </el-table-column>
          <el-table-column
            prop="address"
            label="部门">
            <template slot-scope="scope">
              {{scope.row.groupname}}{{scope.row.departmentname}}
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名">
          </el-table-column>
        </el-table>
      </el-dialog> -->
  </div>
</template>
 
<script>
import {getquantechartorgandyear,getplanversionvalid} from '@/api/echarts/echarts'
import {
  grouplist,
  departmentlist,
  getgroupdepartmap,
  getgroupuser
} from '@/api/duty/group'
import { gettarget,addtarget,gettargetinfo,eiteassessinfo,eitetarget,deltarget } from '@/api/duty/project'
export default {
  name: 'Echarts',
  data(){
    return{
      lengthList:[],
      props1: {
        checkStrictly: true,
        value: "id",
        label: "name",
        children: "children",
        emitPath:false,
      },
      // 新条件查询变量
      searchVersion: {
        group: 2,
        deaprtid:'',
        year: "", //年
      },
      
      yueList:[
        // {
        //   title:'一月',
          
        // },
        //  {
        //   title:'二月',
          
        // },
        //  {
        //   title:'三月',
          
        // },
        //  {
        //   title:'四月',
          
        // },
        // {
        //   title:'5月',
          
        // },
         {
          title:'1月',
          child:[
            {title:'全奖值',prop:'scoreval'},
            {title:'零奖值',prop:'zeroprize'},
            {title:'封顶值',prop:'cappingval'},
            {title:'实际得分',prop:'actualscore'}
          ]
        },
         {
          title:'2月',
          child:[
            {title:'全奖值',prop:'scoreval'},
            {title:'零奖值',prop:'zeroprize'},
            {title:'封顶值',prop:'cappingval'},
            {title:'实际得分',prop:'actualscore'}
          ]
        },
         {
          title:'3月',
          child:[
            {title:'全奖值',prop:'scoreval'},
            {title:'零奖值',prop:'zeroprize'},
            {title:'封顶值',prop:'cappingval'},
            {title:'实际得分',prop:'actualscore'}
          ]
        },
        {
          title:'3月',
          child:[
            {title:'全奖值',prop:'scoreval'},
            {title:'零奖值',prop:'zeroprize'},
            {title:'封顶值',prop:'cappingval'},
            {title:'实际得分',prop:'actualscore'}
          ]
        },
      ],
      yearList:[{
          value: '2021',
          label: '2021'
        }, {
          value: '2022',
          label: '2022'
        }, {
          value: '2023',
          label: '2023'
        }, {
          value: '2024',
          label: '2024'
        }, {
          value: '2025',
          label: '2025'
        }, {
          value: '2026',
          label: '2026'
        }, {
          value: '2027',
          label: '2027'
        }, {
          value: '2028',
          label: '2028'
        }, {
          value: '2029',
          label: '2029'
        }, {
          value: '2030',
          label: '2030'
        }],
      // 公司列表
      companyList:[],
      departmentList:[],
      fenShow:false,
      data:[],
      echartsShow:2,
      tableData:[],
      searchInfo:{},
      searchData:'',
      pos:'',
      pos1:'',
      pos2:'',
      spanArr:[],
      spanArr1:[],
      spanArr2:[],
    }
  },
  created(){
    this.getDataList()
    this.getData()
    this.getGrouplist()
    this.initialDepartment()
  },
  // 监听数据
  watch: {
    data() {
      this.$nextTick(() => {
        this.spanArr=[],
        this.spanArr1=[],
        this.spanArr2=[],
        this.pos2='',
        this.pos='',
        this.pos1='',
        
        //此时就可以获取到在created赋值后的dataList了
        this.getSpanArr(this.data);
        this.getSpanArr1(this.data);
        this.getSpanArr2(this.data);
      });
    },
  },
  methods: {
    // 条件搜索
    onSubmit() {
      // this.searchInfo.page = 1
      // this.searchInfo.pagesize = 10
      // this.searchInfo.parentId=this.childInfo.outId
      this.getData()
    },
    // 初始化部门
    async initialDepartment(){
      
      const departmentFrom={
        // id:2
      }
      const res = await departmentlist(departmentFrom)
      this.departmentList=res.data
      
      
    },
    // 获取公司
    async getGrouplist(){
      const idFrom = {
        id:1
      }
      const res = await getgroupdepartmap(idFrom)
      this.companyList=res.data

    },
    // 选中的公司值
    async selectGroup(val){
      if (val!='') {
      const departmentFrom={
        id:parseInt(val)
      }
      const res = await departmentlist(departmentFrom)
      this.departmentList=res.data
      }
      
    },
    // 查看分数
    showFenList(row){
      this.fenShow=true
    },
    
    // 部门合并
    getSpanArr(data) {
        // data就是我们从后台拿到的数据
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].departmentid === data[i - 1].departmentid) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
      }
    },
    // 纬度合并
    getSpanArr1(data) {
        // data就是我们从后台拿到的数据
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr1.push(1);
          this.pos1 = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].dimension === data[i - 1].dimension) {
            this.spanArr1[this.pos1] += 1;
            this.spanArr1.push(0);
          } else {
            this.spanArr1.push(1);
            this.pos1 = i;
          }
        }
      }
    },
    // 指标合并
    getSpanArr2(data) {
        // data就是我们从后台拿到的数据
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr2.push(1);
          this.pos2 = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].target === data[i - 1].target) {
            this.spanArr2[this.pos2] += 1;
            this.spanArr2.push(0);
          } else {
            this.spanArr2.push(1);
            this.pos2 = i;
          }
        }
      }
    },
    // 合并行
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          // [0,0] 表示这一行不显示， [2,1]表示行的合并数
          rowspan: _row,
          colspan: _col
        };
      }
      if (columnIndex === 1||columnIndex === 2) {
        const _row = this.spanArr1[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          // [0,0] 表示这一行不显示， [2,1]表示行的合并数
          rowspan: _row,
          colspan: _col
        };
      }
      if (columnIndex === 3||columnIndex === 4||columnIndex === 5||columnIndex === 6||columnIndex === 7||columnIndex === 8||columnIndex === 9||columnIndex === 10) {
        const _row = this.spanArr2[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          // [0,0] 表示这一行不显示， [2,1]表示行的合并数
          rowspan: _row,
          colspan: _col
        };
      }
    },
    
    // 查询
    // onSubmit(){
      
    // },
    async clickTarget(val){
      const from = {
        targetid:val
      }
      const res = await getquantechartorgandyear(from)
      this.searchData = res.data.list
    },
    // 获取初始表格数据
    async getData() {
      this.searchVersion.group=this.searchVersion.group.toString()
      if (this.searchVersion.deaprtid!=null) {
        this.searchVersion.deaprtid=this.searchVersion.deaprtid.toString()
      }
      
      const res = await getplanversionvalid(this.searchVersion)
      this.data = res.data
      console.log(this.data)
      this.data.forEach(ele=>{
        this.lengthList.push(ele.score.length)
        
      })
      console.log("this.lengthList")
      console.log(this.lengthList)
      this.searchVersion= {
        group: 2,
        deaprtid:'',
        year: "", //年
      }
    },
    // 获取初始数据
    async getDataList() {
      const searchInfo = {
         page: 1,
         pagesize: 10000
      }
      const res = await gettarget(searchInfo)
      this.tableData = res.data
    },
    myEcharts(){
      var myChart = this.$echarts.init(document.getElementById('main'));
      //配置图表
      var option = {
  title: {
          text: ''
        },
  xAxis: {
    type: 'category',
    data: [
      "2021年",
			"2022年"
      ]
  },
  yAxis: {
    type: 'value'
  },
  tooltip: {},
  legend: {
          data: [
            "恒信高科 用电单耗达成率总值",
        "恒信高科 用电单耗达成率平均值",
        "恒信高科生产部 用电单耗达成率总值",
        "恒信高科生产部 用电单耗达成率平均值",
        "恒信高科 蒸汽单耗达成率总值",
        "恒信高科 蒸汽单耗达成率平均值",
        "恒信高科生产部 蒸汽单耗达成率总值",
        "恒信高科生产部 蒸汽单耗达成率平均值"
            ]
  },
  series: [
    {
      name:"恒信高科 用电单耗达成率总值",
      
      data: [
          0,
					50
        ],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
      label:{
          show:true,
          position:'insideBottom',
          color:'#000000',
          formatter:function(params){
            let txtArry = params.seriesName.split('');
            let rs = "";
            for(var i=0;i < txtArry.length; i++ ){
              rs += txtArry[i] + "\n";
            }
            return rs;
          }
      }
    },
    {
      name:"恒信高科 用电单耗达成率平均值",
      data: [
        0,
					50
        ],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
      label:{
          show:true,
          position:'insideBottom',
          color:'#000000',
          formatter:function(params){
            let txtArry = params.seriesName.split('');
            let rs = "";
            for(var i=0;i < txtArry.length; i++ ){
              rs += txtArry[i] + "\n";
            }
            return rs;
          }
      }
    },
    ,
    {
      name:"恒信高科生产部 用电单耗达成率总值",
      data: [
        0,
					50
        ],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
      label:{
          show:true,
          position:'insideBottom',
          color:'#000000',
          formatter:function(params){
            let txtArry = params.seriesName.split('');
            let rs = "";
            for(var i=0;i < txtArry.length; i++ ){
              rs += txtArry[i] + "\n";
            }
            return rs;
          }
      }
    },
    {
      name:"恒信高科生产部 用电单耗达成率平均值",
      data: [
        0,
					50
        ],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
      label:{
          show:true,
          position:'insideBottom',
          color:'#000000',
          formatter:function(params){
            let txtArry = params.seriesName.split('');
            let rs = "";
            for(var i=0;i < txtArry.length; i++ ){
              rs += txtArry[i] + "\n";
            }
            return rs;
          }
      }
    },
    {
      name:"恒信高科 蒸汽单耗达成率总值",
      data: [
        0,
					60
        ],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
      label:{
          show:true,
          position:'insideBottom',
          color:'#000000',
          formatter:function(params){
            let txtArry = params.seriesName.split('');
            let rs = "";
            for(var i=0;i < txtArry.length; i++ ){
              rs += txtArry[i] + "\n";
            }
            return rs;
          }
      }
    },
    {
      name:"恒信高科 蒸汽单耗达成率平均值",
      data: [
        0,
					60
        ],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
      label:{
          show:true,
          position:'insideBottom',
          color:'#000000',
          formatter:function(params){
            let txtArry = params.seriesName.split('');
            let rs = "";
            for(var i=0;i < txtArry.length; i++ ){
              rs += txtArry[i] + "\n";
            }
            return rs;
          }
      }
    },
    {
      name:"恒信高科生产部 蒸汽单耗达成率总值",
      data: [
        0,
					60
        ],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
      label:{
          show:true,
          position:'insideBottom',
          color:'#000000',
          formatter:function(params){
            let txtArry = params.seriesName.split('');
            let rs = "";
            for(var i=0;i < txtArry.length; i++ ){
              rs += txtArry[i] + "\n";
            }
            return rs;
          }
      }
    },
    {
      name:"恒信高科生产部 蒸汽单耗达成率平均值",
      data: [
        0,
					1069.67
        ],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
      label:{
          show:true,
          position:'insideBottom',
          color:'#000000',
          formatter:function(params){
            let txtArry = params.seriesName.split('');
            let rs = "";
            for(var i=0;i < txtArry.length; i++ ){
              rs += txtArry[i] + "\n";
            }
            return rs;
          }
      }
    }
    
  ]
};
      myChart.setOption(option);
    }
  },
  mounted(){
    // this.myEcharts();
    
  },
  
}
</script>
 
<style lang="scss" scoped>
 ::v-deep.el-table .cell{
   padding-right: 0px !important;
   padding-left: 0px !important;
 }
</style>