zangch
/
HT.UI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(datepicker): 替换 el-date-picker 为 vue2-datepicker

Browse Source 
- 在多个组件中将 el-date-picker 替换为 vue2-datepicker
- 调整日期选择器的样式和配置，以适应项目需求
- 在 package.json 中添加 vue2-datepicker 依赖
master
zch 4 months ago
parent 71bd740301
commit c58ff44fc3
5 changed files with 90 additions and 44 deletions
Show Stats Download Patch File Download Diff File

1
package.json
Unescape Escape View File

@ -59,6 +59,7 @@
"vue-cropper": "0.5.5", "vue-cropper": "0.5.5",
"vue-meta": "2.4.0", "vue-meta": "2.4.0",
"vue-router": "3.4.9", "vue-router": "3.4.9",
"vue2-datepicker": "^3.11.1",
"vuedraggable": "2.24.3", "vuedraggable": "2.24.3",
"vuex": "3.6.0", "vuex": "3.6.0",
"xlsx": "^0.17.0" "xlsx": "^0.17.0"

30
src/views/ems/record/recordSteamInstant/index.vue
Unescape Escape View File

@ -50,15 +50,15 @@
></el-date-picker> ></el-date-picker>
</el-form-item>--> </el-form-item>-->
<el-form-item label="记录时间"> <el-form-item label="记录时间">
<el-date-picker <date-picker
v-model="daterangeRecordTime" v-model="daterangeRecordTime"
style="width: 340px" range
value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
range-separator="-" value-type="YYYY-MM-DD HH:mm:ss"
start-placeholder="开始时间" :placeholder="['开始时间', '结束时间']"
end-placeholder="结束时间" :lang="lang"
></el-date-picker> ></date-picker>
</el-form-item> </el-form-item>
<!-- <el-form-item label="记录日期范围"> <!-- <el-form-item label="记录日期范围">
@ -272,11 +272,15 @@ import { getMonitorInfoTree, listBaseMonitorInfo } from '@/api/ems/base/baseMoni
import Treeselect from '@riophae/vue-treeselect' import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css' import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { parseTime } from '@/utils/ruoyi' import { parseTime } from '@/utils/ruoyi'
import DatePicker from 'vue2-datepicker';
import 'vue2-datepicker/index.css';
import 'vue2-datepicker/locale/zh-cn';
export default { export default {
name: 'RecordSteamInstant', name: 'RecordSteamInstant',
components: { components: {
Treeselect Treeselect,
DatePicker
}, },
data() { data() {
return { return {
@ -356,7 +360,13 @@ export default {
{ key: 9, label: `压力差值`, visible: false }, { key: 9, label: `压力差值`, visible: false },
{ key: 10, label: `记录时间`, visible: true }, { key: 10, label: `记录时间`, visible: true },
/*{ key: 12, label: `计量设备名称`, visible: true }*/ /*{ key: 12, label: `计量设备名称`, visible: true }*/
] ],
lang: {
formatLocale: {
firstDayOfWeek: 1
},
monthBeforeYear: false
}
} }
}, },
created() { created() {

29
src/views/ems/report/currentSteamCurve/index.vue
Unescape Escape View File

@ -40,15 +40,16 @@
<!-- />--> <!-- />-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
<el-form-item label="采集时间"> <el-form-item label="采集时间">
<el-date-picker <date-picker
v-model="daterangeRecordTime" v-model="daterangeRecordTime"
range
type="datetime"
format="YYYY-MM-DD HH:mm:ss"
value-type="YYYY-MM-DD HH:mm:ss"
:placeholder="['开始时间', '结束时间']"
:lang="lang"
style="width: 340px" style="width: 340px"
value-format="yyyy-MM-dd HH:mm:ss" ></date-picker>
type="datetimerange"
range-separator="-"
start-placeholder="开始时间"
end-placeholder="结束时间"
></el-date-picker>
</el-form-item> </el-form-item>
<!-- <el-form-item label="采集日期范围"> <!-- <el-form-item label="采集日期范围">
@ -97,13 +98,17 @@ import Chart from '@/components/Charts/Chart'
import * as echarts from 'echarts' import * as echarts from 'echarts'
import {pointSteamInstantList} from "@/api/ems/report/reportPointSteam"; import {pointSteamInstantList} from "@/api/ems/report/reportPointSteam";
import {listRecordSteamInstant, steamInstantAvg, steamInstantList} from "@/api/ems/record/recordSteamInstant"; import {listRecordSteamInstant, steamInstantAvg, steamInstantList} from "@/api/ems/record/recordSteamInstant";
import DatePicker from 'vue2-datepicker';
import 'vue2-datepicker/index.css';
import 'vue2-datepicker/locale/zh-cn';
export default { export default {
name: 'currentSteamCurve', name: 'currentSteamCurve',
dicts: ['collect_type'], dicts: ['collect_type'],
components: { components: {
Chart, Chart,
Treeselect Treeselect,
DatePicker
}, },
data() { data() {
return { return {
@ -183,7 +188,13 @@ export default {
{ key: 10, label: `压力差值`, visible: false }, { key: 10, label: `压力差值`, visible: false },
{ key: 11, label: `记录时间`, visible: true }, { key: 11, label: `记录时间`, visible: true },
{ key: 12, label: `计量设备名称`, visible: true } { key: 12, label: `计量设备名称`, visible: true }
] ],
lang: {
formatLocale: {
firstDayOfWeek: 1
},
monthBeforeYear: false
}
} }
}, },
created() { created() {

45
src/views/ems/report/pointSteamCurve/index.vue
Unescape Escape View File

@ -30,24 +30,25 @@
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
label-width="100px" label-width="100px"
> >
<!-- <el-form-item label="计量设备编号" prop="monitorCode">--> <!-- <el-form-item label="计量设备编号" prop="monitorCode">
<!-- <el-input--> <el-input
<!-- v-model="queryParams.monitorCode"--> v-model="queryParams.monitorCode"
<!-- placeholder="请输入计量设备编号"--> placeholder="请输入计量设备编号"
<!-- clearable--> clearable
<!-- @keyup.enter.native="handleQuery"--> @keyup.enter.native="handleQuery"
<!-- />--> />
<!-- </el-form-item>--> </el-form-item>-->
<el-form-item label="记录时间"> <el-form-item label="记录时间">
<el-date-picker <date-picker
v-model="daterangeRecordTime" v-model="daterangeRecordTime"
range
type="datetime"
format="YYYY-MM-DD HH:mm:ss"
value-type="YYYY-MM-DD HH:mm:ss"
:placeholder="['开始时间', '结束时间']"
:lang="lang"
style="width: 340px" style="width: 340px"
value-format="yyyy-MM-dd HH:mm:ss" ></date-picker>
type="datetimerange"
range-separator="-"
start-placeholder="开始时间"
end-placeholder="结束时间"
></el-date-picker>
</el-form-item> </el-form-item>
<!-- <el-form-item label="采集日期范围"> <!-- <el-form-item label="采集日期范围">
@ -96,13 +97,17 @@ import { parseTime } from '@/utils/ruoyi'
import Chart from '@/components/Charts/Chart' import Chart from '@/components/Charts/Chart'
import * as echarts from 'echarts' import * as echarts from 'echarts'
import {pointSteamInstantList} from "@/api/ems/report/reportPointSteam"; import {pointSteamInstantList} from "@/api/ems/report/reportPointSteam";
import DatePicker from 'vue2-datepicker';
import 'vue2-datepicker/index.css';
import 'vue2-datepicker/locale/zh-cn';
export default { export default {
name: 'currentSteamCurve', name: 'currentSteamCurve',
dicts: ['collect_type'], dicts: ['collect_type'],
components: { components: {
Chart, Chart,
Treeselect Treeselect,
DatePicker
}, },
data() { data() {
return { return {
@ -176,7 +181,13 @@ export default {
{ key: 10, label: `更新人`, visible: false }, { key: 10, label: `更新人`, visible: false },
{ key: 11, label: `更新时间`, visible: false }, { key: 11, label: `更新时间`, visible: false },
{ key: 12, label: `计量设备名称`, visible: true } { key: 12, label: `计量设备名称`, visible: true }
] ],
lang: {
formatLocale: {
firstDayOfWeek: 1
},
monthBeforeYear: false
},
} }
}, },
created() { created() {

29
src/views/ems/report/reportPointSteam/index.vue
Unescape Escape View File

@ -39,15 +39,16 @@
<!-- />--> <!-- />-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
<el-form-item label="开始时间"> <el-form-item label="开始时间">
<el-date-picker <date-picker
v-model="daterangeBeginTime" v-model="daterangeBeginTime"
range
type="datetime"
format="YYYY-MM-DD HH:mm:ss"
value-type="YYYY-MM-DD HH:mm:ss"
:placeholder="['开始时间', '结束时间']"
:lang="lang"
style="width: 340px" style="width: 340px"
value-format="yyyy-MM-dd HH:mm:ss" ></date-picker>
type="datetimerange"
range-separator="-"
start-placeholder="开始时间"
end-placeholder="结束时间"
></el-date-picker>
</el-form-item> </el-form-item>
<!-- <el-form-item label="采集日期范围"> <!-- <el-form-item label="采集日期范围">
<el-date-picker <el-date-picker
@ -272,10 +273,16 @@ import {
import '@riophae/vue-treeselect/dist/vue-treeselect.css' import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { parseTime } from '@/utils/ruoyi' import { parseTime } from '@/utils/ruoyi'
import { getMonitorInfoTree } from '@/api/ems/base/baseMonitorInfo' import { getMonitorInfoTree } from '@/api/ems/base/baseMonitorInfo'
import DatePicker from 'vue2-datepicker'
import 'vue2-datepicker/index.css'
import 'vue2-datepicker/locale/zh-cn'
export default { export default {
name: 'reportPointSteam', name: 'reportPointSteam',
dicts: ['update_flag'], dicts: ['update_flag'],
components: {
DatePicker
},
data() { data() {
return { return {
//左侧树结构List //左侧树结构List
@ -342,7 +349,13 @@ export default {
{ key: 10, label: `更新人`, visible: false }, { key: 10, label: `更新人`, visible: false },
{ key: 11, label: `更新时间`, visible: false }, { key: 11, label: `更新时间`, visible: false },
{ key: 12, label: `计量设备名称`, visible: true } { key: 12, label: `计量设备名称`, visible: true }
] ],
lang: {
formatLocale: {
firstDayOfWeek: 1
},
monthBeforeYear: false
}
} }
}, },
created() { created() {

Write Preview
Loading…
Cancel
Save