From 3cd85390d7460b4301cad5254923d6088b2cc5e6 Mon Sep 17 00:00:00 2001
From: ailanyin <ailanyin4j@163.com>
Date: Mon, 15 May 2023 17:29:08 +0800
Subject: [PATCH] home page

---
 package.json                         |   1 +
 src/assets/icons/svg/map.svg         |   1 +
 src/views/device/deviceMap/index.vue | 121 +++++++++++++++++++++++
 src/views/index.vue                  | 141 ++++++++++++++++++++++++++-
 src/views/iot/device/detail.vue      |   2 +-
 vite.config.js                       |   2 +-
 6 files changed, 265 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/icons/svg/map.svg
 create mode 100644 src/views/device/deviceMap/index.vue

diff --git a/package.json b/package.json
index ca248fb..b607292 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "build:stage": "vite build --mode staging",
     "build:caddy": "vite build --mode caddy",
     "preview": "vite preview",
+    "preview:caddy": "caddy run --config ./Caddyfile",
     "format": "prettier --write \"**/*.{js,ts,tsx,jsx,vue,md}\"",
     "commit-push": "prettier -w . && git add . && git commit -m"
   },
diff --git a/src/assets/icons/svg/map.svg b/src/assets/icons/svg/map.svg
new file mode 100644
index 0000000..5b72132
--- /dev/null
+++ b/src/assets/icons/svg/map.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1684119556675" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6782" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M1008.998778 302.999633l-59.999927-20.959975-99.999879 373.959548h159.999806z" fill="#ADF5FF" p-id="6783"></path><path d="M779.999055 222.99973L659.999201 655.999206h288.99965V282.039658z" fill="#D6FAFF" p-id="6784"></path><path d="M1008.998778 655.999206l-59.999927-20.959975-89.999891 176.499786 89.999891 176.499787 59.999927 20.959974z" fill="#5AECFF" p-id="6785"></path><path d="M779.999055 575.999303l-119.999854 176.499786 119.999854 176.499786 168.999796 59.039929v-352.999573z" fill="#ADF5FF" p-id="6786"></path><path d="M391.999525 575.999303l119.999855 432.999475 267.999675-79.999903V575.999303z" fill="#5AECFF" p-id="6787"></path><path d="M779.999055 575.999303V222.99973l-267.999675 79.999903-119.999855 176.499786L511.99938 655.999206z" fill="#ADF5FF" p-id="6788"></path><path d="M511.99938 655.999206V302.999633l-267.999675-79.999903L123.99985 655.999206z" fill="#D6FAFF" p-id="6789"></path><path d="M243.999705 575.999303l-119.999855 176.499786 119.999855 176.499786 267.999675 79.999903V655.999206z" fill="#ADF5FF" p-id="6790"></path><path d="M14.999982 655.999206v352.999572l228.999723-79.999903V575.999303l-114.499862-79.999904z" fill="#D6FAFF" p-id="6791"></path><path d="M243.999705 222.99973l-228.999723 79.999903V655.999206L243.999705 575.999303z" fill="#FFFFFF" p-id="6792"></path><path d="M511.99938 14.999982v573.999305l164.8778-239.201711C703.911148 314.697619 719.999128 270.729672 719.999128 222.99973c0-114.875861-93.123887-207.999748-207.999748-207.999748z" fill="#FF1B10" p-id="6793"></path><path d="M659.999201 222.99973c0-114.875861-66.26192-207.999748-147.999821-207.999748-114.875861 0-207.999748 93.123887-207.999748 207.999748 0 47.729942 16.087981 91.697889 43.121948 126.797846L511.99938 588.999287l117.315858-239.201711C648.551215 314.697619 659.999201 270.729672 659.999201 222.99973z" fill="#FF451B" p-id="6794"></path><path d="M511.99938 74.999909v295.999642c81.737901 0 147.999821-66.26192 147.999821-147.999821s-66.26192-147.999821-147.999821-147.999821z" fill="#D6FAFF" p-id="6795"></path><path d="M599.999273 222.99973c0-81.737901-39.397952-147.999821-87.999893-147.999821-81.737901 0-147.999821 66.26192-147.999821 147.999821s66.26192 147.999821 147.999821 147.999821c48.601941 0 87.999893-66.26192 87.999893-147.999821z" fill="#FFFFFF" p-id="6796"></path><path d="M1013.946772 288.83965l-228.999723-79.999903a14.971982 14.971982 0 0 0-9.237988-0.212l-40.737951 12.159986C733.777111 98.84188 634.223232 0 511.99938 0S290.221649 98.84188 289.02765 220.787733l-40.737951-12.159986a15.031982 15.031982 0 0 0-9.237988 0.212l-228.999723 79.999903A14.999982 14.999982 0 0 0 0 302.999633v705.999145a14.995982 14.995982 0 0 0 19.945976 14.159983l224.415728-78.397905 263.347681 78.611905a14.989982 14.989982 0 0 0 8.57999 0l263.347681-78.611905 224.415728 78.397905a14.989982 14.989982 0 0 0 13.629984-1.929998A14.999982 14.999982 0 0 0 1023.99876 1008.998778v-705.999145a14.999982 14.999982 0 0 0-10.051988-14.159983zM993.998796 634.871231l-198.999759-69.519916V244.127704l198.999759 69.519916v321.223611z m-734.99911-391.739525l31.969962 9.543988c5.073994 38.497953 20.017976 74.67391 44.023946 105.957872L496.999398 593.669281v42.197949l-237.999712-71.043914V243.131706z m474.029426 9.541988l31.969962-9.543988v321.69161l-237.999712 71.043914v-42.197949l162.005804-235.037715c24.007971-31.279962 38.949953-67.457918 44.023946-105.955872zM526.999362 667.175192l237.999712-71.043914v321.691611l-237.999712 71.043914V667.175192zM511.99938 29.999964c106.419871 0 192.999766 86.579895 192.999766 192.999766 0 5.501993-0.234 10.963987-0.683999 16.38198l-0.03 0.3c-3.113996 36.791955-16.53198 71.413914-39.291952 100.963877a14.441983 14.441983 0 0 0-0.466 0.638L511.99938 562.569319l-152.525815-221.285732a16.26598 16.26598 0 0 0-0.466-0.638c-22.759972-29.553964-36.177956-64.173922-39.291952-100.965877l-0.03-0.3a197.85376 197.85376 0 0 1-0.683999-16.38198C318.999614 116.579859 405.579509 29.999964 511.99938 29.999964zM228.999723 244.127704v321.223611L29.999964 634.871231V313.64762l198.999759-69.519916zM29.999964 666.647193l214.36174-74.88591L496.999398 667.175192v321.691611l-237.999712-71.043914V635.99923c0-8.28599-6.715992-14.999982-14.999981-14.999982s-14.999982 6.713992-14.999982 14.999982v282.351658L29.999964 987.870804V666.647193z m764.999073 251.703695V597.127277l198.999759 69.519916v321.221611l-198.999759-69.517916z" p-id="6797"></path><path d="M511.99938 385.999533c89.877891 0 162.999803-73.121911 162.999803-162.999803S601.877271 59.999927 511.99938 59.999927c-31.927961 0-62.877924 9.263989-89.501892 26.789968a15.001982 15.001982 0 0 0 16.49398 25.05997C460.705442 97.553882 485.951412 89.999891 511.99938 89.999891c73.335911 0 132.999839 59.663928 132.999839 132.999839S585.335291 355.999569 511.99938 355.999569s-132.999839-59.663928-132.999839-132.999839c0-26.049968 7.553991-51.293938 21.845974-73.005912a14.999982 14.999982 0 1 0-25.05597-16.49598C358.263566 160.119806 348.999577 191.067769 348.999577 222.99973c0 89.877891 73.121911 162.999803 162.999803 162.999803z" p-id="6798"></path></svg>
\ No newline at end of file
diff --git a/src/views/device/deviceMap/index.vue b/src/views/device/deviceMap/index.vue
new file mode 100644
index 0000000..b397034
--- /dev/null
+++ b/src/views/device/deviceMap/index.vue
@@ -0,0 +1,121 @@
+<script setup>
+import { loadMap } from "@/utils/amap";
+import {
+  onBeforeUnmount,
+  onMounted,
+  reactive,
+  ref,
+  shallowRef,
+  toRefs,
+} from "vue";
+import { listDevice } from "@/api/iot/device";
+import Pagination from "@/components/Pagination/index.vue";
+
+const router = useRouter();
+
+const AMap = shallowRef();
+const map = shallowRef();
+const deviceList = ref([]);
+const infoWindow = shallowRef(null);
+const total = ref(0);
+const data = reactive({
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+  },
+});
+const { queryParams } = toRefs(data);
+const loadDeviceList = async () => {
+  map.value.clearMap();
+  const resp = await listDevice(queryParams.value);
+  deviceList.value = resp.rows;
+  total.value = resp.total;
+  const markers = resp.rows
+    ?.filter((el) => el.longitude && el.latitude)
+    .map((el) => {
+      const marker = new AMap.value.Marker({
+        map: map.value,
+        position: new AMap.value.LngLat(el.longitude, el.latitude),
+        anchor: "bottom-center",
+        extData: el,
+      });
+
+      marker.on("mouseover", handleResultHover);
+      marker.on("mouseout", (ev) => {
+        infoWindow.value.close();
+      });
+      marker.on("click", handleResultClick);
+      return marker;
+    });
+  map.value.setFitView(markers);
+};
+const handleResultClick = (ev) => {
+  const id = ev.target.getExtData().deviceId;
+  router.push({
+    path: "/device/device/detail",
+    query: {
+      id,
+    },
+  });
+};
+// 鼠标悬停搜索结果标记
+const handleResultHover = (ev) => {
+  infoWindow.value.setContent(`
+    <div>
+    设备名称 : ${ev.target.getExtData().deviceName}</div>
+    `);
+  infoWindow.value.open(map.value, [ev.lnglat.lng, ev.lnglat.lat]);
+};
+
+onMounted(async () => {
+  AMap.value = await loadMap(["AMap.PlaceSearch", "AMap.Geocoder"]);
+  map.value = new AMap.value.Map("map-container", { zoom: 11 });
+  infoWindow.value = new AMap.value.InfoWindow({
+    anchor: "bottom-center",
+    offset: new AMap.value.Pixel(0, -20),
+  });
+  loadDeviceList();
+});
+
+onBeforeUnmount(() => {
+  map.value.destroy();
+  console.log("destroy");
+});
+</script>
+
+<template>
+  <div class="map-wrap">
+    <div id="map-container"></div>
+    <pagination
+      v-show="total > 0"
+      v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNum"
+      :total="total"
+      class="map-pagination"
+      @pagination="loadDeviceList"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+#map-container {
+  min-height: calc(100vh - 50px);
+}
+
+.hasTagsView {
+  #map-container {
+    min-height: calc(100vh - 84px);
+  }
+}
+
+.map-wrap {
+  position: relative;
+
+  .map-pagination {
+    position: absolute;
+    bottom: 20px;
+    right: 20px;
+    z-index: 2023;
+  }
+}
+</style>
diff --git a/src/views/index.vue b/src/views/index.vue
index 52d9290..cb0d5cc 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,3 +1,142 @@
 <template>
-  <p>123</p>
+  <div class="app-container">
+    <el-row :gutter="20" justify="space-between">
+      <el-col :span="6">
+        <el-card class="count-card-item">
+          <template #header>产品</template>
+          <div></div>
+          <div>数量 : 12</div>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card class="count-card-item">
+          <template #header>产品</template>
+          <div></div>
+          <div>数量 : 12</div>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card class="count-card-item">
+          <template #header>设备</template>
+          <div></div>
+          <div>数量 : 12</div>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card class="count-card-item">
+          <template #header>产品</template>
+          <div></div>
+          <div>数量 : 12</div>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-card class="chart-card">
+      <template #header>设备</template>
+      <Line
+        id="line-chart-id"
+        :data="deviceChartData"
+        :options="{
+          responsive: true,
+          scales: {
+            x: {
+              display: true,
+              title: {
+                display: true,
+                text: '日期',
+              },
+            },
+            y: {
+              display: true,
+              title: {
+                display: true,
+                text: '数量',
+              },
+            },
+          },
+        }"
+      />
+    </el-card>
+    <el-card class="chart-card">
+      <template #header>消息</template>
+      <Line
+        :data="noticeChartData"
+        :options="{
+          responsive: true,
+          scales: {
+            x: {
+              display: true,
+              title: {
+                display: true,
+                text: '日期',
+              },
+            },
+            y: {
+              display: true,
+              title: {
+                display: true,
+                text: '数量',
+              },
+            },
+          },
+        }"
+      />
+    </el-card>
+  </div>
 </template>
+
+<script setup>
+import { Line } from "vue-chartjs";
+import {
+  CategoryScale,
+  Chart as ChartJS,
+  Legend,
+  LinearScale,
+  LineElement,
+  PointElement,
+  Title,
+  Tooltip,
+} from "chart.js";
+import { reactive, toRefs } from "vue";
+
+ChartJS.register(
+  Title,
+  LineElement,
+  Tooltip,
+  Legend,
+  CategoryScale,
+  LinearScale,
+  PointElement
+);
+
+const data = reactive({
+  deviceChartData: {
+    labels: [...Array(30).keys()].map((el) => `${(el + 1).toString()}日`),
+    datasets: [
+      {
+        data: [...Array(30).keys()].map((el) => Math.random() * 100),
+        label: "设备",
+        backgroundColor: "#ff6384",
+        borderColor: "#ff6384",
+      },
+    ],
+  },
+  noticeChartData: {
+    labels: [...Array(30).keys()].map((el) => `${(el + 1).toString()}日`),
+    datasets: [
+      {
+        data: [...Array(30).keys()].map((el) => Math.random() * 100),
+        label: "消息",
+        backgroundColor: "#36a2eb",
+        borderColor: "#36a2eb",
+      },
+    ],
+  },
+});
+const { deviceChartData, noticeChartData } = toRefs(data);
+</script>
+<style lang="scss" scoped>
+.chart-card {
+  margin-top: 20px;
+  padding: 40px;
+}
+</style>
diff --git a/src/views/iot/device/detail.vue b/src/views/iot/device/detail.vue
index 1cc4e4b..4bc5cf7 100644
--- a/src/views/iot/device/detail.vue
+++ b/src/views/iot/device/detail.vue
@@ -156,7 +156,7 @@
 </template>
 
 <script setup>
-import { onMounted, reactive, ref, toRefs } from "vue";
+import { onActivated, onMounted, reactive, ref, toRefs } from "vue";
 import { listProduct } from "@/api/product/product";
 import OperatingStatus from "@/views/iot/device/detail-panes/OperatingStatus.vue";
 import { addDevice, getDevice, updateDevice } from "@/api/iot/device";
diff --git a/vite.config.js b/vite.config.js
index 9d2ce00..eb300ca 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -31,7 +31,7 @@ export default defineConfig(({ mode, command }) => {
       proxy: {
         // https://cn.vitejs.dev/config/#server-proxy
         "/dev-api": {
-          target: "http://192.168.1.201:1616",
+          target: "http://117.72.16.89/api",
           changeOrigin: true,
           rewrite: (p) => p.replace(/^\/dev-api/, ""),
         },