|
|
|
|
@ -1,341 +1,370 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="container">
|
|
|
|
|
<div class="tabs">
|
|
|
|
|
<div class="headerText">
|
|
|
|
|
<div class="searchP">查询条件</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="screen">
|
|
|
|
|
<div class="task-name">
|
|
|
|
|
<span class="task-name-text">产品名称：</span>
|
|
|
|
|
<div class="task-input">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="queryCondition.firmName"
|
|
|
|
|
placeholder="请输入内容"
|
|
|
|
|
></el-input>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="task-name">
|
|
|
|
|
<span class="task-name-text">备案编码：</span>
|
|
|
|
|
<div class="task-input">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="queryCondition.PrescriptionContent"
|
|
|
|
|
placeholder="请输入内容"
|
|
|
|
|
></el-input>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="task-name">
|
|
|
|
|
<span class="task-name-text">生产企业：</span>
|
|
|
|
|
<div class="task-input">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="queryCondition.majorFunction"
|
|
|
|
|
placeholder="请输入内容"
|
|
|
|
|
></el-input>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="footBox">
|
|
|
|
|
<el-button icon="el-icon-refresh-left">重置</el-button>
|
|
|
|
|
<el-button type="primary" icon="el-icon-search">查询</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="tabsBottom">
|
|
|
|
|
<div class="foot-main">
|
|
|
|
|
<div class="headerText">
|
|
|
|
|
<div class="searchP">产品列表</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="exportBtn">
|
|
|
|
|
<el-button type="primary" icon="el-icon-edit-outline">导出</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
<section class="table-box">
|
|
|
|
|
<div class="table-item">
|
|
|
|
|
<el-table
|
|
|
|
|
v-loading="loading"
|
|
|
|
|
:data="tableList"
|
|
|
|
|
border
|
|
|
|
|
:stripe="false"
|
|
|
|
|
>
|
|
|
|
|
<el-table-column type="selection" width="55" align="center" />
|
|
|
|
|
<el-table-column type="index" label="序号" width="55" />
|
|
|
|
|
|
|
|
|
|
<el-table-column label="产品名称" prop="name" />
|
|
|
|
|
<el-table-column label="产品类型" prop="type"> </el-table-column>
|
|
|
|
|
<div class="right-content">
|
|
|
|
|
<div class="tabs">
|
|
|
|
|
<el-tabs
|
|
|
|
|
v-model="activeName"
|
|
|
|
|
style="color: #edeef0"
|
|
|
|
|
>
|
|
|
|
|
<el-tab-pane label="查询条件" name="first">
|
|
|
|
|
<div class="screen">
|
|
|
|
|
<div class="task-name">
|
|
|
|
|
<span class="task-name-text">产品名称：</span>
|
|
|
|
|
<div class="task-input">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="queryCondition.fullTextSearch"
|
|
|
|
|
placeholder="请输入内容"
|
|
|
|
|
></el-input>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="task-name">
|
|
|
|
|
<span class="task-name-text">备案编码：</span>
|
|
|
|
|
<div class="task-input">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="queryCondition.firmName"
|
|
|
|
|
placeholder="请输入内容"
|
|
|
|
|
></el-input>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="task-name">
|
|
|
|
|
<span class="task-name-text">生产企业：</span>
|
|
|
|
|
<div class="task-input">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="queryCondition.approvalNumber"
|
|
|
|
|
placeholder="请输入内容"
|
|
|
|
|
></el-input>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<el-table-column label="批准文号" prop="num" />
|
|
|
|
|
<el-table-column label="企业名称" prop="enterpriseName">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
label="操作"
|
|
|
|
|
class-name="small-padding fixed-width"
|
|
|
|
|
width="150"
|
|
|
|
|
>
|
|
|
|
|
<template>
|
|
|
|
|
<el-button
|
|
|
|
|
size="mini"
|
|
|
|
|
plain
|
|
|
|
|
type="primary"
|
|
|
|
|
@click="toDetail()"
|
|
|
|
|
>详情</el-button
|
|
|
|
|
<div class="btn">
|
|
|
|
|
<el-button size="mini" icon="el-icon-refresh-left">重置</el-button>
|
|
|
|
|
<el-button size="mini" type="primary" icon="el-icon-search">查询</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
</el-tabs>
|
|
|
|
|
<div class="tabsTwo" :style="tabsTwoStyle">
|
|
|
|
|
<el-tabs
|
|
|
|
|
v-model="activeName"
|
|
|
|
|
style="color: #edeef0"
|
|
|
|
|
>
|
|
|
|
|
<el-tab-pane label="化妆品列表" name="first">
|
|
|
|
|
<div class="daochu">
|
|
|
|
|
<div class="btn">
|
|
|
|
|
导出
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mytable">
|
|
|
|
|
<el-table
|
|
|
|
|
ref="multipleTable"
|
|
|
|
|
:data="tableData"
|
|
|
|
|
tooltip-effect="dark"
|
|
|
|
|
border
|
|
|
|
|
style="width: 100%"
|
|
|
|
|
@selection-change="handleSelectionChange">
|
|
|
|
|
<el-table-column
|
|
|
|
|
type="selection"
|
|
|
|
|
header-align="center"
|
|
|
|
|
class-name="column-text-one"
|
|
|
|
|
width="44">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
label="序号"
|
|
|
|
|
width="50">
|
|
|
|
|
<template slot-scope="scope">{{ scope.row.date }}</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="name"
|
|
|
|
|
label="产品名称"
|
|
|
|
|
>
|
|
|
|
|
<el-button size="mini" plain type="warning">编辑</el-button>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
<div class="pagination">
|
|
|
|
|
<span class="custom">共100条，显示1条</span>
|
|
|
|
|
<el-pagination
|
|
|
|
|
background
|
|
|
|
|
@current-change="currentChange"
|
|
|
|
|
@size-change="sizeChange"
|
|
|
|
|
:page-sizes="[10, 5]"
|
|
|
|
|
layout=" prev, pager, next, sizes, jumper"
|
|
|
|
|
:total="querydata.total"
|
|
|
|
|
>
|
|
|
|
|
</el-pagination>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="firmName"
|
|
|
|
|
label="备案编码"
|
|
|
|
|
show-overflow-tooltip>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="firmName"
|
|
|
|
|
label="生产企业"
|
|
|
|
|
show-overflow-tooltip>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="address"
|
|
|
|
|
label="操作"
|
|
|
|
|
width="180"
|
|
|
|
|
>
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<div class="button">
|
|
|
|
|
<el-button
|
|
|
|
|
size="mini"
|
|
|
|
|
type="primary"
|
|
|
|
|
class="xiangqing"
|
|
|
|
|
plain
|
|
|
|
|
@click="handleEdit(scope.$index, scope.row)"
|
|
|
|
|
>详情</el-button
|
|
|
|
|
>
|
|
|
|
|
<el-button
|
|
|
|
|
size="mini"
|
|
|
|
|
type="primary"
|
|
|
|
|
class="bianji"
|
|
|
|
|
plain
|
|
|
|
|
@click="handleView(scope.$index, scope.row)"
|
|
|
|
|
>编辑</el-button
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<div class="pagination">
|
|
|
|
|
<!-- <span class="custom"
|
|
|
|
|
>共{{ total }}条，显示{{
|
|
|
|
|
total == 0
|
|
|
|
|
? "0"
|
|
|
|
|
: queryCondition.current == 1
|
|
|
|
|
? "1"
|
|
|
|
|
: queryCondition.size * (queryCondition.current - 1) + 1
|
|
|
|
|
}}-{{ numberMap() }}条</span
|
|
|
|
|
> -->
|
|
|
|
|
<span class="custom">
|
|
|
|
|
共100条，显示1-10条
|
|
|
|
|
</span>
|
|
|
|
|
<el-pagination
|
|
|
|
|
background
|
|
|
|
|
:page-sizes="[10, 15]"
|
|
|
|
|
:total="total"
|
|
|
|
|
layout=" prev, pager, next, sizes, jumper"
|
|
|
|
|
@current-change="currentChange"
|
|
|
|
|
@size-change="sizeChange"
|
|
|
|
|
:current-page.sync="currentPage"
|
|
|
|
|
:page-size.sync="pageSize"
|
|
|
|
|
>
|
|
|
|
|
</el-pagination>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
</el-tabs>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 药品 国抽详情 -->
|
|
|
|
|
<drugDetail ref="drugDetail"></drugDetail>
|
|
|
|
|
<!-- 化妆品-->
|
|
|
|
|
<samplingDetail ref="sampling"></samplingDetail>
|
|
|
|
|
<!-- 药品 省抽详情 -->
|
|
|
|
|
<drugProvince ref="drugProvince"></drugProvince>
|
|
|
|
|
<!-- 医疗器械详情 -->
|
|
|
|
|
<medical ref="medical"></medical>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import drugDetail from "../../cosmeticsFile/drugDetail";
|
|
|
|
|
import samplingDetail from "../../cosmeticsFile/samplingDetail";
|
|
|
|
|
import drugProvince from '../../cosmeticsFile/drugProvince';
|
|
|
|
|
import medical from '../../cosmeticsFile/medical'
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
components: {},
|
|
|
|
|
components: {
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
drugnum: "(20)",
|
|
|
|
|
drugnum:"(20)",
|
|
|
|
|
activeName: "first",
|
|
|
|
|
queryCondition: {
|
|
|
|
|
fullTextSearch: "", // 全文检索
|
|
|
|
|
firmName: "", // 企业名称
|
|
|
|
|
approvalNumber: "", // 批准文号
|
|
|
|
|
taskName: "", // 产品名称
|
|
|
|
|
PrescriptionContent: "", // 处方内容
|
|
|
|
|
majorFunction: "", // 功能主治
|
|
|
|
|
startTime: "", // 开始日期
|
|
|
|
|
endTime: "", // 结束日期
|
|
|
|
|
checkList: [],
|
|
|
|
|
checkListTwo: [],
|
|
|
|
|
queryCondition:{
|
|
|
|
|
fullTextSearch:"", // 全文检索
|
|
|
|
|
firmName:"", // 企业名称
|
|
|
|
|
approvalNumber:"", // 批准文号
|
|
|
|
|
taskName:"", // 产品名称
|
|
|
|
|
PrescriptionContent:"", // 处方内容
|
|
|
|
|
majorFunction:"", // 功能主治
|
|
|
|
|
startTime:"", // 开始日期
|
|
|
|
|
endTime:"", // 结束日期
|
|
|
|
|
checkList:[],
|
|
|
|
|
checkListTwo:[],
|
|
|
|
|
},
|
|
|
|
|
loading: false,
|
|
|
|
|
tableList: [
|
|
|
|
|
{
|
|
|
|
|
name: "辽宁护肤霜",
|
|
|
|
|
type: "化妆品",
|
|
|
|
|
num: "1231231231231",
|
|
|
|
|
enterpriseName: "xxxx有限公司",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "辽宁护肤霜",
|
|
|
|
|
type: "药品",
|
|
|
|
|
num: "1231231231231",
|
|
|
|
|
enterpriseName: "xxxx有限公司",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "辽宁护肤霜",
|
|
|
|
|
type: "医疗器械",
|
|
|
|
|
num: "1231231231231",
|
|
|
|
|
enterpriseName: "xxxx有限公司",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "辽宁护肤霜",
|
|
|
|
|
type: "化妆品",
|
|
|
|
|
num: "1231231231231",
|
|
|
|
|
enterpriseName: "xxxx有限公司",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "辽宁护肤霜",
|
|
|
|
|
type: "医疗器械",
|
|
|
|
|
num: "1231231231231",
|
|
|
|
|
enterpriseName: "xxxx有限公司",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "辽宁护肤霜",
|
|
|
|
|
type: "化妆品",
|
|
|
|
|
num: "1231231231231",
|
|
|
|
|
enterpriseName: "xxxx有限公司",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "辽宁护肤霜",
|
|
|
|
|
type: "医疗器械",
|
|
|
|
|
num: "1231231231231",
|
|
|
|
|
enterpriseName: "xxxx有限公司",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "辽宁护肤霜",
|
|
|
|
|
type: "化妆品",
|
|
|
|
|
num: "1231231231231",
|
|
|
|
|
enterpriseName: "xxxx有限公司",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "辽宁护肤霜",
|
|
|
|
|
type: "医疗器械",
|
|
|
|
|
num: "1231231231231",
|
|
|
|
|
enterpriseName: "xxxx有限公司",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "辽宁护肤霜",
|
|
|
|
|
type: "化妆品",
|
|
|
|
|
num: "1231231231231",
|
|
|
|
|
enterpriseName: "xxxx有限公司",
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
querydata: {
|
|
|
|
|
total: 11,
|
|
|
|
|
tableData: [{
|
|
|
|
|
date: '1',
|
|
|
|
|
name: '辽-xxxx',
|
|
|
|
|
type:"药品",
|
|
|
|
|
approvalNumber:"12421432143214321",
|
|
|
|
|
firmName:"XXX有限公司",
|
|
|
|
|
}, {
|
|
|
|
|
date: '2',
|
|
|
|
|
name: '辽-aaaa',
|
|
|
|
|
type:"医疗器械",
|
|
|
|
|
approvalNumber:"12421432143214321",
|
|
|
|
|
firmName:"XXX有限公司",
|
|
|
|
|
}, {
|
|
|
|
|
date: '3',
|
|
|
|
|
name: '辽-zzzz',
|
|
|
|
|
type:"化妆品",
|
|
|
|
|
approvalNumber:"12421432143214321",
|
|
|
|
|
firmName:"XXX有限公司",
|
|
|
|
|
}, {
|
|
|
|
|
date: '4',
|
|
|
|
|
name: '辽-qqqq',
|
|
|
|
|
type:"药品",
|
|
|
|
|
approvalNumber:"12421432143214321",
|
|
|
|
|
firmName:"XXX有限公司",
|
|
|
|
|
}, {
|
|
|
|
|
date: '5',
|
|
|
|
|
name: '辽-xxxx',
|
|
|
|
|
type:"医疗器械",
|
|
|
|
|
approvalNumber:"12421432143214321",
|
|
|
|
|
firmName:"XXX有限公司",
|
|
|
|
|
}, {
|
|
|
|
|
date: '6',
|
|
|
|
|
name: '辽-aaaa',
|
|
|
|
|
type:"化妆品",
|
|
|
|
|
approvalNumber:"12421432143214321",
|
|
|
|
|
firmName:"XXX有限公司",
|
|
|
|
|
}, {
|
|
|
|
|
date: '7',
|
|
|
|
|
name: '辽-zzzz',
|
|
|
|
|
type:"药品",
|
|
|
|
|
approvalNumber:"12421432143214321",
|
|
|
|
|
firmName:"XXX有限公司",
|
|
|
|
|
}, {
|
|
|
|
|
date: '8',
|
|
|
|
|
name: '辽-qqqq',
|
|
|
|
|
type:"医疗器械",
|
|
|
|
|
approvalNumber:"12421432143214321",
|
|
|
|
|
firmName:"XXX有限公司",
|
|
|
|
|
}, {
|
|
|
|
|
date: '9',
|
|
|
|
|
name: '辽-xxxx',
|
|
|
|
|
type:"化妆品",
|
|
|
|
|
approvalNumber:"12421432143214321",
|
|
|
|
|
firmName:"XXX有限公司",
|
|
|
|
|
}, {
|
|
|
|
|
date: '10',
|
|
|
|
|
name: '辽-aaaa',
|
|
|
|
|
type:"药品",
|
|
|
|
|
approvalNumber:"12421432143214321",
|
|
|
|
|
firmName:"XXX有限公司",
|
|
|
|
|
}],
|
|
|
|
|
tabsTwoStyle:{
|
|
|
|
|
height:''
|
|
|
|
|
},
|
|
|
|
|
multipleSelection:[],
|
|
|
|
|
total:100,
|
|
|
|
|
currentPage:1,
|
|
|
|
|
pageSize:10,
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
components: {
|
|
|
|
|
samplingDetail,
|
|
|
|
|
drugDetail,
|
|
|
|
|
drugProvince,
|
|
|
|
|
medical
|
|
|
|
|
mounted() {
|
|
|
|
|
document.getElementsByClassName(
|
|
|
|
|
"el-pagination__jump"
|
|
|
|
|
)[0].childNodes[0].nodeValue = "跳至";
|
|
|
|
|
this.$nextTick(()=>{
|
|
|
|
|
let dom = document.getElementsByClassName('tabsTwo');
|
|
|
|
|
let height = dom[0].getBoundingClientRect();
|
|
|
|
|
// let windowWidth = window.innerWidth;
|
|
|
|
|
let windowHeight = window.innerHeight;
|
|
|
|
|
let relativeHeight = windowHeight - height.top
|
|
|
|
|
this.tabsTwoStyle.height = relativeHeight + 'px'
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
mounted() {},
|
|
|
|
|
methods: {
|
|
|
|
|
currentChange() {},
|
|
|
|
|
sizeChange() {},
|
|
|
|
|
toDetail() {
|
|
|
|
|
this.$router.push({
|
|
|
|
|
name: "化妆品详情",
|
|
|
|
|
path: "/productsMsg/cosmeticsDetail",
|
|
|
|
|
});
|
|
|
|
|
// this.$refs.sampling.open()
|
|
|
|
|
// this.$refs.drugDetail.open();
|
|
|
|
|
// this.$refs.drugProvince.open();
|
|
|
|
|
// this.$refs.medical.open();
|
|
|
|
|
handleSelectionChange(val){
|
|
|
|
|
this.multipleSelection = val;
|
|
|
|
|
},
|
|
|
|
|
currentChange(val){
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
sizeChange(val){
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
// 详情
|
|
|
|
|
handleEdit(index,row){
|
|
|
|
|
console.log(index)
|
|
|
|
|
this.$router.push({name:'productInfo'})
|
|
|
|
|
},
|
|
|
|
|
// 编辑
|
|
|
|
|
handleView(index,row){
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
::v-deep .el-table--medium .el-table__cell {
|
|
|
|
|
padding: 4px 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.container {
|
|
|
|
|
height: 100%;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
background: #f2f2f2;
|
|
|
|
|
|
|
|
|
|
.headerText {
|
|
|
|
|
width: 100%;
|
|
|
|
|
padding: 10px 20px;
|
|
|
|
|
border-bottom: 1px solid #f2f3f5;
|
|
|
|
|
color: #323233;
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
.searchP {
|
|
|
|
|
position: relative;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
&::before {
|
|
|
|
|
content: "";
|
|
|
|
|
width: 78px;
|
|
|
|
|
height: 3px;
|
|
|
|
|
background: #1349c5;
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: -10px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// padding: 10px;
|
|
|
|
|
& > div {
|
|
|
|
|
flex: 1;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
.tabs {
|
|
|
|
|
height: 25%;
|
|
|
|
|
background: rgba(255, 255, 255, 0.9);
|
|
|
|
|
box-shadow: 0px 0px 12px 0px rgba(194, 212, 226, 0.64);
|
|
|
|
|
border-radius: vw(10);
|
|
|
|
|
padding-bottom: 20px;
|
|
|
|
|
// min-height: 90vh;
|
|
|
|
|
// padding-top: 3px;
|
|
|
|
|
// padding-left: 15px;
|
|
|
|
|
& > div:nth-child(2) {
|
|
|
|
|
flex: 2;
|
|
|
|
|
margin: 0 10px;
|
|
|
|
|
}
|
|
|
|
|
.middle {
|
|
|
|
|
height: 100%;
|
|
|
|
|
background: #ffff;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
.screen {
|
|
|
|
|
padding: 15px 0 26px 28px;
|
|
|
|
|
.left,
|
|
|
|
|
.right {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: center;
|
|
|
|
|
.task-name {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-right: 30px;
|
|
|
|
|
.task-name-text {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
font-family: Source Han Sans CN;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color: #6a6c6f;
|
|
|
|
|
line-height: 50px;
|
|
|
|
|
// margin-right: vw(10);
|
|
|
|
|
& > div {
|
|
|
|
|
width: 100%;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
flex: 1;
|
|
|
|
|
background: #ffffff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.right-content {
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
::v-deep .el-tabs__header{
|
|
|
|
|
margin: 0;
|
|
|
|
|
.el-tabs__nav-scroll {
|
|
|
|
|
padding-left: 15px;
|
|
|
|
|
padding-top: 3px;
|
|
|
|
|
}
|
|
|
|
|
.task-input {
|
|
|
|
|
width: 251px;
|
|
|
|
|
height: 32px;
|
|
|
|
|
::v-deep .el-input {
|
|
|
|
|
width: 251px;
|
|
|
|
|
height: 32px;
|
|
|
|
|
}
|
|
|
|
|
::v-deep .el-input__inner {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
font-family: Source Han Sans CN;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
// color: #B1B6BF;
|
|
|
|
|
line-height: 50px;
|
|
|
|
|
padding-left: 15px;
|
|
|
|
|
}
|
|
|
|
|
.el-tabs__item {
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
font-family: Source Han Sans SC-Bold, Source Han Sans SC;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: #323233;
|
|
|
|
|
}
|
|
|
|
|
.el-tabs__active-bar {
|
|
|
|
|
background-color: #1349C5;
|
|
|
|
|
height: 2px;
|
|
|
|
|
border-radius: 0px 0px 0px 0px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.checkbox-group-name {
|
|
|
|
|
width: 695px;
|
|
|
|
|
.tabs {
|
|
|
|
|
background: #F2F2F2 ;
|
|
|
|
|
box-shadow: 0px 0px 12px 0px rgba(194, 212, 226, 0.64);
|
|
|
|
|
border-radius: vw(10);
|
|
|
|
|
min-height: 88vh;
|
|
|
|
|
// padding-top: 3px;
|
|
|
|
|
// padding-left: 15px;
|
|
|
|
|
::v-deep .el-tabs {
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.time-interval {
|
|
|
|
|
.screen {
|
|
|
|
|
padding: 15px 0 26px 28px;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-right: 20px;
|
|
|
|
|
.interval-text {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
font-family: Source Han Sans CN;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color: #6a6c6f;
|
|
|
|
|
// line-height: 50px;
|
|
|
|
|
// margin-right: vw(10);
|
|
|
|
|
}
|
|
|
|
|
.interval-select {
|
|
|
|
|
.task-name {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
border: 1px solid #dbe0e8;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
height: 32px;
|
|
|
|
|
.star-time,
|
|
|
|
|
.end-time {
|
|
|
|
|
position: relative;
|
|
|
|
|
.data_icon {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 50%;
|
|
|
|
|
right: 17px;
|
|
|
|
|
z-index: 9;
|
|
|
|
|
color: #c0c4cc;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
transform: translateY(-50%);
|
|
|
|
|
}
|
|
|
|
|
::v-deep .el-input__prefix {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
margin-right: 30px;
|
|
|
|
|
.task-name-text {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
font-family: Source Han Sans CN;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color: #6a6c6f;
|
|
|
|
|
line-height: 50px;
|
|
|
|
|
// margin-right: vw(10);
|
|
|
|
|
}
|
|
|
|
|
.task-input {
|
|
|
|
|
width: 251px;
|
|
|
|
|
height: 32px;
|
|
|
|
|
::v-deep .el-input {
|
|
|
|
|
width: 243px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
width: 251px;
|
|
|
|
|
height: 32px;
|
|
|
|
|
}
|
|
|
|
|
::v-deep .el-input__inner {
|
|
|
|
|
width: 100%;
|
|
|
|
|
@ -344,59 +373,182 @@ export default {
|
|
|
|
|
font-family: Source Han Sans CN;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
// color: #B1B6BF;
|
|
|
|
|
line-height: 30px;
|
|
|
|
|
line-height: 50px;
|
|
|
|
|
padding-left: 15px;
|
|
|
|
|
border: none;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.symbol {
|
|
|
|
|
background: rgba(219, 224, 232, 0.5);
|
|
|
|
|
width: 40px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
}
|
|
|
|
|
.checkbox-group-name {
|
|
|
|
|
width: 695px;
|
|
|
|
|
}
|
|
|
|
|
.btn{
|
|
|
|
|
width: 100%;
|
|
|
|
|
// padding-left: 600px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
margin-top:15px;
|
|
|
|
|
}
|
|
|
|
|
.time-interval {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-right: 20px;
|
|
|
|
|
.interval-text {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
font-family: Source Han Sans CN;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color: #6a6c6f;
|
|
|
|
|
// line-height: 50px;
|
|
|
|
|
// margin-right: vw(10);
|
|
|
|
|
}
|
|
|
|
|
.interval-select {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
border: 1px solid #dbe0e8;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
height: 32px;
|
|
|
|
|
.star-time,
|
|
|
|
|
.end-time {
|
|
|
|
|
position: relative;
|
|
|
|
|
.data_icon {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 50%;
|
|
|
|
|
right: 17px;
|
|
|
|
|
z-index: 9;
|
|
|
|
|
color: #c0c4cc;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
transform: translateY(-50%);
|
|
|
|
|
}
|
|
|
|
|
::v-deep .el-input__prefix {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
::v-deep .el-input {
|
|
|
|
|
width: 243px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
}
|
|
|
|
|
::v-deep .el-input__inner {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
font-family: Source Han Sans CN;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
// color: #B1B6BF;
|
|
|
|
|
line-height: 30px;
|
|
|
|
|
padding-left: 15px;
|
|
|
|
|
border: none;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.symbol {
|
|
|
|
|
background: rgba(219, 224, 232, 0.5);
|
|
|
|
|
width: 40px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
font-family: Source Han Sans CN;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color: #292f38;
|
|
|
|
|
line-height: 28px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.tabsTwo {
|
|
|
|
|
margin: 10px 0;
|
|
|
|
|
overflow-y: scroll;
|
|
|
|
|
// padding: 10px 0;
|
|
|
|
|
padding-bottom: 20px;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
.daochu {
|
|
|
|
|
padding: 10px;
|
|
|
|
|
.btn {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
font-family: Source Han Sans CN;
|
|
|
|
|
width: 64px;
|
|
|
|
|
height: 32px;
|
|
|
|
|
background: #1E80EB;
|
|
|
|
|
border-radius: 4px 4px 4px 4px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-family: MicrosoftYaHei-, MicrosoftYaHei;
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
line-height: 31px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.mytable {
|
|
|
|
|
width: 99%;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
::v-deep .column-text-one {
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
::v-deep .el-table td {
|
|
|
|
|
height: 40px;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
::v-deep .el-table th {
|
|
|
|
|
height: 40px;
|
|
|
|
|
padding: 0;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-family: Source Han Sans SC-Medium, Source Han Sans SC;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: #292f38;
|
|
|
|
|
line-height: 36px;
|
|
|
|
|
}
|
|
|
|
|
.button {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
.xiangqing {
|
|
|
|
|
height: 23px;
|
|
|
|
|
padding: 3px;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
line-height: 20px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
background: #EBF5FF;
|
|
|
|
|
border: 1px solid #A1CBF8;
|
|
|
|
|
::v-deep span {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
color: #0E7CF4;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.bianji {
|
|
|
|
|
height: 23px;
|
|
|
|
|
padding: 3px;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
line-height: 20px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
background: #FFEFE3;
|
|
|
|
|
border: 1px solid #FFC89F;
|
|
|
|
|
::v-deep span {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
color: #F88129;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.pagination {
|
|
|
|
|
margin-top: 17px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
// padding-bottom: vh(20);
|
|
|
|
|
::v-deep .el-pagination__jump {
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
.custom {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color: #292f38;
|
|
|
|
|
line-height: 28px;
|
|
|
|
|
line-height: 18px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.tabsTwo::-webkit-scrollbar {display:none}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
//===================
|
|
|
|
|
::v-deep .el-button--medium {
|
|
|
|
|
padding: 8px;
|
|
|
|
|
}
|
|
|
|
|
.footBox {
|
|
|
|
|
width: 100%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
.tabsBottom {
|
|
|
|
|
height: 75%;
|
|
|
|
|
padding-top: 10px;
|
|
|
|
|
.foot-main {
|
|
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
background: white;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.exportBtn {
|
|
|
|
|
padding: 10px 20px;
|
|
|
|
|
}
|
|
|
|
|
.table-box {
|
|
|
|
|
padding: 0 20px;
|
|
|
|
|
.table-item {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.pagination {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
padding: 0 20px;
|
|
|
|
|
padding-top: 20px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
