更新

src/router/index.js

@@ -45,6 +45,18 @@ const router = new Router({
             component: Index,
             children: routes
         },
+        {
+            name: 'data_v',
+            path: '/data_v',
+            component: resolve => require(['@/views/datav/data_v'], resolve),
+            meta: {model: 'error'},
+        },
+        {
+            name: 'copy_v',
+            path: '/copy_v',
+            component: resolve => require(['@/views/datav/copy_v'], resolve),
+            meta: {model: 'error'},
+        },
         // {
         //     name: 'login',
         //     path: '/login',

src/views/copy/index.vue

@@ -0,0 +1,218 @@
+<template>
+  <div class="datav-index">
+    <div id="container" style="width: 100vw"></div>
+    <div class="btn-box">
+      <a-dropdown :trigger="['click']">
+        <template #overlay>
+          <a-menu @click="handleMenuClick" style="width: 160px">
+            <a-menu-item :key="index" v-for="(item, index) in member_list">
+              <div class="menu-item-d">
+                <a-avatar :src="item.avatar" icon="user" size="small" />
+                <a class="muted name">{{ item.name }}</a>
+              </div>
+            </a-menu-item>
+          </a-menu>
+        </template>
+        <a-button style="min-width: 100px">
+          <div class="menu-item-d">
+            <a-avatar :src="now_user.avatar" icon="user" size="small" />
+            <a class="muted name">{{ now_user.name }}</a>
+          </div>
+        </a-button>
+      </a-dropdown>
+      <a-date-picker
+        v-model="now_date"
+        format="MM月DD日"
+        :allowClear="false"
+        @change="changeTime"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import _ from "lodash";
+import AMapLoader from "@amap/amap-jsapi-loader";
+import { positioningList, positioningMember } from "@/api/datav";
+import {
+  del,
+  forbid,
+  list as getMembers,
+  resume,
+  liaisonMan,
+} from "../../api/user";
+import { notice } from '../../assets/js/notice';
+
+export default {
+  name: "datav",
+  data() {
+    return {
+      map: null,
+      Amap: null,
+      visibleTaskCopied: false,
+      now_date: "",
+      now_user: {
+        member_code: "",
+        avatar: "",
+        name: "全部",
+      },
+      member_list: [],
+      markers: [],
+      polyline: null,
+    };
+  },
+  created() {
+    this.now_date = "";
+    this.getMembers();
+  },
+  mounted() {
+    this.initMap();
+  },
+  methods: {
+    getMembers() {
+      getMembers().then((res) => {
+        this.member_list = res.data.list;
+      });
+    },
+    formatDate(date) {
+      const year = date.getFullYear();
+      const month = (date.getMonth() + 1).toString().padStart(2, "0");
+      const day = date.getDate().toString().padStart(2, "0");
+
+      return `${year}-${month}-${day}`;
+    },
+    initMap() {
+      AMapLoader.load({
+        key: "4f8f55618010007147aab96fc72bb408", // 申请好的Web端开发者Key，首次调用 load 时必填
+        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+        plugins: ["AMap.Geocoder"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+        Loca: {
+          version: "2.0.0",
+        },
+      })
+        .then((AMap) => {
+          this.map = new AMap.Map("container", {
+            // 设置地图容器id
+            viewMode: "3D", // 是否为3D地图模式
+            zoom: 15, // 初始化地图级别
+            center: [105.433211, 28.913861], // 初始化地图中心点位置
+            mapStyle: "amap://styles/darkblue",
+          });
+
+          this.initMaker();
+        })
+        .catch((e) => {
+          console.log(e);
+        });
+    },
+    handleMenuClick(e) {
+      this.now_user = this.member_list[e.key];
+      this.initList();
+    },
+    changeTime(e) {
+      console.log(this.now_date);
+      this.initList();
+    },
+    initMaker() {
+      positioningList().then((res) => {
+        // 添加标记点
+        res.data.forEach((item) => {
+          if (item.positioning) {
+            let marker = new AMap.Marker({
+              position: item.positioning.split(","),
+              map: this.map,
+              content: `
+                              <div class="marker-d">
+                                  <img src="${
+                                    item.avatar ||
+                                    "https://lihai001.oss-cn-chengdu.aliyuncs.com/def/f7d49202401111649248163.png"
+                                  }" />
+                                  <div class="text">
+                                      <div>${item.name}</div>
+                                      <div>更新时间:${item.date}</div>
+                                      <div>停留时间:${item.date}</div>
+                                  </div>
+                              </div>
+                              `,
+              offset: new AMap.Pixel(-20, -20),
+            });
+            this.markers.push(marker);
+          }
+        });
+      });
+    },
+    initList() {
+      if(!this.now_user.member_code||!this.now_date) return;
+      this.map.remove(this.markers);
+      if(this.polyline)this.polyline.setMap(null);
+      positioningMember({
+        code: this.now_user.member_code,
+        date: this.formatDate(new Date(this.now_date||Date.now())),
+      }).then((res) => {
+        let path = res.data.map((item) => {
+          return item.split(",");
+        })||[];
+
+        if(path.length==0) return notice({title: '该成员当日无轨迹信息'}, 'error', 3000);
+        // 绘制轨迹
+        this.polyline = new AMap.Polyline({
+          path: path,
+          strokeColor: "#52c41a",
+          strokeWeight: 5,
+          strokeOpacity: 1,
+          strokeStyle: "solid",
+          zIndex: 50,
+        });
+        this.polyline.setMap(this.map);
+      }).catch(err=>{
+        console.log(err);
+        return notice({title: '该成员当日无轨迹信息'}, 'error', 3000);
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.datav-index {
+  position: relative;
+}
+.marker-d {
+  width: 260px;
+  img {
+    height: 40px;
+    width: 40px;
+    border-radius: 50%;
+    border: 2px solid yellow;
+  }
+  .text {
+    background: rgba(#0c3e6d, 0.6);
+    padding: 10px;
+    margin-top: 10px;
+    div {
+      color: white; /* 设置文字颜色为白色 */
+      // text-shadow: 1px 1px 2px yellow; /* 设置文字的外阴影为黄色，水平偏移量为2px，垂直偏移量为2px */
+      align-items: center;
+    }
+  }
+}
+.p-box {
+  position: relative;
+}
+.btn-box {
+  position: absolute;
+  top: 20px;
+  left: 30px;
+  height: 60px;
+  display: flex;
+  align-items: center;
+}
+#container {
+  height: calc(100vh - 66px);
+}
+.menu-item-d {
+  .name {
+    margin-left: 6px;
+  }
+}
+</style>

src/views/datav/data_v.vue

@@ -0,0 +1,334 @@
+<template>
+  <div class="datav-index">
+    <div id="container" style="width: 100vw"></div>
+    <div class="btn-box">
+      <a-dropdown :trigger="['click']">
+        <template #overlay>
+          <a-menu @click="handleMenuClick" style="width: 160px">
+            <a-menu-item :key="index" v-for="(item, index) in member_list">
+              <div class="menu-item-d">
+                <a-avatar :src="item.avatar" icon="user" size="small" />
+                <a class="muted name">{{ item.name }}</a>
+                <span v-if="index%3!=0" class="line_on">• 在线</span>
+                <span v-else class="line_off">• 离线</span>
+              </div>
+            </a-menu-item>
+          </a-menu>
+        </template>
+        <a-button style="min-width: 100px">
+          <div class="menu-item-d">
+            <a-avatar :src="now_user.avatar" icon="user" size="small" />
+            <a class="muted name">{{ now_user.name }}</a>
+          </div>
+        </a-button>
+      </a-dropdown>
+      <a-date-picker
+        v-model="now_date"
+        format="MM月DD日"
+        :allowClear="false"
+        @change="changeTime"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import _ from "lodash";
+import AMapLoader from "@amap/amap-jsapi-loader";
+import { positioningList, positioningMember } from "@/api/datav";
+import {
+  del,
+  forbid,
+  list as getMembers,
+  resume,
+  liaisonMan,
+} from "../../api/user";
+import { notice } from '../../assets/js/notice';
+
+export default {
+  name: "datav",
+  data() {
+    return {
+      map: null,
+      Amap: null,
+      visibleTaskCopied: false,
+      now_date: "",
+      now_user: {
+        member_code: "",
+        avatar: "",
+        name: "全部",
+      },
+      member_list: [],
+      markers: [],
+      polyline: null,
+    };
+  },
+  created() {
+    this.now_date = "";
+    this.getMembers();
+  },
+  mounted() {
+    this.initMap();
+  },
+  methods: {
+    getMembers() {
+      getMembers().then((res) => {
+        this.member_list = res.data.list;
+      });
+    },
+    formatDate(date) {
+      const year = date.getFullYear();
+      const month = (date.getMonth() + 1).toString().padStart(2, "0");
+      const day = date.getDate().toString().padStart(2, "0");
+
+      return `${year}-${month}-${day}`;
+    },
+    initMap() {
+      AMapLoader.load({
+        key: "4f8f55618010007147aab96fc72bb408", // 申请好的Web端开发者Key，首次调用 load 时必填
+        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+        plugins: ["AMap.Geocoder"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+        Loca: {
+          version: "2.0.0",
+        },
+      })
+        .then((AMap) => {
+          this.map = new AMap.Map("container", {
+            // 设置地图容器id
+            viewMode: "3D", // 是否为3D地图模式
+            zoom: 15, // 初始化地图级别
+            center: [105.433211, 28.913861], // 初始化地图中心点位置
+            mapStyle: "amap://styles/darkblue",
+          });
+
+          this.initMaker();
+        })
+        .catch((e) => {
+          console.log(e);
+        });
+    },
+    handleMenuClick(e) {
+      this.now_user = this.member_list[e.key];
+      this.initList();
+    },
+    changeTime(e) {
+      console.log(this.now_date);
+      this.initList();
+    },
+    initMaker() {
+      positioningList().then((res) => {
+        // 添加标记点
+        res.data.forEach((item) => {
+          if (item.positioning) {
+            let marker = new AMap.Marker({
+              position: item.positioning.split(","),
+              map: this.map,
+              content: `
+                              <div class="marker-d">
+                                  <img src="${
+                                    item.avatar ||
+                                    "https://lihai001.oss-cn-chengdu.aliyuncs.com/def/f7d49202401111649248163.png"
+                                  }" />
+                                  <div class="text">
+                                      <div>${item.name}</div>
+                                      <div>更新时间:${item.date}</div>
+                                      <div>停留时间:${item.date}</div>
+                                  </div>
+                              </div>
+                              `,
+              offset: new AMap.Pixel(-20, -20),
+            });
+            this.markers.push(marker);
+          }
+        });
+      });
+    },
+    initList() {
+      if(!this.now_user.member_code||!this.now_date) return;
+      this.map.remove(this.markers);
+      if(this.polyline)this.polyline.setMap(null);
+      positioningMember({
+        code: this.now_user.member_code,
+        date: this.formatDate(new Date(this.now_date||Date.now())),
+      }).then((res) => {
+        let path = res.data.map((item) => {
+          return item.split(",");
+        })||[];
+
+        if(path.length==0) return notice({title: '该成员当日无轨迹信息'}, 'error', 3000);
+        // 绘制轨迹
+        this.polyline = new AMap.Polyline({
+          path: path,
+          strokeColor: "#52c41a",
+          strokeWeight: 5,
+          strokeOpacity: 1,
+          strokeStyle: "solid",
+          zIndex: 50,
+        });
+        this.polyline.setMap(this.map);
+      }).catch(err=>{
+        console.log(err);
+        return notice({title: '该成员当日无轨迹信息'}, 'error', 3000);
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.marker-d {
+  width: 260px;
+  img {
+    height: 40px;
+    width: 40px;
+    border-radius: 50%;
+    border: 2px solid yellow;
+  }
+  .text {
+    background: rgba(#0c3e6d, 0.6);
+    padding: 10px;
+    margin-top: 10px;
+    div {
+      color: white; /* 设置文字颜色为白色 */
+      // text-shadow: 1px 1px 2px yellow; /* 设置文字的外阴影为黄色，水平偏移量为2px，垂直偏移量为2px */
+      align-items: center;
+    }
+  }
+}
+.p-box {
+  position: relative;
+}
+.btn-box {
+  position: absolute;
+  top: 20px;
+  left: 30px;
+  height: 60px;
+  display: flex;
+  align-items: center;
+}
+.datav-index{
+  height: 100vh;
+  overflow: hidden;
+  position: relative;
+}
+#container {
+  position: absolute;
+  top: -2vh;
+  height: 104vh;
+}
+.menu-item-d {
+  .name {
+    margin-left: 6px;
+  }
+  .line_on{
+    color: rgb(9, 233, 9);
+    font-size: 12px;
+    margin-left: 5px;
+  }
+  .line_off{
+    font-size: 12px;
+    margin-left: 5px;
+  }
+}
+
+// 下拉框
+.ant-dropdown-open, .ant-dropdown-open:hover{
+  background: #0a1a29;
+  color: #fff !important;
+  .name{
+    color: #fff !important;
+  }
+}
+.ant-dropdown-trigger, .ant-dropdown-trigger:hover{
+  background: #0a1a29;
+  color: #fff !important;
+  .name{
+    color: #fff !important;
+  }
+}
+.ant-dropdown-content, .ant-dropdown-content:hover{
+  background: #0a1a29;
+  color: #fff !important;
+  .name{
+    color: #fff !important;
+  }
+}
+.ant-btn:hover, .ant-btn:focus, .ant-btn:active, .ant-btn.active{
+  background: #0a1a29;
+  color: #fff !important;
+  .name{
+    color: #fff !important;
+  }
+}
+.ant-dropdown-menu-item:hover{
+  background-color: rgba(#0c3e6d, 0.8);
+  color: #fff !important;
+  .name{
+    color: #fff !important;
+  }
+}
+
+// 日期选择器
+.ant-input{
+  background: #0a1a29;
+  color: #fff !important;
+}
+.anticon.anticon-calendar.ant-calendar-picker-icon{
+  color: #fff;
+}
+.ant-calendar.ant-calendar-picker-container-content{
+  background: #0a1a29;
+  .ant-calendar-column-header-inner{
+    color: #fff !important;
+  }
+  .ant-calendar-date{
+    color: #fff !important;
+  }
+  .ant-calendar-date:hover{
+    color: #fff !important;
+    background-color: rgba(#0c3e6d, 0.8);
+  }
+  .ant-calendar-today-btn {
+    color: #fff !important;
+  }
+  .ant-calendar-year-select{
+    color: #fff !important;
+  }
+  .ant-calendar-month-select{
+    color: #fff !important;
+  }
+}
+.ant-calendar-picker-input.ant-input{
+  // height: 40px;
+}
+.ant-calendar .ant-calendar-ok-btn{
+  background: rgba(#0c3e6d, 0.8);
+  border-color: rgba(#0c3e6d, 0.8);
+ 
+}
+.ant-calendar-today .ant-calendar-date {
+  background: rgba(#0c3e6d, 0.8);
+  border-color: rgba(#0c3e6d, 0.8);
+  color: #fff;
+ 
+}
+.ant-calendar-selected-day .ant-calendar-date {
+   background: rgba(#0c3e6d, 0.8);
+   border-color: #0095bc;
+}
+.ant-calendar-time .ant-calendar-footer .ant-calendar-time-picker-btn-disabled{
+   color: #202020;
+}
+.ant-calendar-today-btn {
+  color: #202020;
+}
+.ant-input:hover,
+.ant-calendar-picker:hover .ant-calendar-picker-input:not(.ant-input-disabled){
+  border-color: #0095bc;
+}
+.ant-input:focus,
+.ant-calendar-picker:focus .ant-calendar-picker-input:not(.ant-input-disabled) {
+ border-color: #0095bc;
+ box-shadow: none;
+}
+</style>

src/views/index.vue

@@ -28,12 +28,12 @@
                         </a-menu-item>
                     </a-menu>
                     <div class="right-menu">
-                        <div class="m-r-lg" v-if="config.WS_URI">
+                        <!-- <div class="m-r-lg" v-if="config.WS_URI">
                             <a-badge title="当前在线" :count="online" showZero :numberStyle="{backgroundColor: '#52c41a'} "
                                      :offset="[10,0]">
                                 <a-icon type="team"/>
                             </a-badge>
-                        </div>
+                        </div> -->
                         <div class="action action-organization" v-if="organizationList.length > 1">
                             <header-select></header-select>
                         </div>
@@ -327,6 +327,9 @@
             menuModelClick(event) {
                 //点击顶部导航跳转页面
                 console.log(event);
+                if(event.key==173){ // 跳转大屏
+                    return window.open('/#/data_v', '_blank');
+                }
                 let that = this;
                 that.menu.forEach(function (v, k) {
                     if (v.id == event.key) {