新增日期选择

package-lock.json

@@ -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",

package.json

@@ -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",

src/components/datePicker.vue

@@ -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>

src/components/headView.vue

@@ -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>
+      <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>
     <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;

src/view/delivery/components/left.vue

@@ -8,14 +8,28 @@ const initCircle = () => {
   let color = ['#00A8FF', '#4B5FDB', '#00FFCB', '#5BDBF6'];
 
   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 = {
     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: [
       {