Merge remote-tracking branch 'origin/master'

zhoushihao

1 天以前 4e3b8155722b66e25df3c6fd42cc586b68dea391

 UI-Project/src/views/largescreendisplay/statistics.vue

@@ -297,6 +297,8 @@
const chartRef = ref(null)
const chartRef2 = ref(null)
const showchart = ref(false)
const switchNoorAreaLeft = ref(true)
const switchNoorAreaRight = ref(true)
const createchart = (productionVO) => {
  categories = productionVO.value.map(item => item.date); // 获取日期作为 x 轴
  totalAreaOutOne = productionVO.value.map(item => item.totalAreaOutOne);
@@ -321,6 +323,21 @@
  if (!myChart) {
    myChart = echarts.init(chartDom);
  }
  let loadOneData;
  let loadTwoData;
  let tempfontData;
  if (switchNoorAreaLeft.value) {
    loadOneData = countOutOne;
    loadTwoData = countOutTwo;
    tempfontData = countIn;
  } else {
    loadOneData = totalAreaOutOne;
    loadTwoData = totalAreaOutTwo;
    tempfontData = totalAreaIn;
  }




  const option = {
    title: { text: '' },
@@ -328,32 +345,46 @@
    legend: {
      data: [
        t('large.countOutOne'),
        t('large.totalAreaOutOne'),
        // t('large.totalAreaOutOne'),
        t('large.countOutTwo'),
        t('large.totalAreaOutTwo'),
        // t('large.totalAreaOutTwo'),
        t('large.countIn'),
        t('large.totalAreaIn')
        // t('large.totalAreaIn')
      ]
    },
    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
    toolbox: { feature: { saveAsImage: {} } },
    grid: { top: '20%', left: '3%', right: '4%', bottom: '3%', containLabel: true },
    toolbox: {
      feature: {
        saveAsImage: {},
        myTool1: {
          show: true,
          title: t('large.switch'),
          icon: 'path://M512 0C229.234 0 0 229.234 0 512s229.234 512 512 512 512-229.234 512-512S794.766 0 512 0z m0 960C264.602 960 64 759.398 64 512S264.602 64 512 64s448 200.602 448 448-200.602 448-448 448z m0-768c-176.448 0-320 143.552-320 320s143.552 320 320 320 320-143.552 320-320-143.552-320-320-320z', // 圆形按钮图标（可换）
          onclick: function () {
            switchNoorAreaLeft.value = !switchNoorAreaLeft.value;
            createchart(productionVO);
            // customButtonClick(); // 调用你自定义的方法
          }
        }
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      boundaryGap: true,
      data: categories // 这是日期数据
    },
    yAxis: { type: 'value' },
    series: [
      { name: t('large.countOutOne'), type: 'bar', data: countOutOne },
      { name: t('large.totalAreaOutOne'), type: 'bar', data: totalAreaOutOne },
      { name: t('large.countOutTwo'), type: 'bar', data: countOutTwo },
      { name: t('large.totalAreaOutTwo'), type: 'bar', data: totalAreaOutTwo },
      { name: t('large.countIn'), type: 'bar', data: countIn },
      { name: t('large.totalAreaIn'), type: 'bar', data: totalAreaIn }
      { name: t('large.countOutOne'), type: 'bar', data: loadOneData },
      // { name: t('large.totalAreaOutOne'), type: 'bar', data: totalAreaOutOne },
      { name: t('large.countOutTwo'), type: 'bar', data: loadTwoData },
      // { name: t('large.totalAreaOutTwo'), type: 'bar', data: totalAreaOutTwo },
      { name: t('large.countIn'), type: 'bar', data: tempfontData },
      // { name: t('large.totalAreaIn'), type: 'bar', data: totalAreaIn }
    ]
  };

  myChart.setOption(option);
  myChart.setOption(option, true);


  const chartDom2 = chartRef2.value;
@@ -368,38 +399,64 @@
  // else {
  //     myChart2.clear();
  //   }
  let tempData;
  let hollowOneData;
  let hollowTwoData;
  if (switchNoorAreaRight.value) {
    tempData = countOut;
    hollowOneData = hollowCountOutOne;
    hollowTwoData = hollowCountOutTwo;
  } else {
    tempData = totalAreaOut;
    hollowOneData = hollowTotalAreaOutOne;
    hollowTwoData = hollowTotalAreaOutTwo;
  }
  const option2 = {
    title: { text: '' },
    tooltip: { trigger: 'axis' },
    legend: {
      data: [
        t('large.totalAreaOut'),
        t('large.countOut'),
        t('large.hollowTotalAreaOutOne'),
        // t('large.totalAreaOut'),
        t('large.hollowCountOutOne'),
        // t('large.hollowTotalAreaOutOne'),
        t('large.hollowCountOutTwo'),
        t('large.hollowTotalAreaOutTwo')
        // t('large.hollowTotalAreaOutTwo')
      ]
    },
    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
    toolbox: { feature: { saveAsImage: {} } },
    toolbox: {
      feature: {
        saveAsImage: {},
        myTool1: {
          show: true,
          title: t('large.switch'),
          icon: 'path://M512 0C229.234 0 0 229.234 0 512s229.234 512 512 512 512-229.234 512-512S794.766 0 512 0z m0 960C264.602 960 64 759.398 64 512S264.602 64 512 64s448 200.602 448 448-200.602 448-448 448z m0-768c-176.448 0-320 143.552-320 320s143.552 320 320 320 320-143.552 320-320-143.552-320-320-320z', // 圆形按钮图标（可换）
          onclick: function () {
            switchNoorAreaRight.value = !switchNoorAreaRight.value;
            createchart(productionVO);
            // customButtonClick(); // 调用你自定义的方法
          }
        }
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      boundaryGap: true,
      data: categories // 这是日期数据
    },
    yAxis: { type: 'value' },
    series: [
      { name: t('large.totalAreaOut'), type: 'bar', data: totalAreaOut },
      { name: t('large.countOut'), type: 'bar', data: countOut },
      { name: t('large.hollowTotalAreaOutOne'), type: 'bar', data: hollowTotalAreaOutOne },
      { name: t('large.hollowCountOutOne'), type: 'bar', data: hollowCountOutOne },
      { name: t('large.hollowCountOutTwo'), type: 'bar', data: hollowCountOutTwo },
      { name: t('large.hollowTotalAreaOutTwo'), type: 'bar', data: hollowTotalAreaOutTwo }
      // { name: t('large.totalAreaOut'), type: 'bar', data: tempData },
      { name: t('large.countOut'), type: 'bar', data: tempData },
      // { name: t('large.hollowTotalAreaOutOne'), type: 'bar', data: hollowOneData },
      { name: t('large.hollowCountOutOne'), type: 'bar', data: hollowOneData },
      // { name: t('large.hollowTotalAreaOutTwo'), type: 'bar', data: hollowTwoData },
      { name: t('large.hollowCountOutTwo'), type: 'bar', data: hollowTwoData }
    ]
  };

  myChart2.setOption(option2);
  myChart2.setOption(option2, true);
}