新增日期选择
This commit is contained in:
parent
60f976adbc
commit
d53d4564ed
|
|
@ -10,6 +10,7 @@
|
|||
"dependencies": {
|
||||
"@amap/amap-jsapi-loader": "^1.0.1",
|
||||
"@jiaminghi/data-view": "^2.10.0",
|
||||
"@vuepic/vue-datepicker": "^7.4.0",
|
||||
"axios": "^1.6.2",
|
||||
"echarts": "^5.4.3",
|
||||
"echarts-gl": "^2.0.9",
|
||||
|
|
@ -827,6 +828,21 @@
|
|||
"resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.3.8.tgz",
|
||||
"integrity": "sha512-8PGwybFwM4x8pcfgqEQFy70NaQxASvOC5DJwLQfpArw1UDfUXrJkdxD3BhVTMS+0Lef/TU7YO0Jvr0jJY8T+mw=="
|
||||
},
|
||||
"node_modules/@vuepic/vue-datepicker": {
|
||||
"version": "7.4.0",
|
||||
"resolved": "https://registry.npmmirror.com/@vuepic/vue-datepicker/-/vue-datepicker-7.4.0.tgz",
|
||||
"integrity": "sha512-dXYzbcnRet9b+Dkh+f8rhMnjj5QXgejJTQp+ZRALgwP2oeli2c8e4VvJ0NVxoc7QTU8D5x5Et8NP51C450Pkvg==",
|
||||
"dependencies": {
|
||||
"date-fns": "^2.30.0",
|
||||
"date-fns-tz": "^1.3.7"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18.12.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": ">=3.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@xmldom/xmldom": {
|
||||
"version": "0.8.10",
|
||||
"resolved": "https://registry.npmmirror.com/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
|
||||
|
|
@ -951,6 +967,25 @@
|
|||
"resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.2.tgz",
|
||||
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
|
||||
},
|
||||
"node_modules/date-fns": {
|
||||
"version": "2.30.0",
|
||||
"resolved": "https://registry.npmmirror.com/date-fns/-/date-fns-2.30.0.tgz",
|
||||
"integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.21.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.11"
|
||||
}
|
||||
},
|
||||
"node_modules/date-fns-tz": {
|
||||
"version": "1.3.8",
|
||||
"resolved": "https://registry.npmmirror.com/date-fns-tz/-/date-fns-tz-1.3.8.tgz",
|
||||
"integrity": "sha512-qwNXUFtMHTTU6CFSFjoJ80W8Fzzp24LntbjFFBgL/faqds4e5mo9mftoRLgr3Vi1trISsg4awSpYVsOQCRnapQ==",
|
||||
"peerDependencies": {
|
||||
"date-fns": ">=2.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/delayed-stream": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
"dependencies": {
|
||||
"@amap/amap-jsapi-loader": "^1.0.1",
|
||||
"@jiaminghi/data-view": "^2.10.0",
|
||||
"@vuepic/vue-datepicker": "^7.4.0",
|
||||
"axios": "^1.6.2",
|
||||
"echarts": "^5.4.3",
|
||||
"echarts-gl": "^2.0.9",
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 956 KiB After Width: | Height: | Size: 196 KiB |
|
|
@ -0,0 +1,230 @@
|
|||
<script lang="ts">
|
||||
/*
|
||||
一个根节点时，禁用组件根节点自动继承 attribute，必须使用这种写法！然后在要继承 attribute 的节点上绑定 v-bind="$attrs" 即可
|
||||
多个根节点时，只需在要继承 attribute 的节点上绑定 v-bind="$attrs" 即可
|
||||
*/
|
||||
export default {
|
||||
inheritAttrs: false,
|
||||
};
|
||||
</script>
|
||||
<script setup lang="ts">
|
||||
import VueDatePicker from "@vuepic/vue-datepicker";
|
||||
import "@vuepic/vue-datepicker/dist/main.css";
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
interface Props {
|
||||
width?: number; // 日期选择器宽度
|
||||
mode?: "time" | "date" | "week" | "month" | "year"; // 选择器模式，可选：时间time，日期date，周week，月month，年year
|
||||
range: boolean; // 多选
|
||||
// format?: string; // 日期展示格式，(y: 年, M: 月, d: 天, H: 时, m: 分, s: 秒)
|
||||
showTime?: boolean; // 是否增加时间选择
|
||||
showToday?: boolean; // 是否展示”今天“按钮
|
||||
multiCalendars?: boolean; // 范围选择器是否使用双日期面板
|
||||
// flow?: any[] // 定义选择顺序 ("calendar" | "time" | "month" | "year" | "minutes" | "hours" | "seconds")[]
|
||||
// dark?: boolean // 样式主题是否使用黑色
|
||||
modelType?: "timestamp" | "format"; // v-model 值类型，可选时间戳(timestamp)、字符串(format)，mode为week和year时，该配置不生效
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
width: 290,
|
||||
mode: "date",
|
||||
/* format default
|
||||
Single picker: 'MM/dd/yyyy HH:mm'
|
||||
Range picker: 'MM/dd/yyyy HH:mm - MM/dd/yyyy HH:mm'
|
||||
Month picker: 'MM/yyyy'
|
||||
Time picker: 'HH:mm'
|
||||
Time picker range: 'HH:mm - HH:mm'
|
||||
*/
|
||||
// format: "yyyy/MM/dd - yyyy/MM/dd",
|
||||
showTime: false,
|
||||
showToday: false,
|
||||
multiCalendars: false,
|
||||
range: false,
|
||||
// flow: () => [],
|
||||
// dark: false,
|
||||
modelType: "format",
|
||||
});
|
||||
const time = computed(() => {
|
||||
return props.mode === "time";
|
||||
});
|
||||
const week = computed(() => {
|
||||
return props.mode === "week";
|
||||
});
|
||||
const month = computed(() => {
|
||||
return props.mode === "month";
|
||||
});
|
||||
const year = computed(() => {
|
||||
return props.mode === "year";
|
||||
});
|
||||
const format = (date: Date) => {
|
||||
let day = date.getDate();
|
||||
let month = date.getMonth() + 1;
|
||||
let year = date.getFullYear();
|
||||
return `${year}-${month.toString().padStart(2, "0")}-${day
|
||||
.toString()
|
||||
.padStart(2, "0")}`;
|
||||
};
|
||||
|
||||
const datepicker = ref(null);
|
||||
|
||||
const date = ref("");
|
||||
const startDate = ref("");
|
||||
const endDate = ref("");
|
||||
|
||||
const handleDate = (e: any) => {
|
||||
startDate.value = format(e[0]);
|
||||
endDate.value = format(e[1]);
|
||||
emit("changeTime", {
|
||||
startDate: startDate.value,
|
||||
endDate: endDate.value,
|
||||
});
|
||||
};
|
||||
|
||||
const emit = defineEmits(["changeTime"]);
|
||||
|
||||
onMounted(() => {
|
||||
handleDate([new Date(), new Date()]);
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="m-datepicker" :style="`width: ${width}px;`">
|
||||
<VueDatePicker
|
||||
ref="datepicker"
|
||||
locale="zh-CN"
|
||||
v-model="date"
|
||||
:multiCalendars="multiCalendars"
|
||||
:range="range"
|
||||
:month-change-on-scroll="false"
|
||||
:enable-time-picker="showTime"
|
||||
:time-picker="time"
|
||||
:week-picker="week"
|
||||
:month-picker="month"
|
||||
:year-picker="year"
|
||||
now-button-label="今天"
|
||||
:show-now-button="showToday"
|
||||
:auto-apply="true"
|
||||
:dark="true"
|
||||
:day-names="['一', '二', '三', '四', '五', '六', '日']"
|
||||
v-bind="$attrs"
|
||||
@update:model-value="handleDate"
|
||||
>
|
||||
<template #trigger>
|
||||
<div class="trigger">
|
||||
<span>{{ startDate }}</span>
|
||||
<img class="icon" src="/src/assets/head_img/icon.png" alt="" />
|
||||
<span>{{ endDate }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.m-datepicker {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.trigger {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
.icon {
|
||||
width: 0.8rem;
|
||||
height: 2rem;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
span {
|
||||
font-size: 1rem !important;
|
||||
border: 1px solid rgba(0, 168, 255, 0.88);
|
||||
border-radius: 2rem;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.dp__theme_dark) {
|
||||
--dp-background-color: #2c79af !important;
|
||||
--dp-text-color: #fff;
|
||||
--dp-hover-color: rgba(0, 168, 255, 1);
|
||||
--dp-hover-text-color: #fff;
|
||||
--dp-hover-icon-color: #959595;
|
||||
--dp-primary-color: rgba(0, 168, 255, 1);
|
||||
--dp-primary-disabled-color: #ccc;
|
||||
--dp-primary-text-color: #fff;
|
||||
--dp-secondary-color: #a9a9a9;
|
||||
--dp-border-color: #2d2d2d;
|
||||
--dp-menu-border-color: #2d2d2d;
|
||||
--dp-border-color-hover: #aaaeb7;
|
||||
--dp-disabled-color: #737373;
|
||||
--dp-disabled-color-text: #d0d0d0;
|
||||
--dp-scroll-bar-background: #212121;
|
||||
--dp-scroll-bar-color: #484848;
|
||||
--dp-success-color: #00701a;
|
||||
--dp-success-color-disabled: #428f59;
|
||||
--dp-icon-color: #959595;
|
||||
--dp-danger-color: #e53935;
|
||||
--dp-marker-color: #e53935;
|
||||
--dp-tooltip-color: #3e3e3e;
|
||||
--dp-highlight-color: rgb(0 92 178 / 20%);
|
||||
--dp-range-between-dates-background-color: var(--dp-hover-color, #484848);
|
||||
--dp-range-between-dates-text-color: var(--dp-hover-text-color, #fff);
|
||||
--dp-range-between-border-color: var(--dp-hover-color, #fff);
|
||||
}
|
||||
|
||||
:deep(.dp__btn.dp__month_year_select) {
|
||||
padding: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
:deep(button) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
:deep(.dp__overlay_container.dp__container_block) {
|
||||
height: 200px !important;
|
||||
}
|
||||
|
||||
:deep(.dp__cell_inner.dp__pointer.dp__range_between) {
|
||||
border: none;
|
||||
background-color: rgba(91, 219, 246, 0.4);
|
||||
}
|
||||
|
||||
:deep(:root) {
|
||||
/*General*/
|
||||
--dp-font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto,
|
||||
oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||
--dp-border-radius: 50%; /*Configurable border-radius*/
|
||||
--dp-cell-border-radius: 4px; /*Specific border radius for the calendar cell*/
|
||||
--dp-common-transition: all 0.1s ease-in; /*Generic transition applied on buttons and calendar cells*/
|
||||
|
||||
/*Sizing*/
|
||||
--dp-button-height: 35px; /*Size for buttons in overlays*/
|
||||
--dp-month-year-row-height: 35px; /*Height of the month-year select row*/
|
||||
--dp-month-year-row-button-size: 35px; /*Specific height for the next/previous buttons*/
|
||||
--dp-button-icon-height: 20px; /*Icon sizing in buttons*/
|
||||
--dp-cell-size: 35px; /*Width and height of calendar cell*/
|
||||
--dp-cell-padding: 5px; /*Padding in the cell*/
|
||||
--dp-common-padding: 10px; /*Common padding used*/
|
||||
--dp-input-icon-padding: 35px; /*Padding on the left side of the input if icon is present*/
|
||||
--dp-input-padding: 6px 30px 6px 12px; /*Padding in the input*/
|
||||
--dp-menu-min-width: 260px; /*Adjust the min width of the menu*/
|
||||
--dp-action-buttons-padding: 2px 5px; /*Adjust padding for the action buttons in action row*/
|
||||
--dp-row-margin: 5px 0; /*Adjust the spacing between rows in the calendar*/
|
||||
--dp-calendar-header-cell-padding: 0.5rem; /*Adjust padding in calendar header cells*/
|
||||
--dp-two-calendars-spacing: 10px; /*Space between multiple calendars*/
|
||||
--dp-overlay-col-padding: 3px; /*Padding in the overlay column*/
|
||||
--dp-time-inc-dec-button-size: 32px; /*Sizing for arrow buttons in the time picker*/
|
||||
--dp-menu-padding: 6px 8px; /*Menu padding*/
|
||||
|
||||
/*Font sizes*/
|
||||
--dp-font-size: 1rem; /*Default font-size*/
|
||||
--dp-preview-font-size: 0.8rem; /*Font size of the date preview in the action row*/
|
||||
--dp-time-font-size: 0.8rem; /*Font size in the time picker*/
|
||||
|
||||
/*Transitions*/
|
||||
--dp-animation-duration: 0.1s; /*Transition duration*/
|
||||
--dp-menu-appear-transition-timing: cubic-bezier(
|
||||
0.4,
|
||||
0,
|
||||
1,
|
||||
1
|
||||
); /*Timing on menu appear animation*/
|
||||
--dp-transition-timing: ease-out; /*Timing on slide animations*/
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,6 +3,8 @@ import { reactive, ref, provide, nextTick, onMounted } from "vue";
|
|||
import areaList from "./areaList.vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import mitt from "@/utils/mitt";
|
||||
import datePicker from "./datePicker.vue";
|
||||
import axios from "axios";
|
||||
|
||||
const info = reactive({
|
||||
address: '泸县',
|
||||
|
|
@ -58,13 +60,29 @@ const logout = () => {
|
|||
router.push('/login')
|
||||
}
|
||||
|
||||
const weather = ref("暂无天气信息")
|
||||
const initWeather = (city = 510500) => {
|
||||
axios.get(`https://restapi.amap.com/v3/weather/weatherInfo?city=${city}&key=5731d3b4c3f34e09226e084ce556e259`).then((res) => {
|
||||
if (res.data.status == 1) {
|
||||
weather.value = res.data.lives[0].weather;
|
||||
}
|
||||
}).catch((e) => {
|
||||
console.log(e);
|
||||
})
|
||||
}
|
||||
|
||||
// 选择时间
|
||||
const changeTime = (e) => {
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
mitt.emit('map_info', info);
|
||||
|
||||
// 每秒钟更新一次时间
|
||||
setInterval(updateClock, 1000);
|
||||
|
||||
initWeather();
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
@ -76,8 +94,9 @@ onMounted(() => {
|
|||
src="/src/assets/head_img/logo.png"
|
||||
@click="navToDelivery"
|
||||
/>
|
||||
<div class="item">{{ nowTime[0] }}</div>
|
||||
<img class="icon item" src="/src/assets/head_img/icon.png" alt="" />
|
||||
<datePicker multiCalendars range @changeTime="changeTime" />
|
||||
<!-- <div class="item">{{ nowTime[0] }}</div> -->
|
||||
<img class="icon" src="/src/assets/head_img/icon.png" alt="" />
|
||||
<div class="item">{{ nowTime[1] }}</div>
|
||||
</div>
|
||||
<div class="head-title">吟龙养殖溯源系统可视化大屏</div>
|
||||
|
|
@ -95,7 +114,7 @@ onMounted(() => {
|
|||
<img class="icon item" src="/src/assets/head_img/icon.png" alt="" />
|
||||
<div class="item">
|
||||
<img src="/src/assets/head_img/weather.png" alt="" />
|
||||
多云
|
||||
{{ weather }}
|
||||
</div>
|
||||
<img class="icon item" src="/src/assets/head_img/icon.png" alt="" />
|
||||
<div class="item" @click="logout">
|
||||
|
|
@ -116,6 +135,7 @@ onMounted(() => {
|
|||
height: 60px;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
font-size: 1rem;
|
||||
.img {
|
||||
position: absolute;
|
||||
bottom: -10%;
|
||||
|
|
@ -137,6 +157,7 @@ onMounted(() => {
|
|||
line-height: 50rpx;
|
||||
}
|
||||
.left {
|
||||
align-self: flex-end;
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
|
|
@ -151,6 +172,7 @@ onMounted(() => {
|
|||
}
|
||||
}
|
||||
.right {
|
||||
align-self: flex-end;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
justify-content: right;
|
||||
|
|
|
|||
|
|
@ -8,14 +8,28 @@ const initCircle = () => {
|
|||
let color = ['#00A8FF', '#4B5FDB', '#00FFCB', '#5BDBF6'];
|
||||
|
||||
let data = [
|
||||
{ value: 400, name: '种类: 本地鸡' },
|
||||
{ value: 435, name: '种类: 鸭' },
|
||||
{ value: 580, name: '种类: 鹅' },
|
||||
{ value: 884, name: '种类: 猪' },
|
||||
{ value: 400, name: '本地鸡' },
|
||||
{ value: 435, name: '鸭' },
|
||||
{ value: 580, name: '鹅' },
|
||||
{ value: 884, name: '猪' },
|
||||
]
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
trigger: "item",
|
||||
backgroundColor: 'rgba(0, 156, 255, 0.6)', //设置背景颜色
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
borderColor: "rgba(0, 156, 255, 1)",
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
shadowStyle: {
|
||||
color: 'rgba(255,255,255, .2)',
|
||||
}
|
||||
},
|
||||
formatter: function (params) {
|
||||
return params.data.name + ': ' + params.data.value;
|
||||
}
|
||||
},
|
||||
color: color,
|
||||
legend: {
|
||||
|
|
@ -27,6 +41,9 @@ const initCircle = () => {
|
|||
textStyle: {
|
||||
color: "#fff"
|
||||
},
|
||||
formatter: function (params) {
|
||||
return '种类: ' + params;
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in New Issue