648540858
3 years ago
27 changed files with 761 additions and 591 deletions
@ -0,0 +1,139 @@ |
|||
package com.genersoft.iot.vmp.media.zlm; |
|||
|
|||
import com.alibaba.fastjson.JSON; |
|||
import com.alibaba.fastjson.JSONObject; |
|||
import com.genersoft.iot.vmp.media.zlm.dto.MediaServerItem; |
|||
import okhttp3.*; |
|||
import okhttp3.logging.HttpLoggingInterceptor; |
|||
import org.jetbrains.annotations.NotNull; |
|||
import org.slf4j.Logger; |
|||
import org.slf4j.LoggerFactory; |
|||
import org.springframework.stereotype.Component; |
|||
import org.springframework.util.StringUtils; |
|||
|
|||
import java.io.File; |
|||
import java.io.FileOutputStream; |
|||
import java.io.IOException; |
|||
import java.net.ConnectException; |
|||
import java.util.HashMap; |
|||
import java.util.Map; |
|||
import java.util.Objects; |
|||
import java.util.concurrent.TimeUnit; |
|||
|
|||
@Component |
|||
public class AssistRESTfulUtils { |
|||
|
|||
private final static Logger logger = LoggerFactory.getLogger(AssistRESTfulUtils.class); |
|||
|
|||
public interface RequestCallback{ |
|||
void run(JSONObject response); |
|||
} |
|||
|
|||
private OkHttpClient getClient(){ |
|||
OkHttpClient.Builder httpClientBuilder = new OkHttpClient.Builder(); |
|||
if (logger.isDebugEnabled()) { |
|||
HttpLoggingInterceptor logging = new HttpLoggingInterceptor(message -> { |
|||
logger.debug("http请求参数：" + message); |
|||
}); |
|||
logging.setLevel(HttpLoggingInterceptor.Level.BASIC); |
|||
// OkHttp進行添加攔截器loggingInterceptor
|
|||
httpClientBuilder.addInterceptor(logging); |
|||
} |
|||
return httpClientBuilder.build(); |
|||
} |
|||
|
|||
|
|||
public JSONObject sendGet(MediaServerItem mediaServerItem, String api, Map<String, Object> param, RequestCallback callback) { |
|||
OkHttpClient client = getClient(); |
|||
|
|||
if (mediaServerItem == null) { |
|||
return null; |
|||
} |
|||
if (StringUtils.isEmpty(mediaServerItem.getRecordAssistPort())) { |
|||
logger.warn("未启用Assist服务"); |
|||
return null; |
|||
} |
|||
StringBuffer stringBuffer = new StringBuffer(); |
|||
stringBuffer.append(String.format("http://%s:%s/%s", mediaServerItem.getIp(), mediaServerItem.getRecordAssistPort(), api)); |
|||
JSONObject responseJSON = null; |
|||
|
|||
if (param != null && param.keySet().size() > 0) { |
|||
stringBuffer.append("?"); |
|||
int index = 1; |
|||
for (String key : param.keySet()){ |
|||
if (param.get(key) != null) { |
|||
stringBuffer.append(key + "=" + param.get(key)); |
|||
if (index < param.size()) { |
|||
stringBuffer.append("&"); |
|||
} |
|||
} |
|||
index++; |
|||
} |
|||
} |
|||
|
|||
String url = stringBuffer.toString(); |
|||
Request request = new Request.Builder() |
|||
.get() |
|||
.url(url) |
|||
.build(); |
|||
if (callback == null) { |
|||
try { |
|||
Response response = client.newCall(request).execute(); |
|||
if (response.isSuccessful()) { |
|||
ResponseBody responseBody = response.body(); |
|||
if (responseBody != null) { |
|||
String responseStr = responseBody.string(); |
|||
responseJSON = JSON.parseObject(responseStr); |
|||
} |
|||
}else { |
|||
response.close(); |
|||
Objects.requireNonNull(response.body()).close(); |
|||
} |
|||
} catch (ConnectException e) { |
|||
logger.error(String.format("连接Assist失败: %s, %s", e.getCause().getMessage(), e.getMessage())); |
|||
logger.info("请检查media配置并确认Assist已启动..."); |
|||
}catch (IOException e) { |
|||
logger.error(String.format("[ %s ]请求失败: %s", url, e.getMessage())); |
|||
} |
|||
}else { |
|||
client.newCall(request).enqueue(new Callback(){ |
|||
|
|||
@Override |
|||
public void onResponse(@NotNull Call call, @NotNull Response response){ |
|||
if (response.isSuccessful()) { |
|||
try { |
|||
String responseStr = Objects.requireNonNull(response.body()).string(); |
|||
callback.run(JSON.parseObject(responseStr)); |
|||
} catch (IOException e) { |
|||
logger.error(String.format("[ %s ]请求失败: %s", url, e.getMessage())); |
|||
} |
|||
|
|||
}else { |
|||
response.close(); |
|||
Objects.requireNonNull(response.body()).close(); |
|||
} |
|||
} |
|||
|
|||
@Override |
|||
public void onFailure(@NotNull Call call, @NotNull IOException e) { |
|||
logger.error(String.format("连接Assist失败: %s, %s", e.getCause().getMessage(), e.getMessage())); |
|||
logger.info("请检查media配置并确认Assist已启动..."); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
|
|||
|
|||
return responseJSON; |
|||
} |
|||
|
|||
|
|||
public JSONObject fileDuration(MediaServerItem mediaServerItem, String app, String stream, RequestCallback callback){ |
|||
Map<String, Object> param = new HashMap<>(); |
|||
param.put("app",app); |
|||
param.put("stream",stream); |
|||
param.put("recordIng",true); |
|||
return sendGet(mediaServerItem, "api/record/file/duration",param, callback); |
|||
} |
|||
|
|||
} |
|||
@ -1,150 +0,0 @@ |
|||
package com.genersoft.iot.vmp.vmanager.gb28181.playback; |
|||
|
|||
import com.genersoft.iot.vmp.common.StreamInfo; |
|||
import com.genersoft.iot.vmp.gb28181.bean.InviteStreamInfo; |
|||
import com.genersoft.iot.vmp.gb28181.transmit.callback.DeferredResultHolder; |
|||
import com.genersoft.iot.vmp.gb28181.transmit.callback.RequestMessage; |
|||
import com.genersoft.iot.vmp.media.zlm.dto.MediaServerItem; |
|||
import com.genersoft.iot.vmp.service.IMediaServerService; |
|||
import com.genersoft.iot.vmp.service.bean.SSRCInfo; |
|||
import com.genersoft.iot.vmp.storager.IRedisCatchStorage; |
|||
import com.genersoft.iot.vmp.service.IPlayService; |
|||
import io.swagger.annotations.Api; |
|||
import io.swagger.annotations.ApiImplicitParam; |
|||
import io.swagger.annotations.ApiImplicitParams; |
|||
import io.swagger.annotations.ApiOperation; |
|||
import org.slf4j.Logger; |
|||
import org.slf4j.LoggerFactory; |
|||
import org.springframework.beans.factory.annotation.Autowired; |
|||
import org.springframework.http.HttpStatus; |
|||
import org.springframework.http.ResponseEntity; |
|||
import org.springframework.web.bind.annotation.CrossOrigin; |
|||
import org.springframework.web.bind.annotation.GetMapping; |
|||
import org.springframework.web.bind.annotation.PathVariable; |
|||
import org.springframework.web.bind.annotation.RequestMapping; |
|||
import org.springframework.web.bind.annotation.RestController; |
|||
|
|||
import com.alibaba.fastjson.JSONObject; |
|||
import com.genersoft.iot.vmp.gb28181.bean.Device; |
|||
import com.genersoft.iot.vmp.gb28181.transmit.cmd.impl.SIPCommander; |
|||
import com.genersoft.iot.vmp.storager.IVideoManagerStorager; |
|||
import org.springframework.web.context.request.async.DeferredResult; |
|||
|
|||
import javax.sip.message.Response; |
|||
import java.util.UUID; |
|||
|
|||
@Api(tags = "历史媒体下载") |
|||
@CrossOrigin |
|||
@RestController |
|||
@RequestMapping("/api/download") |
|||
public class DownloadController { |
|||
|
|||
private final static Logger logger = LoggerFactory.getLogger(DownloadController.class); |
|||
|
|||
@Autowired |
|||
private SIPCommander cmder; |
|||
|
|||
@Autowired |
|||
private IVideoManagerStorager storager; |
|||
|
|||
@Autowired |
|||
private IRedisCatchStorage redisCatchStorage; |
|||
|
|||
// @Autowired
|
|||
// private ZLMRESTfulUtils zlmresTfulUtils;
|
|||
|
|||
@Autowired |
|||
private IPlayService playService; |
|||
|
|||
@Autowired |
|||
private DeferredResultHolder resultHolder; |
|||
|
|||
@Autowired |
|||
private IMediaServerService mediaServerService; |
|||
|
|||
@ApiOperation("开始历史媒体下载") |
|||
@ApiImplicitParams({ |
|||
@ApiImplicitParam(name = "deviceId", value = "设备ID", dataTypeClass = String.class), |
|||
@ApiImplicitParam(name = "channelId", value = "通道ID", dataTypeClass = String.class), |
|||
@ApiImplicitParam(name = "startTime", value = "开始时间", dataTypeClass = String.class), |
|||
@ApiImplicitParam(name = "endTime", value = "结束时间", dataTypeClass = String.class), |
|||
@ApiImplicitParam(name = "downloadSpeed", value = "下载倍速", dataTypeClass = String.class), |
|||
}) |
|||
@GetMapping("/start/{deviceId}/{channelId}") |
|||
public DeferredResult<ResponseEntity<String>> play(@PathVariable String deviceId, @PathVariable String channelId, |
|||
String startTime, String endTime, String downloadSpeed) { |
|||
|
|||
if (logger.isDebugEnabled()) { |
|||
logger.debug(String.format("历史媒体下载 API调用，deviceId：%s，channelId：%s，downloadSpeed：%s", deviceId, channelId, downloadSpeed)); |
|||
} |
|||
String key = DeferredResultHolder.CALLBACK_CMD_DOWNLOAD + deviceId + channelId; |
|||
String uuid = UUID.randomUUID().toString(); |
|||
DeferredResult<ResponseEntity<String>> result = new DeferredResult<ResponseEntity<String>>(30000L); |
|||
// 超时处理
|
|||
result.onTimeout(()->{ |
|||
logger.warn(String.format("设备下载响应超时，deviceId：%s ，channelId：%s", deviceId, channelId)); |
|||
RequestMessage msg = new RequestMessage(); |
|||
msg.setId(uuid); |
|||
msg.setKey(key); |
|||
msg.setData("Timeout"); |
|||
resultHolder.invokeAllResult(msg); |
|||
}); |
|||
if(resultHolder.exist(key, null)) { |
|||
return result; |
|||
} |
|||
resultHolder.put(key, uuid, result); |
|||
Device device = storager.queryVideoDevice(deviceId); |
|||
|
|||
MediaServerItem newMediaServerItem = playService.getNewMediaServerItem(device); |
|||
if (newMediaServerItem == null) { |
|||
logger.warn(String.format("设备下载响应超时，deviceId：%s ，channelId：%s", deviceId, channelId)); |
|||
RequestMessage msg = new RequestMessage(); |
|||
msg.setId(uuid); |
|||
msg.setKey(key); |
|||
msg.setData("Timeout"); |
|||
resultHolder.invokeAllResult(msg); |
|||
return result; |
|||
} |
|||
|
|||
SSRCInfo ssrcInfo = mediaServerService.openRTPServer(newMediaServerItem, null, true); |
|||
|
|||
cmder.downloadStreamCmd(newMediaServerItem, ssrcInfo, device, channelId, startTime, endTime, downloadSpeed, (InviteStreamInfo inviteStreamInfo) -> { |
|||
logger.info("收到订阅消息： " + inviteStreamInfo.getResponse().toJSONString()); |
|||
playService.onPublishHandlerForDownload(inviteStreamInfo, deviceId, channelId, uuid); |
|||
}, event -> { |
|||
RequestMessage msg = new RequestMessage(); |
|||
msg.setId(uuid); |
|||
msg.setKey(key); |
|||
msg.setData(String.format("回放失败， 错误码： %s, %s", event.statusCode, event.msg)); |
|||
resultHolder.invokeAllResult(msg); |
|||
}); |
|||
|
|||
return result; |
|||
} |
|||
|
|||
@ApiOperation("停止历史媒体下载") |
|||
@ApiImplicitParams({ |
|||
@ApiImplicitParam(name = "deviceId", value = "设备ID", dataTypeClass = String.class), |
|||
@ApiImplicitParam(name = "channelId", value = "通道ID", dataTypeClass = String.class), |
|||
@ApiImplicitParam(name = "stream", value = "流ID", dataTypeClass = String.class), |
|||
}) |
|||
@GetMapping("/stop/{deviceId}/{channelId}/{stream}") |
|||
public ResponseEntity<String> playStop(@PathVariable String deviceId, @PathVariable String channelId, @PathVariable String stream) { |
|||
|
|||
cmder.streamByeCmd(deviceId, channelId, stream, null); |
|||
|
|||
if (logger.isDebugEnabled()) { |
|||
logger.debug(String.format("设备历史媒体下载停止 API调用，deviceId/channelId：%s_%s", deviceId, channelId)); |
|||
} |
|||
|
|||
if (deviceId != null && channelId != null) { |
|||
JSONObject json = new JSONObject(); |
|||
json.put("deviceId", deviceId); |
|||
json.put("channelId", channelId); |
|||
return new ResponseEntity<String>(json.toString(), HttpStatus.OK); |
|||
} else { |
|||
logger.warn("设备历史媒体下载停止API调用失败！"); |
|||
return new ResponseEntity<String>(HttpStatus.INTERNAL_SERVER_ERROR); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,195 @@ |
|||
<template> |
|||
<div id="recordDownload" > |
|||
<el-dialog :title="title" v-if="showDialog" width="45rem" :append-to-body="true" :close-on-click-modal="false" :visible.sync="showDialog" :destroy-on-close="true" @close="close()" center> |
|||
<el-row> |
|||
<el-col :span="18" style="padding-top: 7px;"> |
|||
<el-progress :percentage="percentage"></el-progress> |
|||
</el-col> |
|||
<el-col :span="6" > |
|||
<!-- <el-dropdown size="mini" title="播放倍速" style="margin-left: 1px;" @command="gbScale">--> |
|||
<!-- <el-button-group>--> |
|||
<!-- <el-button size="mini" style="width: 100%">--> |
|||
<!-- {{scale}}倍速 <i class="el-icon-arrow-down el-icon--right"></i>--> |
|||
<!-- </el-button>--> |
|||
<!-- </el-button-group>--> |
|||
<!-- <el-dropdown-menu slot="dropdown">--> |
|||
<!-- <el-dropdown-item command="1">1倍速</el-dropdown-item>--> |
|||
<!-- <el-dropdown-item command="2">2倍速</el-dropdown-item>--> |
|||
<!-- <el-dropdown-item command="4">4倍速</el-dropdown-item>--> |
|||
<!-- </el-dropdown-menu>--> |
|||
<!-- </el-dropdown>--> |
|||
<el-button icon="el-icon-download" v-if="percentage < 100" size="mini" title="点击下载可将以缓存部分下载到本地" @click="download()">停止缓存并下载</el-button> |
|||
</el-col> |
|||
</el-row> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
|
|||
<script> |
|||
|
|||
import moment from "moment"; |
|||
|
|||
export default { |
|||
name: 'recordDownload', |
|||
created() { |
|||
|
|||
|
|||
}, |
|||
data() { |
|||
return { |
|||
title: "四倍速下载中...", |
|||
deviceId: "", |
|||
channelId: "", |
|||
app: "", |
|||
stream: "", |
|||
mediaServerId: "", |
|||
showDialog: false, |
|||
scale: 1, |
|||
percentage: 0.00, |
|||
streamInfo: null, |
|||
taskId: null, |
|||
getProgressRun: false, |
|||
getProgressForFileRun: false, |
|||
|
|||
}; |
|||
}, |
|||
methods: { |
|||
openDialog: function (deviceId, channelId, app, stream, mediaServerId) { |
|||
this.deviceId = deviceId; |
|||
this.channelId = channelId; |
|||
this.app = app; |
|||
this.stream = stream; |
|||
this.mediaServerId = mediaServerId; |
|||
this.showDialog = true; |
|||
this.getProgressRun = true; |
|||
this.percentage = 0.0; |
|||
this.getProgressTimer() |
|||
}, |
|||
getProgressTimer(){ |
|||
if (!this.getProgressRun) { |
|||
return; |
|||
} |
|||
if (this.percentage == 100 ) { |
|||
this.getFileDownload(); |
|||
return; |
|||
} |
|||
setTimeout( ()=>{ |
|||
if (!this.showDialog) return; |
|||
this.getProgress(this.getProgressTimer()) |
|||
}, 5000) |
|||
}, |
|||
getProgress: function (callback){ |
|||
this.$axios({ |
|||
method: 'get', |
|||
url: `/api/gb_record/download/progress/${this.deviceId}/${this.channelId}/${this.stream}` |
|||
}).then((res)=> { |
|||
console.log(res) |
|||
console.log(res.data.progress) |
|||
this.streamInfo = res.data; |
|||
if (parseFloat(res.data.progress) == 1) { |
|||
this.percentage = 100; |
|||
}else { |
|||
this.percentage = (res.data.progress*100).toFixed(1); |
|||
} |
|||
if (callback)callback(); |
|||
}).catch((e) =>{ |
|||
|
|||
}); |
|||
}, |
|||
close: function (){ |
|||
if (this.streamInfo.progress < 100) { |
|||
this.stopDownloadRecord(); |
|||
} |
|||
this.showDialog=false; |
|||
this.getProgressRun = false; |
|||
this.getProgressForFileRun = false; |
|||
}, |
|||
gbScale: function (scale){ |
|||
this.scale = scale; |
|||
}, |
|||
download: function (){ |
|||
this.getProgressRun = false; |
|||
if (this.streamInfo != null ) { |
|||
if (this.streamInfo.progress < 1) { |
|||
// 发送停止缓存 |
|||
this.stopDownloadRecord((res)=>{ |
|||
this.getFileDownload() |
|||
}) |
|||
}else { |
|||
this.getFileDownload() |
|||
} |
|||
} |
|||
}, |
|||
stopDownloadRecord: function (callback) { |
|||
this.$axios({ |
|||
method: 'get', |
|||
url: '/api/gb_record/download/stop/' + this.deviceId + "/" + this.channelId+ "/" + this.stream |
|||
}).then((res)=> { |
|||
if (callback) callback(res) |
|||
}); |
|||
}, |
|||
getFileDownload: function (){ |
|||
this.$axios({ |
|||
method: 'get', |
|||
url:`/record_proxy/${this.mediaServerId}/api/record/file/download/task/add`, |
|||
params: { |
|||
app: this.app, |
|||
stream: this.stream, |
|||
startTime: null, |
|||
endTime: null, |
|||
} |
|||
}).then((res) =>{ |
|||
if (res.data.code === 0 && res.data.msg === "success") { |
|||
// 查询进度 |
|||
this.title = "录像文件处理中..." |
|||
this.taskId = res.data.data; |
|||
this.percentage = 0.0; |
|||
this.getProgressForFileRun = true; |
|||
this.getProgressForFileTimer(); |
|||
} |
|||
}).catch(function (error) { |
|||
console.log(error); |
|||
}); |
|||
}, |
|||
getProgressForFileTimer: function (){ |
|||
if (!this.getProgressForFileRun || this.percentage == 100) { |
|||
return; |
|||
} |
|||
setTimeout( ()=>{ |
|||
if (!this.showDialog) return; |
|||
this.getProgressForFile(this.getProgressForFileTimer()) |
|||
}, 1000) |
|||
}, |
|||
getProgressForFile: function (callback){ |
|||
this.$axios({ |
|||
method: 'get', |
|||
url:`/record_proxy/${this.mediaServerId}/api/record/file/download/task/list`, |
|||
params: { |
|||
app: this.app, |
|||
stream: this.stream, |
|||
taskId: this.taskId, |
|||
isEnd: true, |
|||
} |
|||
}).then((res) => { |
|||
if (res.data.code == 0) { |
|||
this.percentage = parseFloat(res.data.data.percentage)*100 |
|||
if (res.data.data[0].percentage === '1') { |
|||
this.getProgressForFileRun = false; |
|||
window.open(res.data.data[0].downloadFile) |
|||
this.close(); |
|||
}else { |
|||
if (callback)callback() |
|||
} |
|||
} |
|||
}).catch(function (error) { |
|||
console.log(error); |
|||
}); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
</style> |
|||
@ -1,198 +0,0 @@ |
|||
<template> |
|||
<div id="test"> |
|||
<div class="timeQuery" id="timeQuery"> |
|||
<div class="timeQuery-background" ></div> |
|||
<div class="timeQuery-pointer"> |
|||
<div class="timeQuery-pointer-content" id="timeQueryPointer"> |
|||
<div class="timeQuery-pointer-handle" @mousedown.left="mousedownHandler" ></div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="timeQuery-data" > |
|||
|
|||
<div class="timeQuery-data-cell" v-for="item of recordData" :style="'width:' + getDataWidth(item) + '%; left:' + getDataLeft(item) + '%'" ></div> |
|||
<!-- <div class="timeQuery-data-cell" style="width: 30%; left: 20%" @click="timeChoose"></div>--> |
|||
<!-- <div class="timeQuery-data-cell" style="width: 60%; left: 20%" @click="timeChoose"></div>--> |
|||
</div> |
|||
|
|||
<div class="timeQuery-label" > |
|||
<div class="timeQuery-label-cell" style="left: 0%"> |
|||
<div class="timeQuery-label-cell-label">0</div> |
|||
</div> |
|||
<div v-for="index of timeNode" class="timeQuery-label-cell" :style="'left:' + (100.0/timeNode*index).toFixed(4) + '%'"> |
|||
<div class="timeQuery-label-cell-label">{{24/timeNode * index}}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "test", |
|||
data() { |
|||
return { |
|||
mouseDown: false, |
|||
timeNode: 24, |
|||
recordData:[ |
|||
{ |
|||
startTime: "2021-04-18 00:00:00", |
|||
endTime: "2021-04-18 00:00:09", |
|||
}, |
|||
{ |
|||
startTime: "2021-04-18 00:00:09", |
|||
endTime: "2021-04-18 01:00:05", |
|||
}, |
|||
{ |
|||
startTime: "2021-04-18 02:00:01", |
|||
endTime: "2021-04-18 04:25:05", |
|||
}, |
|||
{ |
|||
startTime: "2021-04-18 05:00:01", |
|||
endTime: "2021-04-18 20:00:05", |
|||
}, |
|||
] |
|||
}; |
|||
}, |
|||
mounted() { |
|||
document.body.addEventListener("mouseup", this.mouseupHandler, false) |
|||
document.body.addEventListener("mousemove", this.mousemoveHandler, false) |
|||
}, |
|||
methods:{ |
|||
getTimeNode(){ |
|||
let mine = 20 |
|||
let width = document.getElementById("timeQuery").offsetWidth |
|||
if (width/20 > 24){ |
|||
return 24 |
|||
}else if (width/20 > 12) { |
|||
return 12 |
|||
}else if (width/20 > 6) { |
|||
return 6 |
|||
} |
|||
}, |
|||
timeChoose(event){ |
|||
console.log(event) |
|||
}, |
|||
getDataWidth(item){ |
|||
let startTime = new Date(item.startTime); |
|||
let endTime = new Date(item.endTime); |
|||
let result = parseFloat((endTime.getTime() - startTime.getTime())/(24*60*60*10)) |
|||
// console.log(result) |
|||
return parseFloat((endTime.getTime() - startTime.getTime())/(24*60*60*10)) |
|||
}, |
|||
getDataLeft(item){ |
|||
let startTime = new Date(item.startTime); |
|||
let differenceTime = startTime.getTime() - new Date(item.startTime.substr(0,10) + " 00:00:00").getTime() |
|||
let result = differenceTime/(24*60*60*10) |
|||
console.log(differenceTime) |
|||
console.log(result) |
|||
return parseFloat(differenceTime/(24*60*60*10)); |
|||
}, |
|||
mousedownHandler(event){ |
|||
this.mouseDown = true |
|||
}, |
|||
mousemoveHandler(event){ |
|||
if (this.mouseDown){ |
|||
document.getElementById("timeQueryPointer").style.left = (event.clientX - 20)+ "px" |
|||
} |
|||
}, |
|||
mouseupHandler(event){ |
|||
this.mouseDown = false |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.timeQuery{ |
|||
width: 96%; |
|||
margin-left: 2%; |
|||
margin-right: 2%; |
|||
margin-top: 20%; |
|||
position: absolute; |
|||
} |
|||
.timeQuery-background{ |
|||
height: 16px; |
|||
width: 100%; |
|||
background-color: #ececec; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
z-index: 10; |
|||
box-shadow: #9d9d9d 0px 0px 10px inset; |
|||
} |
|||
.timeQuery-data{ |
|||
height: 16px; |
|||
width: 100%; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
z-index: 11; |
|||
} |
|||
.timeQuery-data-cell{ |
|||
height: 10px; |
|||
background-color: #888787; |
|||
position: absolute; |
|||
z-index: 11; |
|||
-webkit-box-shadow: #9d9d9d 0px 0px 10px inset; |
|||
margin-top: 3px; |
|||
top: 100%; |
|||
} |
|||
.timeQuery-label{ |
|||
height: 16px; |
|||
width: 100%; |
|||
position: absolute; |
|||
pointer-events: none; |
|||
left: 0; |
|||
top: 0; |
|||
z-index: 11; |
|||
} |
|||
.timeQuery-label-cell{ |
|||
height: 16px; |
|||
position: absolute; |
|||
z-index: 12; |
|||
width: 0px; |
|||
border-right: 1px solid #b7b7b7; |
|||
} |
|||
.timeQuery-label-cell-label { |
|||
width: 23px; |
|||
text-align: center; |
|||
height: 18px; |
|||
margin-left: -10px; |
|||
margin-top: -30px; |
|||
color: #444; |
|||
} |
|||
.timeQuery-pointer{ |
|||
width: 0px; |
|||
height: 18px; |
|||
position: absolute; |
|||
left: 0; |
|||
} |
|||
.timeQuery-pointer-content{ |
|||
width: 0px; |
|||
height: 70px; |
|||
position: absolute; |
|||
border-right: 2px solid #f60303; |
|||
z-index: 14; |
|||
top: -30px; |
|||
} |
|||
.timeQuery-pointer-handle { |
|||
width: 0; |
|||
height: 0; |
|||
border-top: 12px solid transparent; |
|||
border-right: 12px solid transparent; |
|||
border-bottom: 20px solid #ff0909; |
|||
border-left: 12px solid transparent; |
|||
cursor: no-drop; |
|||
position: absolute; |
|||
left: -11px; |
|||
top: 50px; |
|||
} |
|||
/*.timeQuery-cell:after{*/ |
|||
/* content: "";*/ |
|||
/* height: 14px;*/ |
|||
/* border: 1px solid #e70303;*/ |
|||
/* position: absolute;*/ |
|||
/*}*/ |
|||
</style> |
|||
@ -1,190 +0,0 @@ |
|||
<template> |
|||
<div id="test2"> |
|||
<div class="timeQuery" style="width: 100%; height: 300px" id="timeQuery"> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import * as echarts from 'echarts'; |
|||
|
|||
export default { |
|||
name: "test2", |
|||
data() { |
|||
return { |
|||
}; |
|||
}, |
|||
mounted() { |
|||
var base = +new Date("2021-02-02 00:00:00"); |
|||
var oneDay = 24 * 3600 * 1000; |
|||
|
|||
var data = [[base, 10]]; |
|||
|
|||
for (var i = 1; i < 24; i++) { |
|||
var now = new Date(base += oneDay); |
|||
data.push([ |
|||
new Date("2021-02-02 " + i+":00:00"), 10 |
|||
]); |
|||
} |
|||
// 基于准备好的dom，初始化echarts实例 |
|||
var myChart = echarts.init(document.getElementById('timeQuery')); |
|||
let option = { |
|||
|
|||
toolbox: { |
|||
feature: { |
|||
dataZoom: { |
|||
yAxisIndex: 'none' |
|||
}, |
|||
restore: {}, |
|||
saveAsImage: {} |
|||
} |
|||
}, |
|||
xAxis: { |
|||
type: 'time', |
|||
boundaryGap: false |
|||
}, |
|||
yAxis: { |
|||
type: 'value', |
|||
show: false, |
|||
splitLine:{show: false}, //去除网格线 |
|||
boundaryGap: [0, '100%'] |
|||
}, |
|||
dataZoom: [{ |
|||
type: 'inside', |
|||
start: 0, |
|||
end: 20 |
|||
}, { |
|||
start: 0, |
|||
end: 20 |
|||
}], |
|||
series: [ |
|||
{ |
|||
name: '模拟数据', |
|||
type: 'line', |
|||
smooth: false, |
|||
symbol: 'none', |
|||
areaStyle: {}, |
|||
data: data |
|||
} |
|||
] |
|||
}; |
|||
// 绘制图表 |
|||
myChart.setOption(option); |
|||
}, |
|||
methods:{ |
|||
getTimeNode(){ |
|||
let mine = 20 |
|||
let width = document.getElementById("timeQuery").offsetWidth |
|||
if (width/20 > 24){ |
|||
return 24 |
|||
}else if (width/20 > 12) { |
|||
return 12 |
|||
}else if (width/20 > 6) { |
|||
return 6 |
|||
} |
|||
}, |
|||
hoveEvent(event){ |
|||
console.log(2222222) |
|||
console.log(event) |
|||
}, |
|||
timeChoose(event){ |
|||
console.log(event) |
|||
}, |
|||
getDataWidth(item){ |
|||
let startTime = new Date(item.startTime); |
|||
let endTime = new Date(item.endTime); |
|||
let result = parseFloat((endTime.getTime() - startTime.getTime())/(24*60*60*10)) |
|||
// console.log(result) |
|||
return parseFloat((endTime.getTime() - startTime.getTime())/(24*60*60*10)) |
|||
}, |
|||
getDataLeft(item){ |
|||
let startTime = new Date(item.startTime); |
|||
let differenceTime = startTime.getTime() - new Date(item.startTime.substr(0,10) + " 00:00:00").getTime() |
|||
let result = differenceTime/(24*60*60*10) |
|||
console.log(differenceTime) |
|||
console.log(result) |
|||
return parseFloat(differenceTime/(24*60*60*10)); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.timeQuery{ |
|||
width: 96%; |
|||
margin-left: 2%; |
|||
margin-right: 2%; |
|||
margin-top: 20%; |
|||
position: absolute; |
|||
} |
|||
.timeQuery-background{ |
|||
height: 16px; |
|||
width: 100%; |
|||
background-color: #ececec; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
z-index: 10; |
|||
box-shadow: #9d9d9d 0px 0px 10px inset; |
|||
} |
|||
.timeQuery-data{ |
|||
height: 16px; |
|||
width: 100%; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
z-index: 11; |
|||
} |
|||
.timeQuery-data-cell{ |
|||
height: 10px; |
|||
background-color: #888787; |
|||
position: absolute; |
|||
z-index: 11; |
|||
-webkit-box-shadow: #9d9d9d 0px 0px 10px inset; |
|||
margin-top: 3px; |
|||
} |
|||
.timeQuery-label{ |
|||
height: 16px; |
|||
width: 100%; |
|||
position: absolute; |
|||
pointer-events: none; |
|||
left: 0; |
|||
top: 0; |
|||
z-index: 11; |
|||
} |
|||
.timeQuery-label-cell{ |
|||
height: 16px; |
|||
position: absolute; |
|||
z-index: 12; |
|||
width: 0px; |
|||
border-right: 1px solid #b7b7b7; |
|||
} |
|||
.timeQuery-label-cell-label { |
|||
width: 23px; |
|||
text-align: center; |
|||
height: 18px; |
|||
margin-left: -10px; |
|||
margin-top: -30px; |
|||
color: #444; |
|||
} |
|||
.timeQuery-pointer{ |
|||
width: 0px; |
|||
height: 18px; |
|||
position: absolute; |
|||
left: 0; |
|||
} |
|||
.timeQuery-pointer-content{ |
|||
width: 0px; |
|||
height: 16px; |
|||
position: absolute; |
|||
border-right: 3px solid #f60303; |
|||
z-index: 14; |
|||
} |
|||
/*.timeQuery-cell:after{*/ |
|||
/* content: "";*/ |
|||
/* height: 14px;*/ |
|||
/* border: 1px solid #e70303;*/ |
|||
/* position: absolute;*/ |
|||
/*}*/ |
|||
</style> |
|||
Loading…
Reference in new issue