大屏统计及人员定位地图切换

huaxin-admin/src/main/java/com/zehong/web/controller/screenstatistic/TScreenStatisticController.java

@@ -69,4 +69,14 @@ public class TScreenStatisticController {
     public AjaxResult dangerStatistic(){
         return AjaxResult.success(screenStatisticService.dangerStatistic());
     }
+
+
+    /**
+     * 新大屏数量统计
+     * @return
+     */
+    @GetMapping("/totalNumStatisticByType")
+    public AjaxResult totalNumStatisticByType(){
+        return AjaxResult.success(screenStatisticService.totalNumStatisticByType());
+    }
 }

huaxin-system/src/main/java/com/zehong/system/mapper/TScreenStatisticMapper.java

@@ -39,4 +39,23 @@ public interface TScreenStatisticMapper {
      * @return
      */
     Map<String,Object> dangerStatistic(Map<String,Object> param);
+
+    /**
+     * 管线分类型统计长度
+     * @return
+     */
+    List<Map<String,Object>> pipeLengthStatisticByType();
+
+    /**
+     * 设备分类型统计
+     * @return
+     */
+    List<Map<String,Object>> deviceStatisticByType();
+
+    /**
+     * 场站分类型统计
+     * @return
+     */
+    List<Map<String,Object>> stationStatisticByType();
+
 }

huaxin-system/src/main/java/com/zehong/system/service/TScreenStatisticService.java

@@ -39,4 +39,11 @@ public interface TScreenStatisticService {
      * @return
      */
     Map<String,Object> dangerStatistic();
+
+
+    /**
+     * 新大屏数量统计
+     * @return
+     */
+    Map<String,List<Map<String,Object>>> totalNumStatisticByType();
 }

huaxin-system/src/main/java/com/zehong/system/service/impl/TScreenStatisticServiceImpl.java

@@ -108,4 +108,20 @@ public class TScreenStatisticServiceImpl implements TScreenStatisticService{
         }
         return screenStatisticMapper.dangerStatistic(param);
     }
+
+
+    /**
+     * 新大屏数量统计
+     * @return
+     */
+    @Override
+    public Map<String,List<Map<String,Object>>> totalNumStatisticByType(){
+        Map<String,List<Map<String,Object>>> result = new HashMap<>();
+        result.put("pipeLengthInfo",screenStatisticMapper.pipeLengthStatisticByType());
+        result.put("deviceNumInfo",screenStatisticMapper.deviceStatisticByType());
+        result.put("stationNumInfo",screenStatisticMapper.stationStatisticByType());
+        return result;
+    }
+
+
 }

huaxin-system/src/main/resources/mapper/system/TScreenStatisticMapper.xml

@@ -92,4 +92,43 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
             <if test="isVisitor != null and isVisitor != ''">and is_visitor = #{isVisitor}</if>
         </where>
     </select>
+
+    <!-- 管线分类型统计长度 -->
+    <select id="pipeLengthStatisticByType" resultType="Map">
+        SELECT
+            sum(IFNULL(pipe_length,0)) as totalLength,
+            pipe_type as type
+        FROM
+            t_pipe_info
+        GROUP BY
+            pipe_type
+        ORDER BY pipe_type;
+    </select>
+
+    <!-- 设备分类型统计 -->
+    <select id="deviceStatisticByType" resultType="Map">
+        SELECT
+            COUNT(1) as value,
+            dict.dict_label as name
+        FROM
+            t_device_info device
+        LEFT JOIN sys_dict_data dict ON dict.dict_value = device.device_type AND dict_type = 't_device_type'
+        GROUP BY
+            device.device_type
+        ORDER BY device.device_type DESC;
+    </select>
+
+    <!-- 场站分类型统计 -->
+    <select id="stationStatisticByType" resultType="Map">
+        SELECT
+            COUNT(1) as value,
+            dict.dict_label as name
+        FROM
+            t_site_station_info station
+        LEFT JOIN sys_dict_data dict ON dict.dict_value = station.site_station_type AND dict_type = 't_station_type'
+        GROUP BY
+            station.site_station_type
+        ORDER BY station.site_station_type DESC ;
+    </select>
+
 </mapper>
\ No newline at end of file

huaxin-web/src/api/screenstatistic/statistic.js

@@ -48,3 +48,13 @@ export function dangerStatistic(query) {
   })
 }
 
+
+//新大屏数量统计
+export function totalNumStatisticByType(query) {
+  return request({
+    url: '/screen/statistic/totalNumStatisticByType',
+    method: 'get',
+    params: query
+  })
+}
+

huaxin-web/src/components/Breadcrumb/index.vue

@@ -35,7 +35,7 @@ export default {
       const first = matched[0]
 
       if (!this.isDashboard(first)) {
-        matched = [{ path: '/index', meta: { title: '首页' }}].concat(matched)
+        matched = [{ path: '/bigWindow', meta: { title: '首页' }}].concat(matched)
       }
 
       this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)

huaxin-web/src/views/bigWindow/Ind/components/DeviceScrollTable.vue

@@ -17,39 +17,46 @@
         :class="{ 'is-scrolling': shouldScroll, 'is-paused': isPaused }"
         :style="shouldScroll ? { animationDuration: scrollDuration + 's' } : {}"
       >
-        <div v-for="row in rows" :key="row.id + row.date" class="row">
-          <div class="col id">{{ row.id }}</div>
-          <div class="col type">{{ row.type }}</div>
-          <div class="col date">{{ row.date }}</div>
+        <div v-for="(row,index) in cycleList" :key="row.id + row.createTime" class="row">
+          <div class="col id">{{ index+1 }}</div>
+          <div class="col type">{{ row.devTypeName }}</div>
+          <div class="col date">{{ parseTime(row.createTime, '{y}-{m}-{d}') }}</div>
           <div class="col status">
-            <span
+            <!--<span
               :class="[
                 'tag',
-                row.status === '正常' ? 'tag-blue' : 'tag-orange',
+                row.devStatus === '1' ? 'tag-blue' : 'tag-orange',
               ]"
             >
               {{ row.status }}
-            </span>
+            </span>-->
+            <span v-if="row.devStatus==1" class="tag tag-blue">正常</span>
+            <span v-else-if="row.devStatus==2" class="tag tag-orange">停用</span>
+            <span v-else-if="row.devStatus==9" class="tag tag-orange">报废</span>
+            <span v-else>-</span>
           </div>
         </div>
         <template v-if="shouldScroll">
           <div
-            v-for="(row, index) in rows"
+            v-for="(row, index) in cycleList"
             :key="'clone-' + index + row.id"
             class="row"
           >
-            <div class="col id">{{ row.id }}</div>
-            <div class="col type">{{ row.type }}</div>
-            <div class="col date">{{ row.date }}</div>
+            <div class="col id">{{ index+1 }}</div>
+            <div class="col type">{{ row.devTypeName }}</div>
+            <div class="col date">{{ parseTime(row.createTime, '{y}-{m}-{d}') }}</div>
             <div class="col status">
-              <span
+              <!--<span
                 :class="[
                   'tag',
                   row.status === '正常' ? 'tag-blue' : 'tag-orange',
                 ]"
               >
                 {{ row.status }}
-              </span>
+              </span>-->
+              <span v-if="row.devStatus==1" class="tag tag-blue">正常</span>
+              <span v-else-if="row.devStatus==2" class="tag tag-orange">停用</span>
+              <span v-else-if="row.devStatus==9" class="tag tag-orange">报废</span>
             </div>
           </div>
         </template>
@@ -59,6 +66,7 @@
 </template>
 
 <script>
+import { listCycle } from "@/api/cycle/cycle";
 export default {
   name: "DeviceScrollTable",
   props: {
@@ -88,6 +96,7 @@ export default {
     return {
       shouldScroll: false,
       isPaused: false,
+      cycleList: []
     };
   },
   computed: {
@@ -100,6 +109,7 @@ export default {
     },
   },
   mounted() {
+    this.getList();
     this.updateScrollState();
     window.addEventListener("resize", this.updateScrollState);
   },
@@ -120,6 +130,13 @@ export default {
         this.shouldScroll = body.scrollHeight > body.clientHeight;
       });
     },
+    getList() {
+      listCycle().then(res => {
+        if(res.code == 200){
+          this.cycleList = res.rows;
+        }
+      });
+    },
   },
 };
 </script>

huaxin-web/src/views/bigWindow/Ind/components/Left.vue

@@ -9,7 +9,7 @@
 <template>
   <div class="left">
     <div class="t">
-      <Title text="管线长度" text2="单位（公里）" />
+      <Title text="管线长度" text2="单位（米）" />
       <div class="gxbox">
         <div v-for="item in itemArr" :key="item.text" class="gxbox-item">
           <div class="num">{{ item.num }}</div>
@@ -19,12 +19,12 @@
     </div>
 
     <div class="lb">
-      <Title text="设备统计" />
+      <Title text="设备及场站" />
       <div class="lba lbamt">
-        <div class="box-a">阀门井设备统计</div>
+        <div class="box-a">设备统计</div>
         <div class="box-b">
           <div class="fa">
-            <div class="faa">266</div>
+            <div class="faa">{{ deviceTotal }}</div>
             <div class="fab">总量</div>
             <div class="fac"></div>
           </div>
@@ -35,10 +35,10 @@
       </div>
 
       <div class="lba">
-        <div class="box-a">调压箱统计</div>
+        <div class="box-a">场站统计</div>
         <div class="box-b">
           <div class="fa">
-            <div class="faa">1448</div>
+            <div class="faa">{{ stationTotal }}</div>
             <div class="fab">总量</div>
             <div class="fac"></div>
           </div>
@@ -54,6 +54,7 @@
 <script>
 import Title from "@/views/bigWindow/PubCom/title.vue";
 import PressureBarChart from "@/views/bigWindow/Ind/components/PressureBarChart.vue";
+import { totalNumStatisticByType } from "@/api/screenstatistic/statistic";
 export default {
   name: "",
   components: {
@@ -64,36 +65,56 @@ export default {
     return {
       itemArr: [
         {
-          num: "3.396",
+          num: 0,
           text: "高压",
         },
         {
-          num: "14.66",
+          num: 0,
           text: "次高",
         },
         {
-          num: "347.866",
+          num: 0,
           text: "中压",
         },
         {
-          num: "1201.94",
+          num: 0,
           text: "低压",
         },
       ],
-      pressureData: [
-        { name: "次高压线", value: 120 },
-        { name: "中压线", value: 98 },
-        { name: "低压线", value: 86 },
-      ],
-      pressureData2: [
-        { name: "次高压线", value: 120 },
-        { name: "中压线", value: 98 },
-        { name: "低压线", value: 86 },
-      ],
+      pressureData: [],
+      pressureData2: [],
+      deviceTotal: 0,
+      stationTotal: 0,
     };
   },
-  mounted() {},
-  methods: {},
+  mounted() {
+    this.getTotalNumInfo();
+  },
+  methods: {
+    getTotalNumInfo(){
+      totalNumStatisticByType().then(res =>{
+        if(res.code == 200){
+          let data = res.data;
+          //管线
+          let pipeLengthInfo = data.pipeLengthInfo;
+          if(pipeLengthInfo){
+            pipeLengthInfo.forEach(item =>{
+              let info = this.itemArr[item.type-1];
+              info.num = item.totalLength;
+            })
+          }
+          //设备
+          let deviceNumInfo =  data.deviceNumInfo;
+          if(deviceNumInfo) this.pressureData = deviceNumInfo;
+          this.deviceTotal = this.pressureData ? this.pressureData.map(item => item.value).reduce((sum, num) => sum + num, 0) : 0;
+          //场站
+          let stationNumInfo = data.stationNumInfo;
+          if(stationNumInfo) this.pressureData2 = stationNumInfo;
+          this.stationTotal = this.pressureData2 ? this.pressureData2.map(item => item.value).reduce((sum, num) => sum + num, 0)  : 0;
+        }
+      })
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>

huaxin-web/src/views/bigWindow/Ind/components/PressureBarChart.vue

 <template>
   <div class="chars-wrapper">
-    <div class="bg">
-      <div class="item"></div>
-      <div class="item"></div>
-      <div class="item"></div>
-    </div>
+    <!--<div class="bg">-->
+      <!--<div class="item"></div>-->
+      <!--<div class="item"></div>-->
+      <!--<div class="item"></div>-->
+    <!--</div>-->
     <div ref="chart" class="pressure-bar-chart"></div>
   </div>
 </template>

huaxin-web/src/views/usergps/components/CurrentLocation.vue

 <template>
   <el-dialog title="当前位置信息" :visible.sync="open" width="800px" append-to-body destroy-on-close :close-on-click-modal="false">
+    <div class="mapChange">
+      <div :class="{ active: !mapStyle }" @click="mapChange(1)">卫星地图</div>
+      <div :class="{ active: mapStyle }" @click="mapChange(2)">全景地图</div>
+    </div>
     <div id="map" style="width: 100%; height: 500px"></div>
   </el-dialog>
 
@@ -17,7 +21,8 @@
       return{
         //高德地图
         gaoMap: null,
-        open: false
+        open: false,
+        mapStyle: true
       }
     },
     methods:{
@@ -72,7 +77,16 @@
             this.addMarker(res.data);
           }
         })
-      }
+      },
+      // 更改卫星图
+      mapChange(num) {
+        if (num == 1) {
+          this.mapStyle = false;
+        } else {
+          this.mapStyle = true;
+        }
+        this.gaoMap.changeMap(this.mapStyle);
+      },
 
     },
     computed: {
@@ -81,6 +95,26 @@
   }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+  .mapChange {
+    top: 95px;
+    color: #1890ff;
+    //background-color: #e8f4ff;
+    position: absolute;
+    display: flex;
+    z-index: 9999;
+    div {
+      padding: 4px 8px;
+      border: 1px solid #fff;
+      background-color: #e8f4ff;
+      margin-left: 8px;
+      cursor: pointer;
+      &.active,
+      &:hover {
+        background-color: #1890ff;
+        color: #fff;
+      }
+    }
+  }
 
 </style>

huaxin-web/src/views/usergps/components/HistoryTrack.vue

@@ -17,6 +17,10 @@
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
+    <div class="mapChange">
+      <div :class="{ active: !mapStyle }" @click="mapChange(1)">卫星地图</div>
+      <div :class="{ active: mapStyle }" @click="mapChange(2)">全景地图</div>
+    </div>
     <div id="track-history-map" style="width: 100%; height: 500px"></div>
   </el-dialog>
 
@@ -42,7 +46,8 @@
         },
         trackTime: null,
         markers: [],
-        pipeLine: null
+        pipeLine: null,
+        mapStyle: true
       }
     },
     methods:{
@@ -167,7 +172,16 @@
         if(this.pipeLine){
           this.gaoMap.map.remove(this.pipeLine);
         }
-      }
+      },
+      // 更改卫星图
+      mapChange(num) {
+        if (num == 1) {
+          this.mapStyle = false;
+        } else {
+          this.mapStyle = true;
+        }
+        this.gaoMap.changeMap(this.mapStyle);
+      },
 
     },
     computed: {
@@ -176,6 +190,26 @@
   }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+  .mapChange {
+    top: 155px;
+    color: #1890ff;
+    //background-color: #e8f4ff;
+    position: absolute;
+    display: flex;
+    z-index: 9999;
+    div {
+      padding: 4px 8px;
+      border: 1px solid #fff;
+      background-color: #e8f4ff;
+      margin-left: 8px;
+      cursor: pointer;
+      &.active,
+      &:hover {
+        background-color: #1890ff;
+        color: #fff;
+      }
+    }
+  }
 
 </style>