<template>
  <div>
    <div class="menu-title">
      知识图谱质量评估
    </div>
    <div class="menu-content">
      <div>
        <el-form :inline="true" :model="qo" class="demo-form-inline">
          <el-form-item label="选择待评估图谱：">
            <el-select v-model="value" placeholder="选择待评估图谱" @change="handleSelectChange">
              <el-option
                  v-for="item in spaceList"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="indicator5(1)">开始采样</el-button>
            <el-button type="primary" icon="el-icon-search" @click="indicator5(2)">开始质量评估</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div v-if="tableShow == 1">
        <div class="result1">评估结果:</div>
        <el-table :data="indicator5Data.zb1" style="width: 60%">
          <el-table-column prop="sign1" label="指标">
            <template slot-scope="scope">
              {{ scope.row[0] }}
            </template>
          </el-table-column>
          <el-table-column prop="sign2" label="采样后的知识图谱">
            <template slot-scope="scope">
              {{ scope.row[1] }}
            </template>
          </el-table-column>
          <el-table-column prop="sign3" label="原始的知识图谱">
            <template slot-scope="scope">
              {{ scope.row[2] }}
            </template>
          </el-table-column>
        </el-table>
        <el-table :data="indicator5Data.zb2" style="width: 60%;margin-top: 40px">
          <el-table-column prop="sign1" label="指标">
            <template slot-scope="scope">
              {{ scope.row[0] }}
            </template>
          </el-table-column>
          <el-table-column prop="sign2" label="采样后的知识图谱">
            <template slot-scope="scope">
              {{ scope.row[1] }}
            </template>
          </el-table-column>
          <el-table-column prop="sign3" label="原始的知识图谱">
            <template slot-scope="scope">
              {{ scope.row[2] }}
            </template>
          </el-table-column>
        </el-table>
        <div class="result1" style="margin-top: 20px" v-if="cai.length > 0">
          <!--          使用采样数据集 预估评估误差{{indicator5Data.wc}}-->
          温馨小贴士：<br/><br/>
          {{ cai }}
        </div>
      </div>
      <div v-if="tableShow == 2">
        <div class="ping-box" v-if="ping.length > 0">
          温馨小贴士：<br/><br/>
          {{ ping }}
        </div>
        <el-row :gutter="20" style="margin-top: 30px">
          <el-col :span="15">
            <p>知识图谱评估结果整体展示</p>
            <div id="echart"></div>

          </el-col>
          <el-col :span="9">
            <div>
              <img :src="fileUrl+'/'+indicator5Data.rlt" style="width: 100%;margin-top: 30px" alt="">
            </div>
          </el-col>
        </el-row>
        <div style="margin-top: 30px;overflow: hidden">
          <el-table :data="indicator5Data.tjxx" style="width: 100%" border :span-method="objectSpanMethod">
            <el-table-column prop="weidu" label="维度" align="center"></el-table-column>
            <el-table-column prop="csbs" label="标识符" align="center">
              <template slot-scope="scope">
                <label v-if="scope.row.csbs">{{ scope.row.csbs }}</label>
                <label :style="scope.row.zhibiao.indexOf('总得分') != -1?'font-weight: bold;':''"
                       v-else>{{ scope.row.zhibiao }}</label>
              </template>
            </el-table-column>
            <el-table-column prop="zhibiao" label="指标" align="center">
              <template slot-scope="scope">
                <label v-if="scope.row.zhibiao.indexOf('总得分') == -1">{{ scope.row.zhibiao }}</label>
              </template>
            </el-table-column>
            <el-table-column prop="val" label="评估值" align="center"></el-table-column>
          </el-table>
        </div>
        <!--<el-row :gutter="20" style="margin-top: 30px;overflow: hidden">-->
        <!--<div style="float: left;width: 30%">-->
        <!--<p>时效性维度</p>-->
        <!--<el-table :data="indicator5Data.arr1" style="width: 100%">-->
        <!--<el-table-column prop="sign1" label="时效性评估指标">-->
        <!--<template slot-scope="scope">-->
        <!--<span>{{scope.row.zhibiao}}</span>-->
        <!--</template>-->
        <!--</el-table-column>-->
        <!--<el-table-column prop="sign2" label="评估值">-->
        <!--<template slot-scope="scope">-->
        <!--<span>{{scope.row.val}}</span>-->
        <!--</template>-->
        <!--</el-table-column>-->
        <!--</el-table>-->
        <!--</div>-->
        <!--<div style="float: left;width: 30%;margin: 0 5%">-->
        <!--<p>语法有效性维度</p>-->
        <!--<el-table :data="indicator5Data.arr2" style="width: 100%">-->
        <!--<el-table-column prop="sign1" label="语法有效性评估指标">-->
        <!--<template slot-scope="scope">-->
        <!--<span>{{scope.row.zhibiao}}</span>-->
        <!--</template>-->
        <!--</el-table-column>-->
        <!--<el-table-column prop="sign2" label="评估值">-->
        <!--<template slot-scope="scope">-->
        <!--<span>{{scope.row.val}}</span>-->
        <!--</template>-->
        <!--</el-table-column>-->
        <!--</el-table>-->
        <!--</div>-->
        <!--<div style="float: left;width: 30%">-->
        <!--<p>一致性维度</p>-->
        <!--<el-table :data="indicator5Data.arr3" style="width: 100%">-->
        <!--<el-table-column prop="sign1" label="一致性评估指标">-->
        <!--<template slot-scope="scope">-->
        <!--<span>{{scope.row.zhibiao}}</span>-->
        <!--</template>-->
        <!--</el-table-column>-->
        <!--<el-table-column prop="sign2" label="评估值">-->
        <!--<template slot-scope="scope">-->
        <!--<span>{{scope.row.val}}</span>-->
        <!--</template>-->
        <!--</el-table-column>-->
        <!--</el-table>-->
        <!--</div>-->
        <!--</el-row>-->
        <!--<el-row :gutter="20" style="margin-top: 30px;overflow: hidden">-->
        <!--<div style="float: left;width: 30%">-->
        <!--<p>简洁性维度</p>-->
        <!--<el-table :data="indicator5Data.arr4" style="width: 100%">-->
        <!--<el-table-column prop="sign1" label="简洁性评估指标">-->
        <!--<template slot-scope="scope">-->
        <!--<span>{{scope.row.zhibiao}}</span>-->
        <!--</template>-->
        <!--</el-table-column>-->
        <!--<el-table-column prop="sign2" label="评估值">-->
        <!--<template slot-scope="scope">-->
        <!--<span>{{scope.row.val}}</span>-->
        <!--</template>-->
        <!--</el-table-column>-->
        <!--</el-table>-->
        <!--</div>-->
        <!--<div style="float: left;width: 30%;margin: 0 5%">-->
        <!--<p>完整性维度</p>-->
        <!--<el-table :data="indicator5Data.arr5" style="width: 100%">-->
        <!--<el-table-column prop="sign1" label="完整性评估指标">-->
        <!--<template slot-scope="scope">-->
        <!--<span>{{scope.row.zhibiao}}</span>-->
        <!--</template>-->
        <!--</el-table-column>-->
        <!--<el-table-column prop="sign2" label="评估值">-->
        <!--<template slot-scope="scope">-->
        <!--<span>{{scope.row.val}}</span>-->
        <!--</template>-->
        <!--</el-table-column>-->
        <!--</el-table>-->
        <!--</div>-->
        <!--</el-row>-->
      </div>

    </div>
  </div>
</template>

<script>
import request, {getFileUrl} from '@/utils/request';

var _this;
export default {
  name: "graphAssessment",
  data() {
    return {
      spaceList: [],
      fileUrl: getFileUrl(),
      value: '',
      qo: {
        pageNo: 1,
        pageSize: 10,
        LIKES_name: '',
        EQI_sourceType: 1
      },
      result: {
        records: [],
        total: 1
      },
      indicator5Data: {},
      tableShow: '',
      spanArr: [],
      liArr: [],
      cai: '',
      ping: ''
    }
  },
  mounted() {
    _this = this;
    _this.queryData();
  },
  methods: {
    queryData() {
      request({
        url: '/indicator/indicator5_1',
        method: 'get',
        data: {}
      }).then(res => {
        _this.spaceList = res.data;
        _this.value = _this.spaceList[0].name;
        _this.indicator5(1);
      });
    },
    handleSelectChange() {
      _this.cai = "";
      _this.ping = "";
    },
    indicator5(type) {
      _this.tableShow = type;
      request({
        url: '/indicator/indicator5/' + _this.value,
        method: 'get',
        data: {}
      }).then(res => {
        if (type === 1) {
          if (_this.value === "DBPedia") {
            _this.cai = "从原始DBPedia知识图谱中抽样了6,067,531条知识得到采样后的DBPedia知识图谱，评估工作量降低了99.6%。";
          } else if (_this.value === "WikiData") {
            _this.cai = "从原始WikiData知识图谱中抽样了1,771,981条知识得到采样后的WikiData知识图谱，评估工作量降低了90.9%。";
          } else {
            _this.cai = "";
          }
        } else if (type === 2) {
          if (_this.value === "DBPedia") {
            _this.ping = "对抽样后的DBPedia知识图谱进行评估，其知识准确率为94.6%，知识准确率评估误差为0.04%。";
          } else if (_this.value === "WikiData") {
            _this.ping = "对抽样后的WikiData知识图谱进行评估，其知识准确率为85.7%，知识准确率评估误差为0.07%。";
          } else {
            _this.ping = "";
          }
        }


        let arr1 = [];
        let arr2 = [];
        let arr3 = [];
        let arr4 = [];
        let arr5 = [];
        res.data.tjxx.map(data1 => {
          if (data1.weidu == "时效性") {
            arr1.push(data1);
          } else if (data1.weidu == "语法有效性") {
            arr2.push(data1);
          } else if (data1.weidu == "一致性") {
            arr3.push(data1);
          } else if (data1.weidu == "简洁性") {
            arr4.push(data1);
          } else if (data1.weidu == "完整性") {
            arr5.push(data1);
          }
        })
        _this.indicator5Data = res.data;
        _this.indicator5Data.arr1 = arr1;
        _this.indicator5Data.arr2 = arr2;
        _this.indicator5Data.arr3 = arr3;
        _this.indicator5Data.arr4 = arr4;
        _this.indicator5Data.arr5 = arr5;
        _this.getSpanId(res.data.tjxx);
        if (type == 2) {
          _this.initEchart();
        }
      });
    },
    getSpanId(data) {
      this.spanArr = []
      this.liArr = []
      // data就是我们从后台拿到的数据
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          //spanArr 用于存放没一行记录的合并数
          this.spanArr.push(1);
          //pos是spanArr的索引
          this.pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].weidu === data[i - 1].weidu) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }

        if (data[i].zhibiao.indexOf('总得分') != -1) {
          this.liArr.push(i)
        }
      }
      console.log(this.liArr)
    },
    objectSpanMethod({row, column, rowIndex, columnIndex}) {
      if (columnIndex === 0) {

        const _row = this.spanArr[rowIndex];
        //如果行号大于0 合并
        const _col = _row > 0 ? 1 : 0;
        // console.log(`rowspan:${_row} colspan:${_col}`);
        return {
          // [0,0] 表示这一行不显示，
          rowspan: _row,
          colspan: _col
        };
      }

      if (this.liArr.indexOf(rowIndex) != -1) {
        if (columnIndex === 1) {
          return [1, 2];
        } else if (columnIndex === 2) {
          return [0, 0];
        }
      }
    },
    handleFileChange(file) {
      _this.fileList = [file];
    },
    // queryData() {
    //
    //   if(_this.value == 1) {
    //     _this.result.records = [ {
    //       sign1: '93%',
    //       sign2: '45%',
    //       sign3: '81%',
    //     }]
    //   } else {
    //     _this.result.records = [ {
    //       sign1: '90%',
    //       sign2: '40%',
    //       sign3: '88%',
    //     }]
    //   }
    // },
    initEchart() {
      let chart = _this.$echarts.init(document.getElementById("echart"));
      let echartArr1 = [];
      let echartArr2 = [];
      let echartArr3 = [];
      let echartArr4 = [];
      if (_this.indicator5Data.ld1) {
        _this.indicator5Data.ld1.map(data => {
          echartArr1.push({text: data.name, max: 1});
          echartArr2.push(data.val);
        })
      }
      if (_this.indicator5Data.ld2) {
        _this.indicator5Data.ld2.map(data => {
          echartArr3.push({text: data.name});
          echartArr4.push(data.val);
        })
      }
      var option = {
        // color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
        // title: {
        //   text: 'Customized Radar Chart'
        // },
        // legend: {},
        radar: [
          {
            indicator: echartArr3,
            center: ['75%', '50%'],
            radius: 120,
            startAngle: 90,
            splitNumber: 4,
            shape: 'circle',
            axisName: {
              formatter: '【{value}】',
              color: '#428BD4'
            },
            splitArea: {
              areaStyle: {
                // color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
                shadowColor: 'rgba(0, 0, 0, 0.2)',
                shadowBlur: 10
              }
            },
            axisLine: {
              lineStyle: {
                // color: 'rgba(211, 253, 250, 0.8)'
              }
            },
            splitLine: {
              lineStyle: {
                // color: 'rgba(211, 253, 250, 0.8)'
              }
            }
          },
          {
            indicator: echartArr1,
            center: ['25%', '50%'],
            radius: 120,
            axisName: {
              color: '#fff',
              backgroundColor: '#666',
              borderRadius: 3,
              padding: [3, 5]
            }
          }
        ],
        series: [
          {
            type: 'radar',
            emphasis: {
              lineStyle: {
                width: 4
              }
            },
            data: [
              {
                value: echartArr4,
                name: 'Data A'
              },
              // {
              //   value: [60, 5, 0.3, -100, 1500],
              //   name: 'Data B',
              //   // areaStyle: {
              //   //   color: 'rgba(255, 228, 52, 0.6)'
              //   // }
              // }
            ]
          },
          {
            type: 'radar',
            radarIndex: 1,
            data: [
              {
                value: echartArr2,
                name: 'Data C',
                // symbol: 'rect',
                // symbolSize: 12,
                // lineStyle: {
                //   type: 'dashed'
                // },
                // label: {
                //   show: true,
                //   formatter: function (params) {
                //     return params.value;
                //   }
                // }
              },
              // {
              //   value: [100, 93, 50, 90, 70, 60],
              //   name: 'Data D',
              //   // areaStyle: {
              //     // color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
              //     //   {
              //     //     color: 'rgba(255, 145, 124, 0.1)',
              //     //     offset: 0
              //     //   },
              //     //   {
              //     //     color: 'rgba(255, 145, 124, 0.9)',
              //     //     offset: 1
              //     //   }
              //     // ])
              //   // }
              // }
            ]
          }
        ]
      };
      chart.resize()
      chart.setOption(option);
    }
  }
}
</script>

<style lang="scss">
.ping-box {
  position: absolute;
  right: 200px;
  top: 25px;
  width: 650px;
}

.result1 {
  text-align: left;
  margin-top: 5px;
  margin-bottom: 15px;
  font-size: 16px;
  color: #5c5c5c;
}

#echart {
  width: 100%;
  height: 500px;
  margin-left: 30px;
}
</style>
