边坡数据

package.json

@@ -64,6 +64,7 @@
     "screenfull": "4.2.0",
     "sortablejs": "1.8.4",
     "video.js": "^8.0.4",
+    "videojs": "^1.0.0",
     "videojs-contrib-hls": "^5.15.0",
     "vue": "2.6.10",
     "vue-count-to": "1.0.13",
@@ -71,6 +72,7 @@
     "vue-echarts": "^5.0.0-beta.0",
     "vue-highlightjs": "^1.3.3",
     "vue-image-crop-upload": "^2.5.0",
+    "vue-print-nb": "^1.7.5",
     "vue-router": "3.0.2",
     "vue-splitpane": "1.0.4",
     "vuedraggable": "2.20.0",

src/assets/js/common.js

@@ -2824,6 +2824,83 @@ var HttpReq = function(){
           data:data,
         })
       },
+      slopeGetDeviceList: function(param){
+        return request({
+          url: '/api/monitoringEquipment',
+          method: 'get',
+          params:param,
+        })
+      },
+      slopeGetDevice: function(param){
+        return request({
+          url: '/api/monitoringEquipment/details',
+          method: 'get',
+          params:param,
+        })
+      },
+      slopePostDevice: function(data){
+        return request({
+          url: '/api/monitoringEquipment',
+          method: 'POST',
+          data:data,
+        })
+      },
+      slopePutDevice: function(data){
+        return request({
+          url: '/api/monitoringEquipment',
+          method: 'PUT',
+          data:data,
+        })
+      },
+      slopeDeleteDevice: function(data){
+        return request({
+          url: '/api/monitoringEquipment',
+          method: 'Delete',
+          data:data,
+        })
+      },
+      slopeGetMP: function(param){
+        return request({
+          url: '/api/mpdata',
+          method: 'get',
+          params:param,
+        })
+      },
+      slopeGetMPdevList: function(param){
+        return request({
+          url: '/api/mpdata/allMpEquipment',
+          method: 'get',
+          params:param,
+        })
+      },
+      slopeGetMPdevData: function(param){
+        return request({
+          url: '/api/mpdata/mpChartDataByTime',
+          method: 'get',
+          params:param,
+        })
+      },
+      slopeGetRG: function(param){
+        return request({
+          url: '/api/rgdata',
+          method: 'get',
+          params:param,
+        })
+      },
+      slopeGetRGdevList: function(param){
+        return request({
+          url: '/api/rgdata/allRgEquipment',
+          method: 'get',
+          params:param,
+        })
+      },
+      slopeGetRGdevData: function(param){
+        return request({
+          url: '/api/rgdata/rgChartDataByTime',
+          method: 'get',
+          params:param,
+        })
+      },
 
 		},
 

src/components/ezuikit/carsEZUIKitJs.vue

@@ -19,7 +19,6 @@
           <video id="videoRealtime" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup="{}" style="width: 100%;height: 100%;">
             您的浏览器不支持：HTML5 video.
           </video>
-          noPtzCameraList
           <el-select v-model="cameraSrc" class="noPtzCameraList" @change="videoPlay()">
             <el-option v-for="item in cameraList" :key="item.id" :label="item.monitorName" :value="item.monitorUrl" style="font-size:16px;font-weight:400"></el-option>
           </el-select>
@@ -182,9 +181,6 @@ export default {
     }, function () {
       console.log('video ready!')
     })
-    setTimeout(()=>{
-
-    },3000);
   },
   methods: {
     filterNode(value, data) {

src/components/mars3d/Map5.vue

@@ -130,7 +130,7 @@
   }
   .mars3d-container {
     height: 100%;
-    width: 100vw;
+    width: 100%;
     overflow: hidden;
   }
 

src/main.js

@@ -32,12 +32,14 @@ import router from './router/routers'
 import './assets/icons' // icon
 import './router/index' // permission control
 import 'echarts-gl'
+import print from 'vue-print-nb'
 
 Vue.use(checkPer)
 Vue.use(VueHighlightJS)
 Vue.use(mavonEditor)
 Vue.use(permission)
 Vue.use(dict)
+Vue.use(print);
 Vue.use(Element, {
   size: Cookies.get('size') || 'small' // set element-ui default size
 })

src/views/MLargeScreen/components/smallComponents/DPcomputer16.vue

@@ -466,6 +466,7 @@ export default {
     },
     selectedCar(item) {
       this.selectedCarid = item.id;
+      this.$parent.locateCarByNumber(item.carNumber);
     },
     checkedCarByList(item) {
       item.flag = !item.flag;

src/views/MLargeScreen/index.vue

@@ -41,11 +41,15 @@
 		</div>
 		<!-- 嵌入三维地图页面 -->
 <!--		<iframe :src="url" frameborder="0" class="mapcontainer1"></iframe>-->
-    <iframe src="http://192.168.3.60:18041//#/Index" frameborder="0" class="mapcontainer1"></iframe>
+<!--    <iframe ref="iframe" src="http://192.168.3.60:18041//#/Index" frameborder="0" class="mapcontainer1"></iframe>-->
+<!--    <iframe ref="iframe" src="http://192.168.3.38:3002/#/Index" frameborder="0" class="mapcontainer1"></iframe>-->
 		<!-- 单个车辆视频监控 -->
-		<div class="monitorCover1" v-if="monitorCover1Show">
+
+		<div class="monitorCover1" v-show="monitorCover1Show">
 			<div class="monitorCover1_closePic" @click="closeMonitorCoverFn"></div>
-			<iframe :src="iframeSrc" class="monitorCover1_Video"></iframe>
+      <video id="videoRealtime" class="video-js vjs-default-skin vjs-big-play-centered monitorCover1_Video" controls preload="auto" data-setup="{}">
+        您的浏览器不支持：HTML5 video.
+      </video>
 		</div>
 		<img src="../../assets/images/cutGraph/maplogo1.jpg" class="maplogo1Img">
 	</div>
@@ -83,6 +87,9 @@ import DPcomputer25 from './components/smallComponents/DPcomputer25.vue'
 import DPcomputer26 from './components/smallComponents/DPcomputer26.vue'
 import DPcomputer27 from './components/smallComponents/DPcomputer27.vue'
 import DPcomputer28 from './components/smallComponents/DPcomputer28.vue'
+import 'video.js/dist/video-js.css'
+import videojs from 'video.js'
+import 'videojs-contrib-hls'
 
 export default {
 	components: {
@@ -172,8 +179,24 @@ export default {
 		}, 20000)
 		//与嵌入的地图页面进行交互
 		window.addEventListener('message', this.handleMessage);
+    this.videoPlayer = videojs('videoRealtime', {
+      bigPlayButton: false,
+      textTrackDisplay: false,
+      posterImage: true,
+      errorDisplay: false,
+      controlBar: true
+    }, function () {
+      console.log('video ready!')
+    })
 	},
 	methods: {
+    locateCarByNumber(number){
+      this.iframeWin = this.$refs.iframe.contentWindow;
+      this.iframeWin.postMessage({
+        fnName: 'locateCarByNumber',
+        parameter: number
+      }, '*')
+    },
 		loadData() {
 			let leftTemporaryData = [];
 			let rightTemporaryData = [];
@@ -409,7 +432,7 @@ export default {
 			this.videoSelectStyle = 2;
 		},
 		//获取当前时间
-		setNowTimes () {
+    setNowTimes() {
       let myDate = new Date();
       let wk = myDate.getDay();
       let yy = String(myDate.getFullYear());
@@ -421,13 +444,33 @@ export default {
       let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
       let week = weeks[wk];
       this.currentTime = yy + '/' + mm + '/' + dd + ' ' + hou + ':' + min;
+    },
+    videoPlay() {
+      this.videoPlayer.src({src: this.cameraSrc, type: 'application/x-mpegURL'});
+      this.videoPlayer.play();
     },
 		//与iframe的页面进行数据交互
 		handleMessage(event){//event.data为传递的参数
 			//这里的判断是因为此方法会多次触发，通过参数是否存在可以判断是否为子页面传递的参数，再做出相应的操作
 			if(event.data.data.hasOwnProperty("url")){
 				if(event.data.data.url == '监控'){
-					this.iframeSrc = this.defaultIframeSrc + event.data.data.data;
+					let number = event.data.data.data;
+          HttpReq.truckDispatching.jkcarMonitorFind({carNumber: number}).then((res) => {
+            if (res.code == 200) {
+              if(res.data && res.data.length){
+                this.noPtz = true;
+                this.cameraList = res.data;
+                this.cameraSrc = this.cameraList[0].monitorUrl;
+                this.videoPlay();
+              }else{
+                this.$notify({
+                  title: '该车无视频监控！',
+                  type: 'warning',
+                  duration: 2500
+                });
+              }
+            }
+          })
 					this.monitorCover1Show = true;
 				}
 			}

src/views/slopeMonitoring/alarmManagement/index.vue

@@ -6,14 +6,14 @@
       <div class="head-container">
         <!-- 搜索 -->
         <label class="el-form-item-label" style="font-weight: 500;">设备号</label>
-        <el-input v-model="query.formId" clearable size="small" placeholder="请输入设备号" style="width:180px;"/>
+        <el-input v-model="query.sensorId" clearable size="small" placeholder="请输入设备号" style="width:180px;"/>
         <label class="el-form-item-label" style="font-weight: 500;">报警状态</label>
-        <el-select v-model="query.stu" placeholder="请选择">
+        <el-select v-model="query.alarmStatus" placeholder="请选择">
           <el-option v-for="item in stuOpts" :key="item.value" :label="item.label" :value="item.value"></el-option>
         </el-select>
         <label class="el-form-item-label" style="font-weight: 500;">日期范围</label>
         <el-date-picker
-          v-model="query.createTime"
+          v-model="query.timeList"
           type="datetimerange"
           value-format="yyyy-MM-dd HH:MM:SS"
           range-separator="至"
@@ -32,11 +32,11 @@
           <div class="content-fix">
             <div class="toolbar" style="text-align:right">
               <el-button size="mini" type="primary" icon="el-icon-refresh" @click="loadData">刷新</el-button>
-              <el-button size="mini" type="success" icon="el-icon-s-data" @click="toAdd">图表</el-button>
               <el-button size="mini" type="warning" icon="el-icon-document" @click="toAdd">导出</el-button>
+              <el-button size="mini" icon="el-icon-printer" v-print="printObj" @click="printeTable">打印</el-button>
             </div>
             <div class="content">
-              <el-table :data="tableData" v-loading="loading" border style="width:auto" :row-class-name="tableRowClassName">
+              <el-table id="printContainer" :data="tableData" v-loading="loading" border style="width:auto" :row-class-name="tableRowClassName">
                 <el-table-column prop="formId" label="设备名称" align="center"></el-table-column>
                 <el-table-column prop="username" label="设备编号" align="center"></el-table-column>
                 <el-table-column prop="carNo" label="状态" align="center"></el-table-column>
@@ -46,7 +46,7 @@
                 <el-table-column prop="createTime" label="报警时间" align="center"></el-table-column>
                 <el-table-column prop="carNo" label="解除报警原因" align="center"></el-table-column>
                 <el-table-column prop="createTime" label="解除报警时间" align="center"></el-table-column>
-                <el-table-column label="操作" align="center" fixed="right">
+                <el-table-column label="操作" align="center" v-if="!isPrint">
                   <template slot-scope="scope">
                     <el-button size="mini" type="primary" icon="el-icon-close-notification" @click="toEdit(scope.row)"></el-button>
                   </template>
@@ -62,13 +62,6 @@
       </div>
     </div>
     <!-- 表单渲染 -->
-    <el-dialog append-to-body :close-on-click-modal="true" :before-close="cancelForm" :visible.sync="visible" :title="title" width="800px">
-      <div slot="footer" class="dialog-footer">
-        <el-button type="text" @click="cancelForm">取消</el-button>
-        <el-button type="primary" @click="submitForm('formViewRef', formData)">确认</el-button>
-      </div>
-    </el-dialog>
-    <!-- 表单渲染 -->
     <el-dialog append-to-body :close-on-click-modal="false" :before-close="cancelForm" :visible.sync="editVisible" title="解除报警" width="500px">
       <el-form :model="formData" :rules="rules" ref="formViewRef" :inline="true" label-width="180px">
         <el-form-item label="解除时长：" class="form-cell" prop="name" style="width:100%">
@@ -98,16 +91,9 @@
 
 <script>
 import {Tools, HttpReq, Dates} from '@/assets/js/common.js';
-import mars3dViewerMap from "../../../components/mars3d/Map5.vue";
-import * as mars3d from "mars3d";
-import * as Cesium from "mars3d-cesium";
-import kongzhidiantubiao from "../../../assets/images/cutGraph/kongzhidian1.png";
 
 export default {
   name: 'alarmManagement',
-  components: {
-    mars3dViewerMap,
-  },
   data() {
     const basePathUrl = window.basePathUrl || ''
     return {
@@ -116,13 +102,15 @@ export default {
       visible: false,
       editVisible: false,
       loading: false,
+      isPrint: false,
       page: 1,
       size: 10,
       total: 0,
       query: {},
       stuOpts: [
-        {label: '离线', value: 0},
-        {label: '在线', value: 1},
+        {label: '全部', value: undefined},
+        {label: '报警', value: 1},
+        {label: '正常', value: 0},
       ],
       tableData: [],
       formData: {
@@ -133,6 +121,13 @@ export default {
       rules: {
         devNo: {required: true, message: '请填写解除报警原因', trigger: 'blur'},
       },
+      printObj: {
+        id: "printContainer",
+        popTitle: '打印',
+        extraHead: '',
+        targetStyles: ["*"],
+        closeCallback:()=>{this.isPrint=false},
+      }
     }
   },
   mounted() {
@@ -158,13 +153,12 @@ export default {
         })
       })
     },
-    toAdd() {
-      this.title = '新增';
-      this.visible = true;
-    },
     toEdit() {
       this.editVisible = true;
     },
+    printeTable() {
+      this.isPrint=true;
+    },
     cancelForm() {
       this.visible = false;
       this.editVisible = false;

src/views/slopeMonitoring/environmentalMonitoring/index.vue

@@ -6,14 +6,14 @@
       <div class="head-container">
         <!-- 搜索 -->
         <label class="el-form-item-label" style="font-weight: 500;">设备号</label>
-        <el-input v-model="query.formId" clearable size="small" placeholder="请输入设备号" style="width:180px;"/>
+        <el-input v-model="query.sensorId" clearable size="small" placeholder="请输入设备号" style="width:180px;"/>
         <label class="el-form-item-label" style="font-weight: 500;">报警状态</label>
-        <el-select v-model="query.stu" placeholder="请选择">
+        <el-select v-model="query.alarmStatus" placeholder="请选择">
           <el-option v-for="item in stuOpts" :key="item.value" :label="item.label" :value="item.value"></el-option>
         </el-select>
         <label class="el-form-item-label" style="font-weight: 500;">日期范围</label>
         <el-date-picker
-          v-model="query.createTime"
+          v-model="query.timeList"
           type="datetimerange"
           value-format="yyyy-MM-dd HH:MM:SS"
           range-separator="至"
@@ -73,16 +73,8 @@
 
 <script>
 import {Tools, HttpReq, Dates} from '@/assets/js/common.js';
-import mars3dViewerMap from "../../../components/mars3d/Map5.vue";
-import * as mars3d from "mars3d";
-import * as Cesium from "mars3d-cesium";
-import kongzhidiantubiao from "../../../assets/images/cutGraph/kongzhidian1.png";
-
 export default {
   name: 'environmentalMonitoring',
-  components: {
-    mars3dViewerMap,
-  },
   data() {
     const basePathUrl = window.basePathUrl || ''
     return {
@@ -91,8 +83,9 @@ export default {
       visible: false,
       loading: false,
       stuOpts: [
-        {label: '离线', value: 0},
-        {label: '在线', value: 1},
+        {label: '全部', value: undefined},
+        {label: '报警', value: 1},
+        {label: '正常', value: 0},
       ],
       page: 1,
       size: 10,