Merge remote-tracking branch 'origin/master'

zhoushihao

1 天以前 4e3b8155722b66e25df3c6fd42cc586b68dea391

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

@@ -106,20 +106,15 @@
  const tableData = [];
  if (tableDatax.length > 0) {
    tableDatax.forEach((item, index) => {
      const time1 = new Date(index == 0 ? item.startTimestamp : tableDatax[index - 1].secondTimestamp);
      const time2 = new Date(index == tableDatax.length - 1 ? item.endTimestamp : item.firstTimestamp);

      const diffInSeconds = Math.abs(time2 - time1) / 1000;
      if (diffInSeconds > 60) {
        tableData.push({
          firstTimestamp: index == 0 ? item.startTimestamp : tableDatax[index - 1].secondTimestamp,
          secondTimestamp: index == tableDatax.length - 1 ? item.endTimestamp : item.firstTimestamp,
          diffMinutes: item.diffMinutes,
          startTimestamp: item.startTimestamp,
          endTimestamp: item.endTimestamp,
          state: 1
        });
        if (result) {
      tableData.push({
        firstTimestamp: index == 0 ? item.startTimestamp : tableDatax[index - 1].secondTimestamp,
        secondTimestamp: index == tableDatax.length - 1 ? item.endTimestamp : item.firstTimestamp,
        diffMinutes: item.diffMinutes,
        startTimestamp: item.startTimestamp,
        endTimestamp: item.endTimestamp,
        state: 1
      });
      if (result) {
        tableData.push({
          firstTimestamp: item.firstTimestamp,
          secondTimestamp: item.secondTimestamp,
@@ -129,14 +124,6 @@
          state: 2
        });
      }
        // console.log("间隔超过60秒", diffInSeconds, time1, time2);
      } else {
        if(index>0){
        // console.log(tableData,index);
        }
        // console.log("间隔不超过60秒", diffInSeconds, time1, time2);
      }
      
    });
  }

@@ -207,7 +194,14 @@
      backgroundColor: 'rgba(50,50,50,0.7)',
      textStyle: { color: '#fff' },
      formatter: (params) => {
        const seen = new Set();
        const items = params
          .filter(p => {
            const key = p.data?.extra?.start + '|' + p.data?.extra?.end;
            if (seen.has(key)) return false;
            seen.add(key);
            return true;
          })
          .map(p => {
            const start = p.data?.extra?.start;
            const end = p.data?.extra?.end;
@@ -283,7 +277,7 @@
    ]
  };

  mychart.setOption(optionOne,true);
  mychart.setOption(optionOne, true);
};

let socket4 = null;
@@ -296,11 +290,11 @@
let socket5 = null;
let myChart = null;
let myChart2 = null;
const switchNoorAreaLeft = ref(true)
const switchNoorAreaRight = ref(true)
const productionVO = ref([])
const socketUrl5 = `ws://${WebSocketHost}:${host}/api/cacheGlass/api/talk/largenScreenProduction`;
const handleMessage5 = (data) => {
  productionVO.value = data.productionVO[0];
  // 将原始数据转换为 ECharts 图表所需格式
const createchart = (productionVO) => {
  categories = productionVO.value.map(item => item.date); // 获取日期作为 x 轴
  totalAreaOutOne = productionVO.value.map(item => item.totalAreaOutOne);
  countIn = productionVO.value.map(item => item.countIn);
@@ -324,7 +318,18 @@
  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;
  }



@@ -335,32 +340,52 @@
    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' },
    yAxis: {
      type: 'value',
      name: switchNoorAreaLeft.value==true?t('large.quantity'):t('large.are'), // 坐标轴名称
      axisLabel: {
        formatter: '{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,true);
  myChart.setOption(option, true);


  const chartDom2 = chartRef2.value;
@@ -375,38 +400,74 @@
  // 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' },
    yAxis: {
      type: 'value',
      name: switchNoorAreaRight.value==true?t('large.quantity'):t('large.are'), // 坐标轴名称
      axisLabel: {
        formatter: '{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,true);
  myChart2.setOption(option2, true);
}
const handleMessage5 = (data) => {
  productionVO.value = data.productionVO[0];
  createchart(productionVO);
};
// 将原始数据转换为 ECharts 图表所需格式
let categories = ref([]); // 获取日期作为 x 轴
@@ -441,14 +502,7 @@

const exportToExcel = async () => {
  try {
    window.open('http://' + { WebSocketHost } + ':10011/largenScreen/exportDailyProduction', '_blank');
    // const response = await request.get('/cacheGlass/largenScreen/exportDailyProduction');
    // if (response.code == 200) {
    //   ElMessage.success(response.message);
    //   tableDatad.value = response.data;
    // } else {
    //   ElMessage.error(response.message);
    // }
    window.open(`http://${WebSocketHost}:10011/largenScreen/exportDailyProduction`, '_blank');
  }
  catch (error) {
    console.error(error);
@@ -923,8 +977,8 @@
        frameborder="0"></iframe>
    </el-dialog>
    <el-dialog v-model="iframe10" top="5vh" width="95%" @close="iframeUrl10 = ''">
      <iframe :src="iframeUrl10" marginwidth="2000px" marginheight="2000px" width="100%"
        height="700px" frameborder="0"></iframe>
      <iframe :src="iframeUrl10" marginwidth="2000px" marginheight="2000px" width="100%" height="700px"
        frameborder="0"></iframe>
    </el-dialog>
    <el-dialog v-model="iframe11" top="5vh" width="95%" @close="iframeUrl11 = ''">
      <iframe :src="iframeUrl11" marginwidth="2000px" marginheight="2000px" width="100%" height="750px"
@@ -938,7 +992,8 @@
      <!-- 生产统计 -->
      <div style="height: 100px;width: 25%;float: right;">
        <div id="ss" style="width: 100%; display: flex; justify-content: center;">
          <div ref="chartRef" style="width: 600px; height: 400px;" @dblclick="handlehistorical10()"></div>
          <div ref="chartRef" style="width: 600px; height: 400px;" @dblclick="handlehistorical10()">
          </div>
        </div>
        <div style="width: 100%;height: 245px;display: flex;">
          <div ref="chartLoad" style="width: 100%;" @dblclick="handlehistorical12(1)"></div>
@@ -1117,7 +1172,6 @@
          </el-table>
        </div>
      </div>

      <div style="height: 100px;width: 25%;float: right;">
        <div id="ss" style="width: 100%; display: flex; justify-content: center;">
          <div ref="chartRef2" style="width: 600px; height: 400px;" @dblclick="handlehistorical10()"></div>