20230609

src/components/FormList.vue

@@ -176,11 +176,11 @@ const classList = ref([]);
 const handleRefresh = (index) => {
   console.log('cad',formValue.formList)
   formValue.formList[index].T_value =  ''
-  setTimeout(()=>{
+
     formValue.formList[
     index
-  ].T_value = `http://coldverifylocal.coldbaozhida.com/CAD/download?type=upload&filename=${queryData.T_task_id}_${queryData.T_VerifyTemplate_id}_${formValue.formList[index].T_id}.png`;
-  },3000)
+  ].T_value = `http://coldverifylocal.coldbaozhida.com/CAD/download?type=upload&filename=${queryData.T_task_id}_${queryData.T_VerifyTemplate_id}_${formValue.formList[index].T_id}.png&xxx=${Math.random()}`;
+
 };
 
 // CAD编辑

src/components/highcharts-h.vue

@@ -1,16 +1,20 @@
 <template>
     <div style="height: 100%;">
-        <Chart style="min-height: 600px;" :options="chartOptions()" constructor-type="stockChart"></Chart>
+        <Chart v-if="chartOptions1.series.length != 0" style="min-height: 600px;" :options="chartOptions1"
+            constructor-type="stockChart">
+        </Chart>
         <div style="text-align: center;margin-top: 20px;">{{ computedData }}</div>
     </div>
 </template>
 
 <script setup>
 import emitter from "@/plugin/bus";
+
+
 import { Chart } from 'highcharts-vue';
-import { computed, onBeforeUnmount } from "vue";
+import { computed, onBeforeUnmount, reactive, watch, ref ,nextTick} from "vue";
 import { useMessage } from "naive-ui";
-import {useStore} from 'vuex'
+import { useStore } from 'vuex'
 const message = useMessage()
 const popData = defineProps({
     dataList: {
@@ -19,29 +23,34 @@ const popData = defineProps({
     }
 })
 
-
-
-let plotLinesData = reactive({
-    hBottom:null,
-    hTop:null
+const plotLinesData = reactive({
+    tBottom: null,
+    tTop: null
 })
-
 const store = useStore()
 const plot = computed(() => store.state.plotLineList)
-plotLinesData.hBottom = plot.value.hBottom
-plotLinesData.hTop = plot.value.hTop
 
+nextTick(()=>{
+    chartOptions1.yAxis.plotLines[0].value = plot.value.hTop
+    chartOptions1.yAxis.plotLines[0].label.text = `上限（${plot.value.hTop}Rh）`, //标签的内容
+    chartOptions1.yAxis.plotLines[1].value = plot.value.hBottom
+    chartOptions1.yAxis.plotLines[1].label.text = `下限（${plot.value.hBottom}Rh）` //标签的内容
+})
 
+//设置就展示
 emitter.on("onMessage", (val) => {
-    plotLinesData.hBottom = val.hBottom
-    plotLinesData.hTop = val.hTop
+    console.log('123',val)
+    chartOptions1.yAxis.plotLines[0].value = val.hTop
+    chartOptions1.yAxis.plotLines[0].label.text = `上限（${val.hTop}Rh）`, //标签的内容
+    chartOptions1.yAxis.plotLines[1].value = val.hBottom
+    chartOptions1.yAxis.plotLines[1].label.text = `下限（${val.hBottom}Rh）` //标签的内容
 });
 //关闭
 onBeforeUnmount(() => {
     emitter.off("onMessage");
 });
 const computedData = computed(() => {
-    console.log('计算属性',popData.dataList)
+    // console.log('计算属性',popData.dataList)
     if (popData.dataList.length != 0) {
         return computedDataFun()
     } else {
@@ -71,102 +80,106 @@ const computedDataFun = () => {
 
     return `最大值${maxData}，最小值${minData}，平均值${pingjun}`
 }
-const chartOptions = () => {
-    var obj = {
-        chart: {
-            zoomType: 'x',//框选放大
-            panning: true, //禁用放大
-            // zooming: {
-            //     singleTouch: true,
-            //     resetButton: {},
-            //     type: 'x',
-            //     panning: true, //禁用放大
-            // },
-            events: {
-                selection(event) {
-                    console.log('时间区间选择', event)
-                },
-            },
-        },
-        time: {
-            useUTC: false
-        },
-        boost: {
-            useGPUTranslations: false
-        },
-        xAxis: {
-            // labels: {
-            //     format: '{value:%Y-%m-%d %H:%M:%S}',
-            // },
-            type: 'datetime',
-        },
-        yAxis: {
-            opposite: false, //设置y轴提示在左边
-            title: {
-                // text: '温度℃'
-            },
-            plotLines:[{
-                color: '#FF1D00', //线的颜色，定义为红色
-                dashStyle: 'DashDot', //默认值，这里定义为实线
-                value: plotLinesData.hTop, //定义在那个值上显示标示线，这里是在x轴上刻度为3的值处垂直化一条线  
-                width: 2, //标示线的宽度，2px
-                label: {
-                    text: `湿度上限（${plotLinesData.hTop}Rh）`, //标签的内容
-                    align: 'right', //标签的水平位置，水平居左,默认是水平居中center
-                    // x: 10 //标签相对于被定位的位置水平偏移的像素，重新定位，水平居左10px
-                }
-            },{
-                color: '#FF1D00', //线的颜色，定义为红色
-                dashStyle: 'DashDot', //默认值，这里定义为实线
-                value: plotLinesData.hBottom, //定义在那个值上显示标示线，这里是在x轴上刻度为3的值处垂直化一条线  
-                width: 2, //标示线的宽度，2px
-                label: {
-                    text: `湿度下限（${plotLinesData.hBottom}Rh）`, //标签的内容
-                    align: 'right', //标签的水平位置，水平居左,默认是水平居中center
-                    // x: 10 //标签相对于被定位的位置水平偏移的像素，重新定位，水平居左10px
-                }
-            }]
-           
+
+watch(() => popData.dataList, (newValue) => {
+    chartOptions1.series = []
+    nextTick(()=>{
+        chartOptions1.series = newValue
+    })
+    
+}, { deep: true, immediate: false })
+
+const emit = defineEmits(['setTimeFun']);
+// 图表配置
+const chartOptions1 = reactive({
+    xAxis: {
+        type: 'datetime',
+        labels: {
+            format: '{value:%Y-%m-%d %H:%M:%S}',
         },
-        plotOptions: {
-            series: {
-                turboThreshold: 0 //性能阈值检查,默认值为1000，当数据量超过这个值就会报错；如果需要关掉性能阈值检查，可以将此参数设置为 0
-            },
+    },
+    time: {
+        useUTC: false
+    },
+    boost: {
+        useGPUTranslations: true
+    },
+
+    tooltip: {
+        xDateFormat: '%Y-%m-%d %H:%M:%S',
+    },
+    yAxis: {
+        opposite: false, //设置y轴提示在左边
+        title: {
+            // text: '温度℃'
         },
-        legend: {
-            layout: 'vertical',
-            align: 'right',
-            verticalAlign: 'middle'
+        plotLines: [{
+            color: '#FF1D00', //线的颜色，定义为红色
+            dashStyle: 'DashDot', //默认值，这里定义为实线
+            value: plotLinesData.hTop, //定义在那个值上显示标示线，这里是在x轴上刻度为3的值处垂直化一条线  
+            width: 2, //标示线的宽度，2px
+            label: {
+                text: `上限（${plotLinesData.hTop}Rh）`, //标签的内容
+                align: 'right', //标签的水平位置，水平居左,默认是水平居中center
+                // x: 10 //标签相对于被定位的位置水平偏移的像素，重新定位，水平居左10px
+            }
+        }, {
+            color: '#FF1D00', //线的颜色，定义为红色
+            dashStyle: 'DashDot', //默认值，这里定义为实线
+            value: plotLinesData.hBottom, //定义在那个值上显示标示线，这里是在x轴上刻度为3的值处垂直化一条线  
+            width: 2, //标示线的宽度，2px
+            label: {
+                text: `下限（${plotLinesData.hBottom}Rh）`, //标签的内容
+                align: 'right', //标签的水平位置，水平居左,默认是水平居中center
+                // x: 10 //标签相对于被定位的位置水平偏移的像素，重新定位，水平居左10px
+            }
+        }]
+
+    },
+    plotOptions: {
+        series: {
+            turboThreshold: 0 //性能阈值检查,默认值为1000，当数据量超过这个值就会报错；如果需要关掉性能阈值检查，可以将此参数设置为 0
         },
-        rangeSelector: {
+    },
+
+    legend: {
+        enabled: true,
+    },
+
+    accessibility: {
+        enabled: false,
+    },
+    rangeSelector: {
             buttons: [], // 不显示左边的zoom
             selected: 1,
             inputEnabled: false // 不显示日期输入框
         },
-        title: {
-            // text: '冷链温度曲线图'
-        },
-        subtitle: {
-            useHTML: true,
-            // text:'1111'//副标题
-        },
-        dataGrouping: {
-            enabled: true // 取消根据日期进行数据分组
+    boost: {
+        useGPUTranslations: true,
+        seriesThreshold: 5,
+    },
+
+    scrollbar: {
+        enabled: false,
+    },
+    chart: {
+        zooming: {
+            singleTouch: true,
+            resetButton: {},
+            type: 'xy',
         },
-        tooltip: {
-            valueSuffix: ' Rh',
-            xDateFormat: '%Y-%m-%d %H:%M:%S',
-            // pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.0f}%</b><br/>',
-            shared: true
-            // chart: {
-            //     type: 'spline' //图表类型,column,line,spline,area等
-            // }
+        events: {
+            selection(event) {
+                if (event.xAxis) {
+                    console.log('框选')
+                    emitter.emit("onSelectionTime",event.xAxis);
+                    emit("setTimeFun", event.xAxis)
+                }
+            },
         },
-        series: popData.dataList
-    }
-    return obj
-}
-
+    },
 
+    series: [],
+})
 
 </script>

src/components/highcharts-t.vue

@@ -1,37 +1,48 @@
 <template>
     <div style="height: 100%;">
-        <Chart ref="chart1" style="min-height: 600px;" :options="seriesData.chartData" constructor-type="stockChart"></Chart>
-        <!-- <div style="text-align: center;margin-top: 20px;">{{ computedData }}</div> -->
+        <Chart v-if="chartOptions1.series.length != 0" style="min-height: 600px;" :options="chartOptions1"
+            constructor-type="stockChart">
+        </Chart>
+        <div style="text-align: center;margin-top: 20px;">{{ computedData }}</div>
     </div>
 </template>
 
 <script setup>
 import emitter from "@/plugin/bus";
+// const emit = defineEmits(['submit']);
 import { Chart } from 'highcharts-vue';
-import { computed, onBeforeUnmount, reactive, watch } from "vue";
+import { computed, onBeforeUnmount, reactive, watch, ref ,nextTick} from "vue";
 import { useMessage } from "naive-ui";
-import {useStore} from 'vuex'
+import { useStore } from 'vuex'
 const message = useMessage()
 const popData = defineProps({
     dataList: {
-        type: Array,  
+        type: Array,
         default: () => [],
     }
 })
 
 const plotLinesData = reactive({
-    tBottom:null,
-    tTop:null
+    tBottom: null,
+    tTop: null
 })
 const store = useStore()
 const plot = computed(() => store.state.plotLineList)
-plotLinesData.tBottom = plot.value.tBottom
-plotLinesData.tTop = plot.value.tTop
 
+nextTick(()=>{
+    chartOptions1.yAxis.plotLines[0].value = plot.value.tTop
+    chartOptions1.yAxis.plotLines[0].label.text = `上限（${plot.value.tTop}Rh）`, //标签的内容
+    chartOptions1.yAxis.plotLines[1].value = plot.value.tBottom
+    chartOptions1.yAxis.plotLines[1].label.text = `下限（${plot.value.tBottom}Rh）` //标签的内容
+})
 
+//设置就展示
 emitter.on("onMessage", (val) => {
-    plotLinesData.tBottom = val.tBottom
-    plotLinesData.tTop = val.tTop
+    console.log('123',val)
+    chartOptions1.yAxis.plotLines[0].value = val.tTop
+    chartOptions1.yAxis.plotLines[0].label.text = `上限（${val.tTop}Rh）`, //标签的内容
+    chartOptions1.yAxis.plotLines[1].value = val.tBottom
+    chartOptions1.yAxis.plotLines[1].label.text = `下限（${val.tBottom}Rh）` //标签的内容
 });
 //关闭
 onBeforeUnmount(() => {
@@ -68,149 +79,106 @@ const computedDataFun = () => {
 
     return `最大值${maxData}，最小值${minData}，平均值${pingjun}`
 }
-watch(()=>popData.dataList, (newValue)=>{
-    console.table('watch',seriesData.chartData)
-    seriesData.chartData.series = newValue
-    // chartOptions()
-    // chart1.value.chart.userOptions.series = []
-},{deep:true,immediate: false})
 
-// const dataLists = reactive({ 
-//     objData:[{
-//         name:'',
-//         data:[]
-//     }],
-//     arrData:[]
-// })
-// const funData = ()=>{
-//     let t = ref(1681621260000)
-//     for (let index = 0; index < 3000; index++) {
-//         t.value = t.value + 60000
-//         dataLists.arrData.push([t.value,Math.random()*10, "117", "117", Math.random()*100])
-//     }
-//     dataLists.objData[0].data = dataLists.arrData
-//     console.log('显示的值1',dataLists.objData)
-// }
-// funData()
-const seriesData = reactive({
-    chartData:null
-})
-let chartOptions = () => {
-    seriesData.chartData = {
-        chart: {
-            // renderTo : 'test_container',
-            type : 'scatter',
-            zoomType : 'x',//框选放大
-            // panning: true, //禁用放大
-            events: {
-                selection :  function (event) {
-                    console.log('1212121',event)
-                // 获取操作chart
-                // var chart = ''
-                //  // 点击缩放重置
-                // if(event.xAxis == undefined){
-                //         // x轴最大值设为xMaxValue
-                //         chart.xAxis[0].update({ max: xMaxValue});
-                //  }
-                //  // 选择x轴区域
-                //     else{
-                //         // x轴最大值设为null
-                //         chart.xAxis[0].update({ max: null});
-                //  }
-                }
-            }
-            
-        },
-        time: {
-            useUTC: true
-        },
-        
-        boost: {
-            useGPUTranslations: true
-        },
-        xAxis: {
-            // labels: {
-            //     format: '{value:%Y-%m-%d %H:%M:%S}',
-            // },
-            type: 'datetime',
-        },
-        yAxis: {
-            opposite: false, //设置y轴提示在左边
-            title: {
-                // text: '温度℃'
-            },
-            plotLines:[{
-                color: '#FF1D00', //线的颜色，定义为红色
-                dashStyle: 'DashDot', //默认值，这里定义为实线
-                value: plotLinesData.tTop, //定义在那个值上显示标示线，这里是在x轴上刻度为3的值处垂直化一条线  
-                width: 2, //标示线的宽度，2px
-                label: {
-                    text: `温度上限（${plotLinesData.tTop}℃）`, //标签的内容
-                    align: 'right', //标签的水平位置，水平居左,默认是水平居中center
-                    // x: 10 //标签相对于被定位的位置水平偏移的像素，重新定位，水平居左10px
-                }
-            },{
-                color: '#FF1D00', //线的颜色，定义为红色
-                dashStyle: 'DashDot', //默认值，这里定义为实线
-                value: plotLinesData.tBottom, //定义在那个值上显示标示线，这里是在x轴上刻度为3的值处垂直化一条线  
-                width: 2, //标示线的宽度，2px
-                label: {
-                    text: `温度下限（${plotLinesData.tBottom}℃）`, //标签的内容
-                    align: 'right', //标签的水平位置，水平居左,默认是水平居中center
-                    // x: 10 //标签相对于被定位的位置水平偏移的像素，重新定位，水平居左10px
-                }
-            }]
-           
+watch(() => popData.dataList, (newValue) => {
+    chartOptions1.series = []
+    nextTick(()=>{
+        chartOptions1.series = newValue
+    })
+    
+}, { deep: true, immediate: false })
+
+const emit = defineEmits(['setTimeFun']);
+// 图表配置
+const chartOptions1 = reactive({
+    xAxis: {
+        type: 'datetime',
+        labels: {
+            format: '{value:%Y-%m-%d %H:%M:%S}',
         },
-        plotOptions: {
-            // line:{
-            //     dataLabels:{
-            //         enabled:true, //是否显示数据标签
-            //         align:'left',
-            //         verticalAlign: 'bottom'
-            //     }
-            //  },
-            series: {
-                turboThreshold: 0 //性能阈值检查,默认值为1000，当数据量超过这个值就会报错；如果需要关掉性能阈值检查，可以将此参数设置为 0
-            },
+    },
+    time: {
+        useUTC: false
+    },
+    boost: {
+        useGPUTranslations: true
+    },
+
+    tooltip: {
+        xDateFormat: '%Y-%m-%d %H:%M:%S',
+    },
+    yAxis: {
+        opposite: false, //设置y轴提示在左边
+        title: {
+            // text: '温度℃'
         },
-        legend: {
-            layout: 'vertical',
-            align: 'right',
-            verticalAlign: 'middle',
-            x: -10,
-            y: 100,
-            borderWidth: 0
+        plotLines: [{
+            color: '#FF1D00', //线的颜色，定义为红色
+            dashStyle: 'DashDot', //默认值，这里定义为实线
+            value: plotLinesData.hTop, //定义在那个值上显示标示线，这里是在x轴上刻度为3的值处垂直化一条线  
+            width: 2, //标示线的宽度，2px
+            label: {
+                text: `上限（${plotLinesData.hTop}Rh）`, //标签的内容
+                align: 'right', //标签的水平位置，水平居左,默认是水平居中center
+                // x: 10 //标签相对于被定位的位置水平偏移的像素，重新定位，水平居左10px
+            }
+        }, {
+            color: '#FF1D00', //线的颜色，定义为红色
+            dashStyle: 'DashDot', //默认值，这里定义为实线
+            value: plotLinesData.hBottom, //定义在那个值上显示标示线，这里是在x轴上刻度为3的值处垂直化一条线  
+            width: 2, //标示线的宽度，2px
+            label: {
+                text: `下限（${plotLinesData.hBottom}Rh）`, //标签的内容
+                align: 'right', //标签的水平位置，水平居左,默认是水平居中center
+                // x: 10 //标签相对于被定位的位置水平偏移的像素，重新定位，水平居左10px
+            }
+        }]
+
+    },
+    plotOptions: {
+        series: {
+            turboThreshold: 0 //性能阈值检查,默认值为1000，当数据量超过这个值就会报错；如果需要关掉性能阈值检查，可以将此参数设置为 0
         },
-        rangeSelector: {
+    },
+
+    legend: {
+        enabled: true,
+    },
+
+    accessibility: {
+        enabled: false,
+    },
+    rangeSelector: {
             buttons: [], // 不显示左边的zoom
             selected: 1,
             inputEnabled: false // 不显示日期输入框
-            
         },
-        title: {
-            // text: '冷链温度曲线图'
-        },
-        subtitle: {
-            useHTML: true,
-            // text:'1111'//副标题
-        },
-        dataGrouping: {
-            enabled: true // 取消根据日期进行数据分组
+    boost: {
+        useGPUTranslations: true,
+        seriesThreshold: 5,
+    },
+
+    scrollbar: {
+        enabled: false,
+    },
+    chart: {
+        zooming: {
+            singleTouch: true,
+            resetButton: {},
+            type: 'xy',
         },
-        tooltip: {
-            valueSuffix: ' ℃',
-            xDateFormat: '%Y-%m-%d %H:%M:%S',
-            // pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.0f}%</b><br/>',
-            shared: true,
-            chart: {
-                type: 'spline' //图表类型,column,line,spline,area等
-            }
+        events: {
+            selection(event) {
+                if (event.xAxis) {
+                    console.log('框选')
+                    emitter.emit("onSelectionTime",event.xAxis);
+                    emit("setTimeFun", event.xAxis)
+                }
+            },
         },
-        series: popData.dataList,//这是模拟得数据改成船舰来的
-    }
-    console.log('执行')
-    // return obj
-}
-chartOptions()
+    },
+
+    series: [],
+})
+
 </script>

src/views/data/edit/FormList.vue

@@ -92,6 +92,7 @@
 import { getVerifyTemplateMapDataList,putVerifyTemplateMapData} from '@/api';
 import { getToken } from '@/utils/storage/sessionToken';
 import { ref, watch } from 'vue';
+import emitter from "@/plugin/bus";
 import { InformationCircleOutline } from '@vicons/ionicons5';
 import { TimeDate } from '@/plugin/timeFun';
 const props = defineProps({
@@ -152,22 +153,27 @@ watch(
   }
 );
 //监听框选时间区间选择时间
-watch(
-  () => props.temporalInterval,
-  (newValue) => {
-    console.log('框选',newValue)
-    // if(focusData.fNum==null){
-    //   return
-    // }
-    // if(focusData.obj.T_label === 9){
-    //   formValue.formList[focusData.fNum].T_value = newValue
-    // }
-    // if(focusData.obj.T_label === 13){
-    //   formValue.formList[focusData.fNum].T_value[0] = newValue
-    // }
-    // focusData.fNum = null
-  }
-);
+emitter.on("onSelectionTime", (val) => {
+    console.log('读取',val,parseInt(val[0].min),parseInt(val[0].max))    
+    let staTime = TimeDate(parseInt(val[0].min))
+    let endTime = TimeDate(parseInt(val[0].max))
+    if(focusData.fNum==null){
+      return
+    }
+    if(focusData.obj.T_label === 9){
+      formValue.formList[focusData.fNum].T_value = [staTime,endTime]
+    }
+    if(focusData.obj.T_label === 13){
+      formValue.formList[focusData.fNum].T_value[0] = [staTime,endTime]
+    }
+    focusData.fNum = null
+});
+//关闭
+onBeforeUnmount(() => {
+    emitter.off("onSelectionTime");
+});
+
+
 watch(()=>formValue.formList, async(newValue,old)=>{
   console.log('最新',newValue,old)
   if(old.length!=0){

src/views/data/edit/index.vue

@@ -54,12 +54,12 @@
         <div class="h-full flex flex-col gap-y-3">
           <n-space justify="space-between">
             <n-input-group>
-              <n-date-picker format="yyyy-MM-dd HH:mm" :time-picker-props="{ format: 'HH:mm' }" @update:formatted-value="(value) => {
+              <n-date-picker format="yyyy-MM-dd HH:mm" v-model:value="ranges" :time-picker-props="{ format: 'HH:mm' }" @update:formatted-value="(value) => {
                 queryData.Time_start = value[0];
                 queryData.Time_end = value[1];
               }
                 " type="datetimerange" />
-              <n-button type="primary" @click="renderFun">搜索</n-button>
+              <!-- <n-button type="primary" @click="renderFun">搜索</n-button> -->
             </n-input-group>
             <n-space>
               <ExportVue :task="task" :class-list="classList" />
@@ -72,10 +72,11 @@
           </n-space>
           <n-tabs type="segment" animated v-model:value="tabChart" @update:value="handleTabChange">
             <n-tab-pane name="温度" tab="温度">
-              <highchartsT :dataList="dataList"></highchartsT>
+              <highchartsT :dataList="dataList" @setTimeFun="setTimeFun"></highchartsT>
+              
             </n-tab-pane>
             <n-tab-pane name="湿度" tab="湿度">
-              <highchartsH :dataList="dataList"></highchartsH>
+              <highchartsH :dataList="dataList" @setTimeFun="setTimeFun"></highchartsH>
             </n-tab-pane>
           </n-tabs>
         </div>
@@ -160,6 +161,7 @@ const task = window.sessionStorage.getItem('task')
   : {};
 
 
+
 // Modal 数据源
 const modal = reactive({
   showModal: false,
@@ -170,6 +172,11 @@ const modal = reactive({
  * --------最新写法开始-----------------------------------------------------------------------------------
  */
 // 列表
+
+
+
+
+
 const dataList = ref([]);
 
 
@@ -231,6 +238,19 @@ const getClassList = async () => {
 };
 getClassList();
 
+const ranges = ref(null)
+// watch(() => ranges.value, (newValue) => {
+//    console.log('时间',newValue)  
+// }, { deep: true, immediate: true })
+//图表框选时间修改
+const setTimeFun = (e)=>{
+  console.log('修改的三个hi见',e)
+  ranges.value = [parseInt(e[0].min),parseInt(e[0].max)]
+  queryData.Time_start = TimeDate(parseInt(e[0].min))
+  queryData.Time_end = TimeDate(parseInt(e[0].max))
+}
+
+
 const resData = ref()
 //渲染按钮
 const renderFun = async () => {