suzhou-jichuang-lanhai
/
suzhouyingjiPC
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

改样式

Browse Source
lijinlong
杜函宇 1 year ago
parent 9d8ce4c09f
commit 81b8397e47
6 changed files with 751 additions and 278 deletions
Show Stats Download Patch File Download Diff File

20
src/layout/newyjLayout.vue
Unescape View File

@ -79,9 +79,15 @@ export default {
icon1: require("../assets/images/zhifa.png"), icon1: require("../assets/images/zhifa.png"),
icon2: require("../assets/images/zhifa-change.png"), icon2: require("../assets/images/zhifa-change.png"),
}, },
// {
// path: "/enterprise",
// name: "企业名录",
// icon1: require("../assets/images/qiye.png"),
// icon2: require("../assets/images/qiye-change.png"),
// },
{ {
path: "/enterprise", path: "/focusEnter",
name: "企业名录", name: "省重点企业",
icon1: require("../assets/images/qiye.png"), icon1: require("../assets/images/qiye.png"),
icon2: require("../assets/images/qiye-change.png"), icon2: require("../assets/images/qiye-change.png"),
}, },
@ -89,12 +95,12 @@ export default {
}; };
}, },
watch: { watch: {
$route:{ $route: {
handler(newRouter,oldRouter){ handler(newRouter, oldRouter) {
this.routerIndex = newRouter.meta.index this.routerIndex = newRouter.meta.index;
}, },
immediate: true, immediate: true,
} },
}, },
methods: { methods: {
changePath(e, item) { changePath(e, item) {
@ -104,7 +110,7 @@ export default {
this.avatarFlag = e; this.avatarFlag = e;
}, },
//退出登录 //退出登录
logout() { logout() {
this.$confirm("确定注销并退出系统吗？", "提示", { this.$confirm("确定注销并退出系统吗？", "提示", {
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",

12
src/router/index.js
Unescape View File

@ -96,10 +96,16 @@ export const constantRoutes = [
name: "enforcing", name: "enforcing",
meta:{index:2} meta:{index:2}
}, },
// {
// path: "/enterprise",
// component: () => import("@/views/yingji/enterprise.vue"),
// name: "enterprise",
// meta:{index:3}
// },
{ {
path: "/enterprise", path: "/focusEnter",
component: () => import("@/views/yingji/enterprise.vue"), component: () => import("@/views/yingji/focusEnter.vue"),
name: "enterprise", name: "focusEnter",
meta:{index:3} meta:{index:3}
}, },

625
src/views/components/dialog/index.vue
Unescape View File

@ -8,265 +8,345 @@
custom-class="dialog-boxed" custom-class="dialog-boxed"
width="70%" width="70%"
> >
<div class="dialog-slot"> <div class="dialog-slot">
<div class="closeClick"> <div class="closeClick">
<div class="newplan"> <div class="newplan">
<div class="line"></div> <div class="line"></div>
<div class="span">新增计划</div> <div class="span">新增计划</div>
</div>
<img src="@/assets/images/close.png" alt="" @click="Close">
</div>
<div class="content">
<div class="module">
<div class="select" :class="nextStep ? '':'nextStepSelect'">
<span class="span-one">Ⅰ</span>
<span>选择企业</span>
</div>
<div class="issue" :class="nextStep ? 'nextStepIssue':''">
<span class="span-one">Ⅱ</span>
<span>发布计划</span>
</div> </div>
<img src="@/assets/images/close.png" alt="" @click="Close" />
</div> </div>
<div v-if="!nextStep"> <div class="content">
<div class="filtrate"> <div class="module">
<div class="select-input"> <div class="select" :class="nextStep ? '' : 'nextStepSelect'">
<div class="select-span">行政区划:</div> <span class="span-one">Ⅰ</span>
<el-select v-model="form.compartment" placeholder="请选择"> <span>选择企业</span>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div> </div>
<div class="select-input"> <div class="issue" :class="nextStep ? 'nextStepIssue' : ''">
<div class="select-span">企业类型:</div> <span class="span-one">Ⅱ</span>
<el-select v-model="form.frimType" placeholder="请选择"> <span>发布计划</span>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div> </div>
<div class="select-input"> </div>
<div class="select-span">经济类型:</div> <div v-if="!nextStep">
<el-select v-model="form.economicsType" placeholder="请选择"> <div class="filtrate">
<el-option <div class="select-input">
v-for="item in options" <div class="select-span">行政区划:</div>
:key="item.value" <el-select v-model="form.compartment" placeholder="请选择">
:label="item.label" <el-option
:value="item.value"> v-for="item in options"
</el-option> :key="item.value"
</el-select> :label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="select-input">
<div class="select-span">企业类型:</div>
<el-select v-model="form.frimType" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="select-input">
<div class="select-span">经济类型:</div>
<el-select v-model="form.economicsType" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="select-input">
<div class="select-span">行业类型:</div>
<el-select v-model="form.industryType" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="select-input">
<div class="select-span">重大危险源等级:</div>
<el-select v-model="form.riskGrade" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="select-input">
<div class="select-span">企业分色:</div>
<el-select v-model="form.frimColor" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="input-input">
<el-input
v-model="form.frimName"
placeholder="请输入企业名称/统一信用代码"
></el-input>
</div>
<div class="select-btn">搜索</div>
<div class="select-btn select-btn1">导入</div>
</div> </div>
<div class="select-input"> <div class="tables">
<div class="select-span">行业类型:</div> <el-table
<el-select v-model="form.industryType" placeholder="请选择"> :data="tableData"
<el-option style="width: 100%"
v-for="item in options" :border="false"
:key="item.value" @selection-change="handleSelectionChange"
:label="item.label" :row-class-name="tableRowClassName"
:value="item.value"> >
</el-option> <el-table-column
</el-select> type="selection"
width="55"
header-align="center"
>
</el-table-column>
<el-table-column
prop="date"
label="企业名称"
header-align="center"
>
</el-table-column>
<el-table-column
prop="name"
label="行政区划"
width="180"
header-align="center"
>
</el-table-column>
<el-table-column
prop="address"
label="企业类型"
header-align="center"
>
</el-table-column>
<el-table-column
prop="address"
label="统一社会信用代码"
header-align="center"
>
</el-table-column>
<el-table-column prop="is" label="是否重点" header-align="center">
<template slot-scope="scope">
<div
style="font-family: 'Alibaba PuHuiTi'"
@click="checkBox(scope.row)"
:class="scope.row.is == 1 ? 'isStyle' : ''"
>
<span v-if="scope.row.is == 1">是</span>
<span v-if="scope.row.is == 2">否</span>
</div>
</template>
</el-table-column>
<el-table-column prop="is" label="选择" header-align="center">
<template slot-scope="scope">
<div class="look" @click="chec(scope.row)">
<el-checkbox v-model="scope.row.is"></el-checkbox>
</div>
</template>
</el-table-column>
</el-table>
</div> </div>
<div class="select-input"> <div class="pagination">
<div class="select-span">重大危险源等级:</div> <my-pagination
<el-select v-model="form.riskGrade" placeholder="请选择"> :total="28"
<el-option @pagesChange="pagesChange"
v-for="item in options" ></my-pagination>
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div> </div>
<div class="select-input"> </div>
<div class="select-span">企业分色:</div> <div v-else class="release-planning">
<el-select v-model="form.frimColor" placeholder="请选择"> <div class="inputs centered">
<div class="inputs-span">计划年份:</div>
<el-select v-model="form2.year" placeholder="请选择">
<el-option <el-option
v-for="item in options" v-for="item in options"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value"
>
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
<div class="input-input"> <div class="inputs centered">
<el-input v-model="form.frimName" placeholder="请输入企业名称/统一信用代码"></el-input> <div class="inputs-span">计划标题:</div>
<div class="input">
<el-input
v-model="form2.title"
:maxlength="50"
placeholder="请输入计划标题"
></el-input>
</div>
</div> </div>
<div class="select-btn">搜索</div> <div class="inputs">
</div> <div class="inputs-span">计划内容:</div>
<div class="tables"> <div class="input">
<el-table <el-input
:data="tableData" v-model="form2.content"
style="width: 100%" type="textarea"
:border="false" resize="none"
@selection-change="handleSelectionChange" placeholder="请输入计划内容"
:row-class-name="tableRowClassName" ></el-input>
> </div>
<el-table-column
type="selection"
width="55"
header-align="center"
>
</el-table-column>
<el-table-column
prop="date"
label="企业名称"
width="180"
header-align="center"
>
</el-table-column>
<el-table-column
prop="name"
label="行政区划"
width="180"
header-align="center"
>
</el-table-column>
<el-table-column
prop="address"
label="企业类型"
header-align="center"
>
</el-table-column>
<el-table-column
prop="address"
label="统一社会信用代码"
header-align="center"
>
</el-table-column>
</el-table>
</div>
<div class="pagination">
<my-pagination :total="28" @pagesChange="pagesChange"></my-pagination>
</div>
</div>
<div v-else="nextStep" class="release-planning">
<div class="inputs centered">
<div class="inputs-span">计划年份:</div>
<el-select v-model="form2.year" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<div class="inputs centered">
<div class="inputs-span">计划标题:</div>
<div class="input">
<el-input v-model="form2.title" :maxlength="50" placeholder="请输入计划标题"></el-input>
</div> </div>
</div> <div class="inputs">
<div class="inputs"> <div class="inputs-span">备注:</div>
<div class="inputs-span">计划内容:</div> <div class="input">
<div class="input"> <el-input
<el-input v-model="form2.content" type="textarea" resize="none" placeholder="请输入计划内容"></el-input> v-model="form2.remark"
type="textarea"
resize="none"
placeholder="请输入备注"
></el-input>
</div>
</div> </div>
</div> </div>
<div class="inputs"> <div class="next">
<div class="inputs-span">备注:</div> <div class="selected">
<div class="input"> 已选择<span>{{ selected }}</span
<el-input v-model="form2.remark" type="textarea" resize="none" placeholder="请输入备注"></el-input> >家企业
</div>
<div
class="btn"
:class="nextStep ? 'selectBtn' : ''"
@click="next"
ref="next"
>
{{ nextText }}
</div> </div>
</div> </div>
</div> </div>
<div class="next">
<div class="selected">已选择<span>{{ selected }}</span>家企业</div>
<div class="btn" :class="nextStep ? 'selectBtn':''" @click="next" ref="next">{{ nextText }}</div>
</div>
</div> </div>
</div>
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
import myPagination from "@/views/components/myPagination/index.vue" import myPagination from "@/views/components/myPagination/index.vue";
export default { export default {
components:{myPagination}, components: { myPagination },
data() { data() {
return { return {
dialogVisible:false, dialogVisible: false,
tableData: [{ tableData: [
date: '2016-05-03', {
name: '王小虎', date: "2016-05-03",
address: '上海市普陀区金沙江路 1518 弄' name: "王小虎",
}, { address: "上海市普陀区金沙江路 1518 弄",
date: '2016-05-02', is: 1,
name: '王小虎', },
address: '上海市普陀区金沙江路 1518 弄' {
}, { date: "2016-05-02",
date: '2016-05-04', name: "王小虎",
name: '王小虎', address: "上海市普陀区金沙江路 1518 弄",
address: '上海市普陀区金沙江路 1518 弄' is: 1,
}, { },
date: '2016-05-01', {
name: '王小虎', date: "2016-05-04",
address: '上海市普陀区金沙江路 1518 弄' name: "王小虎",
}, { address: "上海市普陀区金沙江路 1518 弄",
date: '2016-05-08', is: 1,
name: '王小虎', },
address: '上海市普陀区金沙江路 1518 弄' {
}, { date: "2016-05-01",
date: '2016-05-06', name: "王小虎",
name: '王小虎', address: "上海市普陀区金沙江路 1518 弄",
address: '上海市普陀区金沙江路 1518 弄' is: 1,
}, { },
date: '2016-05-07', {
name: '王小虎', date: "2016-05-08",
address: '上海市普陀区金沙江路 1518 弄' name: "王小虎",
}, { address: "上海市普陀区金沙江路 1518 弄",
date: '2016-05-08', is: 2,
name: '王小虎', },
address: '上海市普陀区金沙江路 1518 弄' {
}, { date: "2016-05-06",
date: '2016-05-06', name: "王小虎",
name: '王小虎', address: "上海市普陀区金沙江路 1518 弄",
address: '上海市普陀区金沙江路 1518 弄' is: 2,
}, { },
date: '2016-05-07', {
name: '王小虎', date: "2016-05-07",
address: '上海市普陀区金沙江路 1518 弄' name: "王小虎",
}], is: 2,
options:[], address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-08",
name: "王小虎",
is: 2,
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-06",
name: "王小虎",
is: 2,
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-07",
name: "王小虎",
is: 2,
address: "上海市普陀区金沙江路 1518 弄",
},
],
options: [],
multipleSelection: [], multipleSelection: [],
selected:0, selected: 0,
nextStep:false, nextStep: false,
nextText:'下一步', nextText: "下一步",
form:{ form: {
compartment:'', compartment: "",
frimType:'', frimType: "",
economicsType:'', economicsType: "",
industryType:'', industryType: "",
riskGrade:'', riskGrade: "",
frimColor:'', frimColor: "",
frimName:'', frimName: "",
}, },
form2:{ form2: {
year:'', year: "",
title:'', title: "",
content:'', content: "",
remark:'', remark: "",
} },
} };
}, },
methods:{ methods: {
open(){ checkBox(e){
},
open() {
this.dialogVisible = true; this.dialogVisible = true;
}, },
Close(){ Close() {
this.dialogVisible = false; this.dialogVisible = false;
this.nextStep = false; this.nextStep = false;
this.nextText = '下一步'; this.nextText = "下一步";
}, },
// 页码，当前页切换事件 // 页码，当前页切换事件
pagesChange(pages){ pagesChange(pages) {
console.log(pages) console.log(pages);
}, },
// 选中的数据 // 选中的数据
handleSelectionChange(val) { handleSelectionChange(val) {
@ -274,25 +354,28 @@ export default {
this.selected = this.multipleSelection.length; this.selected = this.multipleSelection.length;
}, },
// 下一步 // 下一步
next(){ next() {
if(this.$refs.next.innerText == '下一步') { if (this.$refs.next.innerText == "下一步") {
this.nextStep = true; this.nextStep = true;
this.nextText = '发布计划' this.nextText = "发布计划";
} else { } else {
console.log(form2) console.log(form2);
// console.log('该发布计划了') // console.log('该发布计划了')
} }
}, },
tableRowClassName({row, rowIndex}) { tableRowClassName({ row, rowIndex }) {
if (rowIndex % 2 !== 0) { if (rowIndex % 2 !== 0) {
return 'success-row'; return "success-row";
} }
return ''; return "";
} },
}, },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.isStyle {
color: #f71052;
}
.dialog-slot { .dialog-slot {
.closeClick { .closeClick {
position: absolute; position: absolute;
@ -307,7 +390,7 @@ export default {
text-align: center; text-align: center;
background: #f8f9fa; background: #f8f9fa;
box-shadow: 0px 1px 0px 0px #dbe0e8; box-shadow: 0px 1px 0px 0px #dbe0e8;
background-color: #E0EAF8; background-color: #e0eaf8;
img { img {
width: 18px; width: 18px;
height: 18px; height: 18px;
@ -320,13 +403,13 @@ export default {
margin-right: 10px; margin-right: 10px;
width: 5px; width: 5px;
height: 16px; height: 16px;
background-color: #1E70DE; background-color: #1e70de;
} }
.span { .span {
font-size: 16px; font-size: 16px;
font-family: 'Alibaba PuHuiTi'; font-family: "Alibaba PuHuiTi";
font-weight: bold; font-weight: bold;
color: #1E70DE; color: #1e70de;
} }
} }
} }
@ -335,8 +418,9 @@ export default {
.module { .module {
padding-bottom: 15px; padding-bottom: 15px;
display: flex; display: flex;
border-bottom: 1px solid #E8ECF0; border-bottom: 1px solid #e8ecf0;
.select,.issue { .select,
.issue {
width: 150px; width: 150px;
height: 30px; height: 30px;
display: flex; display: flex;
@ -346,7 +430,7 @@ export default {
color: #525966; color: #525966;
span { span {
font-size: 15px; font-size: 15px;
font-family: 'Alibaba PuHuiTi'; font-family: "Alibaba PuHuiTi";
font-weight: 400; font-weight: 400;
} }
.span-one { .span-one {
@ -354,24 +438,24 @@ export default {
} }
} }
.select { .select {
background-image: url('../../../assets/images/select2.png'); background-image: url("../../../assets/images/select2.png");
background-size: 100% 100%; background-size: 100% 100%;
margin-right: 10px; margin-right: 10px;
} }
.issue { .issue {
background-image: url('../../../assets/images/issue2.png'); background-image: url("../../../assets/images/issue2.png");
background-size: 100% 100%; background-size: 100% 100%;
} }
.nextStepSelect { .nextStepSelect {
background-image: url('../../../assets/images/select1.png'); background-image: url("../../../assets/images/select1.png");
span { span {
color: #2378EC; color: #2378ec;
} }
} }
.nextStepIssue { .nextStepIssue {
background-image: url('../../../assets/images/issue1.png'); background-image: url("../../../assets/images/issue1.png");
span { span {
color: #2378EC; color: #2378ec;
} }
} }
} }
@ -388,7 +472,7 @@ export default {
align-items: center; align-items: center;
.select-span { .select-span {
font-size: 13px; font-size: 13px;
font-family: 'Alibaba PuHuiTi'; font-family: "Alibaba PuHuiTi";
font-weight: 400; font-weight: 400;
color: #525966; color: #525966;
line-height: 40px; line-height: 40px;
@ -401,9 +485,13 @@ export default {
height: 33px; height: 33px;
} }
// border-radius: 2px; // border-radius: 2px;
.el-input .el-input__suffix .el-input__suffix-inner .el-icon-arrow-up::before { .el-input
.el-input__suffix
.el-input__suffix-inner
.el-icon-arrow-up::before {
content: ""; content: "";
background: url(../../../assets/images/down2.png) center center no-repeat; background: url(../../../assets/images/down2.png) center center
no-repeat;
background-size: cover; background-size: cover;
position: absolute; position: absolute;
width: 10px; width: 10px;
@ -425,9 +513,9 @@ export default {
} }
.select-btn { .select-btn {
margin: 20px 0 0 0; margin: 20px 0 0 0;
width: 140px; width: 80px;
height: 33px; height: 33px;
background: #2378EC; background: #2378ec;
border-radius: 2px; border-radius: 2px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -435,12 +523,15 @@ export default {
font-size: 15px; font-size: 15px;
font-family: Alibaba PuHuiTi; font-family: Alibaba PuHuiTi;
font-weight: 500; font-weight: 500;
color: #FFFFFF; color: #ffffff;
cursor: pointer; cursor: pointer;
} }
.select-btn1 {
background: #28b384;
}
} }
.tables { .tables {
background-color: #EAF2FD; background-color: #eaf2fd;
::v-deep .el-table { ::v-deep .el-table {
.success-row { .success-row {
background-color: rgba(234, 242, 253, 0.25); background-color: rgba(234, 242, 253, 0.25);
@ -449,15 +540,15 @@ export default {
height: 30px; height: 30px;
text-align: center; text-align: center;
font-size: 15px; font-size: 15px;
font-family: 'Alibaba PuHuiTi'; font-family: "Alibaba PuHuiTi";
font-weight: 400; font-weight: 400;
color: #525966; color: #525966;
} }
th { th {
height: 30px; height: 30px;
background-color: #EAF2FD; background-color: #eaf2fd;
font-size: 16px; font-size: 16px;
font-family: 'Alibaba PuHuiTi'; font-family: "Alibaba PuHuiTi";
font-weight: bold; font-weight: bold;
color: #525966; color: #525966;
.el-checkbox { .el-checkbox {
@ -486,7 +577,7 @@ export default {
text-align: right; text-align: right;
margin-right: 10px; margin-right: 10px;
font-size: 15px; font-size: 15px;
font-family: 'Alibaba PuHuiTi'; font-family: "Alibaba PuHuiTi";
font-weight: 400; font-weight: 400;
color: #525966; color: #525966;
} }
@ -497,9 +588,13 @@ export default {
height: 33px; height: 33px;
} }
// border-radius: 2px; // border-radius: 2px;
.el-input .el-input__suffix .el-input__suffix-inner .el-icon-arrow-up::before { .el-input
.el-input__suffix
.el-input__suffix-inner
.el-icon-arrow-up::before {
content: ""; content: "";
background: url(../../../assets/images/down2.png) center center no-repeat; background: url(../../../assets/images/down2.png) center center
no-repeat;
background-size: cover; background-size: cover;
position: absolute; position: absolute;
width: 10px; width: 10px;
@ -532,32 +627,32 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 15px; font-size: 15px;
font-family: 'Alibaba PuHuiTi'; font-family: "Alibaba PuHuiTi";
font-weight: 400; font-weight: 400;
color: #525966; color: #525966;
margin-right: 15px; margin-right: 15px;
span { span {
color: #2378EC; color: #2378ec;
} }
} }
.btn { .btn {
width: 150px; width: 150px;
height: 30px; height: 30px;
border: 1px solid #2378EC; border: 1px solid #2378ec;
border-radius: 2px; border-radius: 2px;
background-color: #EFF6FF; background-color: #eff6ff;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 15px; font-size: 15px;
font-family: 'Alibaba PuHuiTi'; font-family: "Alibaba PuHuiTi";
font-weight: 400; font-weight: 400;
color: #2378EC; color: #2378ec;
cursor: pointer; cursor: pointer;
} }
.selectBtn { .selectBtn {
background-color: #2378EC; background-color: #2378ec;
color: #FFFFFF; color: #ffffff;
} }
} }
} }

365
src/views/yingji/focusEnter.vue
Unescape View File

@ -0,0 +1,365 @@
<!--
* @Descripttion:
* @version:
* @Author: JC9527
* @Date: 2023-09-04 10:20:06
* @LastEditors: JC9527
* @LastEditTime: 2023-09-06 11:07:37
-->
<template>
<div class="container-main" ref="main">
<div class="enforce-the-law-title">
<div class="filtrate-condition">
<div class="select-input">
<div class="select-span">年份:</div>
<el-select v-model="form.year" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</div>
<div style="display: flex">
<div class="export" @click="exportFile">
<span>搜索</span>
</div>
<div class="export export1" @click="exportFile">
<span>导入</span>
</div>
</div>
</div>
<div class="tables">
<el-table
:data="tableData"
style="width: 100%"
:height="484"
:border="false"
:row-class-name="tableRowClassName"
:cell-style="columnStyle"
>
<el-table-column
prop="date"
label="计划年份"
header-align="center"
>
</el-table-column>
<el-table-column
prop="address"
label="企业名称"
header-align="center"
>
</el-table-column>
<el-table-column prop="frim" label="企业类别" header-align="center">
</el-table-column>
<!-- <el-table-column label="操作" header-align="center">
<template slot-scope="scope">
<div class="tabs-btns">
<div class="look" @click="look(scope.row)">
<span>查看执法详情</span>
</div>
</div>
</template>
</el-table-column> -->
</el-table>
</div>
<div class="pagination">
<my-pagination :total="28" @pagesChange="pagesChange"></my-pagination>
</div>
</div>
</template>
<script>
import myPagination from "@/views/components/myPagination/index.vue";
export default {
components: { myPagination },
name: "Article",
data() {
return {
tableData: [
{
date: "2022年",
name: "王小虎",
address: "苏州",
frim: "扬子石化有限公司",
state: "未执法",
},
{
date: "2022年",
name: "王小虎",
address: "张家港市",
frim: "扬子石化有限公司",
state: "未执法",
},
{
date: "2022年",
name: "王小虎",
address: "常熟市",
frim: "扬子石化有限公司",
state: "未执法",
},
{
date: "2022年",
name: "王小虎",
address: "太仓市",
frim: "扬子石化有限公司",
state: "未执法",
},
{
date: "2022年",
name: "王小虎",
address: "昆山市",
frim: "扬子石化有限公司",
state: "未执法",
},
{
date: "2022年",
name: "王小虎",
address: "吴江区",
frim: "扬子石化有限公司",
state: "已执法",
},
{
date: "2022年",
name: "王小虎",
address: "吴中区",
frim: "扬子石化有限公司",
state: "已执法",
},
{
date: "2022年",
name: "王小虎",
address: "姑苏区",
frim: "扬子石化有限公司",
state: "已执法",
},
{
date: "2022年",
name: "王小虎",
address: "相城区",
frim: "扬子石化有限公司",
state: "已执法",
},
{
date: "2022年",
name: "王小虎",
address: "工业园区",
frim: "扬子石化有限公司",
state: "已执法",
},
],
options: [],
form: {
year: "",
compartment: "",
},
checkList: ["全部"],
checkListTwo: [],
};
},
// watch: {
// checkListTwo:{
// handler(newArray,oldArray){
// console.log(newArray,'newArray')
// console.log(oldArray,'oldArray')
// },
// deep:true,
// immediate:true,
// }
// },
methods: {
// 多选框变化事件
setmealSelect() {
this.checkList = this.checkList.slice(-1);
if (this.checkList.length > 0) {
this.checkListTwo = this.checkList;
this.changeList();
} else {
this.checkList = this.checkListTwo;
}
},
changeList() {
console.log(this.checkList[0]); // 拿到需要筛选的值
},
// tabs不同行给不同class
tableRowClassName({ row, rowIndex }) {
if (rowIndex % 2 !== 0) {
return "success-row";
}
return "";
},
// 根据状态数据修改字体颜色
columnStyle({ row, column, rowIndex, columnIndex }) {
if (columnIndex == 3) {
if (row.state == "未执法") {
return "color: #F71052";
} else if (row.state == "已执法") {
return "color: #23B06C";
}
}
},
// 页码，当前页切换事件
pagesChange(pages) {
console.log(pages);
},
// 导出
exportFile() {
// console.log(this.multipleSelection)
},
},
mounted() {
this.checkListTwo = this.checkList;
// this.$nextTick(()=>{
// let dom = document.getElementsByClassName('tables');
// let height = dom[0].getBoundingClientRect();
// let windowHeight = window.innerHeight;
// let relativeHeight = windowHeight - height.top
// this.main.height = relativeHeight - 80
// })
},
};
</script>
<style lang="scss" scoped>
.container-main {
// height: calc(100vh - 84px);
overflow: hidden;
padding: 0 20px;
height: 100%;
background-color: #fff;
.enforce-the-law-title {
display: flex;
align-items: center;
justify-content: space-between;
padding: 31px 0 12px 0;
.filtrate-condition {
display: flex;
align-items: center;
.select-input {
margin-right: 20px;
display: flex;
align-items: center;
.select-span {
font-size: 14px;
font-family: "Alibaba PuHuiTi";
font-weight: 400;
color: #525966;
line-height: 40px;
margin-right: 10px;
}
::v-deep .el-select {
background-color: transparent;
width: 210px;
.el-input__inner {
height: 33px;
}
// border-radius: 2px;
.el-input
.el-input__suffix
.el-input__suffix-inner
.el-icon-arrow-up::before {
content: "";
background: url(../../assets/images/down2.png) center center
no-repeat;
background-size: cover;
position: absolute;
width: 10px;
height: 7px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
}
.my-checkbox {
margin-left: 50px;
::v-deep .el-checkbox-group {
.el-checkbox__label {
font-size: 14px;
font-family: "Alibaba PuHuiTi";
font-weight: 400;
color: #525966;
}
}
}
}
.export {
display: flex;
align-items: center;
justify-content: center;
padding: 6px 19px;
background-color: #2378ec;
cursor: pointer;
img {
width: 22px;
margin-right: 10px;
}
span {
color: #ffffff;
font-size: 14px;
font-family: "Alibaba PuHuiTi";
font-weight: 400;
}
}
.export1 {
background-color: #28b384;
margin-left: 20px;
}
}
.tables {
margin-top: 10px;
background-color: #eaf2fd;
.tabs-btns {
display: flex;
align-items: center;
justify-content: center;
.look {
display: flex;
align-items: center;
cursor: pointer;
span {
font-size: 15px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #045ffd;
text-decoration: underline;
}
}
}
::v-deep .el-table {
.success-row {
background-color: rgba(234, 242, 253, 0.25);
}
td {
height: 42px;
text-align: center;
font-size: 14px;
font-family: "Alibaba PuHuiTi";
font-weight: 400;
color: #525966;
}
th {
height: 45px;
background-color: #eaf2fd;
font-size: 15px;
font-family: "Alibaba PuHuiTi";
font-weight: bold;
color: #525966;
.el-checkbox {
display: none;
}
}
}
::v-deep .el-table::before {
height: 0;
}
}
.pagination {
margin-top: 40px;
}
}
</style>

3
src/views/yingji/home.vue
Unescape View File

@ -209,8 +209,9 @@ export default {
align-items: center; align-items: center;
margin-bottom: 15px; margin-bottom: 15px;
& > div:nth-of-type(1) { & > div:nth-of-type(1) {
font-family: "Alibaba-PuHuiTi-Regular.otf"; font-family: 'Alibaba PuHuiTi';
margin-right: 5px; margin-right: 5px;
color: #525966;
} }
::v-deep .el-select { ::v-deep .el-select {
background-color: transparent; background-color: transparent;

4
src/views/yingji/planManage.vue
Unescape View File

@ -265,7 +265,7 @@
align-items: center; align-items: center;
margin-right: 81px; margin-right: 81px;
.year-span { .year-span {
font-size: 13px; font-size: 14px;
font-family: 'Alibaba PuHuiTi'; font-family: 'Alibaba PuHuiTi';
font-weight: 400; font-weight: 400;
color: #525966; color: #525966;
@ -277,7 +277,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
.area-span { .area-span {
font-size: 13px; font-size: 14px;
font-family: 'Alibaba PuHuiTi'; font-family: 'Alibaba PuHuiTi';
font-weight: 400; font-weight: 400;
color: #525966; color: #525966;

Write Preview
Loading…
Cancel
Save