|
|
<!--
|
|
|
* @Author: xw
|
|
|
* @Date: 2021-10-11 14:11:04
|
|
|
* @LastEditTime: 2021-10-27 18:43:03
|
|
|
* @LastEditors: Please set LastEditors
|
|
|
* @Description: 行业数据导出
|
|
|
* @FilePath: /data-show/src/views/IndustryDataExport/index.vue
|
|
|
-->
|
|
|
<template>
|
|
|
<div class="d-container">
|
|
|
<div class="i-d-e-outter">
|
|
|
<div class="i-d-e-inner">
|
|
|
<v-label-div title="行业数据">
|
|
|
<v-btn @click="handlerBack">返回</v-btn>
|
|
|
</v-label-div>
|
|
|
<div class="ide-d1">
|
|
|
<div class="ide-d1-dd1">
|
|
|
<span class="s1">时间：</span>
|
|
|
<v-tab-group v-model="gValue" :style="{ background: 'transparent' }" :btns="btnTimes" @change="handlerTime"></v-tab-group>
|
|
|
<a-range-picker v-model="selTime" style="margin-left: 12px" :size="$vuiSize" valueFormat="YYYY-MM-DD" v-if="form.sTimeType === selVal" @change="handlerChangeTime">
|
|
|
<a-icon slot="suffixIcon" type="calendar" />
|
|
|
</a-range-picker>
|
|
|
</div>
|
|
|
<div class="ide-d1-dd1" style="margin-top: 24px">
|
|
|
<span class="s1">渠道：</span>
|
|
|
<a-checkbox-group v-model="quDao" :disabled="noClick" :options="plainOptions" @change="(val) => onChange(val, 'quDao')" />
|
|
|
</div>
|
|
|
<div class="ide-d1-dd1" style="margin-top: 24px">
|
|
|
<span class="s1">调性：</span>
|
|
|
<a-checkbox-group v-model="qingGan" :disabled="noClick" :options="plainOptions3" @change="(val) => onChange(val, 'qingGan')" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="ide-d2">
|
|
|
<span class="s1" v-if="!form.token">共计<span class="ss1">{{totalNum}}</span>条数据</span>
|
|
|
<span class="s1" v-if="form.token">共计<span class="ss1">{{totalNum}}</span>条数据，已选中<span class="ss1">{{secIds.length}}</span>条数据</span>
|
|
|
<a-button type="primary" v-if="form.token" @click="handlerExport">导出数据</a-button>
|
|
|
</div>
|
|
|
<v-table :row-selection="rowSelection" :columns="columns" :data="tbData" :loading="tableLoading" :pagination="pagination" @change="handlerPage">
|
|
|
<template slot="titlex" slot-scope="text, record">
|
|
|
<a :href="record.url" style="color: #fff" target="_blank">{{ text }}</a>
|
|
|
<a-tag color="#108ee9" v-if="record.affections === 1">正面</a-tag>
|
|
|
<a-tag color="#fece42" v-if="record.affections === 3">中性</a-tag>
|
|
|
<a-tag color="#cb7632" v-if="record.affections === 2">负面</a-tag>
|
|
|
<a-tag color="#d48c44" v-if="record.crisis === 1">低级危机</a-tag>
|
|
|
<a-tag color="#d46a46" v-if="record.crisis === 2">中级危机</a-tag>
|
|
|
<a-tag color="#d81c33" v-if="record.crisis === 3">高级危机</a-tag>
|
|
|
</template>
|
|
|
</v-table>
|
|
|
</div>
|
|
|
</div>
|
|
|
<v-modal :title="modalObj.title" :visible.sync="modalObj.visible" :eleStyle="{ width: '60rem', height: '36rem'}">
|
|
|
<div slot="body" style="padding: 1rem 1rem 1rem 1rem">
|
|
|
<a-form :form="execlForm" :label-col="{ span: 3 }" :wrapper-col="{ span: 8 }">
|
|
|
<a-form-item label="文件名称">
|
|
|
<a-input v-model="execlForm.sFileName" disabled placeholder="请输入文件名称"></a-input>
|
|
|
</a-form-item>
|
|
|
<a-form-item label="导出格式">
|
|
|
<span style="color: #63aecc; font-size: 14px">xlsz</span>
|
|
|
</a-form-item>
|
|
|
<a-form-item label="导出字段" :wrapper-col="{ span: 21 }">
|
|
|
<a-checkbox-group v-model="checkedIds" :options="plainOptions4" @change="fileTypeChange" />
|
|
|
</a-form-item>
|
|
|
<a-form-item label="导出条数">
|
|
|
<span style="color: #63aecc; font-size: 14px">{{secIds.length}}条</span>
|
|
|
</a-form-item>
|
|
|
</a-form>
|
|
|
</div>
|
|
|
<div slot="footer">
|
|
|
<div class="epor" align="center">
|
|
|
<div class="epor-btn" @click="exportExcel">确定</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</v-modal>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import getApiData from "./getApiData"
|
|
|
import tableEvent from "./tableEvent"
|
|
|
export default {
|
|
|
name: "IndustryDataExport",
|
|
|
data() {
|
|
|
return {
|
|
|
quDao: [],
|
|
|
qingGan: [],
|
|
|
crisis: [],
|
|
|
value3: [],
|
|
|
gValue: 0,
|
|
|
selVal: 4,
|
|
|
selTime: [],
|
|
|
checkedIds: [],
|
|
|
form: {
|
|
|
action: "",
|
|
|
sType: "",
|
|
|
sStartTime: "",
|
|
|
sEndTime: "",
|
|
|
sQingGan: "",
|
|
|
sCrisis: "",
|
|
|
sTimeType: "",
|
|
|
iPageIndex: 1,
|
|
|
iPageSize: 20,
|
|
|
token: "",
|
|
|
sQuDao: "",
|
|
|
sBrand: "",
|
|
|
sSeriesName: "",
|
|
|
iTimeType: 0
|
|
|
},
|
|
|
modalObj: {
|
|
|
title: "导出选项",
|
|
|
visible: false,
|
|
|
},
|
|
|
btnTimes: [],
|
|
|
timesSel: [],
|
|
|
plainOptions: [],
|
|
|
plainOptions1: [],
|
|
|
plainOptions2: [],
|
|
|
plainOptions3: [],
|
|
|
plainOptions4: [],
|
|
|
columns: [
|
|
|
{
|
|
|
title: "标题及内容",
|
|
|
dataIndex: "title",
|
|
|
key: "title",
|
|
|
scopedSlots: { customRender: "titlex" },
|
|
|
},
|
|
|
{
|
|
|
title: "来源",
|
|
|
dataIndex: "source",
|
|
|
key: "source",
|
|
|
},
|
|
|
{
|
|
|
title: "作者",
|
|
|
dataIndex: "user_author",
|
|
|
key: "user_author",
|
|
|
},
|
|
|
{
|
|
|
title: "发布时间",
|
|
|
dataIndex: "sourcetime",
|
|
|
key: "sourcetime",
|
|
|
width: 200,
|
|
|
},
|
|
|
],
|
|
|
pagination: {
|
|
|
total: 0,
|
|
|
current: 1,
|
|
|
pageSize: 20,
|
|
|
},
|
|
|
tbData: [],
|
|
|
tableLoading: false,
|
|
|
noClick: false,
|
|
|
totalNum: 0,
|
|
|
rowSelection: null,
|
|
|
selectedRows: [],
|
|
|
selectedRowKeys: "",
|
|
|
secIds: [],
|
|
|
execlForm: {
|
|
|
action: "toExcel",
|
|
|
sFileName: "",
|
|
|
sCheckedIds: "",
|
|
|
iNum: "",
|
|
|
sField: ""
|
|
|
}
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
this.initDoc()
|
|
|
},
|
|
|
methods: {
|
|
|
...getApiData,
|
|
|
...tableEvent
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
.i-d-e-outter {
|
|
|
padding: 0px 16px 16px 16px;
|
|
|
}
|
|
|
.i-d-e-inner {
|
|
|
width: 100%;
|
|
|
height: 960px;
|
|
|
border: 2px solid #0f2a4d;
|
|
|
background: #091e36;
|
|
|
}
|
|
|
.ide-d1 {
|
|
|
width: 100%;
|
|
|
margin-top: 22px;
|
|
|
margin-left: 20px;
|
|
|
.ide-d1-dd1 {
|
|
|
display: flex;
|
|
|
justify-content: flex-start;
|
|
|
align-items: center;
|
|
|
.s1 {
|
|
|
font-size: 14px;
|
|
|
color: #fff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.ide-d2 {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
padding: 24px 20px 10px 20px;
|
|
|
align-items: flex-end;
|
|
|
.s1 {
|
|
|
color: #fff;
|
|
|
.ss1 {
|
|
|
color: #2d6cc2;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.epor {
|
|
|
width: 100%;
|
|
|
height: 80px;
|
|
|
.epor-btn {
|
|
|
width: 480px;
|
|
|
height: 80px;
|
|
|
background-image: url("../../assets/images/comm/img_bbut.png");
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: cover;
|
|
|
text-align: center;
|
|
|
line-height: 80px;
|
|
|
color: #63AECC;
|
|
|
font-size: 28px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
</style> |
