代码提交

package.json

@@ -7,23 +7,34 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
+    "@ffmpeg-installer/ffmpeg": "^1.1.0",
     "axios": "^1.1.3",
     "core-js": "^2.6.5",
     "echarts": "^5.4.0",
     "element-ui": "^2.15.10",
+    "express": "^4.18.2",
+    "express-ws": "^5.0.2",
+    "fluent-ffmpeg": "^2.1.2",
+    "jsmpeg": "^1.0.0",
     "less": "^4.1.3",
     "less-loader": "^5.0.0",
     "moment": "^2.29.4",
+    "rtsp2web": "^2.2.0",
     "v-fit-columns": "^0.2.0",
     "vue": "^2.6.10",
+    "vue-jsmpeg-player": "^1.1.0-beta",
     "vue-router": "^3.0.3",
     "vue-video-player": "^5.0.2",
-    "vuex": "^3.0.1"
+    "vuex": "^3.0.1",
+    "websocket-stream": "^5.5.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.0.4",
     "@vue/cli-service": "^3.0.4",
-    "vue-template-compiler": "^2.6.10"
+    "express": "^4.18.2",
+    "express-ws": "^5.0.2",
+    "vue-template-compiler": "^2.6.10",
+    "websocket-stream": "^5.5.2"
   },
   "postcss": {
     "plugins": {

public/index.html

@@ -4,6 +4,9 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <script type="text/javascript" src="../stactic/webrtcstreamer.js"></script>
+    <script type="text/javascript" src="../stactic/adapter.min.js"></script>
+    <script src="https://jsmpeg.com/jsmpeg.min.js" charset="utf-8"></script>  
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>yanduscreen</title>
   </head>

public/stactic/webrtcstreamer.js

@@ -0,0 +1,305 @@
+var WebRtcStreamer = (function() {
+
+/** 
+ * Interface with WebRTC-streamer API
+ * @constructor
+ * @param {string} videoElement - id of the video element tag
+ * @param {string} srvurl -  url of webrtc-streamer (default is current location)
+*/
+var WebRtcStreamer = function WebRtcStreamer (videoElement, srvurl) {
+	if (typeof videoElement === "string") {
+		this.videoElement = document.getElementById(videoElement);
+	} else {
+		this.videoElement = videoElement;
+	}
+	this.srvurl           = srvurl || location.protocol+"//"+window.location.hostname+":"+window.location.port;
+	this.pc               = null;    
+
+	this.mediaConstraints = { offerToReceiveAudio: true, offerToReceiveVideo: true };
+
+	this.iceServers = null;
+	this.earlyCandidates = [];
+}
+
+WebRtcStreamer.prototype._handleHttpErrors = function (response) {
+    if (!response.ok) {
+        throw Error(response.statusText);
+    }
+    return response;
+}
+
+/** 
+ * Connect a WebRTC Stream to videoElement 
+ * @param {string} videourl - id of WebRTC video stream
+ * @param {string} audiourl - id of WebRTC audio stream
+ * @param {string} options -  options of WebRTC call
+ * @param {string} stream  -  local stream to send
+*/
+WebRtcStreamer.prototype.connect = function(videourl, audiourl, options, localstream) {
+	this.disconnect();
+	
+	// getIceServers is not already received
+	if (!this.iceServers) {
+		console.log("Get IceServers");
+		
+		fetch(this.srvurl + "/api/getIceServers")
+			.then(this._handleHttpErrors)
+			.then( (response) => (response.json()) )
+			.then( (response) =>  this.onReceiveGetIceServers(response, videourl, audiourl, options, localstream))
+			.catch( (error) => this.onError("getIceServers " + error ))
+				
+	} else {
+		this.onReceiveGetIceServers(this.iceServers, videourl, audiourl, options, localstream);
+	}
+}
+
+/** 
+ * Disconnect a WebRTC Stream and clear videoElement source
+*/
+WebRtcStreamer.prototype.disconnect = function() {		
+	if (this.videoElement?.srcObject) {
+		this.videoElement.srcObject.getTracks().forEach(track => {
+			track.stop()
+			this.videoElement.srcObject.removeTrack(track);
+		});
+	}
+	if (this.pc) {
+		fetch(this.srvurl + "/api/hangup?peerid=" + this.pc.peerid)
+			.then(this._handleHttpErrors)
+			.catch( (error) => this.onError("hangup " + error ))
+
+		
+		try {
+			this.pc.close();
+		}
+		catch (e) {
+			console.log ("Failure close peer connection:" + e);
+		}
+		this.pc = null;
+	}
+}    
+
+/*
+* GetIceServers callback
+*/
+WebRtcStreamer.prototype.onReceiveGetIceServers = function(iceServers, videourl, audiourl, options, stream) {
+	this.iceServers       = iceServers;
+	this.pcConfig         = iceServers || {"iceServers": [] };
+	try {            
+		this.createPeerConnection();
+
+		var callurl = this.srvurl + "/api/call?peerid=" + this.pc.peerid + "&url=" + encodeURIComponent(videourl);
+		if (audiourl) {
+			callurl += "&audiourl="+encodeURIComponent(audiourl);
+		}
+		if (options) {
+			callurl += "&options="+encodeURIComponent(options);
+		}
+		
+		if (stream) {
+			this.pc.addStream(stream);
+		}
+
+                // clear early candidates
+		this.earlyCandidates.length = 0;
+		
+		// create Offer
+		this.pc.createOffer(this.mediaConstraints).then((sessionDescription) => {
+			console.log("Create offer:" + JSON.stringify(sessionDescription));
+			
+			this.pc.setLocalDescription(sessionDescription)
+				.then(() => {
+					fetch(callurl, { method: "POST", body: JSON.stringify(sessionDescription) })
+						.then(this._handleHttpErrors)
+						.then( (response) => (response.json()) )
+						.catch( (error) => this.onError("call " + error ))
+						.then( (response) =>  this.onReceiveCall(response) )
+						.catch( (error) => this.onError("call " + error ))
+				
+				}, (error) => {
+					console.log ("setLocalDescription error:" + JSON.stringify(error)); 
+				});
+			
+		}, (error) => { 
+			alert("Create offer error:" + JSON.stringify(error));
+		});
+
+	} catch (e) {
+		this.disconnect();
+		alert("connect error: " + e);
+	}	    
+}
+
+
+WebRtcStreamer.prototype.getIceCandidate = function() {
+	fetch(this.srvurl + "/api/getIceCandidate?peerid=" + this.pc.peerid)
+		.then(this._handleHttpErrors)
+		.then( (response) => (response.json()) )
+		.then( (response) =>  this.onReceiveCandidate(response))
+		.catch( (error) => this.onError("getIceCandidate " + error ))
+}
+					
+/*
+* create RTCPeerConnection 
+*/
+WebRtcStreamer.prototype.createPeerConnection = function() {
+	console.log("createPeerConnection  config: " + JSON.stringify(this.pcConfig));
+	this.pc = new RTCPeerConnection(this.pcConfig);
+	var pc = this.pc;
+	pc.peerid = Math.random();		
+	
+	pc.onicecandidate = (evt) => this.onIceCandidate(evt);
+	pc.onaddstream    = (evt) => this.onAddStream(evt);
+	pc.oniceconnectionstatechange = (evt) => {  
+		console.log("oniceconnectionstatechange  state: " + pc.iceConnectionState);
+		if (this.videoElement) {
+			if (pc.iceConnectionState === "connected") {
+				this.videoElement.style.opacity = "1.0";
+			}			
+			else if (pc.iceConnectionState === "disconnected") {
+				this.videoElement.style.opacity = "0.25";
+			}			
+			else if ( (pc.iceConnectionState === "failed") || (pc.iceConnectionState === "closed") )  {
+				this.videoElement.style.opacity = "0.5";
+			} else if (pc.iceConnectionState === "new") {
+				this.getIceCandidate();
+			}
+		}
+	}
+	pc.ondatachannel = function(evt) {  
+		console.log("remote datachannel created:"+JSON.stringify(evt));
+		
+		evt.channel.onopen = function () {
+			console.log("remote datachannel open");
+			this.send("remote channel openned");
+		}
+		evt.channel.onmessage = function (event) {
+			console.log("remote datachannel recv:"+JSON.stringify(event.data));
+		}
+	}
+	pc.onicegatheringstatechange = function() {
+		if (pc.iceGatheringState === "complete") {
+			const recvs = pc.getReceivers();
+		
+			recvs.forEach((recv) => {
+			  if (recv.track && recv.track.kind === "video") {
+				console.log("codecs:" + JSON.stringify(recv.getParameters().codecs))
+			  }
+			});
+		  }
+	}
+
+	try {
+		var dataChannel = pc.createDataChannel("ClientDataChannel");
+		dataChannel.onopen = function() {
+			console.log("local datachannel open");
+			this.send("local channel openned");
+		}
+		dataChannel.onmessage = function(evt) {
+			console.log("local datachannel recv:"+JSON.stringify(evt.data));
+		}
+	} catch (e) {
+		console.log("Cannor create datachannel error: " + e);
+	}	
+	
+	console.log("Created RTCPeerConnnection with config: " + JSON.stringify(this.pcConfig) );
+	return pc;
+}
+
+
+/*
+* RTCPeerConnection IceCandidate callback
+*/
+WebRtcStreamer.prototype.onIceCandidate = function (event) {
+	if (event.candidate) {
+		if (this.pc.currentRemoteDescription)  {
+			this.addIceCandidate(this.pc.peerid, event.candidate);					
+		} else {
+			this.earlyCandidates.push(event.candidate);
+		}
+	} 
+	else {
+		console.log("End of candidates.");
+	}
+}
+
+
+WebRtcStreamer.prototype.addIceCandidate = function(peerid, candidate) {
+	fetch(this.srvurl + "/api/addIceCandidate?peerid="+peerid, { method: "POST", body: JSON.stringify(candidate) })
+		.then(this._handleHttpErrors)
+		.then( (response) => (response.json()) )
+		.then( (response) =>  {console.log("addIceCandidate ok:" + response)})
+		.catch( (error) => this.onError("addIceCandidate " + error ))
+}
+				
+/*
+* RTCPeerConnection AddTrack callback
+*/
+WebRtcStreamer.prototype.onAddStream = function(event) {
+	console.log("Remote track added:" +  JSON.stringify(event));
+	
+	this.videoElement.srcObject = event.stream;
+	var promise = this.videoElement.play();
+	if (promise !== undefined) {
+	  promise.catch((error) => {
+		console.warn("error:"+error);
+		this.videoElement.setAttribute("controls", true);
+	  });
+	}
+}
+		
+/*
+* AJAX /call callback
+*/
+WebRtcStreamer.prototype.onReceiveCall = function(dataJson) {
+
+	console.log("offer: " + JSON.stringify(dataJson));
+	var descr = new RTCSessionDescription(dataJson);
+	this.pc.setRemoteDescription(descr).then(() =>  { 
+			console.log ("setRemoteDescription ok");
+			while (this.earlyCandidates.length) {
+				var candidate = this.earlyCandidates.shift();
+				this.addIceCandidate(this.pc.peerid, candidate);				
+			}
+		
+			this.getIceCandidate()
+		}
+		, (error) => { 
+			console.log ("setRemoteDescription error:" + JSON.stringify(error)); 
+		});
+}	
+
+/*
+* AJAX /getIceCandidate callback
+*/
+WebRtcStreamer.prototype.onReceiveCandidate = function(dataJson) {
+	console.log("candidate: " + JSON.stringify(dataJson));
+	if (dataJson) {
+		for (var i=0; i<dataJson.length; i++) {
+			var candidate = new RTCIceCandidate(dataJson[i]);
+			
+			console.log("Adding ICE candidate :" + JSON.stringify(candidate) );
+			this.pc.addIceCandidate(candidate).then( () =>      { console.log ("addIceCandidate OK"); }
+				, (error) => { console.log ("addIceCandidate error:" + JSON.stringify(error)); } );
+		}
+		this.pc.addIceCandidate();
+	}
+}
+
+
+/*
+* AJAX callback for Error
+*/
+WebRtcStreamer.prototype.onError = function(status) {
+	console.log("onError:" + status);
+}
+
+return WebRtcStreamer;
+})();
+
+if (typeof window !== 'undefined' && typeof window.document !== 'undefined') {
+	window.WebRtcStreamer = WebRtcStreamer;
+}
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+	module.exports = WebRtcStreamer;
+}

public/unityWeb/TemplateData/style.css

@@ -1,8 +1,8 @@
 body { padding: 0; margin: 0 }
 #unity-container { position: absolute }
-#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
+#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%);height: 100%; width: 100%; overflow: hidden;}
 #unity-container.unity-mobile { width: 100%; height: 100% }
-#unity-canvas { background: #231F20 }
+#unity-canvas { background: #231F20;width: 100% !important; height: 100% !important;cursor: default; }
 .unity-mobile #unity-canvas { width: 100%; height: 100% }
 #unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
 #unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center }

serve/index.js

@@ -0,0 +1,6 @@
+const RTSP2web = require('rtsp2web')
+//服务端的端口号，端口号可以自定义
+const port = 9999
+new RTSP2web({
+	port
+})

serve/jiaoben.bat

@@ -0,0 +1 @@
+node index.js

src/App.vue

@@ -32,7 +32,7 @@
 <script>
 import MinxinItem from "./mixins"
 import axios from 'axios'
-import {getWather,Weather} from "./api/index.js";
+import {getWather,Weather,getToken} from "./api/index.js";
 export default {
   name: 'home',
   mixins:[MinxinItem],
@@ -55,6 +55,17 @@ export default {
     this.handleWather()
     let week = new Date(this.$moment().format("YYYY-MM-DD")).getDay()
    this.week = this.weekList[week]
+  //  let params = new URLSearchParams()
+  let params = {
+    appKey:'symnzwxdfu1ul8raqrykgbld7zonktga',
+    appSecret:'a3tdb6nxfciekxcgcl94ljvtmw2lsafx'
+  }
+  //  params.append('appKey','symnzwxdfu1ul8raqrykgbld7zonktga')
+  //  params.append('appSecret','a3tdb6nxfciekxcgcl94ljvtmw2lsafx')
+   getToken(params).then((res)=>{
+     localStorage.setItem('token',res.data.data.token)
+    //  console.log(localStorage.getItem('token'),'token');
+   })
   },
   
   methods:{

src/api/index.js

@@ -1,57 +1,57 @@
 import axios from 'axios'
 // if (process.env.NODE_ENV === 'development') {
-//     axios.defaults.baseURL = '/api'
+//     axios.defaults.baseURL = '/app'
 // } else if (process.env.NODE_ENV === 'production') {
-//     axios.defaults.baseURL = '/api'
+//     axios.defaults.baseURL = '/app'
 // }
 //设置请求头参数 common 为设置所有的接口  post为设置post请求的接口
 // axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('access_token')}`;
 
 // 电力概况
 export const getCompanyInfo = (params) => {
-    return axios.get('api/Handler/Company.ashx', {
+    return axios.get('app/Handler/Company.ashx', {
         params
     })
 };
 // 路线查询  下拉
 export const getLine = (params) => {
-    return axios.get('api/Handler/Line.ashx', {
+    return axios.get('app/Handler/Line.ashx', {
         params
     })
 };
 // 查询设备素材
 export const getDevice = (params) => {
-    return axios.get('api/Handler/Device.ashx', {
+    return axios.get('app/Handler/Device.ashx', {
         params
     })
 };
 //班组故障查询
 export const getBanzugz = (params) => {
-    return axios.get('api/Handler/Banzugz.ashx', {
+    return axios.get('app/Handler/Banzugz.ashx', {
         params
     })
 };
 //查询工单统计
 export const getGdtj = (params) => {
-    return axios.get('api/Handler/gdtj.ashx', {
+    return axios.get('app/Handler/gdtj.ashx', {
         params
     })
 };
 //查询单位本周故障
 export const getDwbzgz = (params) => {
-    return axios.get('api/Handler/Dwbzgz.ashx', {
+    return axios.get('app/Handler/Dwbzgz.ashx', {
         params
     })
 };
 //查询供电所供电质量情况
 export const getGdsgdzl = (params) => {
-    return axios.get('api/Handler/Gdsgdzl.ashx', {
+    return axios.get('app/Handler/Gdsgdzl.ashx', {
         params
     })
 };
 //查询配变停运情况
 export const getPbtyqk = (params) => {
-    return axios.get('api/Handler/Pbtyqk.ashx', {
+    return axios.get('app/Handler/Pbtyqk.ashx', {
         params
     })
 };
@@ -63,13 +63,38 @@ export const getPbtyqk = (params) => {
 // };
 //查询天气
 // export const Weather = (params) => {
-//     return axios.get('api/Handler/Weather.ashx', {
+//     return axios.get('app/Handler/Weather.ashx', {
 //         params
 //     })
 // };
 //查询天气1
 export const Weather = (params) => {
-    return axios.get('api/Handler/Data.ashx', {
+    return axios.get('app/Handler/Data.ashx', {
         params
     })
 };
+//获取token
+export const getToken = (data) => {
+    return axios.post('aps/api/v1/token'+'?appKey='+data.appKey+'&appSecret='+data.appSecret,data
+        ,{headers: { 'Content-Type': 'application/x-www-form-urlencoded' }})
+};
+//获取单个网柜信息
+export const getCabinetInfo = (data) => {
+    return axios.post('aps/api/v1/cabinetInfo'+'?sn='+data.sn+'&token='+data.token,data
+        ,{headers: { 'Content-Type': 'application/x-www-form-urlencoded' }})
+};
+//获取网柜列表
+export const getCabinetList = (data) => {
+    return axios.post('aps/api/v1/cabinetList'+'?sn='+data.pageSize+'&token='+data.token,data
+        ,{headers: { 'Content-Type': 'application/x-www-form-urlencoded' }})
+};
+//获取单个网柜数据
+export const getCabinetData = (data) => {
+    return axios.post('aps/api/v1/cabinetData'+'?sn='+data.sn+'&token='+data.token,data
+        ,{headers: { 'Content-Type': 'application/x-www-form-urlencoded' }})
+};
+//获取单个网柜视频列表
+export const getCabinetCameraList = (data) => {
+    return axios.post('aps/api/v1/cabinetCameraList'+'?sn='+data.sn+'&token='+data.token,data
+        ,{headers: { 'Content-Type': 'application/x-www-form-urlencoded' }})
+};

src/main.js

@@ -30,7 +30,6 @@ Vue.mixin(Mixin)
 
 Vue.config.productionTip = false
 
-
 new Vue({
   router,
   store,

src/views/index.vue

@@ -3,7 +3,8 @@
     <div class="left">
       <div class="one" style="height: 405px">
         <div class="cartitle">
-          <div class="titleFont">盐都区供电公司概况</div></div>
+          <div class="titleFont">盐都区供电公司概况</div>
+        </div>
         <div class="content">
           <div class="line">
             <div class="total">
@@ -11,13 +12,22 @@
                 <img src="@/assets/images/rouer.png" alt="" />
               </div>
               <div class="num">
-                <span style="font-size: 45px; font-weight: 600; 
+                <span
+                  style="
+                    font-size: 45px;
+                    font-weight: 600;
                     color: transparent;
                     -webkit-background-clip: text;
                     background-clip: text;
-                background-image: linear-gradient(to bottom, rgb(189,255,231), rgb(86,244,254));"
+                    background-image: linear-gradient(
-                >{{CompanyInfo.pdxl}}</span>
+                      to bottom,
-                <span style="font-size: 18px;">配电路线</span>
+                      rgb(189, 255, 231),
+                      rgb(86, 244, 254)
+                    );
+                  "
+                  >{{ CompanyInfo.pdxl }}</span
+                >
+                <span style="font-size: 18px">配电路线</span>
               </div>
             </div>
             <div class="info">
@@ -45,12 +55,21 @@
                 <img src="@/assets/images/routerLong.png" alt="" />
               </div>
               <div class="num">
-                <span style="font-size: 45px; font-weight: 600;
+                <span
+                  style="
+                    font-size: 45px;
+                    font-weight: 600;
                     color: transparent;
                     -webkit-background-clip: text;
                     background-clip: text;
-                background-image: linear-gradient(to bottom, rgb(189,255,231), rgb(86,244,254));
+                    background-image: linear-gradient(
-                ">{{CompanyInfo.xlcd}}</span>
+                      to bottom,
+                      rgb(189, 255, 231),
+                      rgb(86, 244, 254)
+                    );
+                  "
+                  >{{ CompanyInfo.xlcd }}</span
+                >
                 <span style="font-size: 18px">路线长度</span>
               </div>
             </div>
@@ -77,28 +96,42 @@
       </div>
       <div class="two" style="height: 570px">
         <div class="cartitle">
-          <div class="titleFont">
+          <div class="titleFont">全市本周配网故障次数</div>
-            全市本周配网故障次数
-          </div>
         </div>
         <div class="table user_skills">
           <el-table
             :data="tableData"
-            style="width: 100%; height: 100%"
+            height="100%"
+            width="100%"
             :header-cell-style="{ 'text-align': 'center' }"
             :cell-style="{ 'text-align': 'center' }"
-            
+            ref="tableBox"
           >
             <el-table-column label="" align="center" width="20">
               <template slot-scope="scop">
                 {{ scop.$index + 1 }}
               </template>
             </el-table-column>
-            <el-table-column prop="bz" label="班组" width="80" :show-overflow-tooltip="true">
+            <el-table-column
+              prop="bz"
+              label="班组"
+              width="80"
+              :show-overflow-tooltip="true"
+            >
             </el-table-column>
-            <el-table-column prop="gzxl" label="故障路线" width="80" :show-overflow-tooltip="true">
+            <el-table-column
+              prop="gzxl"
+              label="故障路线"
+              width="80"
+              :show-overflow-tooltip="true"
+            >
             </el-table-column>
-            <el-table-column prop="gzyy" label="故障原因" width="80" :show-overflow-tooltip="true">
+            <el-table-column
+              prop="gzyy"
+              label="故障原因"
+              width="80"
+              :show-overflow-tooltip="true"
+            >
             </el-table-column>
             <el-table-column prop="chcg" label="重合成功" width="60">
               <template slot-scope="scope">
@@ -141,8 +174,11 @@
     </div>
     <div class="middle">
       <div class="one" style="height: 635px; width: 100%">
-          <iframe src="/unityWeb/index.html" style="height: 100%; width: 100%;border: none" 
+        <iframe
-          ref="iframe"></iframe>
+          src="/unityWeb/index.html"
+          style="height: 100%; width: 100%; border: none"
+          ref="iframe"
+        ></iframe>
         <div class="unityBtn">
           <div
             class="btn"
@@ -155,41 +191,56 @@
           </div>
         </div>
         <div class="unityIcon">
-          <div class="unityIconGround" v-for="(item,index) in iconGround" :key="index">
+          <div
+            class="unityIconGround"
+            v-for="(item, index) in iconGround"
+            :key="index"
+          >
             <img :src="item.icon" />
             <div style="color: #ffffff">{{ item.name }}</div>
           </div>
         </div>
         <div class="unityEnlargeBtn">
-          <div class="content" v-for="(item,index) in btnEnlarge" :key="index" @click="enlargeBtn(index)">
+          <div
+            class="content"
+            v-for="(item, index) in btnEnlarge"
+            :key="index"
+            @click="enlargeBtn(index)"
+          >
             <img :src="item.icon" style="margin: 7px" />
           </div>
         </div>
         <div class="unitySelect">
           <div class="unitySuosou">
-            <img src="../assets/images/sousuo.png" style="margin-top: 16px;"/>
+            <img src="../assets/images/sousuo.png" style="margin-top: 16px" />
           </div>
           <el-select v-model="value" clearable placeholder="请选择线路">
             <el-option
               v-for="(item, index) in options"
               :key="index"
               :label="item.label"
-              :value="item.value">
+              :value="item.value"
+            >
             </el-option>
           </el-select>
         </div>
       </div>
       <div class="detailed">
-        <div class="two" style="height: 350px; width: 780px;display: flex;flex-direction: column;align-items: center;">
+        <div
+          class="two"
+          style="
+            height: 350px;
+            width: 780px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+          "
+        >
           <div class="cartitle">
-            <div class="titleFont">
+            <div class="titleFont">本周路线故障跳闸明细</div>
-            本周路线故障跳闸明细
-            </div>
           </div>
           <div class="detailedOneList">
-          <div>
+            <div>单位</div>
-            单位
-          </div>
             <!-- <div>
             工区
           </div>
@@ -225,8 +276,7 @@
         </div>
         <div class="three" style="height: 350px; width: 780px">
           <div class="cartitle">
-            <div class="titleFont">
+            <div class="titleFont">本年度路线故障调查明细</div>
-            本年度路线故障调查明细</div>
           </div>
           <div id="detailedFour"></div>
         </div>
@@ -235,38 +285,51 @@
     <div class="right">
       <div class="one" style="height: 310px">
         <div class="cartitle">
-          <div  style="width: 82%;display: flex;justify-content: space-between;align-items: center;">
+          <div
-            <div class="titleFont">
+            style="
-            盐都配变停运管理情况
+              width: 82%;
-            </div>
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+            "
+          >
+            <div class="titleFont">盐都配变停运管理情况</div>
             <div class="dateSelect">
-            <div style="text-indent: 15px;" @click="handleDate(index)" :class="addColor(index)" v-for="(item,index) in dateList" :key="index">
+              <div
+                style="text-indent: 15px"
+                @click="handleDate(index)"
+                :class="addColor(index)"
+                v-for="(item, index) in dateList"
+                :key="index"
+              >
                 {{ item }}
               </div>
             </div>
           </div>
         </div>
         <div class="top">
-          <div class="topContent" v-for="(item,index) in topContent" :key="index">
+          <div
+            class="topContent"
+            v-for="(item, index) in topContent"
+            :key="index"
+          >
             <div style="color: #ffffff">{{ item.name }}</div>
-            <div style="color:rgb(86,254,226);font-size:22px">{{item.count}}</div>
+            <div style="color: rgb(86, 254, 226); font-size: 22px">
+              {{ item.count }}
+            </div>
           </div>
         </div>
         <div style="height: 90%" id="detailedFive"></div>
       </div>
       <div class="two" style="height: 340px">
         <div class="cartitle">
-          <div class="titleFont">
+          <div class="titleFont">盐都供电质量统计</div>
-          盐都供电质量统计
-          </div>
         </div>
         <div id="detailedTwo"></div>
       </div>
       <div class="three" style="height: 310px">
         <div class="cartitle">
-          <div class="titleFont">
+          <div class="titleFont">工单统计</div>
-          工单统计
-          </div>
         </div>
         <div id="detailedThree"></div>
       </div>
@@ -310,22 +373,19 @@
         </div>
       </div>
     </div>
-    <!-- <div style="height:20px;width:20px" class="icon">
+    <!-- <div style="height:40px;width:40px" class="suoxiao">
-        <img src="../assets/images/btnFangDa.png"/>
+        <img src="../assets/images/btnFangDa.png" style="height:40px;width:40px"/>
       </div> -->
     <div class="componentShow" v-if="modelOthers">
       <keep-alive>
-        <component
+        <component :is="componentShow" :ringMainUnit="device"></component>
-          :is="componentShow"
-          :ringMainUnit="device"
-        ></component>
       </keep-alive>
     </div>
   </div>
 </template>
 
 <script>
-import { getCompanyInfo,getLine,getBanzugz,getGdtj,getDwbzgz,getGdsgdzl,getPbtyqk} from "../api/index.js";
+import { getCompanyInfo,getLine,getBanzugz,getGdtj,getDwbzgz,getGdsgdzl,getPbtyqk,getCabinetInfo,getCabinetList} from "../api/index.js";
 import ringMainUnit from  "./HomePop/ringMainUnit.vue"
 export default {
   name: "home",
@@ -349,7 +409,7 @@ export default {
       componentShow: "",
       CompanyInfo: {},
       tableData: [],
-      btnArr: ["总览", "环网柜", "分支箱", "箱变", "开闭所", "热力图"],
+      btnArr: ["总览", "环网柜", "分支箱", "箱变", "开闭所"],
       btnActive: 0,
       iconGround:[
         {
@@ -397,10 +457,21 @@ export default {
             count:''
           },
         ],
-        device:''
+        device:'',
+        tableData: [],
+			tableKey: +new Date(),
+			scrollTop: 0,//table距离顶部距离
+      option:null,
+      myChartBin:null,
     };
   },
   mounted() {
+    this.beginShowing()
+    // 监听浏览器窗口大小变化
+    window.onresize = () => {
+      clearInterval(this.myTimer)
+      this.beginShowing()
+    }
     // 盐都区供电公司概况
     getCompanyInfo().then((res) => {
       this.CompanyInfo = res.data.data;
@@ -429,7 +500,13 @@ export default {
     //工单统计
     getGdtj().then((res)=>{
       let dataList = res.data.data
+      // this.detailedThree(dataList);
+      this.$nextTick(() => {
             this.detailedThree(dataList);
+            setInterval(() => {
+                this.doing();
+            }, 200);
+        });
     })
     //年度查询班组
     getBanzugz(
@@ -489,8 +566,44 @@ export default {
        }
       })
   },
-  
+   beforeDestroy() {
+        this.dataDestroy();// 页面摧毁前，关闭定时器
+    },
   methods: {
+    beginShowing() {
+      this.$nextTick(function () {
+        // 文档显示区域的高度 - 表格距离浏览器顶部的距离 - 表格距离浏览器底部的距离
+        if(this.$refs.tableBox && this.$refs.tableBox.$el.offsetTop) {
+          this.tableHeight = window.innerHeight - this.$refs.tableBox.$el.offsetTop - 300;
+          this.$refs.tableBox.doLayout()
+          this.roll()
+        }
+      })
+    },
+ roll () {
+      // 拿到表格挂载后的真实DOM
+      const table = this.$refs.tableBox
+      // 拿到表格中承载数据的div元素
+      const bodyWrapper = table.bodyWrapper
+      // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(这里配置为每100毫秒移动1像素)
+      this.myTimer = setInterval(() => {
+        // 元素自增距离顶部1像素
+        bodyWrapper.scrollTop++
+        // 判断元素是否滚动到底部(可视高度+距离顶部=元素内容的整个高度包括溢出的不可见内容)
+        if (bodyWrapper.clientHeight + bodyWrapper.scrollTop === bodyWrapper.scrollHeight) {
+          // 重置table距离顶部距离
+          bodyWrapper.scrollTop = 0
+        }
+      }, 100)
+    },
+  // 鼠标进入表格
+    mouseover() {
+      clearInterval(this.myTimer)
+    },
+    // 鼠标离开表格
+    mouseout() {
+      this.roll()
+    },
     //调用unity方法
     handleUnity(index,item) {
       this.btnActive = index;
@@ -504,8 +617,10 @@ export default {
           line_code:value
         }
       ).then((res)=>{
-        if (res.data.data != 0) {
+        if (res.data.data != 0 && res.data.data != null) {
           this.$refs.iframe.contentWindow.handleChangeLine(res.data.data.line_name)
+        }else if (res.data.data == null) {
+          this.$refs.iframe.contentWindow.handleChangeLine('')
         }
       })
     },
@@ -638,6 +753,7 @@ export default {
       };
 
       myChart.setOption(option);
+      
     },
      detailedTwo(dataGdzl){
        let gdsList = [];
@@ -653,6 +769,8 @@ export default {
        let that = this;
       var myChart = this.$echarts.init(document.getElementById("detailedTwo"));
       var option = {
+        //  animation: true,
+        // animationDuration: 20000,
         tooltip : {
         trigger: 'axis',
             axisPointer: {
@@ -895,8 +1013,8 @@ export default {
           value: dataList.mspc,
           name: "民事赔偿",
         },]
-      var myChart = this.$echarts.init(document.getElementById("detailedThree"));
+      this.myChartBin = this.$echarts.init(document.getElementById("detailedThree"));
-    var  option = {
+     this.option = {
       borderColor:'none',
      
       tooltip: {
@@ -949,9 +1067,10 @@ export default {
       series: [
         
         {
-          name: "整体分类",
+          name: "",
           type: "pie",
           radius: [0, "40%"],
+          startAngle:360, //默认角度
           label: {
             position: "inner",
             show:false
@@ -971,10 +1090,10 @@ export default {
       data: dataList,
     },
     {
-      name: "招标方式",
+      name: "运检类",
       type: "pie",
       radius: ["50%", "55%"],
-
+      startAngle:360,
       itemStyle: {
         normal: {
           color: function (params) {
@@ -1007,10 +1126,16 @@ export default {
         },
        
       ],
+      animation:false,
     },
      ],
    };
-      myChart.setOption(option);
+      this.myChartBin.setOption(this.option);
+    },
+    doing() {
+            this.option.series[0].startAngle = this.option.series[0].startAngle - 5;
+            this.option.series[1].startAngle = this.option.series[1].startAngle - 5;
+            this.myChartBin.setOption(this.option);
         },
     detailedFour(dataList){
       let yearBzData = []
@@ -1262,10 +1387,36 @@ export default {
         dataGz.push(dataPbty[i].gztytc);
         dataPb.push(dataPbty[i].pbsl);
         dataCf.push(dataPbty[i].cftytc);
+      }
+     var datacoords = [];
+     var datacoords1 = [];
+ for (var i = 0; i < dataListx.length; i++) {
+    datacoords.push([
+      {
+        coord: [i, dataGz[i]],
+      },
+      {
+        coord: [i + 1, dataGz[i + 1]],
+      },
+    ]);
+  }
+  for (var i = 0; i < dataListx.length; i++) {
+    datacoords1.push([
+      {
+        coord: [i, dataCf[i]],
+      },
+      {
+        coord: [i + 1, dataCf[i + 1]],
+      },
+    ]);
   }
       let that = this;
      var myChart = this.$echarts.init(document.getElementById("detailedFive"));
     var option = {
+      animation: true, //控制动画示否开启
+   animationDuration: 2000,
+   animationEasing: "bounceOut", //缓动动画
+   animationThreshold: 8, //动画元素的阈值
   grid: {
     top: "15%",
     bottom: "35%", //也可设置left和right设置距离来控制图表的大小
@@ -1386,13 +1537,15 @@ export default {
     },
   ],
   series: [
+     
     {
       name: "故障停运",
       type: "line",
       yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
       smooth: false, //平滑曲线显示
       showAllSymbol: true, //显示所有图形。
-     
+     shadowOffsetX: 0, // 折线的X偏移
+         shadowOffsetY: 10, // 折线的Y偏移
       symbol: "circle", //标记的图形为实心圆
       symbolSize: 1, //标记的大小
       itemStyle: {
@@ -1406,13 +1559,44 @@ export default {
       //   show:false,
       //   color: "rgba(5,140,255, 0.2)",
       // },
+      emphasis: {
+         focus: "series",
+       },
       data: dataGz,
     },
+    {
+       showSymbol: false,
+       name: "故障停运",
+       type: "lines",
+        yAxisIndex: 1, 
+       polyline: true,
+       smooth: false,
+       coordinateSystem: "cartesian2d",
+       zlevel: 1,
+       effect: {
+         show: true,
+         smooth: false,
+         period: 6,
+         trailLenth:0.1,
+         symbolSize: 6,
+         symbol:'circle'
+       },
+       lineStyle: {
+         color: "#fff",
+         width: 1,
+         opacity: 0,
+         curveness: 0,
+         cap: "round",
+       },
+       data: datacoords,
+     },
     {
       name: "重复停运",
       type: "line",
       yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
       smooth: false, //平滑曲线显示
+      shadowOffsetX: 0, // 折线的X偏移
+         shadowOffsetY: 10, // 折线的Y偏移
       showAllSymbol: true, //显示所有图形。
       symbol: "circle", //标记的图形为实心圆
       symbolSize: 1, //标记的大小
@@ -1430,6 +1614,32 @@ export default {
       //   color: "rgba(5,140,255, 0.2)",
       // },
       data: dataCf,
+    },
+      {
+       showSymbol: false,
+       name: "重复停运",
+       type: "lines",
+        yAxisIndex: 1, 
+       polyline: true,
+       smooth: false,
+       coordinateSystem: "cartesian2d",
+       zlevel: 1,
+       effect: {
+         show: true,
+         smooth: false,
+         period: 6,
+         trailLenth:0.1,
+         symbolSize: 6,
+         symbol:'circle'
+       },
+       lineStyle: {
+         color: "#fff",
+         width: 1,
+         opacity: 0,
+         curveness: 0,
+         cap: "round",
+       },
+       data: datacoords1,
      },
     {
       name: "配变数量",
@@ -1528,14 +1738,11 @@ export default {
   watch: {
        //监听内容
        value(newVal,oldVal) {
-        console.log(newVal,oldVal,"value发生了变化");
         if (newVal != oldVal && newVal != '') {
           this.selectLine(newVal)
         }else if(newVal == ''){
-          console.log(this.value,"value");
+          this.selectLine('')
           this.value = ''
-          let item = '总览'
-          this.handleUnity(0,item)
         }
       }
     }
@@ -1582,12 +1789,15 @@ export default {
   /deep/ .el-table th.el-table__cell > .cell {
     color: rgb(86, 254, 226);
   }
-  &::before {
+  // &::before {
-    //去除底部白线
+  //   //去除底部白线
-    left: 0;
+  //   left: 0;
-    bottom: 0;
+  //   bottom: 0;
-    width: 100%;
+  //   width: 100%;
-    height: 0px;
+  //   height: 0px;
+  // }
+    .el-table::before{
+    background-color: transparent;
   }
 }
 
@@ -1726,7 +1936,7 @@ export default {
           justify-content: space-between;
           align-items: center;
         }
-      };
+      }
       .unityEnlargeBtn {
         width: 100px;
         display: flex;
@@ -1740,7 +1950,7 @@ export default {
           background: url("../assets/images/btnkuang.png") no-repeat !important;
           background-size: 100% 100% !important;
         }
-      };
+      }
       .unitySelect {
         position: absolute;
         left: 40px;
@@ -1754,8 +1964,7 @@ export default {
           background: url("../assets/images/sousuoKuang.png") no-repeat;
           background-size: 100% 100%;
         }
-        
+      }
-       };
     }
 
     .two {
@@ -1799,7 +2008,7 @@ export default {
       height: calc(100% - 0px) !important;
       z-index: 2;
       margin-top: -3%;
-    };
+    }
     #detailedFour {
       width: 100%;
       height: calc(100% - 52px);
@@ -1825,9 +2034,8 @@ export default {
         line-height: 52px;
         text-align: left;
         text-indent: 26px;
-        
       }
-    };
+    }
     .one {
       .top {
         width: 100%;
@@ -1849,21 +2057,25 @@ export default {
     #detailedThree {
       width: 100%;
       height: calc(100% - 52px);
-    };
+    }
     #detailedTwo {
       width: 100%;
       height: calc(100% - 52px);
-    };
+    }
     #detailedFive {
       width: 100%;
       height: calc(100% - 52px);
-    };
+    }
-  };
+  }
   .titleFont {
     color: transparent;
     -webkit-background-clip: text;
     background-clip: text;
-      background-image: linear-gradient(to bottom, rgb(255,255,255), rgb(123,247,245))
+    background-image: linear-gradient(
+      to bottom,
+      rgb(255, 255, 255),
+      rgb(123, 247, 245)
+    );
   }
   //弹窗样式
   .componentShow {
@@ -1886,7 +2098,7 @@ export default {
     right: 0;
     margin: 0 auto;
     top: 40%;
-    background: url('../assets/images/realTimeAlarmKuang.png') no-repeat;
+    background: url("../assets/images/realTimeAlarmKuang.png") no-repeat;
     background-size: 100% 100%;
     display: flex;
     align-items: center;
@@ -1908,7 +2120,7 @@ export default {
     right: 0;
     margin: 0 auto;
     top: 28%;
-    background: url('../assets/images/baojingxinxiKuang.png') no-repeat;
+    background: url("../assets/images/baojingxinxiKuang.png") no-repeat;
     background-size: 100% 100%;
     display: flex;
     align-items: center;
@@ -1927,7 +2139,11 @@ export default {
         color: transparent;
         -webkit-background-clip: text;
         background-clip: text;
-            background-image: linear-gradient(to bottom, rgb(255,255,255), rgb(86,244,254))
+        background-image: linear-gradient(
+          to bottom,
+          rgb(255, 255, 255),
+          rgb(86, 244, 254)
+        );
       }
     }
     .content {
@@ -1953,7 +2169,7 @@ export default {
             height: 100%;
             display: flex;
             align-items: center;
-      justify-content: space-around
+            justify-content: space-around;
           }
           &.el-table__cell.is-leaf {
             border: none !important;
@@ -1973,10 +2189,10 @@ export default {
           // word-break: break-all;
         }
         /deep/ .el-table th.el-table__cell > .cell {
-    color: #FFFFFF;
+          color: #ffffff;
         }
         /deep/.el-table .el-table__cell {
-    padding: 3px 0
+          padding: 3px 0;
         }
         &::before {
           //去除底部白线
@@ -1992,11 +2208,14 @@ export default {
         ::v-deep .el-table .el-table__body tr.el-table__row td {
           background: rgba(79, 218, 255, 0.1) !important;
         }
-::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td{
+        ::v-deep
+          .el-table--striped
+          .el-table__body
+          tr.el-table__row--striped
+          td {
           background: rgba(79, 218, 255, 0.06) !important;
         }
       }
- 
     }
   }
   .dateSelect {
@@ -2017,7 +2236,7 @@ export default {
     line-height: 26px;
   }
 }
-.icon{
+.suoxiao {
   position: absolute;
   bottom: 0;
   right: 0;
@@ -2033,22 +2252,22 @@ export default {
     border: none;
     padding-left: 58px;
   }
- .el-input__prefix, .el-input__suffix {
+  .el-input__prefix,
+  .el-input__suffix {
     position: absolute;
     top: 0;
-    -webkit-transition: all .3s;
+    -webkit-transition: all 0.3s;
     height: 100%;
     text-align: center;
     margin-right: 17px;
-   
   }
   .el-input__inner::-webkit-input-placeholder {
     color: rgb(78, 230, 207) // 初始化的文字颜色
+;
   }
   .el-input__inner {
     color: rgb(78, 230, 207);
   }
-
 }
 .el-select-dropdown {
   background-color: rgba(14, 30, 46, 0.5) !important;
@@ -2056,7 +2275,8 @@ export default {
   .el-select-dropdown__item {
     color: rgb(78, 230, 207) !important;
   }
-  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
+  .el-select-dropdown__item.hover,
+  .el-select-dropdown__item:hover {
     background-color: rgb(18, 54, 87) !important;
   }
 }

src/views/stationBuilding.vue

@@ -1,13 +1,19 @@
 <template>
   <div class="stationBuilding">
-      <video-player
+    <!-- <video-player
       class="video-player vjs-custom-skin"
       style="heght:100%;width:100%"
       ref="VideoPlayer"
       :playsinline="true"
       :options="playerOptions"
       > 
-      </video-player>
+      </video-player> -->
+    <div class="stationContent">
+      <div class="systemText">
+        <i class="el-icon-loading" style="color: #4bfffd; font-size: 80px"></i>
+        <p style="font-size: 30px;color:#fff">系统正在加载中...</p>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -23,29 +29,29 @@ export default {
         autoplay: false, // 如果true,浏览器准备好时开始回放。
         muted: false, // 默认情况下将会消除任何音频。
         loop: false, // 导致视频一结束就重新开始。
-        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
+        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
-        language: 'zh-CN',
+        language: "zh-CN",
-        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
         fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
         sources: [
           {
-            type: 'video/mp4', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
+            type: "video/mp4", // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
-            src: require('../assets/videos/video.mp4'), // url地址
+            src: require("../assets/videos/video.mp4"), // url地址
-          }
+          },
         ],
-        poster: require('../assets/images/sun.png'), // 你的封面地址
+        poster: require("../assets/images/sun.png"), // 你的封面地址
         // width: document.documentElement.clientWidth, //播放器宽度
-        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
+        notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
         controlBar: {
           timeDivider: true,
           durationDisplay: true,
           remainingTimeDisplay: false,
-          fullscreenToggle: true // 全屏按钮
+          fullscreenToggle: true, // 全屏按钮
-        }
+        },
-      }
+      },
-	}
+    };
-}
+  },
-}
+};
 </script>
 
 <style lang="less" scoped>
@@ -56,6 +62,20 @@ export default {
   background-size: 100% 100%;
   padding: 15px 25px;
   z-index: 100;
+  .stationContent {
+    width: 100%;
+    height: 100%;
+    background: url("../assets/images/zhifu.png") no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .systemText {
+      position: absolute;
+      display: flex;
+      flex-direction: column;
+    }
+  }
 }
-
 </style>

vue.config.js

@@ -14,24 +14,23 @@ module.exports = {
         // host: "0.0.0.0", // 匹配本机IP地址(默认是0.0.0.0)
         // port: 8989, // 开发服务器运行端口号
         proxy: {
-            '/api': { //代理的名字
+            '/app': { //代理的名字
                 // target:'http://111.229.30.246:3111/',
                 target: 'http://172.16.1.254:3111/',  
                 ws: true,
                 changeOrigin: true,
                 pathRewrite:{
-                    '^/api':'',
+                    '^/app':'',
                 }
             },
-            // '/aps': { //代理的名字
+            '/aps': { //代理的名字
-            //     target:'http://www.jcznedu.com:5000/',
+                target:'http://221.231.99.214:99/',
-            //     // target: 'http://172.16.1.254:3111/', 
+                ws: true,
-            //     ws: true,
+                changeOrigin: true,
-            //     changeOrigin: true,
+                pathRewrite:{
-            //     pathRewrite:{
+                    '^/aps':'',
-            //         '^/aps':'',
+                }
-            //     }
+            }
-            // }
         }
     }
 }