<template>
  <div class="app-container">
    <h2>{{ taskName }}数据列表</h2>
    <h3>样品数量：{{ total }}</h3>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <!--      <el-form-item label="任务ID" prop="taskId">-->
      <!--        <el-input-->
      <!--          v-model="queryParams.taskId"-->
      <!--          placeholder="请输入任务ID"-->
      <!--          clearable-->
      <!--          @keyup.enter.native="handleQuery"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <el-form-item label="样品名称" prop="sampleName">
        <el-input
          v-model="queryParams.sampleName"
          placeholder="请输入样品名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <!--      <el-form-item label="任务数据" prop="data">-->
      <!--        <el-input-->
      <!--          v-model="queryParams.data"-->
      <!--          placeholder="请输入任务数据"-->
      <!--          clearable-->
      <!--          @keyup.enter.native="handleQuery"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <el-form-item label="是否组长" prop="groupLeader">
        <el-select v-model="queryParams.groupLeader" placeholder="请选择是否组长">
          <el-option label="是" value="是"/>
          <el-option label="否" value="否"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['ggpx:TaskData:add']"
          v-if="this.$route.query.status==1"
        >新增样品
        </el-button>
      </el-col>
      <!--      <el-col :span="1.5">-->
      <!--        <el-button-->
      <!--          type="success"-->
      <!--          plain-->
      <!--          icon="el-icon-edit"-->
      <!--          size="mini"-->
      <!--          :disabled="single"-->
      <!--          @click="handleUpdate"-->
      <!--          v-hasPermi="['ggpx:TaskData:edit']"-->
      <!--        >修改-->
      <!--        </el-button>-->
      <!--      </el-col>-->
      <!--      <el-col :span="1.5">-->
      <!--        <el-button-->
      <!--          type="danger"-->
      <!--          plain-->
      <!--          icon="el-icon-delete"-->
      <!--          size="mini"-->
      <!--          :disabled="multiple"-->
      <!--          @click="handleDelete"-->
      <!--          v-hasPermi="['ggpx:TaskData:remove']"-->
      <!--        >删除-->
      <!--        </el-button>-->
      <!--      </el-col>-->
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-view"
          size="mini"
          @click="handleStatistics"
          v-hasPermi="['ggpx:TaskDataStatistics:query']"
        >统计分析
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-view"
          size="mini"
          @click="handleDataShow"
          v-hasPermi="['ggpx:TaskDataStatistics:query']"
        >数据展示
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExportToExcel"
          v-hasPermi="['ggpx:TaskData:export']"
        >导出数据
        </el-button>
      </el-col>
      <!--      <el-col :span="1.5">-->
      <!--        <el-button-->
      <!--          type="warning"-->
      <!--          plain-->
      <!--          icon="el-icon-download"-->
      <!--          size="mini"-->
      <!--          @click="handleExport"-->
      <!--          v-hasPermi="['ggpx:TaskData:export']"-->
      <!--        >导出-->
      <!--        </el-button>-->
      <!--      </el-col>-->
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-close"
          size="mini"
          @click="handleClose"
        >关闭
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="TaskDataList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <!--      <el-table-column label="ID" align="center" prop="id" />-->
      <!--      <el-table-column label="任务ID" align="center" prop="taskId" />-->
      <el-table-column label="样品名称" align="center" prop="sampleName"></el-table-column>
      <!--      <el-table-column label="任务数据" align="center" prop="data"/>-->
      <el-table-column label="总分" align="center" v-if="totalValColumn">
        <template slot-scope="scope">
          {{ scope.row.totalVal }}
        </template>
      </el-table-column>
      <el-table-column label="质量水平" align="center" v-if="qualityColumn">
        <template slot-scope="scope">
          {{ scope.row.quality }}
        </template>
      </el-table-column>
      <el-table-column label="是否组长" align="center" prop="groupLeader">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.groupLeader === '是'" type="success">是</el-tag>
          <el-tag v-if="scope.row.groupLeader === '否'" type="info">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" min-width="100">
      </el-table-column>
      <!--      <el-table-column label="状态" align="center" prop="status"/>-->
      <!--      <el-table-column label="备注" align="center" prop="remark"/>-->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['ggpx:TaskData:edit']"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['ggpx:TaskData:remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog title="数据展示" :visible.sync="openDataShow" fullscreen append-to-body>
      <!--      <el-button @click="getAllDataShowColumns">显示所有列</el-button>-->
      <!--      <el-button @click="getMainDataShowColumns">显示主要列</el-button>-->
      <el-table stripe :data="DataShowList" height="600"
                :default-sort="{prop: '总分', order: 'descending'}">
        <el-table-column v-for="(item,index) in DataShowColumns" align="center"
                         :prop="item" :label="item"
                         :sortable="DataShowColumnSort[index] === 'number'"
                         :min-width="item==='品质描述'? 120:60 || item==='样本名称'? 90:60"
                         :min-height="100"
                         :fixed="item==='样本名称' || item==='品质描述' || item==='总分' || item==='质量水平'"
        ></el-table-column>
      </el-table>
    </el-dialog>

    <!-- 添加或修改任务数据对话框 -->
    <el-dialog :title="title" :visible.sync="open" fullscreen append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <!--        <el-form-item label="任务ID" prop="taskId">-->
        <!--          <el-input v-model="form.taskId" placeholder="请输入任务ID"/>-->
        <!--        </el-form-item>-->
        <el-form-item label="样品名称" prop="sampleName">
          <el-input v-model="form.sampleName" placeholder="请输入样品名称"/>
        </el-form-item>
        <!-- 遍历fields,动态创建表单 -->
        <div v-for="(field, index) in fields" :key="index">
          <div v-if="!field.children">
            <el-divider></el-divider>
            <el-form-item :label="field.fieldName" :prop="field.fieldName">
              <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 8}" v-if="field.fieldType === 'textarea'"
                        v-model="field.value"/>
              <el-input v-if="field.fieldType === 'input'" v-model="field.value"/>
              <el-input-number v-if="field.fieldType === 'number'" v-model="field.value" :min="0" :step="0.5"
                               :max="field.maxVal"/>
              <div v-if="field.fieldType === 'number'">满分:{{ field.maxVal }}</div>
              <el-radio-group v-if="field.fieldType === 'radio_sf'" v-model="field.value">
                <el-radio label="是">是</el-radio>
                <el-radio label="否">否</el-radio>
              </el-radio-group>
              <el-radio-group v-if="field.fieldType === 'radio_diy'" v-model="field.value">
                <el-radio style="margin-top: 15px" v-for="(item,index) in field.remark.split('/')" :label="item">
                  {{ item }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div v-if="field.children && field.children.length > 0">
            <el-divider></el-divider>
            <h3 style="color: #1c84c6">{{ field.fieldName }}</h3>
            <div v-for="(field, index) in field.children" :key="index">
              <el-form-item :label="field.fieldName" :prop="field.fieldName">
                <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 8}" v-if="field.fieldType === 'textarea'"
                          v-model="field.value" placeholder="请输入内容"/>
                <el-input v-if="field.fieldType === 'input'" v-model="field.value"/>
                <el-input-number v-if="field.fieldType === 'number'" v-model="field.value" :min="0"
                                 :max="field.maxVal" :step="0.5"/>
                <div v-if="field.fieldType === 'number'">满分:{{ field.maxVal }}</div>
                <el-radio-group v-if="field.fieldType === 'radio_sf'" v-model="field.value">
                  <el-radio label="是">是</el-radio>
                  <el-radio label="否">否</el-radio>
                </el-radio-group>
                <el-radio-group v-if="field.fieldType === 'radio_diy'" v-model="field.value">
                  <el-radio style="margin-top: 15px" v-for="(item,index) in field.remark.split('/')" :label="item">
                    {{ item }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
          </div>
        </div>
        <el-divider></el-divider>
        <!--        <el-form-item label="任务数据" prop="data">-->
        <!--          <el-input v-model="form.data" placeholder="请输入任务数据"/>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="组长" prop="groupLeader">-->
        <!--          <el-radio-group v-model="form.groupLeader">-->
        <!--            <el-radio label="是">是</el-radio>-->
        <!--            <el-radio label="否">否</el-radio>-->
        <!--          </el-radio-group>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="备注" prop="remark">-->
        <!--          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>-->
        <!--        </el-form-item>-->
      </el-form>
      <div class="vertical-center" v-if="totalValColumn">
        <div class="content">
          <div>
            <el-tag class="transparent-tag" effect="plain">满分:{{ maxVal }}</el-tag>
          </div>
          <div>
            <el-tag class="transparent-tag" type="success" effect="plain">总分:{{ totalVal }}</el-tag>
          </div>
          <div>
            <el-tag class="transparent-tag" type="info" effect="plain">其他:{{ otherVal }}</el-tag>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog ref="statistics" title="统计分析" :visible.sync="openStatistics" fullscreen
               append-to-body>
      <div v-if="openStatistics">
        <h2 v-if="!statistics">
          此评价未建立统计分析方法
        </h2>
        <div v-if="statistics">
          <div>
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExportToExcelStatistics"
              v-hasPermi="['ggpx:TaskDataStatistics:query']"
              v-if="checkRole(['admin'])"
            >导出统计分析源数据
            </el-button>
            <!-- 雷达图 -->
            <div style="width: 400px; height: 400px" v-if="statistics.includes('radar')">
              <h2>雷达图</h2>
              <ve-radar :data="radarData" :settings="radarSet"></ve-radar>
            </div>
            <!-- 主成分分析 -->
            <div style="width: 400px; height: 400px" v-if="statistics.includes('pca')">
              <h2>主成分分析</h2>
              <el-image :src="'/statistics/pca/'+this.$route.params.taskId+'?ids='+this.ids"
                        :preview-src-list="['/statistics/pca/'+this.$route.params.taskId+'?ids='+this.ids]">
                <div slot="placeholder" class="image-slot">
                  正在分析中<span class="dot">...</span>
                </div>
              </el-image>
            </div>
            <div style="width: 400px; height: 400px" v-if="statistics.includes('similarity')">
              <h2>相似度分析</h2>
              <el-image :src="'/statistics/similarity/'+this.$route.params.taskId+'?ids='+this.ids"
                        :preview-src-list="['/statistics/similarity/'+this.$route.params.taskId+'?ids='+this.ids]">
                <div slot="placeholder" class="image-slot">
                  正在分析中<span class="dot">...</span>
                </div>
              </el-image>
              <el-image :src="'/statistics/similarity2/'+this.$route.params.taskId+'?ids='+this.ids"
                        :preview-src-list="['/statistics/similarity2/'+this.$route.params.taskId+'?ids='+this.ids]">
                <div slot="placeholder" class="image-slot">
                  正在分析中<span class="dot">...</span>
                </div>
              </el-image>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  listTaskData,
  getTaskData,
  delTaskData,
  addTaskData,
  updateTaskData,
  taskDataToRadar,
  taskDataToCSV,
  listTaskDataCount
} from "@/api/ggpx/TaskData";
import {
  listTaskBase,
  listTaskBasePage,
  getTaskBase,
  delTaskBase,
  addTaskBase,
  updateTaskBase
} from "@/api/ggpx/TaskBase";
import {
  getTaskListStatistics,
} from "@/api/ggpx/TaskList";
import {checkRole} from "../../../utils/permission";

export default {
  name: "TaskData",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: false,
      // 总条数
      total: 0,
      // 任务数据表格数据
      TaskDataList: [],
      DataShowList: [], // 原始数据列表
      sortedData: [], // 排序后的数据列表
      sortState: {}, // 记录当前排序状态
      DataShowColumns: [], // 列配置
      DataShowColumnSort: [], // 列排序配置
      fields: [],
      maxVal: 0,
      totalVal: 0,
      otherVal: 0,
      totalValColumn: false,
      qualityColumn: false,
      statistics: "",
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      openStatistics: false,
      openDataShow: false,
      // 查询参数
      taskName: this.$route.query.taskName,
      queryParams:
        {
          pageNum: 1,
          pageSize: 10,
          taskId: null,
          sampleName: null,
          data: null,
          groupLeader: null,
          status: null,
        }
      ,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        taskId: [
          {required: true, message: "任务ID不能为空", trigger: "blur"}
        ],
        sampleName:
          [
            {required: true, message: "样品名称不能为空", trigger: "blur"},
            {
              validator: (rule, value, callback) => {
                // 校验样本名称是否存在
                if (value === '') {
                  callback(new Error('请输入样品名称'));
                } else {
                  // 验证是否重复
                  listTaskDataCount({
                    taskId: this.queryParams.taskId,
                    sampleName: value
                  }).then(response => {
                    if (this.title.includes("添加") && response.data > 0) {
                      callback(new Error('该样品名称已存在'));
                    } else {
                      callback();
                    }
                  });
                }
              }
            }
          ],
        data:
          [
            {required: true, message: "任务数据不能为空", trigger: "blur"}
          ],
        // groupLeader:
        //   [
        //     {required: true, message: "组长不能为空", trigger: "blur"}
        //   ],
      },//++++++++++++++++++  雷达图
      radarSet: {
        radar: {indicator: {}},
        labelMap: {
          // totalRevenue: "总收益",
          // incomeOne: "收益1",
          // incomeTwo: "收益2",
          // incomeThree: "收益3",
        },
        areaStyle: {
          //   type: "default",
          opacity: 0,
        },
        label: {
          show: true,
          position: 'top',
          color: '#333'
        },
      },
      radarData: {
        columns: [
          // "date",
          // "incomeOne",
          // "incomeTwo",
          // "incomeThree",
          // "totalRevenue",
        ],
        rows: [
          // {
          //   date: "1/1",
          //   incomeOne: 1393,
          //   incomeTwo: 1093,
          //   incomeThree: 0.32,
          //   totalRevenue: 191,
          // },
          // {
          //   date: "1/2",
          //   incomeOne: 3530,
          //   incomeTwo: 3230,
          //   incomeThree: 0.26,
          //
          //   totalRevenue: 161,
          // },
          // {
          //   date: "1/3",
          //   incomeOne: 2923,
          //   incomeTwo: 2623,
          //   incomeThree: 0.76,
          //   totalRevenue: 131,
          // },
          // {
          //   date: "1/4",
          //   incomeOne: 1723,
          //   incomeTwo: 1423,
          //   incomeThree: 0.49,
          //   totalRevenue: 131,
          // },
          // {
          //   date: "1/5",
          //   incomeOne: 3792,
          //   incomeTwo: 3492,
          //   incomeThree: 0.323,
          //   totalRevenue: 321,
          // },
          // {
          //   date: "1/6",
          //   incomeOne: 4593,
          //   incomeTwo: 4293,
          //   incomeThree: 0.78,
          //   totalRevenue: 221,
          // },
        ],
      },
    }
  },
  watch: {
    fields: {
      handler(val) {
        let res = this.handleTotalVal(val)
        this.maxVal = res.maxVal;
        this.totalVal = res.totalVal;
        this.otherVal = res.otherVal;
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.getStatistics();
    this.hasTotalValColumn()
    this.hasQualityColumn()
    this.getList();
  },
  mounted() {
    // 当组件挂载后，DOM元素已经存在
    console.log(this.$refs);

  },
  methods: {
    checkRole,
    getStatistics() {
      getTaskListStatistics(this.$route.params.taskId).then(response => {
        this.statistics = response.data
      })
    },
    handleTotalVal(fields) {
      let maxVal = 0
      let totalVal = 0
      let otherVal = 0
      fields.forEach(field => {
        if (field.fieldType === 'number' && field.status === 0) {
          maxVal += field.maxVal;
          totalVal += field.value ? field.value : 0;
        }
        if (field.fieldType === 'number' && field.status === 1) {
          otherVal += field.value ? field.value : 0;
        }
        if (field.children) {
          field.children.forEach(child => {
            if (child.fieldType === 'number' && child.status === 0) {
              maxVal += child.maxVal;
              totalVal += child.value ? child.value : 0;
            }
            if (child.fieldType === 'number' && child.status === 1) {
              otherVal += child.value ? child.value : 0;
            }
          })
        }
      })
      return {maxVal: maxVal, totalVal: totalVal, otherVal: otherVal}
    },
    getTotalValColumn(data) {
      let fields = JSON.parse(data)
      let res = this.handleTotalVal(fields)
      return res.totalVal
    },
    getQualityColumn(data) {
      let fields = JSON.parse(data)
      let value = ''
      fields.forEach(field => {
        if (field.fieldType === 'radio_diy' && field.fieldName === "质量水平") {
          value = field.value;
        }
      })
      return value
    },
    hasTotalValColumn() {
      let query = {
        pageSize: 1,
        taskId: this.$route.params.taskId,
        fieldType: "number"
      }
      listTaskBasePage(query).then(response => {
        this.totalValColumn = response.rows.length > 0 ? true : false;
      });
    },
    hasQualityColumn() {
      let query = {
        pageSize: 1,
        taskId: this.$route.params.taskId,
        fieldName: "质量水平"
      }
      listTaskBasePage(query).then(response => {
        this.qualityColumn = response.rows.length > 0 ? true : false;
      });
    },
    /** 查询任务数据列表 */
    getList() {
      this.loading = true;
      this.queryParams.taskId = this.$route.params.taskId;
      listTaskData(this.queryParams).then(response => {
        this.TaskDataList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    }
    ,
    // 表单重置
    reset() {
      this.form = {
        id: null,
        taskId: this.$route.params.taskId,
        sampleName: null,
        data: null,
        groupLeader: null,
        status: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        hasTotalVal: null,
        totalVal: null,
        hasQuality: null,
        quality: null
      };
      this.resetForm("form");
    }
    ,
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    }
    ,
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    }
    ,
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    }
    ,
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.queryParams.taskId = this.$route.params.taskId;
      listTaskBase(this.queryParams).then(response => {
        this.fields = this.handleTree(response.data, "id", "parentId");
        this.loading = false;
      });
      this.open = true;
      this.title = "添加样品数据";
    }
    ,
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getTaskData(id).then(response => {
        this.form = response.data;
        this.fields = JSON.parse(this.form.data);
        this.open = true;
        this.title = "修改样品数据";
      });
    }
    ,
    /** 提交按钮 */
    submitForm() {
      if (!this.form.sampleName) {
        this.$modal.msgError("样品名称必须填写");
        return
      }
      this.form.data = JSON.stringify(this.fields);
      if (this.totalValColumn) {
        this.form.hasTotal = 1;
        this.form.totalVal = this.getTotalValColumn(this.form.data);
      }
      if (this.qualityColumn) {
        this.form.hasQuality = 1;
        this.form.quality = this.getQualityColumn(this.form.data);
      }
      if (this.form.id != null) {
        updateTaskData(this.form).then(response => {
          this.$modal.msgSuccess("修改成功");
          this.open = false;
          this.getList();
        });
      } else {
        addTaskData(this.form).then(response => {
          this.$modal.msgSuccess("新增成功");
          this.open = false;
          this.getList();
        });
      }
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除任务数据编号为"' + ids + '"的数据项？').then(function () {
        return delTaskData(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    handleExportToExcel() {
      if (this.total === 0) {
        this.$modal.msgError("样品数量为0");
        return
      }
      this.download('/ggpx/TaskData/toEXCEL',
        {"taskId": this.$route.params.taskId, 'ids': this.ids},
        `${this.taskName}数据.xlsx`)
    },
    handleExportToExcelStatistics() {
      this.download('/ggpx/TaskData/toEXCEL2',
        {"taskId": this.$route.params.taskId, 'ids': this.ids},
        `${this.taskName}统计数据.xlsx`)
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('TaskData/export', {
        ...this.queryParams
      }, `TaskData_${new Date().getTime()}.xlsx`)
    },
    /** 返回按钮操作 */
    handleClose() {
      const obj = {path: "/TaskList"};
      this.$tab.closeOpenPage(obj);
    },
    handleStatistics() {
      if (this.total === 0) {
        this.$modal.msgError("样品数量为0");
        return
      }
      taskDataToRadar({"taskId": this.$route.params.taskId, "ids": this.ids}).then(response => {
        this.handleRadarData(response.data);
      });
      this.openStatistics = true;
    },
    handleRadarData(data) {
      let radarData = {columns: null, rows: []};
      let radar = {indicator: []}
      var cols = new Set();
      data.forEach(item => {
        let row = {};
        row["样本名称"] = item.sampleName;
        JSON.parse(item.data).forEach(item => {
          if (item.children) {
            item.children.forEach(item => {
              if (item.status === 0) {
                row[item.fieldName] = item.value ? item.value : 0;
                radar.indicator.push({name: item.fieldName, max: item.maxVal});
                cols.add(item.fieldName)
              }
            });
          }
        });
        radarData.columns = Array.from(cols);
        radarData.columns.splice(0, 0, "样本名称")
        radarData.rows.push(row);
      });
      this.radarSet.indicator = radar.indicator;
      this.radarData = radarData;
      this.$forceUpdate();
      console.log(this.radarSet.radar);
    },
    handleDataShow() {
      this.getDataShowList();
      this.openDataShow = true;
    },
    getDataShowList() {
      let dataShowList = [];
      this.TaskDataList.forEach(item => {
          let data = JSON.parse(item.data);
          let fieldList = {}
          fieldList["样本名称"] = item.sampleName
          data.forEach(element => {
            if (!element.children) {
              if (element.fieldType === "number") {
                fieldList[element.fieldName] = element.value ? element.value : 0;
              } else {
                fieldList[element.fieldName] = element.value ? element.value : '';
              }
            } else {
              element.children.forEach(element => {
                if (element.fieldType === "number") {
                  fieldList[element.fieldName] = element.value ? element.value : 0;
                } else {
                  fieldList[element.fieldName] = element.value ? element.value : '';
                }
              });
            }
          });
          fieldList["是否组长"] = item.groupLeader;
          if (item.hasTotal) {
            fieldList["总分"] = item.totalVal
          }
          dataShowList.push(fieldList);
        }
      );
      this.DataShowList = dataShowList;
      if (this.DataShowList.length > 0) {
        this.DataShowColumns = Object.keys(this.DataShowList[0])
        this.DataShowColumnSort = []
        Object.values(this.DataShowList[0]).forEach(item => {
          if (typeof item === "number") {
            this.DataShowColumnSort.push("number")
          } else {
            this.DataShowColumnSort.push("text")
          }
        });
      }
    },
    getAllDataShowColumns() {
      this.DataShowColumns = Object.keys(this.DataShowList[0])
    },
    getMainDataShowColumns() {
      this.DataShowColumns = ["样品名称", "总分", "品质描述", "质量水平"]
    },
  }
}
;
</script>
<style>
.vertical-center {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
}

.content {
}

.transparent-tag {
  background-color: transparent !important;
  /* border-color: transparent !important; */
  color: inherit; /* 可以根据需要调整文字颜色 */
}
</style>
