新增日期选择

This commit is contained in:
weipengfei 2023-12-11 18:19:55 +08:00
parent 60f976adbc
commit d53d4564ed
6 changed files with 314 additions and 9 deletions

35
package-lock.json generated
View File

@ -10,6 +10,7 @@
"dependencies": { "dependencies": {
"@amap/amap-jsapi-loader": "^1.0.1", "@amap/amap-jsapi-loader": "^1.0.1",
"@jiaminghi/data-view": "^2.10.0", "@jiaminghi/data-view": "^2.10.0",
"@vuepic/vue-datepicker": "^7.4.0",
"axios": "^1.6.2", "axios": "^1.6.2",
"echarts": "^5.4.3", "echarts": "^5.4.3",
"echarts-gl": "^2.0.9", "echarts-gl": "^2.0.9",
@ -827,6 +828,21 @@
"resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.3.8.tgz", "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.3.8.tgz",
"integrity": "sha512-8PGwybFwM4x8pcfgqEQFy70NaQxASvOC5DJwLQfpArw1UDfUXrJkdxD3BhVTMS+0Lef/TU7YO0Jvr0jJY8T+mw==" "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": { "node_modules/@xmldom/xmldom": {
"version": "0.8.10", "version": "0.8.10",
"resolved": "https://registry.npmmirror.com/@xmldom/xmldom/-/xmldom-0.8.10.tgz", "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", "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.2.tgz",
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" "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": { "node_modules/delayed-stream": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz", "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",

View File

@ -11,6 +11,7 @@
"dependencies": { "dependencies": {
"@amap/amap-jsapi-loader": "^1.0.1", "@amap/amap-jsapi-loader": "^1.0.1",
"@jiaminghi/data-view": "^2.10.0", "@jiaminghi/data-view": "^2.10.0",
"@vuepic/vue-datepicker": "^7.4.0",
"axios": "^1.6.2", "axios": "^1.6.2",
"echarts": "^5.4.3", "echarts": "^5.4.3",
"echarts-gl": "^2.0.9", "echarts-gl": "^2.0.9",

Binary file not shown.

Before

Width:  |  Height:  |  Size: 956 KiB

After

Width:  |  Height:  |  Size: 196 KiB

View File

@ -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"; // timedateweekmonthyear
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)modeweekyear
}
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>

View File

@ -3,6 +3,8 @@ import { reactive, ref, provide, nextTick, onMounted } from "vue";
import areaList from "./areaList.vue"; import areaList from "./areaList.vue";
import { useRoute, useRouter } from "vue-router"; import { useRoute, useRouter } from "vue-router";
import mitt from "@/utils/mitt"; import mitt from "@/utils/mitt";
import datePicker from "./datePicker.vue";
import axios from "axios";
const info = reactive({ const info = reactive({
address: '泸县', address: '泸县',
@ -58,13 +60,29 @@ const logout = () => {
router.push('/login') 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(() => { onMounted(() => {
mitt.emit('map_info', info); mitt.emit('map_info', info);
// //
setInterval(updateClock, 1000); setInterval(updateClock, 1000);
initWeather();
}) })
</script> </script>
@ -76,8 +94,9 @@ onMounted(() => {
src="/src/assets/head_img/logo.png" src="/src/assets/head_img/logo.png"
@click="navToDelivery" @click="navToDelivery"
/> />
<div class="item">{{ nowTime[0] }}</div> <datePicker multiCalendars range @changeTime="changeTime" />
<img class="icon item" src="/src/assets/head_img/icon.png" alt="" /> <!-- <div class="item">{{ nowTime[0] }}</div> -->
<img class="icon" src="/src/assets/head_img/icon.png" alt="" />
<div class="item">{{ nowTime[1] }}</div> <div class="item">{{ nowTime[1] }}</div>
</div> </div>
<div class="head-title">吟龙养殖溯源系统可视化大屏</div> <div class="head-title">吟龙养殖溯源系统可视化大屏</div>
@ -95,7 +114,7 @@ onMounted(() => {
<img class="icon item" src="/src/assets/head_img/icon.png" alt="" /> <img class="icon item" src="/src/assets/head_img/icon.png" alt="" />
<div class="item"> <div class="item">
<img src="/src/assets/head_img/weather.png" alt="" /> <img src="/src/assets/head_img/weather.png" alt="" />
多云 {{ weather }}
</div> </div>
<img class="icon item" src="/src/assets/head_img/icon.png" alt="" /> <img class="icon item" src="/src/assets/head_img/icon.png" alt="" />
<div class="item" @click="logout"> <div class="item" @click="logout">
@ -116,6 +135,7 @@ onMounted(() => {
height: 60px; height: 60px;
align-items: center; align-items: center;
position: relative; position: relative;
font-size: 1rem;
.img { .img {
position: absolute; position: absolute;
bottom: -10%; bottom: -10%;
@ -137,6 +157,7 @@ onMounted(() => {
line-height: 50rpx; line-height: 50rpx;
} }
.left { .left {
align-self: flex-end;
display: flex; display: flex;
justify-content: left; justify-content: left;
align-items: center; align-items: center;
@ -151,6 +172,7 @@ onMounted(() => {
} }
} }
.right { .right {
align-self: flex-end;
display: flex; display: flex;
flex: 1; flex: 1;
justify-content: right; justify-content: right;

View File

@ -8,14 +8,28 @@ const initCircle = () => {
let color = ['#00A8FF', '#4B5FDB', '#00FFCB', '#5BDBF6']; let color = ['#00A8FF', '#4B5FDB', '#00FFCB', '#5BDBF6'];
let data = [ let data = [
{ value: 400, name: '种类: 本地鸡' }, { value: 400, name: '本地鸡' },
{ value: 435, name: '种类: 鸭' }, { value: 435, name: '鸭' },
{ value: 580, name: '种类: 鹅' }, { value: 580, name: '鹅' },
{ value: 884, name: '种类: 猪' }, { value: 884, name: '猪' },
] ]
let option = { let option = {
tooltip: { 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, color: color,
legend: { legend: {
@ -27,6 +41,9 @@ const initCircle = () => {
textStyle: { textStyle: {
color: "#fff" color: "#fff"
}, },
formatter: function (params) {
return '种类: ' + params;
}
}, },
series: [ series: [
{ {