websoket
<template>
<!-- yemian -->
<div class="bod">
<leftMenu />
<!-- 首部 -->
<!-- <Nav /> -->
<!-- 中间部分 -->
<div class="ActionTitle">
{{ activeT }}
</div>
<div class="cont">
<!-- 检查 -->
<div class="examine">
<el-row style="margin: 10px 0">
<!-- 左边 -->
<el-col :span="4"
><div style="position: relative">
<div
class="grid-content bg-purple move"
:class="[flag ? 'wh1' : 'wh']"
></div>
<div :class="[flag ? 'tim orang' : 'tim ']">{{ hour }}时</div>
<div :class="[flag ? 'tim1 orang' : 'tim1']">
{{ minute }}:{{ second }}
</div>
</div>
</el-col>
<!-- 右边 -->
<el-col :span="20"
><div class="grid-content bg-purple-light">
<div>
已筛查出<span :class="[flag ? 'numA orang' : 'numA']">{{
num
}}</span
>家企业,涉及<span :class="[flag ? 'numA orang' : 'numA']">{{
num1
}}</span
>条线索
</div>
<el-row>
<el-col :span="10"
><div class="grid-content bg-purple">
<!-- 扫描企业总数 -->
<span
class="el-icon-office-building"
style="font-size: 40px; line-height: 80px; color: blue"
>
<i style="font-size: 22px; color: #888888"
>扫描企业总数</i
>
<i style="font-size: 22px; color: blue"
>:{{ coun1 }}</i
></span
>
</div></el-col
>
<el-col :span="12"
><div class="grid-content bg-purple-light">
<!-- 扫描网页总数 -->
<span
class="el-icon-monitor"
style="font-size: 40px; line-height: 80px; color: blue"
>
<i style="font-size: 22px; color: #888888"
>扫描网页总数:</i
>
<i style="font-size: 22px; color: blue">{{
coun2
}}</i></span
>
</div></el-col
>
</el-row>
<el-progress
v-if="percentage"
:percentage="parseFloat(percentage)"
:format="format"
></el-progress>
<el-progress
v-else
:percentage="0"
:format="format"
></el-progress></div
></el-col>
</el-row>
<hr color="#F2F4F8" />
<!-- 下面数据 -->
<div class="examineL">
<div class="title">
<span>智能扫描 </span>
<div class="getOut"><span>违法词</span><span>结果</span></div>
</div>
<ul class="information" ref="scrollB">
<li v-for="(item, i) in redata" :key="i">
<div>
<span v-show="item.ex == 1" style="vertical-align: middle">
<svg
t="1611019402824"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="1540"
width="16"
height="16"
>
<path
d="M287.5392 287.5392c123.96544-123.97568 324.95616-123.97568 448.9216 0 123.97568 123.96544 123.97568 324.95616 0 448.9216-123.96544 123.97568-324.95616 123.97568-448.9216 0-123.97568-123.96544-123.97568-324.95616 0-448.9216z m434.44224 14.47936c-115.968-115.968-303.99488-115.968-419.96288 0s-115.968 303.99488 0 419.96288 303.99488 115.968 419.96288 0 115.968-303.99488 0-419.96288z m-59.37152 131.0208a10.24 10.24 0 0 1 0.84992 13.5168l-0.84992 0.96256-163.9424 163.95264a10.24 10.24 0 0 1-13.5168 0.84992l-0.9728-0.84992-92.07808-92.07808a10.24 10.24 0 0 1 13.5168-15.32928l0.96256 0.84992 84.8384 84.82816 156.71296-156.70272a10.24 10.24 0 0 1 14.47936 0z"
p-id="1541"
fill="#1afa29"
></path>
</svg>
{{ item.url }}
</span>
<span v-show="item.ex == 0">
<svg
t="1611020488080"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="5750"
width="16"
height="16"
>
<path
d="M884.44 98.178H139.56c-22.851 0-41.382 18.509-41.382 41.382v328.752c0 234.758 175.938 431.323 409.253 457.265a42.915 42.915 0 0 0 9.138 0c233.315-25.942 409.253-222.508 409.253-457.265V139.56c0-22.873-18.531-41.382-41.382-41.382z m-41.382 370.134c0 190.991-142.006 351.145-331.058 374.463-189.051-23.318-331.058-183.472-331.058-374.463v-287.37h662.115v287.37z"
fill="#FF6132"
p-id="5751"
></path>
<path
d="M358.597 624.02c8.08 8.082 18.665 12.126 29.256 12.126 10.591 0 21.176-4.044 29.256-12.126L512 529.135l94.891 94.886c8.08 8.082 18.665 12.126 29.256 12.126 10.591 0 21.176-4.044 29.256-12.126 16.17-16.162 16.17-42.35 0-58.514l-94.883-94.888 94.883-94.891c16.17-16.162 16.17-42.35 0-58.514-16.162-16.167-42.35-16.167-58.512 0L512 412.098l-94.891-94.886c-16.162-16.167-42.35-16.167-58.512 0-16.17 16.165-16.17 42.352 0 58.514l94.883 94.891-94.883 94.888c-16.17 16.166-16.17 42.353 0 58.515z"
fill="#FF6132"
p-id="5752"
></path>
</svg>
{{ item.url }}
</span>
</div>
<div class="getOut">
<span>{{ item.sword }}</span
><span v-show="item.ex == 0">异常</span>
<span v-show="item.ex == 1">正常</span>
</div>
</li>
</ul>
</div>
</div>
<!-- 滚动条-->
</div>
<!-- 扫描完成弹框 -->
<el-dialog
title="筛查完成"
:close-on-click-modal="false"
:show-close="false"
:visible.sync="dialogVisible"
width="30%"
>
<div>
已筛查出<span :class="[flag ? 'numA orang' : 'numA']">{{ num }}</span
>家企业,涉及<span :class="[flag ? 'numA orang' : 'numA']">{{
num1
}}</span
>条线索
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="goCreat">返回</el-button>
<el-button type="primary" @click="goH">筛选记录</el-button>
</span>
</el-dialog>
<!-- 底部 -->
<el-footer class="footer"> <Footer /></el-footer>
</div>
</template>
<script>
import Nav from "../../../nav";
import Footer from "../../../footer";
import leftMenu from "../../../leftMenu";
// i
import array from "./shuz.js";
export default {
data() {
return {
dialogVisible: false,
flg: true, //标志 数据
shijian: null,
percentage: 0,
flag: false,
hour: "00",
redata: [{}],
tim: null,
index: 0,
second: "00",
minute: "00 ",
coun1: 0, //扫描企业总数
coun2: 0, //扫描网页总数
creatTime: "", //创建时间
now: this.$moment(new Date()).unix(), //现在的时间
timeH: "05", //时间
timeS: "00:00", //时间
num: 0, //this.redata.exEnterCt, //商检个数
num1: 0, // this.redata.exPageCt,
activeT: "行动标题", //行动标题
time1: "", //接受后台的时间
time: "", //渲染到页面的时间
areaLayer: this.$store.state.areaLayer, //bbbbbbbbbkbk地区编码this.$store.state.areaLayer
total: 0, //总条数
countTime: new Date().getTime(),
timerI: null,
};
},
components: {
Nav,
Footer,
leftMenu,
},
// beforeDestroy(){
// clearInterval(this.shijian)
// },
filters: {
//保留2位小数点过滤器 不四舍五入
number(value) {
var toFixedNum = Number(value).toFixed(3);
var realVal = toFixedNum.substring(0, toFixedNum.toString().length - 1);
return realVal;
},
},
mounted() {
this.formatG();
this.filtrate();
this.countS();
this.initWebSocket();
},
methods: {
catc() {
var catchLen = array.length - 1;
this.tim = setInterval(() => {
if (this.redata.length > 30) {
this.redata.shift();
}
this.redata.push(array[parseInt(Math.random() * catchLen)]);
}, 50);
var that = this;
this.$once("hook:beforeDestroy", () => {
clearInterval(that.tim);
});
},
// 返回专项行动
goCreat() {
this.dialogVisible = false;
this.$router.push("/strategy");
},
// 去后台
goH() {
this.dialogVisible = false;
clearInterval(this.shijian);
this.shijian = null;
clearInterval(this.tim);
this.tim = null;
this.redata = [{}];
console.log("789789789789");
window.location.href = "/webpage/actionaecord";
},
//接口封装页面加载调用
filtrate() {
let _this = this;
const { uuid } = _this.$route.query;
const res = this.$axios
.get("/apis/hmcsMonitor/v2/checkTask/findByUuid", {
params: {
uuid,
},
})
.then((res) => {
console.log(res.data.result, "456456456");
var chazhi = res.data.result.diffNowSecond;
if (res.data.result.status == 1) {
clearInterval(_this.shijian);
_this.transTime(chazhi);
return false;
}
this.catc();
this.timerI = chazhi;
_this.shijian = setInterval(() => {
chazhi = chazhi + 1;
_this.transTime(chazhi, _this);
}, 1000);
_this.$once("hook:beforeDestroy", () => {
clearInterval(_this.shijian);
});
_this.activeT = res.data.result.taskName;
});
},
// 获取 企业 总数
async countS() {
const res = await this.$axios
.post(
"/apis/hmcsCheck/v2/dataStatistics/multipleCount",
new URLSearchParams({
areaLayer: this.areaLayer,
})
)
.then((res) => {
this.coun1 = res.data.result.scanDataCount;
this.coun2 = res.data.result.enterpriseDataCount;
});
},
// 滚动条接口
async formatG() {
const res = await this.$axios
.get("/apis/hmcsMonitor/v2/clueScreening/total?", {
params: {
areaLayer: this.areaLayer,
},
})
.then((res) => {
this.total = res.data.result + 0;
});
},
// 滚动条
format(percentage) {
this.percentage = parseInt((this.index * 100) / this.total);
if (this.percentage === 99) {
this.percentage = 100;
clearInterval(this.shijian);
}
return this.percentage === 100 ? "100%" : `${this.percentage}%`;
},
//接受数据
accept(aaa) {
// 调取时间
let currentTime = new Date().getTime();
if (currentTime - this.countTime > 50) {
this.countTime = currentTime;
if (this.redata.length > 30) {
this.redata.shift();
}
this.redata.push(aaa);
if (this.num < aaa.exEnterCt) {
this.num = aaa.exEnterCt;
}
if (this.num1 < aaa.exPageCt) {
this.num1 = aaa.exPageCt;
}
if (this.index < aaa.index) {
this.index = aaa.index;
}
}
if (!this.flag && aaa.ex == 1) {
this.flag = true;
}
if (aaa.runningStatus == "END") {
window.clearInterval(this.shijian);
this.shijian = null;
// this.beforeDestroy()
// this.transTime(this.timerI,this)
if (this.percentage === 99) {
this.percentage = 100;
}
this.percentage == 100 ? "100%" : `${100}%`;
this.$message({
type: "success",
message: "扫描完成",
});
this.dialogVisible = true;
}
},
// websocket开始
initWebSocket() {
//初始化weosocket(必须)
const { uuid } = this.$route.query;
const wsuri =
"wss://gw.chci.cn/hmcsMonitor/websocket?type=monitor&taskId=" + uuid; //请根据实际项目需要进行修改
this.websock = new WebSocket(wsuri); //新建一个webstock对象
this.websock.onmessage = this.websocketonmessage;
this.websock.onopen = this.websocketonopen;
this.websock.onerror = this.websocketonerror;
this.websock.onclose = this.websocketclose;
},
websocketonopen() {
//websocket连接后发送数据(send发送)
// let actions = {}; //请根据实际项目需要进行修改
// this.websocketsend(JSON.stringify(actions));
console.log("success");
// var catchLen = array.length-1;
// this.tim = setInterval(() => {
// if (this.redata.length > 30) {
// this.redata.shift();
// }
// this.redata.push(array[parseInt(Math.random() * catchLen)]);
// }, 50);
},
websocketonerror() {
//连接建立失败重连
console.log("websocketonerror");
},
websocketonmessage(e) {
//数据接收
var aaa = JSON.parse(e.data);
window.clearInterval(this.tim);
if (aaa !== "") {
this.accept(aaa);
}
},
websocketsend(Data) {
//数据发送
},
websocketclose(e) {
//关闭
console.log("断开连接", e);
},
// websocket结束
// 时间的计算
transTime(time) {
if (time === "") {
return "";
} else {
time = time * 1000;
var result = "";
if (time >= 1000) {
// console.log(time, "2587421");
var day = parseInt(time / (24 * 60 * 60 * 1000));
var hour = parseInt(
(time % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000)
);
var m1 = time % (24 * 60 * 60 * 1000);
var m2 = m1 % (60 * 60 * 1000);
var m3 = m2 / (60 * 1000);
var minute = parseInt(
((time % (24 * 60 * 60 * 1000)) % (60 * 60 * 1000)) / (60 * 1000)
);
var second = parseInt(
(((time % (24 * 60 * 60 * 1000)) % (60 * 60 * 1000)) %
(60 * 1000)) /
1000
);
if (day != 0) {
result += day + "天";
}
if (hour != 0) {
this.hour = (hour + "").padStart(2, "0");
result += hour + "时";
}
if (minute != 0) {
this.minute = (minute + "").padStart(2, "0");
result += minute + "分";
}
if (second != 0) {
this.second = (second + "").padStart(2, "0");
result += second + "秒";
}
}
if (result == "") {
result = "0秒";
}
// console.log(result, "258741");
// return result;
}
},
},
destroyed() {
this.websock.close(); //离开路由之后断开websocket连接
clearInterval(this.shijian);
this.shijian = null;
clearInterval(this.tim);
this.tim = null;
this.redata = [{}];
},
activated(){
clearInterval(this.shijian);
this.shijian = null;
clearInterval(this.tim);
this.tim = null;
this.redata = [{}];
// this.hour='00';
// this.minute='00';
// this.second='00';
}
};
</script>
<style scoped>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.orang {
color: #fe6739 !important;
}
.examineL {
margin: 20px auto;
}
.examineL .title {
display: flex;
justify-content: space-between;
height: 40px;
align-items: center;
font-size: 14px;
padding: 15px;
/* background:#D1E2FD; */
color: #9a9a9a;
font-weight: normal;
vertical-align: baseline;
font-family: "Microsoft YaHei";
}
.getOut {
display: flex;
color: #5b5b5b;
width: 200px;
justify-content: space-between;
}
.information {
padding: 20px;
overflow: hidden;
width: 100%;
height: 500px;
}
.information li {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
ul > li {
list-style-type: none;
}
i {
font-style: normal;
padding-left: 20px;
}
.numA {
font-size: 22px;
font-weight: bold;
color: blue;
}
.tim {
position: absolute;
left: 45px;
top: 35px;
font-size: 28px;
font-weight: bold;
color: blue;
}
.tim1 {
font-size: 24px;
font-weight: bold;
position: absolute;
left: 45px;
top: 75px;
color: blue;
}
/* 中部开始 */
.wh {
width: 150px;
height: 150px;
border: 2px dashed blue;
border-radius: 50%;
text-align: center;
line-height: 90px;
}
.wh1 {
width: 150px;
height: 150px;
border: 2px dashed #fe6739;
border-radius: 50%;
text-align: center;
line-height: 50px;
}
.examine {
width: 100%;
height: 100px;
}
.bod {
background: #f3f9ff;
width: 100%;
}
.cont {
max-width: 1200px;
margin: 10px auto;
padding: 30px;
background: #ffffff;
width: 100%;
height: 800px;
}
/* 行动标题 */
.ActionTitle {
max-width: 1200px;
margin: 10px auto;
width: 100%;
background-color: white;
height: 60px;
border-radius: 10px;
font-size: 22px;
font-weight: bold;
/* text-align: center; */
line-height: 60px;
text-align: center;
padding-left: 10px;
}
/* 行动结束 */
.move {
animation: myMove 5s ease-in infinite alternate;
-webkit-animation: myMove 5s ease-in infinite alternate;
}
@keyframes myMove {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
</style>
加班万岁!
