增加工单过程趋势查看功能

bsw215583320

2024-08-05 ef93984c4aac13d88f3dbbe2342f28256549d4a2

增加工单过程趋势查看功能

 src/views/dry/DryOrderList.vue

@@ -41,13 +41,15 @@
        </BasicTable>
        <!-- è¡¨å•åŒºåŸŸ -->
        <DryOrderModal @register="registerModal" @success="handleSuccess" />
        <TrendModal @register="registerTrendModal" />
    </div>
</template>

<script lang="ts" name="dry-dryOrder" setup>
    import { ref } from 'vue'
    import { batchDelete, deleteOne, getExportUrl, getImportUrl, list } from './api/DryOrder.api'
    import DryOrderModal from './components/DryOrderModal.vue'
    import DryOrderModal from './components/dryOrder/DryOrderModal.vue'
    import TrendModal from './components/dryOrder/TrendModal.vue'
    import { columns, searchFormSchema } from './dataDefine/DryOrder.data'
    import { useModal } from '/@/components/Modal'
    import { BasicTable, TableAction } from '/@/components/Table'
@@ -58,6 +60,7 @@
    const checkedKeys = ref<Array<string | number>>([])
    //注册model
    const [registerModal, { openModal }] = useModal()
    const [registerTrendModal, { openModal:openTrendModal }] = useModal()
    //注册table数据
    const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
        tableProps: {
@@ -142,10 +145,7 @@
     */
    function getTableAction(record) {
        return [
            {
                label: '操作记录',
                onClick: openReport.bind(null, record),
            },
			
            {
                label: '过程趋势',
                onClick: openProcessTendency.bind(null, record),
@@ -157,6 +157,10 @@
     */
    function getDropDownAction(record) {
        return [
            {
                label: '操作记录',
                onClick: openReport.bind(null, record),
            },
            {
                label: '编辑',
                onClick: handleEdit.bind(null, record),
@@ -189,6 +193,11 @@
    /** æ‰“开过程趋势走势图窗口 */
    function openProcessTendency(record: Recordable) {
        console.log(`output->record`, record)
        openTrendModal(true, {
            record,
            isUpdate: true,
            showFooter: false,
        })
    }
</script>


 src/views/dry/DryOrderTrendList.vue

@@ -47,7 +47,7 @@
<script lang="ts" name="dry-dryOrderTrend" setup>
    import { ref } from 'vue'
    import { batchDelete, deleteOne, getExportUrl, getImportUrl, list } from './api/DryOrderTrend.api'
    import DryOrderTrendModal from './components/DryOrderTrendModal.vue'
    import DryOrderTrendModal from './components/dryOrder/DryOrderTrendModal.vue'
    import { columns, searchFormSchema } from './dataDefine/DryOrderTrend.data'
    import { useModal } from '/@/components/Modal'
    import { BasicTable, TableAction } from '/@/components/Table'

 src/views/dry/api/DryOrder.api.ts

@@ -6,6 +6,7 @@
enum Api {
    list = '/dry/dryOrder/list',
    queryByEqp = 'dry/dry/queryByEqp',
    queryOrderTrendById = '/dry/dryOrder/queryOrderTrendById',
    save = '/dry/dryOrder/add',
    edit = '/dry/dryOrder/edit',
    deleteOne = '/dry/dryOrder/delete',
@@ -68,3 +69,6 @@
    const url = isUpdate ? Api.edit : Api.save
    return defHttp.post({ url: url, params })
}


export const queryOrderTrendById = (params) => defHttp.get({url: Api.queryOrderTrendById, params})

 src/views/dry/bigScreen/BigEqp.vue

@@ -1398,10 +1398,11 @@
                    /**干燥进度、走势与阶段效率和阶段消耗 */
                    if (res && res.detailList) {
                        var progressSeries = []
                        var ganZaoXiaoLv = []
						
                        var zhengQiXiaoHao = []
                        var dianNengXiaoHao = []
                        var totalTime = 1
                        var ganZaoXiaoLv = []
                        var totalTime = 0
                        var beforeWeight = 0
                        res.moisList = []
                        beforeWeight = res.originWeight
@@ -1410,7 +1411,7 @@
                            //console.log(`output->bef`, beforeWeight)
                            //console.log(`output->cur`, item.weight)
                            res.moisList.push([item.totalTime, item.moisture])
                            //console.log(`output->totalTime,item.totalTime`, totalTime, item.totalTime)
                            // console.log(`output->totalTime,item.totalTime`, totalTime, item.totalTime)
                            var curDryTime = item.totalTime - totalTime

                            if (curDryTime > 0) {
@@ -1495,6 +1496,7 @@
                        }

                        res.totalTime = totalTime + res.remain
                        console.log("efficAvg::",res.efficAvg);
                        /**干燥效率、消耗 */
                        if (efficiencyLineChart) {
                            //console.log(`output->ganZaoXiaoLv`, ganZaoXiaoLv)
@@ -1510,7 +1512,7 @@
                                            data: [
                                                {
                                                    name: '额定',
                                                    yAxis: res.efficAvg|eqp.value.dryEfficiency,
                                                    yAxis: res.efficAvg|0,
                                                },
                                            ],
                                            label: {

 src/views/dry/components/dryOrder/DryOrderForm.vue

ÎļþÃû´Ó src/views/dry/components/DryOrderForm.vue ÐÞ¸Ä
@@ -9,8 +9,8 @@

<script lang="ts">
    import { computed, defineComponent } from 'vue'
    import { saveOrUpdate } from '../api/DryOrder.api'
    import { getBpmFormSchema } from '../dataDefine/DryOrder.data'
    import { saveOrUpdate } from '../../api/DryOrder.api'
    import { getBpmFormSchema } from '../../dataDefine/DryOrder.data'
    import { BasicForm, useForm } from '/@/components/Form/index'
    import { defHttp } from '/@/utils/http/axios'
    import { propTypes } from '/@/utils/propTypes'

 src/views/dry/components/dryOrder/DryOrderModal.vue

ÎļþÃû´Ó src/views/dry/components/DryOrderModal.vue ÐÞ¸Ä
@@ -6,8 +6,8 @@

<script lang="ts" setup>
    import { computed, ref, unref } from 'vue'
    import { saveOrUpdate } from '../api/DryOrder.api'
    import { formSchema } from '../dataDefine/DryOrder.data'
    import { saveOrUpdate } from '../../api/DryOrder.api'
    import { formSchema } from '../../dataDefine/DryOrder.data'
    import { BasicForm, useForm } from '/@/components/Form/index'
    import { BasicModal, useModalInner } from '/@/components/Modal'
    // Emits声明

 src/views/dry/components/dryOrder/DryOrderTrendForm.vue

ÎļþÃû´Ó src/views/dry/components/DryOrderTrendForm.vue ÐÞ¸Ä
@@ -9,8 +9,8 @@

<script lang="ts">
import { computed, defineComponent } from 'vue';
import { saveOrUpdate } from '../api/DryOrderTrend.api';
import { getBpmFormSchema } from '../dataDefine/DryOrderTrend.data';
import { saveOrUpdate } from '../../api/DryOrderTrend.api';
import { getBpmFormSchema } from '../../dataDefine/DryOrderTrend.data';
import { BasicForm, useForm } from '/@/components/Form/index';
import { defHttp } from '/@/utils/http/axios';
import { propTypes } from '/@/utils/propTypes';

 src/views/dry/components/dryOrder/DryOrderTrendModal.vue

ÎļþÃû´Ó src/views/dry/components/DryOrderTrendModal.vue ÐÞ¸Ä
@@ -6,8 +6,8 @@

<script lang="ts" setup>
import { computed, ref, unref } from 'vue';
import { saveOrUpdate } from '../api/DryOrderTrend.api';
import { formSchema } from '../dataDefine/DryOrderTrend.data';
import { saveOrUpdate } from '../../api/DryOrderTrend.api';
import { formSchema } from '../../dataDefine/DryOrderTrend.data';
import { BasicForm, useForm } from '/@/components/Form/index';
import { BasicModal, useModalInner } from '/@/components/Modal';
// Emits声明

 src/views/dry/components/dryOrder/TrendModal.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,342 @@
<template>
  <BasicModal v-bind="$attrs" destroyOnClose @register="register" title="工单过程趋势"  width="1200px">
    <template v-if="loading">
      <div class="empty-tips"> åŠ è½½ä¸­ï¼Œè¯·ç¨ç­‰â€¦â€¦ </div>
    </template>
    <template v-if="!loading">
      <div id="chart" style="width: 1200px; height: 500px"></div>
    </template>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, watch } from 'vue';
  import * as echarts from 'echarts'
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { defHttp } from '/@/utils/http/axios'
  import { getTenantId, getToken } from '/@/utils/auth'

  export default defineComponent({
    components: { BasicModal },
    setup() {
      var chart: echarts.ECharts
      const loading = ref(true);
      const lines = ref(10);
      const orderData = ref();
      const [register, { setModalProps, redoModalHeight }] = useModalInner((data)=>{
        data && onDataReceive(data);
      });

      watch(
        () => lines.value,
        () => {
          redoModalHeight();
        }
      );

      function onDataReceive(data) {
       // console.log('Data Received', data);
        orderData.value = data.record;
        handleShow(true);
      }
      function initCharts() {
        let domId = 'chart'
            let chartDom: HTMLElement = document.getElementById(domId) as HTMLElement
        chart = echarts.init(chartDom)
        const option = {
          color: ['green', 'red', '#1890ff'],
          title: {
            text: '含水率/温度/效率趋势',
            textStyle: {
              color: '#000',
              fontSize: 15,
            },
          },
          tooltip: {
            trigger: 'axis',
          },
          grid: {
            left: 70,
            right: 90,
            top: 60,
            bottom: 30,
          },
          legend: {
            right: 60,
            textStyle: {
              color: '#000',
            },
          },
          // toolbox: {
          //     show: true,
          //     feature: {
          //         dataZoom: {
          //             yAxisIndex: 'none',
          //         },
          //         dataView: { readOnly: false },
          //         magicType: { type: ['line', 'bar'] },
          //         restore: {},
          //         saveAsImage: {},
          //     },
          // },
          xAxis: {
            type: 'value',
            axisLabel: {
              color: '#000',
            },
            //boundaryGap: false,
            // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            min: 0,
            max: function (value) {
              if (value.max < 50) {
                return 50
              } else {
                return value.max
              }
            },
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: ['#2b2b2b'],
              },
            },
          },
          yAxis: {
            type: 'value',
            boundaryGap: ['10%', '10%'],
            axisLabel: {
              color: '#000',
            },
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: ['#2b2b2b'],
              },
            },
            // min: 0,
            // max: function (value) {
            //     if (value.max < 100) {
            //         return 100
            //     } else {
            //         return value.max
            //     }
            // },
          },
          // yAxis: {
          //     type: 'value',
          //     axisLabel: {
          //         formatter: '{value} Â°C',
          //     },
          // },
          series: [
            {
              name: '含水率',
              type: 'line',
              smooth: true,
              // symbol: 'none',
              data: [
                
              ],
              lineStyle: {
                width: 1,
              },
              markLine: {
                data: [{ type: 'average', name: 'Avg' }],
              },
              areaStyle: {
                opacity: 0.2,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgb(128, 255, 165)',
                  },
                  {
                    offset: 1,
                    color: 'rgb(1, 191, 236)',
                  },
                ]),
              },
            },
            {
              name: '温度',
              type: 'line',
              smooth: true,
              symbol: 'none',
              data: [
                
              ],
              lineStyle: {
                width: 1,
              },
              areaStyle: {
                opacity: 0.2,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgb(255, 0, 135)',
                  },
                  {
                    offset: 1,
                    color: 'rgb(135, 0, 157)',
                  },
                ]),
              },
              // markLine: {
              //     data: [
              //         { type: 'average', name: 'Avg' },
              //         [
              //             {
              //                 symbol: 'none',
              //                 x: '90%',
              //                 yAxis: 'max',
              //             },
              //             {
              //                 symbol: 'circle',
              //                 label: {
              //                     position: 'start',
              //                     formatter: 'Max',
              //                 },
              //                 type: 'max',
              //                 name: '最高点',
              //             },
              //         ],
              //     ],
              // },
            },
            {
                name: '干燥效率',
                                        data: [],
                    type: 'line',
                                        markPoint: {
                      data: [
                        { type: 'max', name: 'Max' },
                        { type: 'min', name: 'Min' },
                      ],
                    },
                    markLine: {
                      symbol: 'none',
                      data: [
                        {
                          name: '额定',
                          yAxis: 100,
                        },
                      ],
                      label: {
                        formatter: '{b}\n{c}',
                        color: '#fff',
                      },
                    },
                                    },
          ],
        }
        option && chart.setOption(option)
      }
      function handleShow(visible: boolean) {
        console.log("handleShow");
        if (visible) {
          loading.value = true;
          setModalProps({ loading: true, confirmLoading: true });
      //    let tenantId = 1000
            //  let eqpCode ='GM002'
      // let queryRealTimeUrl = '/dry/real/getRealTimeData'
      const queryOrderTrendById = '/dry/dryOrder/queryOrderTrendById'
      // defHttp.get({ url: queryRealTimeUrl, params: { tenantid: tenantId, machineid: eqpCode } }).then((res) => {
        defHttp.get({ url: queryOrderTrendById, params: { id: orderData.value.id } }).then((res) => {

          //console.log("rrreeesss:::",res)
          loading.value = false;
          setModalProps({ loading: false, confirmLoading: false });
          //console.log("dfdfdf",orderData.value.temps)
          var tempjson = eval('('+orderData.value.temps+')')
          Array.from(Object.entries(tempjson))

                        var arr = Object.keys(tempjson)
                        var temArr = []
                        arr.forEach((item) => {
                            temArr.push([item * 1, tempjson[item]])
                        })
          //  console.log(temArr);
            var ganZaoXiaoLv = []
                        var totalTime = 0
                        var beforeWeight = 0
                        var moisList = []
                        beforeWeight = res.originWeight
                        //console.log(`output->res`, res)
                        res.detailList.forEach((item) => {
                            //console.log(`output->bef`, beforeWeight)
                            //console.log(`output->cur`, item.weight)
                            moisList.push([item.totalTime, item.moisture])
                            // console.log(`output->totalTime,item.totalTime`, totalTime, item.totalTime)
                            var curDryTime = item.totalTime - totalTime

                            if (curDryTime > 0) {
                                ganZaoXiaoLv.push([curDryTime / 2 + totalTime, (((beforeWeight - item.weight) / curDryTime) * 60).toFixed(1)])

                                totalTime = item.totalTime
                            }
                            beforeWeight = item.weight
                        })

           setTimeout(()=>{
            initCharts();
            chart.setOption({
                series: [
                  {
                    data: moisList,
                    markLine: {
                      symbol: 'none',
                      data: [
                        {
                          name: '目标',
                          yAxis: orderData.value.target,
                        },
                      ],
                      label: {
                        formatter: '{b}\n{c}%',
                        color: '#000',
                      },
                    },
                  },
                  {
                    data: temArr,
                  },
                  {
                                        data: ganZaoXiaoLv,
                                        markLine: {
                                            symbol: 'none',
                                            data: [
                                                {
                                                    name: '额定',
                                                    yAxis: res.efficAvg|100,
                                                },
                                            ],
                                            label: {
                                                formatter: '{b}\n{c}',
                                                color: '#fff',
                                            },
                                        },
                                    },
                ],
              })
           },100)
          
          
          
        })
          
      }
    }

      function setLines() {
        lines.value = Math.round(Math.random() * 20 + 10);
      }
      return { register, loading, handleShow, lines, setLines };
    },
  });
</script>
<style scoped>
  .empty-tips {
    height: 500px;
    line-height: 500px;
    text-align: center;
  }
</style>