|
|
@@ -1,125 +1,175 @@
|
|
|
<template>
|
|
|
- <!-- 报警历史 - 搜索弹窗 -->
|
|
|
- <div class="codeSearch flex-col">
|
|
|
- <van-popup v-model:show="sheetShow" round class="codeSearchPopup">
|
|
|
- <div class="content">
|
|
|
- <van-form @submit="onSubmit">
|
|
|
- <van-field
|
|
|
- v-model="clientId"
|
|
|
- name="clientId"
|
|
|
- :label="$t('alarmHistory.equipmentNoLabel')"
|
|
|
- :placeholder="$t('alarmHistory.equipmentNoPlaceholder')"
|
|
|
- />
|
|
|
- <van-field
|
|
|
- v-model="name"
|
|
|
- name="name"
|
|
|
- :label="$t('alarmHistory.equipmentNameLabel')"
|
|
|
- :placeholder="$t('alarmHistory.equipmentNamePlaceholder')"
|
|
|
- />
|
|
|
- <div class="van-cell van-field">
|
|
|
- <div class="van-cell__title van-field__label">
|
|
|
- <label id="van-field-4-label" for="van-field-4-input">{{$t('alarmHistory.alarmTime')}}</label>
|
|
|
- </div>
|
|
|
- <div class="van-cell__value van-field__value">
|
|
|
- <div class="van-field__body">
|
|
|
- <input type="text" class="van-field__control" :placeholder="$t('alarmHistory.startTime')" style="text-align: center; width: 50%;" v-model="createStratDate" @click="createStratDateClick()"/>
|
|
|
- <span>{{$t('alarmHistory.to')}}</span>
|
|
|
- <input type="text" class="van-field__control" :placeholder="$t('alarmHistory.endTime')" style="text-align: center; width: 50%;" v-model="createEndDate" @click="createEndDateClick()"/>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 操作 -->
|
|
|
- <van-row justify="space-around" style="padding: 1em;">
|
|
|
- <van-button span="5" round type="primary" style="height: 2em; padding: 0 2em;" native-type="submit">{{$t('alarmHistory.clickQuery')}}</van-button>
|
|
|
- </van-row>
|
|
|
- </van-form>
|
|
|
- </div>
|
|
|
- </van-popup>
|
|
|
- <van-popup v-model:show="createStratDateShow" round position="bottom">
|
|
|
- <van-datetime-picker
|
|
|
- v-model="createStratDate"
|
|
|
- type="datetime"
|
|
|
- :title="$t('alarmHistory.selectFullTime')"
|
|
|
- @confirm="createStratDateConFirm($event)"
|
|
|
- @cancel="createStratDateCancel()"
|
|
|
- :min-date="minDate"
|
|
|
- />
|
|
|
- </van-popup>
|
|
|
- <van-popup v-model:show="createEndDateShow" round position="bottom">
|
|
|
- <van-datetime-picker
|
|
|
- v-model="createEndDate"
|
|
|
- type="datetime"
|
|
|
- title="{{$t('alarmHistory.selectFullTime')}}"
|
|
|
- @confirm="createEndDateConFirm($event)"
|
|
|
- @cancel="createEndDateCancel()"
|
|
|
- :min-date="minDate"
|
|
|
- />
|
|
|
- </van-popup>
|
|
|
- </div>
|
|
|
+ <!-- 报警历史 - 搜索弹窗 -->
|
|
|
+ <div class="codeSearch flex-col">
|
|
|
+ <van-popup v-model:show="sheetShow" round class="codeSearchPopup">
|
|
|
+ <div class="content">
|
|
|
+ <van-form @submit="onSubmit">
|
|
|
+ <van-field v-model="clientId" name="clientId" :label="$t('alarmHistory.equipmentNoLabel')"
|
|
|
+ :placeholder="$t('alarmHistory.equipmentNoPlaceholder')" />
|
|
|
+ <van-field v-model="name" name="name" :label="$t('alarmHistory.equipmentNameLabel')"
|
|
|
+ :placeholder="$t('alarmHistory.equipmentNamePlaceholder')" />
|
|
|
+ <div class="van-cell van-field">
|
|
|
+ <div class="van-cell__title van-field__label">
|
|
|
+ <label id="van-field-4-label"
|
|
|
+ for="van-field-4-input">{{$t('alarmHistory.alarmTime')}}</label>
|
|
|
+ </div>
|
|
|
+ <div class="van-cell__value van-field__value">
|
|
|
+ <div class="van-field__body">
|
|
|
+ <input type="text" class="van-field__control"
|
|
|
+ :placeholder="$t('alarmHistory.startTime')" style="text-align: center; width: 50%;"
|
|
|
+ v-model="createStartDate" @click="createStartDateClick()" />
|
|
|
+ <span>{{$t('alarmHistory.to')}}</span>
|
|
|
+ <input type="text" class="van-field__control" :placeholder="$t('alarmHistory.endTime')"
|
|
|
+ style="text-align: center; width: 50%;" v-model="createEndDate"
|
|
|
+ @click="createEndDateClick()" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 操作 -->
|
|
|
+ <van-row justify="space-around" style="padding: 1em;">
|
|
|
+ <van-button span="5" round type="primary" style="height: 2em; padding: 0 2em;"
|
|
|
+ native-type="submit">{{$t('alarmHistory.clickQuery')}}</van-button>
|
|
|
+ </van-row>
|
|
|
+ </van-form>
|
|
|
+ </div>
|
|
|
+ </van-popup>
|
|
|
+ <van-popup v-model:show="createStartDateShow" round position="bottom">
|
|
|
+ <van-datetime-picker
|
|
|
+ v-model="createStartDate"
|
|
|
+ type="datehour"
|
|
|
+ :title="$t('alarmHistory.selectFullTime')"
|
|
|
+ :min-date="minDate"
|
|
|
+ :max-date="maxDate"
|
|
|
+ @confirm="createStartDateConFirm($event)"
|
|
|
+ @cancel="createStartDateCancel()"
|
|
|
+ />
|
|
|
+<!-- <van-datetime-picker v-model="createStartDate" type="datetime" :title="$t('alarmHistory.selectFullTime')"
|
|
|
+ @confirm="createStartDateConFirm($event)" @cancel="createStartDateCancel()" :min-date="minDate" /> -->
|
|
|
+ </van-popup>
|
|
|
+ <van-popup v-model:show="createEndDateShow" round position="bottom">
|
|
|
+ <van-datetime-picker
|
|
|
+ v-model="createEndDate"
|
|
|
+ type="datehour"
|
|
|
+ :title="$t('alarmHistory.selectFullTime')"
|
|
|
+ :min-date="minDate"
|
|
|
+ :max-date="maxDate"
|
|
|
+ @confirm="createEndDateConFirm($event)"
|
|
|
+ @cancel="createEndDateCancel()"
|
|
|
+ />
|
|
|
+<!-- <van-datetime-picker v-model="createEndDate" type="datetime" :title="$t('alarmHistory.selectFullTime')"
|
|
|
+ @confirm="createEndDateConFirm($event)" @cancel="createEndDateCancel()" :min-date="minDate" /> -->
|
|
|
+ </van-popup>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { ref } from 'vue';
|
|
|
-import dateUtil from "@/utils/dateUtil";
|
|
|
+ import {
|
|
|
+ ref
|
|
|
+ } from 'vue';
|
|
|
+ import dateUtil from "@/utils/dateUtil";
|
|
|
|
|
|
-export default {
|
|
|
- name: 'historySearch',
|
|
|
- components: {},
|
|
|
- setup(prop, context) {
|
|
|
- const sheetShow = ref(false);
|
|
|
- const minDate = new Date(2018, 1, 1);
|
|
|
- const showSearch = () => { sheetShow.value = true; };
|
|
|
- const clientId = ref('');
|
|
|
- const name = ref('');
|
|
|
- // 创建开始时间
|
|
|
- const createStratDate = ref('');
|
|
|
- const createStratDateShow = ref(false);
|
|
|
- const createStratDateClick = () => { if (createStratDate.value === '') { createStratDate.value = new Date(); } createStratDateShow.value = true;}
|
|
|
- const createStratDateConFirm = (data) => { createStratDate.value = dateUtil.formateDate( data, "yyyy-MM-dd hh:mm:ss" ); createStratDateShow.value = false; }
|
|
|
- const createStratDateCancel = () => { createStratDate.value = dateUtil.formateDate( new Date(createStratDate.value), "yyyy-MM-dd hh:mm:ss" ); createStratDateShow.value = false; }
|
|
|
- // 创建结束时间
|
|
|
- const createEndDate = ref('');
|
|
|
- const createEndDateShow = ref(false);
|
|
|
- const createEndDateClick = () => { if (createEndDate.value === '') { createEndDate.value = new Date(); } createEndDateShow.value = true;}
|
|
|
- const createEndDateConFirm = (data) => { createEndDate.value = dateUtil.formateDate( data, "yyyy-MM-dd hh:mm:ss" ); createEndDateShow.value = false; }
|
|
|
- const createEndDateCancel = () => { createEndDate.value = dateUtil.formateDate( new Date(createEndDate.value), "yyyy-MM-dd hh:mm:ss" ); createEndDateShow.value = false; }
|
|
|
- // 提交搜索表单触发搜索
|
|
|
- const onSubmit = () => {
|
|
|
- const searchParam = {};
|
|
|
- if (clientId.value !== '') { searchParam.clientId = clientId.value; }
|
|
|
- if (name.value !== '') { searchParam.name = name.value; }
|
|
|
- if (createStratDate.value !== '') { searchParam.startDate = dateUtil.formateDate( new Date(createStratDate.value), "yyyy/MM/dd hh:mm:ss" ); }
|
|
|
- if (createEndDate.value !== '') { searchParam.endDate = dateUtil.formateDate( new Date(createEndDate.value), "yyyy/MM/dd hh:mm:ss" ); }
|
|
|
- context.emit('search', searchParam);
|
|
|
- sheetShow.value = false;
|
|
|
- }
|
|
|
- return {
|
|
|
- sheetShow,
|
|
|
- minDate,
|
|
|
- showSearch,
|
|
|
- clientId,
|
|
|
- name,
|
|
|
- createStratDate,
|
|
|
- createStratDateShow,
|
|
|
- createStratDateClick,
|
|
|
- createStratDateConFirm,
|
|
|
- createStratDateCancel,
|
|
|
- createEndDate,
|
|
|
- createEndDateShow,
|
|
|
- createEndDateClick,
|
|
|
- createEndDateConFirm,
|
|
|
- createEndDateCancel,
|
|
|
- onSubmit
|
|
|
- };
|
|
|
- },
|
|
|
-};
|
|
|
+ export default {
|
|
|
+ name: 'historySearch',
|
|
|
+ components: {},
|
|
|
+ setup(prop, context) {
|
|
|
+ const sheetShow = ref(false);
|
|
|
+ const minDate = new Date(2018, 0, 1);
|
|
|
+ const maxDate = new Date();
|
|
|
+ const showSearch = () => {
|
|
|
+ sheetShow.value = true;
|
|
|
+ };
|
|
|
+ const clientId = ref('');
|
|
|
+ const name = ref('');
|
|
|
+ // 创建开始时间
|
|
|
+ const createStartDate = ref('');
|
|
|
+ const createStartDateShow = ref(false);
|
|
|
+ const createStartDateClick = () => {
|
|
|
+ if (createStartDate.value === '') {
|
|
|
+ createStartDate.value = new Date();
|
|
|
+ }
|
|
|
+ createStartDateShow.value = true;
|
|
|
+ }
|
|
|
+ const createStartDateConFirm = (data) => {
|
|
|
+ createStartDate.value = dateUtil.formateDate(data, "yyyy-MM-dd hh:mm:ss");
|
|
|
+ createStartDateShow.value = false;
|
|
|
+ }
|
|
|
+ const createStartDateCancel = () => {
|
|
|
+ createStartDate.value = dateUtil.formateDate(new Date(createStartDate.value), "yyyy-MM-dd hh:mm:ss");
|
|
|
+ createStartDateShow.value = false;
|
|
|
+ }
|
|
|
+ // 创建结束时间
|
|
|
+ const createEndDate = ref('');
|
|
|
+ const createEndDateShow = ref(false);
|
|
|
+ const createEndDateClick = () => {
|
|
|
+ if (createEndDate.value === '') {
|
|
|
+ createEndDate.value = new Date();
|
|
|
+ }
|
|
|
+ createEndDateShow.value = true;
|
|
|
+ }
|
|
|
+ const createEndDateConFirm = (data) => {
|
|
|
+ createEndDate.value = dateUtil.formateDate(data, "yyyy-MM-dd hh:mm:ss");
|
|
|
+ createEndDateShow.value = false;
|
|
|
+ }
|
|
|
+ const createEndDateCancel = () => {
|
|
|
+ createEndDate.value = dateUtil.formateDate(new Date(createEndDate.value), "yyyy-MM-dd hh:mm:ss");
|
|
|
+ createEndDateShow.value = false;
|
|
|
+ }
|
|
|
+ // 提交搜索表单触发搜索
|
|
|
+ const onSubmit = () => {
|
|
|
+ const searchParam = {};
|
|
|
+ if (clientId.value !== '') {
|
|
|
+ searchParam.clientId = clientId.value;
|
|
|
+ }
|
|
|
+ if (name.value !== '') {
|
|
|
+ searchParam.name = name.value;
|
|
|
+ }
|
|
|
+ if (createStartDate.value !== '') {
|
|
|
+ searchParam.startDate = dateUtil.formateDate(new Date(createStartDate.value),
|
|
|
+ "yyyy/MM/dd hh:mm:ss");
|
|
|
+ }
|
|
|
+ if (createEndDate.value !== '') {
|
|
|
+ searchParam.endDate = dateUtil.formateDate(new Date(createEndDate.value), "yyyy/MM/dd hh:mm:ss");
|
|
|
+ }
|
|
|
+ context.emit('search', searchParam);
|
|
|
+ sheetShow.value = false;
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ sheetShow,
|
|
|
+ minDate,
|
|
|
+ maxDate,
|
|
|
+ showSearch,
|
|
|
+ clientId,
|
|
|
+ name,
|
|
|
+ createStartDate,
|
|
|
+ createStartDateShow,
|
|
|
+ createStartDateClick,
|
|
|
+ createStartDateConFirm,
|
|
|
+ createStartDateCancel,
|
|
|
+ createEndDate,
|
|
|
+ createEndDateShow,
|
|
|
+ createEndDateClick,
|
|
|
+ createEndDateConFirm,
|
|
|
+ createEndDateCancel,
|
|
|
+ onSubmit
|
|
|
+ };
|
|
|
+ },
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-.codeSearch {
|
|
|
- width: 100%;
|
|
|
- /deep/ .codeSearchPopup { width: 90%; }
|
|
|
- .content { padding-top: 1em; }
|
|
|
- .field .van-field__label { width: auto; }
|
|
|
-}
|
|
|
+ .codeSearch {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ /deep/ .codeSearchPopup {
|
|
|
+ width: 90%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ padding-top: 1em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .field .van-field__label {
|
|
|
+ width: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
