<!-- 数据爬取 -->
|
<script>
|
// import ShopNameSelect from '../sfc/ShopNameSelect.vue'
|
import ShopNameCheckBox from '../sfc/ShopNameCheckBox.vue';
|
import TimeSelectCrawling from '../sfc/TimeSelectCrawling.vue';
|
|
import axios from 'axios';
|
import dayjs from 'dayjs';
|
|
export default {
|
components: {
|
// ShopNameSelect,
|
ShopNameCheckBox,
|
TimeSelectCrawling
|
},
|
data() {
|
return {
|
iframeSrc: '/api/sys_login.jsp?from=/sys/index.jsp',
|
isShowIframe: false,
|
// 已选中的店铺名
|
form: {
|
selectedShopNames: [],
|
cookie: '',
|
beginTime: '',
|
endTime: ''
|
},
|
percentage: Number(60),
|
countdownTime: Date.now() + 1000 * 60 * 60 * 24 * 2,
|
// 爬取反馈的结果
|
result: '',
|
// 信息
|
allData: [],
|
// 重复的数据
|
duplicateData: [],
|
// 不重复的数据
|
newData: [],
|
// 重复数据展示的表格
|
displayData:[],
|
loading: false,
|
loadingToMysql:null,
|
// 但有重复的数据时，两个按钮只能选其中一个，反之再次重复入库
|
buttonFlag:-1
|
};
|
},
|
methods: {
|
openFullScreen () {
|
this.loadingToMysql = ElLoading.service({
|
lock: true,
|
text: 'Loading',
|
background: 'rgba(0, 0, 0, 0.7)',
|
})
|
},
|
// 发送数据
|
sendData() {
|
this.result = '';
|
this.allData = [];
|
let form = {};
|
form['selectedShopNames'] = this.form.selectedShopNames;
|
form['cookie'] = this.form.cookie;
|
if (this.form.beginTime) {
|
form['beginTime'] = dayjs(this.form.beginTime).format('YYYY-MM-DD');
|
}
|
if (this.form.endTime) {
|
form['endTime'] = dayjs(this.form.endTime).format('YYYY-MM-DD');
|
}
|
this.loading = true;
|
// 得到反馈信息 所有数据
|
axios.post('http://127.0.0.1:5000/hello', form).then((response) => {
|
console.log(response.data);
|
response.data.info.forEach((item) => {
|
// 换行显示
|
this.result = this.result + item + '\n';
|
});
|
|
// response.data.allData.forEach(item=>{
|
// this.allData =this.allData+item+'\n'
|
// this.allData =this.allData+'\n'
|
// });
|
this.allData = response.data.allData;
|
this.duplicateData = response.data.duplicate;
|
console.log('重复的数据为：', this.duplicateData);
|
this.newData = response.data.newData;
|
console.log('新数据条数为：',this.newData.length);
|
this.loading = false;
|
|
this.displayData = this.arrToObject(this.duplicateData);
|
console.log('转换后的对象数组为：',this.displayData);
|
|
this.result=this.result+'\n重复的数量为：'+this.duplicateData.length
|
});
|
},
|
arrToObject(arr) {
|
let displayData = [];
|
arr.forEach((item) => {
|
let tempObject = {};
|
tempObject['供应商'] = item[0];
|
tempObject['餐饮店'] = item[1];
|
tempObject['设备编号'] = item[2];
|
tempObject['站点名称'] = item[3];
|
tempObject['进烟浓度'] = item[4];
|
tempObject['排烟浓度'] = item[5];
|
tempObject['风机电'] = item[6];
|
tempObject['净化器'] = item[7];
|
tempObject['级别'] = item[8];
|
tempObject['需报警'] = item[9];
|
tempObject['已报警'] = item[10];
|
tempObject['归属时间'] = item[11];
|
tempObject['上报时间'] = item[12];
|
tempObject['数据时间'] = item[13];
|
tempObject['重复次数'] = item[14];
|
displayData.push(tempObject)
|
});
|
return displayData
|
},
|
|
// 无重复数据时，结果入库
|
storeAllToMySql() {
|
if(this.allData.length==0){
|
alert('请先获取数据')
|
return
|
}
|
this.openFullScreen()
|
axios.post('http://127.0.0.1:5000/store', {'allData':this.allData}).then((response) => {
|
console.log(response.data);
|
ElMessage.success(response.data)
|
this.loadingToMysql.close()
|
})
|
},
|
|
// 入库新数据（只写入新数据）
|
storeNewToMySql() {
|
if(this.buttonFlag != -1){
|
alert('已入库，不能再重复入库')
|
return
|
}
|
this.buttonFlag = 1
|
this.openFullScreen()
|
axios
|
.post('http://127.0.0.1:5000/store', { 'allData': this.newData })
|
.then((response) => {
|
console.log(response.data);
|
ElMessage.success(response.data)
|
this.loadingToMysql.close()
|
});
|
},
|
|
|
// 全部数据入库，包括重复的（先写入重复的数据，重复的数据只写入历史数据表
|
// 再把新的数据写入4张表中）
|
storeDupAllMySql() {
|
if(this.buttonFlag != -1){
|
alert('已入库，不能再重复入库')
|
return
|
}
|
this.buttonFlag = 1
|
this.openFullScreen()
|
// 重复数据写入分钟数据表
|
axios
|
.post('http://127.0.0.1:5000/minute', { 'allData': this.duplicateData })
|
.then((response) => {
|
console.log(response.data);
|
});
|
// 新数据写入4张表
|
if(this.newData.length != 0){
|
setTimeout(() => {
|
axios
|
.post('http://127.0.0.1:5000/store', { 'allData': this.newData })
|
.then((response) => {
|
console.log(response.data);
|
ElMessage.success(response.data)
|
this.loadingToMysql.close()
|
});
|
}, 2000);
|
}
|
else{
|
this.loadingToMysql.close()
|
ElMessage.success('写入完成！')
|
}
|
},
|
giveTime(val) {
|
//将中国标准时间转为指定格式(该组件返回的标准时间的格式，所以必须的加这个函数)
|
this.form.beginTime = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss');
|
this.form.endTime = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss');
|
},
|
cardShow() {
|
this.isShowIframe = !this.isShowIframe;
|
}
|
}
|
};
|
</script>
|
|
<template>
|
<!-- <el-card >
|
<span>使用说明：</span>
|
<br/>
|
<a href="http://xhhb.senzly.cn/main/sys_login.jsp?from=/sys/index.jsp" target="_blank">点击此网页</a>
|
<div>
|
输入账号，密码，验证码之后点击'立即登录'
|
</div>
|
<div >
|
进入页面后，按键盘的‘F12’
|
</div>
|
<div>
|
点击弹出的页面的工具栏的‘网络’或者‘network’,选择下面以.jsp结尾的文件
|
</div>
|
<div>
|
往下找请求表头中的‘Cookie’，全部复制
|
</div>
|
</el-card> -->
|
<div>
|
<iframe
|
:src="iframeSrc"
|
frameborder="0"
|
width="100%"
|
height="500"
|
v-if="isShowIframe"
|
v-cloak
|
></iframe>
|
|
<div class="header-button">
|
<el-button type="primary" @click="cardShow"> 打开网页 </el-button>
|
<el-button type="primary" @click="autoLogin"> 模拟登录 </el-button>
|
</div>
|
|
<el-card>
|
<!-- <ShopNameSelect @submit-shops="(n)=>selectedShopNames=n"></ShopNameSelect> -->
|
<ShopNameCheckBox
|
@submit-shops="(n) => (form.selectedShopNames = n)"
|
></ShopNameCheckBox>
|
<!-- {{ selectedShopNames }} -->
|
</el-card>
|
|
<div class="input-cookie">
|
<span class="input-cookie-label">cookie</span>
|
<el-input
|
v-model="form.cookie"
|
rows="4"
|
type="textarea"
|
class="input-cookie-textarea"
|
></el-input>
|
</div>
|
|
<div class="time-select">
|
<TimeSelectCrawling @submit-time="giveTime"> </TimeSelectCrawling>
|
</div>
|
|
<div class="getdata-button">
|
<el-button color="#626aef" :dark="isDark" plain @click="sendData"
|
>获取数据</el-button
|
>
|
</div>
|
<div class="result-textarea" element-loading-text="获取数据中..." v-loading="loading" >
|
<el-input
|
v-model="result"
|
rows="6"
|
type="textarea"
|
class="result-textarea-textarea"
|
placeholder="爬取结果"
|
></el-input>
|
</div>
|
|
<!-- <div class="progress-percentage">
|
<el-progress :text-inside="true" :percentage="percentage" stroke-width="15" status="warning" striped striped-flow duration="5"></el-progress>
|
</div>
|
|
|
<div class="countdown-time">
|
<el-countdown
|
title="预计还需要爬取的时间"
|
format="HH:mm:ss"
|
:value="countdownTime"
|
/>
|
</div> -->
|
|
<!-- <div class="result-textarea-data" v-loading="loading">
|
<div>数据</div>
|
<el-input v-model="allData" rows="6" type="textarea" class="result-textarea-textarea" placeholder="数据"></el-input>
|
<div>获取的数据数为：{{ allData.length }}</div>
|
</div> -->
|
|
<div class="result-textarea-duplication">
|
<div>重复的数据</div>
|
<!-- <el-input
|
v-model="duplicateData"
|
rows="6"
|
type="textarea"
|
class="result-textarea-textarea"
|
placeholder="重复的数据"
|
></el-input> -->
|
<el-table :data="displayData" height="250" style="width: 100%">
|
<el-table-column prop="餐饮店" label="餐饮店" width="180" fixed />
|
<el-table-column prop="供应商" label="供应商" width="180" />
|
<el-table-column prop="设备编号" label="设备编号" />
|
<el-table-column prop="站点名称" label="设备编号" />
|
<el-table-column prop="进烟浓度" label="进烟浓度(mg/m³)" />
|
<el-table-column prop="排烟浓度" label="排烟浓度mg/m³)" />
|
<el-table-column prop="风机店" label="风机店(A)" />
|
<el-table-column prop="净化器" label="净化器(A)" />
|
<el-table-column prop="级别" label="级别" />
|
<el-table-column prop="需报警" label="需报警" />
|
<el-table-column prop="已报警" label="已报警" />
|
<el-table-column prop="归属时间" label="归属时间" />
|
<el-table-column prop="上报时间" label="上报时间" />
|
<el-table-column prop="数据时间" label="数据时间" />
|
<el-table-column prop="重复次数" label="重复次数" />
|
</el-table>
|
</div>
|
|
<!-- <div class="result-textarea">
|
<span >重复数量为：{{ duplicateData.length }}</span>
|
</div> -->
|
|
<div class="store-button" >
|
<el-button
|
type="warning"
|
@click="storeAllToMySql"
|
v-if="duplicateData.length == 0"
|
>结果入库</el-button
|
>
|
<el-button type="warning" @click="storeNewToMySql" v-if="duplicateData.length != 0"
|
>只入库新数据</el-button
|
>
|
<el-button type="warning" @click="storeDupAllMySql" v-if="duplicateData.length != 0"
|
>全部数据入库(包括重复数据)</el-button
|
>
|
</div>
|
</div>
|
</template>
|
|
<style lang="scss" scoped>
|
.header-button {
|
margin-top: 10px;
|
}
|
.el-card {
|
width: 60%;
|
border-radius: 9px;
|
}
|
.input-cookie {
|
display: flex;
|
margin-top: 20px;
|
}
|
.input-cookie-label {
|
margin-right: 10px;
|
margin-top: 10px;
|
}
|
.input-cookie-textarea {
|
width: 45%;
|
}
|
.time-select {
|
margin-top: 20px;
|
}
|
.getdata-button {
|
margin-top: 20px;
|
}
|
.result-textarea {
|
margin-top: 20px;
|
}
|
.result-textarea-textarea {
|
width: 50%;
|
}
|
.progress-percentage {
|
width: 50%;
|
margin-top: 20px;
|
}
|
.countdown-time {
|
margin-top: 20px;
|
}
|
.restore-button {
|
margin-top: 20px;
|
}
|
.result-textarea-data {
|
margin-top: 20px;
|
width: 2100px;
|
}
|
.result-textarea-duplication {
|
margin-top: 20px;
|
width: 90%;
|
}
|
* {
|
margin-left: 10px;
|
}
|
</style>
|
