able 横竖数据结构转换2

<template>
  <div class="nihao">

    <el-card shadow="never" class="mb-2">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="用餐客户">
          <el-select style="width: 160px" v-model="formInline.clientOrgId" placeholder="请选择用餐客户" clearable>
            <el-option v-for="item in customerData" :key="item.id" :label="item.orgName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用餐对象评价标准">
          <el-select style="width: 160px" v-model="formInline.computeTemplateId" placeholder="请选择用餐对象评价标准" clearable>
            <el-option v-for="item in templateData" :key="item.id" :label="item.templateName"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用餐时间">
          <el-date-picker style="width: 250px" v-model="timeRanges" @change="changeRangesTime" type="daterange"
            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" clearable format="YYYY-MM-DD"
            value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确定</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never" class="mb-2">
      <el-form v-if="entryCount.totalDiners" :inline="true" class="demo-form-inline">
        <el-form-item label="统计天数">
          {{ entryCount.intervalDays }}
        </el-form-item>
        <el-form-item label="实际参与计算天数">
          {{ entryCount.effectDays }}
        </el-form-item>
        <el-form-item label="统计总人数">
          {{ entryCount.totalDiners }}
        </el-form-item>
        <el-form-item label="餐次数">
          {{ entryCount.mealScheduleCount }}
        </el-form-item>
      </el-form>

      <el-table height="350" :data="ingredientConsumptionAggreTable" border>
        <el-table-column label="名称" fixed="left" min-width="200">
          <template v-slot="scope">
            <span>{{ scope.row.ingredientName }}</span>
          </template>
        </el-table-column>

        <el-table-column label="食材备注" min-width="120">
          <template v-slot="scope">
            <span>{{ scope.row.ingredientRemark }}</span>
          </template>
        </el-table-column>


        <el-table-column label="食材用量" min-width="120">
          <template v-slot="scope">
            <span>{{ scope.row.consumptionValue }}g</span>
          </template>
        </el-table-column>
        <el-table-column label="摄入量" min-width="120">
          <template v-slot="scope">
            <span>{{ scope.row.intakeValue }}g</span>
          </template>
        </el-table-column>
        <el-table-column label="营养素">
          <el-table-column min-width="120" v-for="(item, index) in ingredientSecondLevel" :key="index"
            :label="item.nutrientName">
            <template v-slot="scope">
              <span>
                {{ scope.row.inlineNutrientContents[index].content }}{{
                  scope.row.inlineNutrientContents[index].nutrientUnit }}</span>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>

      <div class="tabs-box">
        <div class="item-tabs" v-for="(item, index) in tabsList" :key="index"
          :class="{ activeColor: colorIndex === index }" @click="changeColor(item, index)">
          {{ item.text }}
        </div>
      </div>

      <el-table v-show="showName === 'yinyangsu'" :data="nutrientsDates" border stripe style="width: 100%">
        <el-table-column label="名称">
          <template v-slot="scope">
            <span>{{ scope.row.nutrientName }} </span>
          </template>
        </el-table-column>
        <el-table-column label="平均摄入量">
          <template v-slot="scope">
            <span>{{ scope.row.averageValue
            }}{{ scope.row.nutrientNameUnit }}</span>
          </template>
        </el-table-column>

        <el-table-column label="推荐摄入量">
          <template v-slot="scope">
            <span v-if="scope.row.recommendedLowerValue > 0">{{ intakeCompareValue(scope.row) }}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="最低/高标准差值百分比">
          <template #header>
            <div>
              最低/高标准差值百分比

            </div>
          </template>

          <template v-slot="scope">
            <span v-if="scope.row.percentLower > 0" :class="{
              activered: scope.row.differencePercent < 80,
              redbg: scope.row.differencePercent > 120
            }">{{ compareNutrientSameValue(scope.row) }}</span>
            <span v-else :class="{
              active: scope.row.differencePercent < 80,
              'text-danger': scope.row.differencePercent > 120
            }">{{ compareNutrientSameValue(scope.row) }}</span>
          </template>
        </el-table-column>


        <el-table-column label="评价">
          <template v-slot="scope">
            <span>{{ Evaluate(scope.row) }}</span>
          </template>
        </el-table-column>
      </el-table>







      <el-table v-show="showName === 'sanshihui'" :data="SanShiAll" border stripe
        style="width: 100%;margin-bottom:20px ;">
        <el-table-column label="膳食名称">
          <template v-slot="scope">
            <span>{{ scope.row.dietaryCategoryName }} </span>
          </template>
        </el-table-column>

        <el-table-column prop="contentValue" label="人日均摄入量">
          <template v-slot="scope">
            <span>{{ ReservedTwo(scope.row.averageValue) }}g</span>
          </template>
        </el-table-column>

        <el-table-column prop="contentValue" label="推荐日均摄入量">
          <template v-slot="scope">
            <span> {{ ConvertData(scope.row) }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="contentValue" label="最低/高标准差值百分比">
          <template v-slot="scope">
            <span>{{ ConvertPer(scope.row) }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="contentValue" label="评价">
          <template v-slot="scope">
            <span>{{ Evaluate(scope.row) }}</span>
          </template>
        </el-table-column>

        <!-- <el-table-column label="供能比">
          <template v-slot="scope">
            <span>{{ scope.row.percent }}%</span>
          </template>
        </el-table-column>
        <el-table-column label="推荐比例">
          <template v-slot="scope">
            <span>{{ scope.row.recommendedPercentLower }}% ~{{
              scope.row.recommendedPercentUpper
            }}%</span>
          </template>
        </el-table-column> -->
      </el-table>


      <div v-show="showName === 'sanshihui'" id="echartsId" style="width:100%;height:260px; margin: 20px 0px;"></div>

      <el-table v-show="showName === 'threeBig'" :data="nutrientsDays" border stripe style="width: 100%">
        <el-table-column label="名称">
          <template v-slot="scope">
            <span>{{ scope.row.nutrientName }} </span>
          </template>
        </el-table-column>

        <el-table-column prop="contentValue" label="总量">
          <template v-slot="scope">
            <span>{{ scope.row.contentValue }}g</span>
          </template>
        </el-table-column>

        <el-table-column prop="energyValue" label="转换能量">
          <template v-slot="scope">
            <span>{{ scope.row.energyValue }}kcal</span>
          </template>
        </el-table-column>

        <el-table-column label="供能比">
          <template v-slot="scope">
            <span>{{ scope.row.percent }}%</span>
          </template>
        </el-table-column>
        <el-table-column label="推荐比例">
          <template v-slot="scope">
            <span>{{ scope.row.recommendedPercentLower }}% ~{{
              scope.row.recommendedPercentUpper
            }}%</span>
          </template>
        </el-table-column>
      </el-table>


      <el-table v-show="showName === 'fenlei'" :data="classifyTable" border stripe style="width: 100%">
        <el-table-column prop="ingredientCategoryName" label="名称">
          <template v-slot="scope">
            <span>{{ scope.row.ingredientCategoryName }} </span>
          </template>
        </el-table-column>
        <el-table-column prop="totalValue" label="总摄入量">
          <template v-slot="scope">
            <span>{{ scope.row.totalValue }}g </span>
          </template>
        </el-table-column>

        <el-table-column prop="averageValue" label="日均摄入量">
          <template v-slot="scope">
            <span>{{ scope.row.averageValue }}g</span>
          </template>
        </el-table-column>
        <el-table-column label="建议日摄入量">
          <template v-slot="scope">
            <span v-if="scope.row.recommendedLowerValue">{{ scope.row.recommendedLowerValue }}g~{{
              scope.row.recommendedUpperValue
            }}g</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="占比（日均摄入量/建议摄入量）">
          <template v-slot="scope">
            <span> {{ compareSameValue(scope.row) }}</span>
          </template>
        </el-table-column>
      </el-table>

      <div class="echart-yangsu" v-show="showName === 'yinyangsu'">
        <el-select value-key="nutrientName" style="width: 140px" @change="onChanged" v-model="nutrientChartVal"
          placeholder="请选择营养素">
          <el-option v-for="(item, index) in nutrientsDates" :key="index" :label="item.nutrientName" :value="item">
          </el-option>
        </el-select>
        <div id="chartID" class="xian-chart" style="width: 600px; height: 400px"></div>
      </div>

      <div v-show="showName === 'threeBig'" ref="pieChart" style="width: 600px; height: 400px" class="bing-chart"></div>

      <div v-show="showName === 'eatShiCai'">
        <el-date-picker v-model="shiCaiTime" @change="changeTime" type="date" placeholder="Pick a day" format="YYYY-MM-DD"
          value-format="YYYY-MM-DD" :disabled-date="disabledDateFun">
          <template #default="cell">
            <div class="cell" :class="{ current: cell.isCurrent }">
              <span class="text">{{ cell.text }}</span>
              <span v-if="isHoliday(cell)" class="holiday" />
            </div>
          </template>
        </el-date-picker>

        <el-table :data="shiCaiTable" border stripe style="width: 100%; margin: 20px auto">
          <el-table-column prop="ingredientName" label="名称">
            <template v-slot="scope">
              <span>{{ scope.row.ingredientName }} </span>
            </template>
          </el-table-column>
          <el-table-column prop="averageValue" label="人均摄入量">
            <template v-slot="scope">
              <span>{{ scope.row.averageValue }}g </span>
            </template>
          </el-table-column>

          <el-table-column prop="ingredientRemark" label="备注">
            <template v-slot="scope">
              <span>{{ scope.row.ingredientRemark }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div v-show="showName === 'foodLaiYuan'">
        <el-table :data="comeFromTable" border height="350" style="width: 100%">
          <el-table-column prop="nutrientName" label="营养素名称" />
          <el-table-column prop="namePLANT" label="植物性食物%" />
          <el-table-column prop="nameANIMAL" label="动物性食物%" />
          <el-table-column prop="nameUNKNOWN" label="其他%" />
        </el-table>

        <!-- <el-select @change="changeFrom" v-model="comeFromValue" placeholder="Select" style=" margin:20px auto;width: 240px">
          <el-option v-for="item in comeFromTable" :key="item.nutrientDictionaryId" :label="item.nutrientName"
            :value="item.nutrientDictionaryId" />
        </el-select>
         -->
        <!-- <div id="main" style="width: 800px; height: 250px; margin: auto"></div> -->
        <div id="columnar" style="width: 800px; height: 250px; margin: auto"></div>

      </div>


      <div v-show="showName === 'energyRatio'">


        <!-- <el-table :data="energyTableData" border style="width: 100%;margin-bottom: 30px ;">
          <el-table-column label="餐次" align="center" prop="grade"  />
          <el-table-column v-for="(item, index) in headerList" :key="index" :label="item.label" align="center"
           >
            <template v-slot="scope">
              <span>{{ scope.row.options[index].num }}</span>
            </template>
          </el-table-column>
          、
        </el-table> -->

        <el-table :data="energyTableData" border style="width: 100%;margin-bottom: 30px ;">
          <el-table-column prop="scheduleName" label="餐次" />
          <el-table-column prop="contentValue" label="能量" >
            <template v-slot="scope">
              {{ scope.row.contentValue }}{{ scope.row.contentUnit  }}
            </template>
          </el-table-column>
          <el-table-column prop="percent" label="供能%" >
            <template v-slot="scope">
              {{ scope.row.percent }}%
            </template>
          </el-table-column>
          <el-table-column prop="nameUNKNOWN" label="推荐比例" >
            <template v-slot="scope">
             <span v-if=" scope.row.recommendedPercentLower">  {{ scope.row.recommendedPercentLower }}-{{ scope.row.recommendedPercentUpper }}</span>
             <span v-else>-</span>
            </template>
          </el-table-column>
        </el-table>






      </div>



      <richEditor ref="childEditor" @editEditorAction="handleUpdateEditorValue"></richEditor>



      <div class="button-box">
        <el-button style="margin: 16px" type="primary" @click="openOtherKnow">添加科普知识</el-button>
        <el-button style="margin: 16px" type="primary" @click="saveData(false)">保存报告</el-button>
        <el-button style="margin: 16px" type="primary" @click="releaseData(true)">保存并发布报告</el-button>
      </div>
    </el-card>


  </div>
</template>

<script setup lang="ts">
const tabsList = [
  {
    text: "按膳食分类摄入量汇总",
    indexNum: "0",
    engName: "sanshihui"
  },
  {
    text: "按营养素摄入量汇总",
    indexNum: "2",
    engName: "yinyangsu"
  },
  {
    text: "三大营养素供能比",
    indexNum: "3",
    engName: "threeBig"
  },
  {
    text: "按食材摄入量汇总",
    indexNum: "4",
    engName: "eatShiCai"
  },
  {
    text: "营养素食物来源",
    indexNum: "5",
    engName: "foodLaiYuan"
  },
  {
    text: "餐次能量比",
    indexNum: "6",
    engName: "energyRatio"
  }
];
import jsPDF from "jspdf";
import { totalCustomer } from "@/hooks/selectCustomer";
import API_STANDARD from "@/api/referenceStandardApi";
import API_REPORT from "@/api/reportApi";
import richEditor from "./components/richEditor.vue";
import { ref, reactive, onMounted, watch, shallowRef } from "vue";

import * as echarts from "echarts";
import { htmlPdf } from "@/utils/htmlToPDF";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();

const RecipeData = ref([])
// import '@/utils/NotoSansSC-Regular-normal';
const { requestAllCustomer } = totalCustomer();
const colorIndex = ref(0);
const showName = ref("sanshihui");
const customerData = ref([]);
const ingredientConsumptionAggreTable = ref([]);
const ingredientSecondLevel = ref([]);
const DatesList = ref([]);
const classifyTable = ref([]);
const nutrientsDays = ref([]);
const nutrientsDates = ref([]);
const timeRanges = ref("");
const templateData = ref([]);
const nutrientChartVal = ref({});
const entryCount = ref({});
const resultReport = ref("");

const headerList = ref([])
const energyTableData = ref([])
const childRef = ref();

const shiCaiALL = ref([]);
const shiCaiTable = ref([]);
const shiCaiTime = ref("");
const holidays = ref([]);

const comeFromAll = ref([]);
const comeFromTable = ref([]);
const comeFromValue = ref("");
const SanShiAll = ref([])
const previewTime = ref("")


const EditorHTML = ref("")
const childEditor = ref(null)
const weekFoods = ref([])



import dayjs from "dayjs";


const isHoliday = ({ dayjs }) => {
  return holidays.value.includes(dayjs.format("YYYY-MM-DD"));
};



const formInline = reactive({
  computeTemplateId: "",
  clientOrgId: ""
});



const openOtherKnow = () => {
  childEditor.value.jumpKnowedjge("edit", null);
}


type EChartsOption = echarts.EChartsOption;
onMounted(async () => {
  let resList = await requestAllCustomer();
  customerData.value = resList.resultData;
  onPage();

});

const ReservedTwo = (resData) => {
  return resData.toFixed(2);
}


const intakeCompareValue = (itemData) => {
  // console.log(itemData)
  //   return
  if (itemData.recommendedLowerValue === itemData.recommendedUpperValue) {
    return itemData.recommendedLowerValue + itemData.nutrientNameUnit
  } else {

    if (itemData.itemDatarecommendedUpperValue) {
      return itemData.recommendedLowerValue + itemData.nutrientNameUnit + '~' +
        itemData.itemDatarecommendedUpperValue + itemData.nutrientNameUnit
    } else {
      return itemData.recommendedLowerValue + itemData.nutrientNameUnit
    }


  }
}

const ConvertData = (itemData) => {
  if (itemData.recommendedLowerValue) {
    if (itemData.recommendedLowerValue == itemData.recommendedUpperValue) {
      return itemData.recommendedLowerValue + "g"
    } else {
      return itemData.recommendedLowerValue + "g-" + itemData.recommendedUpperValue + "g"
    }

  } else {
    return "_"
  }
}
// ||itemData.percentLower>0
const ConvertPer = (itemData) => {
  if (itemData.differencePercent) {
    return itemData.differencePercent + "%"
  } else {
    return "_"
  }
}

const Evaluate = (itemData) => {
  if (itemData.differenceStatus) {
    if (itemData.differenceStatus === 'HIGH') {
      return '偏高'
    }
    if (itemData.differenceStatus === 'TOO_HIGH') {
      return '过高'
    }
    if (itemData.differenceStatus === 'LOW') {
      return '偏低'
    }
    if (itemData.differenceStatus === 'TOO_LOW') {
      return '过低'
    }
    if (itemData.differenceStatus === 'SUIT') {
      return '适宜'
    }
    if (itemData.differenceStatus === 'UNKNOWN') {
      return '未知'
    }


  } else {
    return "_"
  }

}

const changeWeekDay = (dayWeek) => {
  if (dayWeek === "MONDAY") {
    return "星期一"
  }
  if (dayWeek === "TUESDAY") {
    return "星期二"
  }
  if (dayWeek === "WEDNESDAY") {
    return "星期三"
  }
  if (dayWeek === "THURSDAY") {
    return "星期四"
  }
  if (dayWeek === "FRIDAY") {
    return "星期五"
  }
  if (dayWeek === "SATURDAY") {
    return "星期六"
  }
  if (dayWeek === "SUNDAY") {
    return "星期日"
  }
}

function verageDailyuIntake(itemData) {


  const average = (itemData.recommendedLowerValue + itemData.recommendedUpperValue) / 2;
  return average.toFixed(2);

}

function zhuDouble(SanShiValue) {
  const perCapitaDaysEat = []
  const recommendDaysEat = []
  const foodAllKind = []

  SanShiValue.map((item, index) => {
    foodAllKind.push(item.dietaryCategoryName);
    perCapitaDaysEat.push(item.averageValue);
    recommendDaysEat.push(verageDailyuIntake(item))
  });

  // console.log(recommendDaysEat)
  var myChart = echarts.init(document.getElementById('echartsId'))
  window.addEventListener('resize', function () {
    myChart.resize()
  })
  myChart.setOption({
    legend: {
      left: 'center',
      bottom: '3%',
      icon: 'circle',
      data: ['人日均摄入量', '推荐日均摄入量'],
      textStyle: {
        fontSize: 12,
        color: '#8C8C8C'
      }
    },
    xAxis: {
      type: 'category',
      axisTick: {
        show: false // 去掉x轴 小细条
      },
      data: foodAllKind,
      axisLabel: {
        width: 30,
        overflow: "breakAll",
        fontSize: 11,
      },
    },
    grid: {
      left: '5%',
      right: '8%',
      bottom: '12%',
      top: '8%',
      containLabel: true,
    },
    color: ['#3372FF', '#21C9E6'],
    yAxis: {
      type: 'value'
    },
    tooltip: {
      trigger: 'item',
      // formatter: function (params) {
      //   console.log(params)
      //   let tip = '';
      //   tip += '<div>总数' + 23 + '</div><div>' + params.seriesName + '数量' + params.value + '所</p></div>'
      //   return tip
      // },
      borderColor: "rgba(255, 255, 255, 1)"
    },
    series: [
      {
        name: '人日均摄入量',
        type: 'bar',
        data: perCapitaDaysEat
      },
      {
        name: '推荐日均摄入量',
        type: 'bar',
        data: recommendDaysEat
      },],
    dataZoom: [
      {
        type: 'slider',
        realtime: true,
        start: 0,
        end: 100,
        show: true,
        height: 12,
        bottom: 0,
        handleSize: 20, // 左右2个滑动条的大小
        borderColor: '#fff', // 滑动通道的边框颜色
        showDetail: false,
        fillerColor: '#eee',
        backgroundColor: '#fff', // 未选中的滑动条的颜色
        showDataShadow: false, // 是否显示数据阴影 默认auto
      },
      {
        //没有下面这块的话，只能拖动滚动条，鼠标滚轮在区域内不能控制外部滚动条(当前滑块可控制)
        type: 'inside',
        realtime: true,
        start: 0,
        end: 100,
      },
    ],
  })
}


const uniqueMealSchedules = ref([])

function getMealDishes(day, mealScheduleName) {

  const mealSchedule = day.consumptionMealSchedules.find(
    schedule => schedule.refMealScheduleName === mealScheduleName
  );
  if (mealSchedule) {
    return mealSchedule.dishes;
  }
  return [];
}


function getdosing(day, mealScheduleName) {

  const mealSchedule = day.consumptionMealSchedules.find(
    schedule => schedule.refMealScheduleName === mealScheduleName
  );
  if (mealSchedule.consumptionItems) {
    return mealSchedule.consumptionItems;
  }
  return [];
}





function handleUpdateEditorValue(value) {
  console.log("啥也没做，就有数据了")
  EditorHTML.value = value
}


const saveData = (baocun) => {
  tijiao(baocun)
}

const releaseData = (fabu) => {
  tijiao(fabu)
}

const tijiao = (panduan) => {
  const postData = {
    beginDate: timeRanges.value ? timeRanges.value[0] : "",
    endDate: timeRanges.value ? timeRanges.value[1] : "",
    clientOrgId: formInline.clientOrgId,
    previewTime: previewTime.value,
    conclusion: EditorHTML.value,
    published: panduan

  }
  let promiseResule = API_REPORT.addReport(postData);
  promiseResule.then(value => {
    ElMessage({
      message: "编辑成功",
      type: "success",
      plain: true
    });


    setTimeout(function () {
      router.push({
        path: "/reportManagement/reportList"
      });
    }, 500);


  })
    .finally(() => { });
}


function initbing(data, zhuData) {
  // console.log(zhuData)
  let comeName = [];
  let comeANIMA = [];
  let comePLANT = [];
  let comeNoKown = [];
  zhuData.map(each => {
    comeName.push(each.nutrientName)
    comeANIMA.push(each.nameANIMAL)
    comePLANT.push(each.namePLANT)
    comeNoKown.push(each.nameUNKNOWN)
  });
  var myChart = echarts.init(document.getElementById('columnar'));
  // 
  var option = {
    // title: {
    //     text: 'ECharts 入门示例 树懒课堂'
    // },
    tooltip: {},
    legend: {
      data: ['动物性食物', '植物性食物', '其他食物'],
      right: '25%',
    },
    xAxis: {
      data: comeName
    },
    yAxis: {},
    series: [{
      name: '动物性食物',
      type: 'bar',
      stack: '业务',
      data: comeANIMA
    },
    {
      name: '植物性食物',
      type: 'bar',
      stack: '业务',
      data: comePLANT
    },
    {
      name: '其他食物',
      type: 'bar',
      stack: '业务',
      data: comeNoKown
    },
    ],
    dataZoom: [{ // 这是 dataZoom 的配置
      type: 'slider', // 使用 'slider' 类型的 dataZoom 组件
      start: 0, // 数据窗口范围的起始百分比
      end: 50 // 数据窗口范围的结束百分比
    }]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);

}


const compareNutrientSameValue = itemData => {
  if (itemData.differencePercent === null) {
    return "-";
  } else {
    return itemData.differencePercent + "% ";
  }
};


const compareSameValue = itemData => {
  if (itemData.percentLower === null) {
    return "-";
  }
  if (itemData.percentLower === itemData.percentUpper) {
    return itemData.percentLower + "%";
  } else {
    return itemData.percentLower + "% ~" + itemData.percentUpper + "%";
  }
};



const appraise = (itemData) => {


  if (itemData.percentLower) {
    if (itemData.percentUpper < 50) {
      return '过低'
    }
    if (itemData.percentLower >= 50 && itemData.percentUpper < 80) {
      return '偏低'
    }
    if (itemData.percentLower >= 80 && itemData.percentUpper < 120) {
      return '适宜'
    }
    if (itemData.percentLower >= 120 && itemData.percentUpper < 150) {
      return '偏高'
    }

    if (itemData.percentUpper >= 150) {
      return '过高'
    }
  } else {
    return "_"
  }

}
// ddddd


const onPage = () => {
  API_STANDARD.listTemplate()
    .then(resData => {
      templateData.value = resData.data;
    })
    .finally(() => { });
};

const changeColor = (item, index) => {

  if (SanShiAll.value.length == 0) {
    ElMessage({
      message: '请先查询数据',
      type: 'error',
      plain: true,
    })
    return false
  }
  showName.value = item.engName;
  if (item.engName === "yinyangsu") {
    if (nutrientsDates.value) {
      nutrientChartVal.value = nutrientsDates.value[0];
      CreateLineChart(nutrientsDates.value[0]);
    }
  }
  if (item.engName === "eatShiCai") {
    shiCaiChangeData(shiCaiALL.value);
  }

  if (item.engName === "foodLaiYuan") {
    comeFromChangeData(comeFromAll.value);
  }
  colorIndex.value = index;
};

// ccccccccccccccc
const changeRangesTime = valtame => {
  // console.log(valtame);
};

const changeTime = val => {
  // console.log(val)
  // console.log(shiCaiALL.value)
  var haveData = {};
  shiCaiALL.value.map(each => {
    if (each.measurementDate === val) {
      haveData = each;
    }
  });
  shiCaiTable.value = haveData.averageValues;
};

function shiCaiChangeData(shiCaiData) {
  if (shiCaiData.length === 0) {
    return;
  }
  var havetimeData = [];
  shiCaiData.map(each => {
    havetimeData.push(each.measurementDate);
  });
  holidays.value = havetimeData;
  // console.log(havetimeData);
  shiCaiTable.value = shiCaiData[0].averageValues;
  shiCaiTime.value = shiCaiData[0].measurementDate;
}

const comeFromChangeData = fromData => {
  if (fromData.length === 0) {
    return;
  }
  // console.log(fromData);
  var newCome = [];
  fromData.map(item => {
    newCome.push({
      ...item,
      namePLANT: findPlant(item.percentages, "PLANT"),
      nameANIMAL: findPlant(item.percentages, "ANIMAL"),
      nameUNKNOWN: findPlant(item.percentages, "UNKNOWN")
    });
  });
  // console.log(newCome);
  comeFromTable.value = newCome;
  const buildList = [];
  buildList.push(
    { value: comeFromTable.value[0].nameANIMAL, name: "动物性食物" },
    { value: comeFromTable.value[0].namePLANT, name: "植物性食物" },
    { value: comeFromTable.value[0].nameUNKNOWN, name: "其他" }
  );

  // console.log(buildList);
  comeFromValue.value = comeFromTable.value[0].nutrientName;
  initbing(buildList, comeFromTable.value);
};

const changeFrom = () => {
  const findData = comeFromTable.value.find(
    item => item.nutrientDictionaryId === comeFromValue.value
  );
  const buildList = [];
  buildList.push(
    { value: findData.nameANIMAL, name: "动物性食物" },
    { value: findData.namePLANT, name: "植物性食物" },
    { value: findData.nameUNKNOWN, name: "其他" }
  );

  // console.log(buildList);

  initbing(buildList, comeFromTable.value);
};

const findPlant = (list, itemData) => {
  var dataN = null;
  list.map(item => {
    if (item.ingredientNature === itemData) {
      dataN = item;
    }
  });

  return dataN ? dataN.percent : 0;
};

// https://blog.csdn.net/weixin_48286936/article/details/121466002
// https://juejin.cn/post/7261962730985406522
const getData = (item, rowData) => {
  if (item == '餐次') {
    return rowData.neng
  } else {
    return rowData.percent
  }

  // console.log(item,)
  // console.log(rowData)
  // return "ddd"
}

// qqqqqqqqqq
const onSubmit = () => {
  const postData = {
    ...formInline,
    beginDate: timeRanges.value ? timeRanges.value[0] : "",
    endDate: timeRanges.value ? timeRanges.value[1] : "",
  };
  API_STANDARD.generateReport(postData)
    .then(resData => {

      console.log('你好我来了',resData.data.mealScheduleEnergyAggregateRatios)

      const energyOptions = [];
      const powerOptions = [];
      const RecommendedOptions = []
      resData.data.mealScheduleEnergyAggregateRatios.map((item, index) => (
        energyOptions.push({
          label: item.scheduleName,
          num: item.contentValue ? item.contentValue + item.contentUnit : '-',
        }),
        powerOptions.push({
          label: item.scheduleName,
          num: item.percent ? item.percent + '%' : '-',
        }),
        RecommendedOptions.push({
          label: item.scheduleName,
          num: item.recommendedPercentLower ? item.recommendedPercentLower + '%-' + item.recommendedPercentLower + '%' : '-',
        })

      ));

      const newEnergy = [
        {
          grade: "能量",
          options: energyOptions,
        },
        {
          grade: "供能%",
          options: powerOptions,
        },
        {
          grade: "推荐比例",
          options: RecommendedOptions,
        },
      ]

      energyTableData.value = resData.data.mealScheduleEnergyAggregateRatios
      headerList.value = energyTableData.value?.[0]?.options?.map(item => ({ label: item.label }))
      zhuDouble(resData.data.dietaryCategoryDailyIntakes)
      // console.log("膳食", resData.data.dietaryCategoryDailyIntakes)
      SanShiAll.value = resData.data.dietaryCategoryDailyIntakes;
      comeFromAll.value = resData.data.nutrientSourceNatures;
      previewTime.value = resData.data.previewTime;
      shiCaiALL.value = resData.data.ingredientDailyIntakes;


      nutrientsDates.value = resData.data.nutrientAggregateDailyIntakes;

      DatesList.value = resData.data.nutrientAggregateDailyIntakes[0].intakes;

      nutrientsDays.value = resData.data.nutrientEnergyIntakes;
      classifyTable.value = resData.data.ingredientCategoryDailyIntakes;
      console.log(resData.data.ingredientConsumptionAggregates)
      ingredientConsumptionAggreTable.value =
        resData.data.ingredientConsumptionAggregates;
      entryCount.value = resData.data.entryCount;
      resultReport.value = resData.data.conclusion;



      // xxxxxxxxxxxxxx这部分不要动，是处理resData.data.entries的 数据开始xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

      console.log('新的', resData.data.entries)
      var xinTable = []
      resData.data.entries.map(item => {
        item.consumptionMealSchedules.map(each => {
          xinTable.push(each.refMealScheduleName)
        });
      });

      // console.log(xinTable)
      const uniqueArr = xinTable.filter((item, index) => xinTable.indexOf(item) === index);
      // console.log(uniqueArr);


      const mealScheduleNames = uniqueArr;

      const newArray = resData.data.entries.map((obj) => {
        const newConsumptionMealSchedules = mealScheduleNames.map((mealScheduleName) => {
          const existingSchedule = obj.consumptionMealSchedules.find((schedule) => schedule.refMealScheduleName === mealScheduleName);
          if (existingSchedule) {
            return existingSchedule;
          } else {
            return {
              refMealScheduleName: mealScheduleName,
              dishes: []
            };
          }
        });

        return {
          dayOfWeek: obj.dayOfWeek,
          measurementDate: obj.measurementDate,
          consumptionMealSchedules: newConsumptionMealSchedules
        };
      });

      // console.log(newArray);
      RecipeData.value = newArray
      // xxxxxxxxxxxxxxxxxxxxx这部分不要动，是处理resData.data.entries 结束xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
      if (childEditor.value) {
        childEditor.value.getEditorValMethod(resData.data.conclusion, [123], newArray);
      }
      ingredientSecondLevel.value =
        resData.data.ingredientConsumptionAggregates[0].inlineNutrientContents;

      creatChart();
    })
    .finally(() => { });
};



const disabledDateFun = time => {
  if (timeRanges.value) {
    let smallTime = dayjs(timeRanges.value[0]).valueOf();
    let bigTime = dayjs(timeRanges.value[1]).valueOf();
    return (
      time.getTime() > bigTime ||
      time.getTime() < smallTime
    ); //注意是||不是&&

  }
};
const CreateLineChart = each => {
  const averageAll =
    each.intakes.reduce((sum, current) => sum + current.averageValue, 0) /
    each.intakes.length;
  const weekData = [];
  const recommendData = [];
  const averageData = [];
  const allAverageList = [];
  each.intakes.map(item => {
    weekData.push(item.measurementDate);
    recommendData.push(each.recommendedUpperValue);
    averageData.push(item.averageValue);
    allAverageList.push(averageAll);
  });
  // 获取dom，断言HTMLElement类型，否则会报错
  const chartEle: HTMLElement = document.getElementById(
    "chartID"
  ) as HTMLElement;
  const chart = echarts.init(chartEle);
  const option: EChartsOption = {
    title: {
      text: "",
      subtext: "摄入值"
    },
    tooltip: {
      trigger: "axis"
    },
    legend: {
      data: ["日平均摄入量", "总平均摄入量"]
    },
    calculable: true,
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        data: weekData
      }
    ],
    yAxis: [
      {
        type: "value"
      }
    ],
    series: [
      // {
      //   name: '实际摄入量',
      //   type: 'line',
      //   smooth: true,
      //   itemStyle: { normal: { areaStyle: { type: 'default' } } },
      //   data: actualData
      // },
      {
        name: "日平均摄入量",
        type: "line",
        smooth: true,
        itemStyle: { normal: { areaStyle: { type: "default" } } },
        data: averageData
      },
      {
        name: "总平均摄入量",
        type: "line",
        smooth: true,
        itemStyle: { normal: { areaStyle: { type: "default" } } },
        data: allAverageList
      }
    ]
  };
  option && chart.setOption(option);
};
const onChanged = each => {
  // console.log(each);
  CreateLineChart(each);
};

const pieChart = ref<HTMLElement>();
const myChart2 = ref<any>();
const creatChart = () => {
  const nameList = [];
  const DataList = [];
  nutrientsDays.value.map(item => {
    nameList.push(item.nutrientName);
    DataList.push({
      name: item.nutrientName,
      value: item.energyValue
    });
  });

  myChart2.value = echarts.init(pieChart.value!);
  myChart2.value.setOption({
    // legend: {
    //   // 图例
    //   data: nameList,
    //   // left: "10%",
    //   top: "90%",
    //   // orient: "vertical"
    // },
    title: {
      // 设置饼图标题，位置设为顶部居中
      text: "三大营养素供能比",
      top: "0%",
      left: "center"
    },
    series: [
      {
        type: "pie",
        radius: ["0%", "50%"], // 设置饼图大小
        avoidLabelOverlap: true, //是否启用防止标签重叠策略
        label: {
          show: true,
          formatter: "{b} : {c} /kcal\n ({d}%)" // b代表名称，c代表对应值，d代表百分比
        },
        data: DataList
      }
    ]
  });
};

defineOptions({
  name: "reportAnalysis"
});
</script>

<style>
.button-box {
  display: flex;
  align-items: center;
  justify-content: center;
}


.display {
  opacity: 1;
  width: 1160px;
  position: absolute;
}

.el-date-table__row .disabled {
  background: #999 !important;
}
</style>
<style scoped>
.demo-date-picker {
  display: flex;
  justify-content: space-between;
}

.cell {
  height: 30px;
  padding: 3px 0;
  box-sizing: border-box;
}

.cell .text {
  width: 24px;
  height: 24px;
  display: block;
  margin: 0 auto;
  line-height: 24px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
}

.cell.current .text {
  background: #626aef;
  color: #fff;
}

.cell .holiday {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--el-color-danger);
  border-radius: 50%;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
}

.result-box {
  margin-top: 20px;
}

.result-box h6 {
  text-align: center;
  font-size: 15px;
  padding: 10px 0px;
}

.pdfbox {
  border: 1px solid #ebeef5;
  box-sizing: border-box;
  padding: 30px;
}

/* .result-box p{
 border: 1px solid #ebeef5;
 box-sizing: border-box;
 padding: 30px;
} */

.result-box p ol {
  list-style: decimal !important;
}

.redbg {
  color: #f56c6c;
}

.activered {
  color: #e6a23c;
}

.xian-chart {
  margin-left: 20px;
}

.echart-yangsu {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.bing-chart {
  margin: 20px auto;
}

.tabs-box {
  display: flex;
  justify-content: center;
  /* background: sandybrown; */
  margin: 40px 0px;
  border-bottom: 1px solid #ebeef5;
}

.item-tabs {
  padding: 10px 12px;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 14px;
  margin: 0px 10px;
  color: #606266;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
  border-top: 1px solid #ebeef5;
  border-left: 1px solid #ebeef5;
  border-right: 1px solid #ebeef5;
}

.activeColor {
  color: white !important;
  background: #409eff !important;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border: 1px solid black;
  padding: 8px;
  text-align: center;

  text-align: center;
  /* 水平居中 */
  vertical-align: middle;
  /* 垂直居中 */
}

.in-table {
  /* border:1px solid black */
}


.nihao .in-table:first-child {
  /* border: 19px solid green!important; */
}

.td-tabl tr:first-child {
  border-top: 1px solid black !important;
}

.nihao .in-table:nth-child(2n) {
  color: red;
}

.food-name {
  display: block;
}

.food-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.food-all {
  flex-shrink: 0
}


.element-ul {
  width: 80%;
  border: 1px solid black;
}

.element-ul li :nth-child(2n) {
  /* background: red; */
}

.element-ul li:nth-child(even) {
  border-top: 1px solid black;
}


.element-ul li {
  display: flex !important;
}

.element-ul span {
  width: 100%;
  text-align: center;

}

.element-name {
  display: block;
  border-right: 1px solid black;
}

/* table,
th,
td {
  border: 1px solid black;
} */
</style>