方位查询

zhouwenxuan

2023-12-29 29b05843c7c90ddaf29629084fd60e29c5afbd26

方位查询

 src/types/monitorData.d.ts

@@ -39,9 +39,11 @@
                endTime: string;
                time: Array<any>;
                gas: string;
                position: number | null;
            }
        };
        gasList: Array<any>;
        positionList: Array<any>;
    }
}


 src/views/bigScreen/components/screen.vue

@@ -165,6 +165,14 @@
                      :value="item.id"
                  />
                </el-select>
                <el-select v-model="positionSearch" :teleported="false" class="m-2" placeholder="Select" size="small" @change="changeGas1">
                  <el-option
                      v-for="item in positionOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                  />
                </el-select>
                <div class="checkMore" @click="toNdPage()"><el-icon><DArrowRight /></el-icon></div>
              </div>
            </div>
@@ -252,7 +260,7 @@
</template>

<script lang="ts">
import {toRefs, reactive, onMounted, ref, defineComponent, onUnmounted} from 'vue';
import {toRefs, reactive, onMounted, ref, defineComponent, onUnmounted, nextTick} from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter} from "vue-router";
import * as echarts from "echarts";
@@ -283,6 +291,8 @@
  infoParams: {}
  gasSearch: number | null
  tlGasSearch: number | null
  positionSearch: number | null
  positionOptions: Array<gasType>
  gasOptions: Array<gasType>
  monthAgo: string,
  today: string,
@@ -349,9 +359,28 @@
            startTime: '',
            endTime: ''
          },
          positionSearch: null,
          gasSearch: null,
          tlGasSearch: null,
          gasOptions: [],
          positionOptions: [
            {
              id: null,
              name: '全部'
            },
            {
              id: 1,
              name: '方位1'
            },
            {
              id: 2,
              name: '方位2'
            },
            {
              id: 3,
              name: '方位3'
            }
          ],
          monthAgo: '',
          today: '',
          gasData: [],
@@ -562,7 +591,7 @@
        }

        const getGasNdData = async ()=>{
          const res = await bigScreenApi().getGasNdData({startTime: state.today+' 00:00:00',endTime: state.today+' 23:59:59',gasName: state.gasSearch})
          const res = await bigScreenApi().getGasNdData({startTime: state.today+' 00:00:00',endTime: state.today+' 23:59:59',gasName: state.gasSearch,position: state.positionSearch})
          if(res.data.code == 100){
            if(res.data.data && res.data.data.length>0){
              state.hasNd = true
@@ -1093,6 +1122,7 @@
      }

      const initgasN =(data:Array<string>,time: Array<string>)=>{
        nextTick(() => {
        let dom = document.getElementById(gasN.value);
        let myChart = echarts.init(dom);
        let option: EChartsOption;
@@ -1151,6 +1181,7 @@
        window.addEventListener("resize",function (){
          myChart.resize();
        });
        });
      }
      const initgasT =(time: Array<string>,data: Array<any>)=>{
        let dom = document.getElementById(gasT.value);

 src/views/monitorData/gasData/index.vue

@@ -24,6 +24,17 @@
                            <el-option v-for="item in state.tableData.gasList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                  <el-form-item label="方位：">
                    <el-select
                        v-model="state.tableData.listQuery.searchParams.position"
                        class="w100"
                        style="max-width: 180px"
                        size="default"
                    >
                      <el-option v-for="item in state.tableData.positionList" :key="item.label" :label="item.value" :value="item.label"></el-option>
                    </el-select>
                  </el-form-item>

                    <el-button size="default" type="primary" class="ml10" @click="search()">
                        <el-icon>
                            <ele-Search />
@@ -46,6 +57,7 @@
                <el-table-column align="center" prop="windDirection" label="风向"/>
                <el-table-column align="center" prop="name" label="气体名称"/>
                <el-table-column align="center" prop="gasValue" label="气体浓度"/>
                <el-table-column align="center" prop="position" label="方位"/>
            </el-table>
            <br />
            <el-pagination
@@ -87,10 +99,25 @@
                startTime: '',
                endTime: '',
                time: [],
                gas: ''
                gas: '',
                position: null
            }
        },
        gasList: []
        gasList: [],
        positionList: [
          {
            value: '方位1',
            label: 1
          },
          {
            value: '方位2',
            label: 2
          },
          {
            value: '方位3',
            label: 3
          },
        ]
    }
});
const gasChart = ref("eChartgasN" + Date .now() + Math .random())
@@ -138,7 +165,8 @@
    const chartParam = {
        startTime: moment(state.tableData.listQuery.searchParams.time[0]).format('YYYY-MM-DD HH:mm:ss'),
        endTime: moment(state.tableData.listQuery.searchParams.time[1]).format('YYYY-MM-DD HH:mm:ss'),
        gasName: state.tableData.listQuery.searchParams.gas
        gasName: state.tableData.listQuery.searchParams.gas,
        position: state.tableData.listQuery.searchParams.position
    }
    let resChart = await gasDataApi().getGasLineChart(chartParam);
    if(resChart.data.code == 100) {
@@ -172,7 +200,8 @@
        searchParams: {
            startTime: moment(state.tableData.listQuery.searchParams.time[0]).format('YYYY-MM-DD HH:mm:ss'),
            endTime: moment(state.tableData.listQuery.searchParams.time[1]).format('YYYY-MM-DD HH:mm:ss'),
            gasName: state.tableData.listQuery.searchParams.gas
            gasName: state.tableData.listQuery.searchParams.gas,
            position: state.tableData.listQuery.searchParams.position
        }
    }
    let res = await gasDataApi().getGasLinePage(pageParam);
@@ -222,7 +251,6 @@
        return item.id == state.tableData.listQuery.searchParams.gas
    });
    markLines.value = gasObj[0].threshold;

    initInfoData();
}
const reset = () => {
@@ -230,6 +258,7 @@
    state.tableData.listQuery.searchParams.gas = state.tableData.gasList[0].id;
    markLines.value = state.tableData.gasList[0].threshold;
    state.tableData.listQuery.pageIndex = 1;
    state.tableData.listQuery.searchParams.position = null;
    initInfoData();
}

@@ -273,6 +302,7 @@
        },
        series: [
            {
                // name : '总计',
                data: yData.value,
                type: 'line',
                markLine: {//图表标线
@@ -290,7 +320,7 @@
                        }
                    },],//type: 'average', 平均值,  min最小值,  max 最大值,  median中位数
                },
            }
            },
        ],
        dataZoom: [
            {