东视

src/components/common/Header.vue

@@ -2,26 +2,26 @@
   <div class="header">
     <div class="logo">视频监控可视化平台</div>
     <v-sidebar></v-sidebar>
-    <div class="header-right">
+    <!-- <div class="header-right">
       <div class="header-user-con">
-        <!-- 用户头像 -->
+        
         <div class="user-avator">
           <img src="../../assets/img/user.jpeg" />
         </div>
-        <!-- 用户名下拉菜单 -->
+       
         <el-dropdown class="user-name" trigger="click" @command="handleCommand">
           <span class="el-dropdown-link">
             {{ userName }}
             <i class="el-icon-caret-bottom"></i>
           </span>
           <el-dropdown-menu slot="dropdown">
-            <!-- <el-dropdown-item command="noticeShow">公告</el-dropdown-item> -->
+          
             <el-dropdown-item command="changePwd"> 修改密码</el-dropdown-item>
             <el-dropdown-item command="loginout">退出登录</el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
-    </div>
+    </div> -->
     <password-dialog ref="passwordref"></password-dialog>
   </div>
 </template>

src/components/common/Sidebar.vue

@@ -64,17 +64,6 @@ export default {
           title: "实时监控",
         },
 
-        // {
-        //   icon: "el-icon-film",
-        //   index: "/pictureRotation",
-        //   title: "图片轮巡",
-        // },
-        // {
-        //   icon: "el-icon-bell",
-        //   index: "/photoAlarm",
-        //   title: "告警处理",
-        // },
-
         {
           icon: "el-icon-search",
           index: "/realTimeSearch",
@@ -106,47 +95,9 @@ export default {
               index: "/devicePhotoSchedule",
               title: "拍照时间表设置",
             },
-            // {
-            //   index: "/deviceReport",
-            //   title: "装置报表",
-            // },
-            // {
-            //   index: "/waterMark",
-            //   title: "水印下发",
-            // },
-            // {
-            //   index: "/deviceUpgrade",
-            //   title: "装置升级",
-            // },
-            // {
-            //   icon: "el-icon-picture-outline",
-            //   index: "imageSettings",
-            //   title: "图像采集参数设置",
-            // },
           ],
         },
-        // {
-        //   icon: "el-icon-monitor",
-        //   index: "/system",
-        //   title: "系统管理",
-        //   subs: [
-        //     {
-        //       index: "/userManagement",
-        //       title: "用户管理",
-        //     },
-        //     {
-        //       index: "/globalTools",
-        //       title: "全局设置",
-        //     },
-        //   ],
-        // },
-        // {
-        //   icon: "el-icon-setting",
-        //   index: "/itOperation",
-        //   title: "运维管理",
-        // },
       ],
-
       role: "",
     };
   },
@@ -163,10 +114,6 @@ export default {
   created() {
     this.setCurrentRoute();
     this.role = localStorage.getItem("role");
-    console.log("用户管理");
-    console.log(this.role);
-
-    console.log(this.items);
   },
 };
 </script>

src/main.js

@@ -54,17 +54,18 @@ router.beforeEach((to, from, next) => {
     document.title = `${to.meta.title} | 视频监控可视化平台`;
   }
 
-  const role = localStorage.getItem("role");
+  // const role = localStorage.getItem("role");
-  const token = localStorage.getItem("token");
+  // const token = localStorage.getItem("token");
-  console.log(role, token);
+  // console.log(role, token);
-  if (!token && to.path !== "/login") {
+  // if (!token && to.path !== "/login") {
-    //next("/login");
+  //   //next("/login");
-    next({
+  //   next({
-      path: "/login",
+  //     path: "/login",
-    });
+  //   });
-  } else {
+  // } else {
+  //   next();
+  // }
   next();
-  }
 });
 
 new Vue({

src/router/index.js

@@ -213,12 +213,12 @@ const routes = [
       },
     ],
   },
-  {
+  // {
-    path: "/login",
+  //   path: "/login",
-    component: () =>
+  //   component: () =>
-      import(/* webpackChunkName: "login" */ "../views/Login.vue"),
+  //     import(/* webpackChunkName: "login" */ "../views/Login.vue"),
-    meta: { title: "登录" },
+  //   meta: { title: "登录" },
-  },
+  // },
   {
     path: "*",
     redirect: "/404",

src/views/stritl/index.vue

@@ -8,17 +8,17 @@
         > -->
         <div class="bottomM">
           <div class="infoBox">
-            <p @click="handleLook">
+            <p @click="handleLook(-1)">
               <span>装置总数</span>
               <span>{{ termDataNum.totalNum ? termDataNum.totalNum : 0 }}</span>
             </p>
-            <p>
+            <p @click="handleLook(1)">
               <span>在线数量</span>
               <span>{{
                 termDataNum.onlineNum ? termDataNum.onlineNum : 0
               }}</span>
             </p>
-            <p>
+            <p @click="handleLook(0)">
               <span>离线率</span>
               <span
                 >{{
@@ -29,7 +29,7 @@
               >
             </p>
             <p>
-              <span>在线率</span>
+              <span @click="handleLook(1)">在线率</span>
               <span
                 >{{
                   termDataNum.onlinePercent
@@ -46,39 +46,7 @@
         <div id="echart2" class="chartClass" v-loading="pieloading"></div>
       </el-card>
     </div>
-    <!-- <div class="echart-top">
+
-      <el-card class="box-card" v-loading="barloading">
-        <h3>7天告警数量统计</h3>
-        <div class="dateBox">
-          <span class="datemsg">当前日期前七天</span>
-          <el-date-picker
-            v-model="dateValue"
-            align="right"
-            type="date"
-            placeholder="选择日期"
-            :picker-options="singpickerOptions"
-            @change="changedate"
-          >
-          </el-date-picker>
-        </div>
-        <div id="echart3" class="chartClass"></div>
-      </el-card>
-      <el-card class="box-card" v-loading="pie2loading">
-        <h3>告警类型统计</h3>
-        <div class="dateBox">
-          <el-date-picker
-            v-model="dateValue2"
-            align="right"
-            type="date"
-            placeholder="选择日期"
-            :picker-options="singpickerOptions"
-            @change="changedate2"
-          >
-          </el-date-picker>
-        </div>
-        <div id="echart4" class="chartClass"></div>
-      </el-card>
-    </div> -->
     <el-dialog
       class="exportDialog"
       title="装置列表"
@@ -86,7 +54,10 @@
       :visible.sync="dialogTableVisible"
     >
       <div class="exportList" v-loading="exportLoading">
-        <el-button class="exportbtn" type="primary" @click="handleExport()"
+        <el-button
+          class="exportbtn"
+          type="primary"
+          @click="handleExport(paramsLineVal)"
           >导出</el-button
         >
         <el-table
@@ -107,6 +78,8 @@
             label="最新图片拍照时间"
           ></el-table-column>
           <el-table-column prop="isonline" label="是否在线"></el-table-column>
+          <el-table-column prop="longitude" label="经度"></el-table-column>
+          <el-table-column prop="latitude" label="纬度"></el-table-column>
         </el-table>
       </div>
     </el-dialog>
@@ -145,6 +118,7 @@ export default {
       dialogTableVisible: false,
       onLineData: [],
       exportLoading: false,
+      paramsLineVal: "",
     };
   },
   created() {
@@ -153,8 +127,6 @@ export default {
   mounted() {
     this.getDateTime(); //获取当前时间
     this.getTermData();
-    this.getWeekAlarmStatistics();
-    this.getTodayAlarmStatistics();
   },
   watch: {
     "$store.state.collapse"(val) {
@@ -163,17 +135,19 @@ export default {
         //echarts得重绘方法
         this.myChart1.resize();
         this.myChart2.resize();
-        this.myChart3.resize();
-        this.myChart4.resize();
       }, 300);
     },
   },
   methods: {
     //查看在线列表
-    handleLook() {
+    handleLook(val) {
+      console.log(val);
+      this.paramsLineVal = val;
       this.dialogTableVisible = true;
       this.exportLoading = true;
-      getOnlineTerminalList()
+      getOnlineTerminalList({
+        type: val,
+      })
         .then((res) => {
           console.log(res);
           this.onLineData = res.data;
@@ -183,14 +157,14 @@ export default {
         .catch((err) => {});
     },
     //导出
-    handleExport() {
+    handleExport(val) {
-      window.location.href = "/api/api/getOnlineTerminalListExcel";
+      console.log(val);
+      window.location.href = "/api/api/getOnlineTerminalListExcel?type=" + val;
     },
     // 隐患数量统计
     changedate() {
       console.log(this.dateValue.getTime());
       this.dateValue = this.dateValue.getTime();
-      this.getWeekAlarmStatistics();
     },
     // 隐患分类统计
     changedate2() {
@@ -220,36 +194,14 @@ export default {
         })
         .catch((err) => {});
     },
-    //获取7天告警统计
+
-    getWeekAlarmStatistics() {
-      this.barloading = true;
-      getWeekAlarmStatistics({ starttime: this.dateValue })
-        .then((res) => {
-          console.log(res);
-          this.weekData = res.data.list;
-          this.barloading = false;
-          this.getEchart3();
-        })
-        .catch((err) => {});
-    },
-    //获取当天告警分类统计
-    getTodayAlarmStatistics() {
-      this.pie2loading = true;
-      getTodayAlarmStatistics({ starttime: this.dateValue2 })
-        .then((res) => {
-          console.log(res);
-          this.todayAlarm = res.data.list;
-          this.pie2loading = false;
-          this.getEchart4();
-        })
-        .catch((err) => {});
-    },
     //装置数量统计
     getEchart2() {
       this.$nextTick(() => {
         console.log(this.termDataNum);
-        this.$echarts.init(document.getElementById("echart2")).dispose();
+        let that = this;
-        this.myChart2 = this.$echarts.init(document.getElementById("echart2"));
+        that.$echarts.init(document.getElementById("echart2")).dispose();
+        that.myChart2 = this.$echarts.init(document.getElementById("echart2"));
         let option = {
           // title: {
           //   text: "装置在线统计",
@@ -265,14 +217,12 @@ export default {
             top: 20,
             bottom: 20,
           },
-
           series: [
             {
               type: "pie",
-              // minAngle: 45, //最小角度
-              // startAngle: 180, //起始角度
               radius: ["40%", "70%"],
               avoidLabelOverlap: false,
+
               itemStyle: {
                 borderRadius: 10,
                 borderColor: "#fff",
@@ -280,14 +230,14 @@ export default {
               },
               label: {
                 show: true,
-                fontSize: 12,
+                fontSize: 16,
-                fontWeight: "normal",
+                fontWeight: "bold",
                 formatter: "{b}\n{d}%",
               },
               emphasis: {
                 label: {
                   show: true,
-                  fontSize: 12,
+                  fontSize: 26,
                   fontWeight: "bold",
                   formatter: "{b}\n{d}%",
                 },
@@ -296,161 +246,23 @@ export default {
                 show: true,
               },
               data: [
-                { value: this.termDataNum.onlineNum, name: "在线" },
+                { value: that.termDataNum.onlineNum, name: "在线" },
-                { value: this.termDataNum.offlineNum, name: "离线" },
+                { value: that.termDataNum.offlineNum, name: "离线" },
               ],
             },
           ],
         };
-        this.myChart2.setOption(option);
+        that.myChart2.setOption(option);
         window.addEventListener("resize", () => {
-          this.myChart2.resize();
+          that.myChart2.resize();
-        });
-      });
-    },
-    //获取7天告警统计
-    getEchart3() {
-      this.$nextTick(() => {
-        this.$echarts.init(document.getElementById("echart3")).dispose();
-        this.myChart3 = this.$echarts.init(document.getElementById("echart3"));
-        let option = {
-          // title: {
-          //   text: "隐患分类统计",
-          // },
-          color: ["#169e8c"],
-          tooltip: {
-            trigger: "axis",
-            axisPointer: {
-              type: "shadow",
-            },
-          },
-          grid: {
-            //与绝对定位相似，top，left，right，bottom 设定是根据上级盒子宽高来计算
-            top: "10%",
-            left: "10%",
-            right: "10%",
-            bottom: "13%",
-          },
-          xAxis: {
-            type: "category",
-            data: this.weekData.map((x) => {
-              return this.$moment(x.date).format("MM-DD");
-            }),
-            axisTick: {
-              alignWithLabel: true,
-            },
-          },
-          yAxis: { type: "value" },
-          series: [
-            {
-              name: "告警数量",
-              data: this.weekData.map((x) => {
-                return x.num;
-              }),
-              type: "bar",
-              showBackground: true,
-              backgroundStyle: { color: "rgba(180, 180, 180, 0.2)" },
-            },
-          ],
-        };
-        this.myChart3.setOption(option);
-        window.addEventListener("resize", () => {
-          this.myChart3.resize();
         });
-      });
+        that.myChart2.on("click", function (params) {
-    },
+          console.log(params);
-    //获取当天告警分类统计
+          if (params.name == "在线") {
-    getEchart4() {
+            that.handleLook(1);
-      this.$nextTick(() => {
+          } else {
-        this.$echarts.init(document.getElementById("echart4")).dispose();
+            that.handleLook(0);
-        this.myChart4 = this.$echarts.init(document.getElementById("echart4"));
+          }
-        let arr = [];
-        this.todayAlarm.forEach((element) => {
-          arr.push({
-            value: element.num, //将数组的num值赋给value
-            name: element.enname, //将数组的name值赋给name
-          });
-        });
-        let option = {
-          // title: {
-          //   text: "隐患分类统计",
-          // },
-          // tooltip: {
-          //   trigger: "axis",
-          //   axisPointer: {
-          //     type: "shadow",
-          //   },
-          // },
-          // xAxis: {
-          //   type: "category",
-          //   data: this.todayAlarm.map((item) => {
-          //     return item.enname;
-          //   }),
-          //   axisTick: {
-          //     alignWithLabel: true,
-          //   },
-          // },
-          // yAxis: { type: "value" },
-          // series: [
-          //   {
-          //     name: "告警数量",
-          //     data: this.todayAlarm.map((item) => {
-          //       return item.num;
-          //     }),
-          //     type: "bar",
-          //     showBackground: true,
-          //     backgroundStyle: { color: "rgba(180, 180, 180, 0.2)" },
-          //   },
-          // ],
-
-          // title: {
-          //   text: "装置在线统计",
-          // },
-          tooltip: {
-            trigger: "item",
-          },
-          legend: {
-            type: "scroll",
-            orient: "vertical",
-            right: 10,
-            top: 20,
-            bottom: 20,
-          },
-          series: [
-            {
-              type: "pie",
-              radius: ["40%", "70%"],
-              avoidLabelOverlap: false,
-
-              itemStyle: {
-                borderRadius: 10,
-                borderColor: "#fff",
-                borderWidth: 2,
-              },
-              label: {
-                show: true,
-                fontSize: 14,
-                fontWeight: "normal",
-                formatter: "{b}\n{d}%",
-              },
-              emphasis: {
-                label: {
-                  show: true,
-                  fontSize: 14,
-                  fontWeight: "normal",
-                  formatter: "{b}\n{d}%",
-                },
-              },
-              labelLine: {
-                show: true,
-              },
-              data: arr,
-            },
-          ],
-        };
-        this.myChart4.setOption(option);
-        window.addEventListener("resize", () => {
-          this.myChart4.resize();
         });
       });
     },
@@ -507,6 +319,9 @@ export default {
             flex-direction: column;
             justify-content: space-around;
             box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+            &:hover {
+              cursor: pointer;
+            }
             &:first-child {
               &:hover {
                 cursor: pointer;

vue.config.js

@@ -29,11 +29,11 @@ module.exports = defineConfig({
     proxy: {
       "/api": {
         //表示拦截以/api开头的请求路径
-        target: "http://47.96.238.157:8093", //阿里云服务器环境
+        // target: "http://47.96.238.157:8093", //阿里云服务器环境
-        //target: "http://180.166.218.222:40080", //dell
+        target: "http://180.166.218.222:40080", //dell
         changOrigin: true, //是否开启跨域
         pathRewrite: {
-          "^/api": "", //重写api，把api变成空字符，因为我们真正请求的路径是没有api的
+          "^/api": "/api", //重写api，把api变成空字符，因为我们真正请求的路径是没有api的
         },
       },
     },