From 3389b07ef10428ada5d161eab3f720d725553b6b Mon Sep 17 00:00:00 2001
From: 叶松 <2217086471@qq.com>
Date: 星期四, 16 十一月 2023 13:23:18 +0800
Subject: [PATCH] 安全积分超市样式完成
---
web/src/views/SecureManage/NipCheck/components/ScoreDetails.vue | 181 +++++++++++++++++++++++++
web/src/views/SecureManage/NipCheck/SorceShop.vue | 55 +++++++
web/src/views/SecureManage/NipCheck/components/ScoreMarket.vue | 131 ++++++++++++++++++
3 files changed, 365 insertions(+), 2 deletions(-)
diff --git a/web/src/views/SecureManage/NipCheck/SorceShop.vue b/web/src/views/SecureManage/NipCheck/SorceShop.vue
index 1769998..f32d389 100644
--- a/web/src/views/SecureManage/NipCheck/SorceShop.vue
+++ b/web/src/views/SecureManage/NipCheck/SorceShop.vue
@@ -1,3 +1,54 @@
<template>
- <div>安全积分超市</div>
-</template>
\ No newline at end of file
+ <div class="main">
+ <div class="main_tabs">
+ <el-tabs v-model="activeName" @tab-click="handleClick">
+ <el-tab-pane label="安全积分超市" name="first">
+ <score-supermarket ref="market"></score-supermarket>
+ </el-tab-pane>
+ <el-tab-pane label="积分明细" name="second">
+ <score-details ref="details"></score-details>
+ </el-tab-pane>
+ </el-tabs>
+ </div>
+ </div>
+</template>
+<script>
+import ScoreSupermarket from './components/ScoreMarket.vue'//安全积分超市
+import ScoreDetails from './components/ScoreDetails.vue'//入库记录
+export default {
+ components:{
+ ScoreSupermarket,
+ ScoreDetails,
+ },
+ data(){
+ return{
+ activeName:'first'
+ }
+ },
+ mounted(){
+ this.$refs.market.searchButtonInfo(true);
+ },
+ methods:{
+ //切换界面
+ handleClick(tab){
+ switch(tab.name){
+ case 'second':
+ this.$refs.details.searchButtonInfo(true);
+ break;
+ default:
+ this.$refs.market.searchButtonInfo(true);
+ }
+ },
+ }
+}
+</script>
+<style scoped lang="scss">
+@import'@/style/layout-main.scss';
+/deep/ .el-tabs__content{
+ position: static;
+}
+
+/deep/.main {
+ background: none;
+}
+</style>
\ No newline at end of file
diff --git a/web/src/views/SecureManage/NipCheck/components/ScoreDetails.vue b/web/src/views/SecureManage/NipCheck/components/ScoreDetails.vue
new file mode 100644
index 0000000..0a2e352
--- /dev/null
+++ b/web/src/views/SecureManage/NipCheck/components/ScoreDetails.vue
@@ -0,0 +1,181 @@
+<template>
+ <div class="main" style="height:89%">
+ <div class="main_header">
+ <div class="header_item">
+ <span class="header_label">类型：</span>
+ <el-select v-model="search.type" clearable placeholder="请选择类型">
+ <el-option
+ v-for="item in typeLists"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value">
+ </el-option>
+ </el-select>
+ </div>
+ <div class="header_item">
+ <span class="header_label">时间范围：</span>
+ <el-date-picker
+ v-model="search.time"
+ type="daterange"
+ value-format="yyyy-MM-dd HH:mm:ss"
+ :default-time="['00:00:00','23:59:59']"
+ range-separator="-"
+ start-placeholder="起始时间"
+ end-placeholder="结束时间">
+ </el-date-picker>
+ </div>
+ <div class="header_item">
+ <el-button icon="el-icon-search" v-if="showButton('search')" @click="searchButtonInfo(true)">查询</el-button>
+ <el-button class="search_btn" icon="el-icon-plus" v-if="showButton('export')" @click="exportFiles">导出Excel</el-button>
+ </div>
+ </div>
+ <div class="score_index">
+ <div class="score_titles">积分:</div>
+ <div class="score_datas"><span>65</span>分</div>
+ </div>
+ <div class="main_content">
+ <el-table
+ v-loading="loading"
+ :data="dataList"
+ height="100%">
+ <el-table-column align="center" label="序号" width="60">
+ <template #default="scope">
+ <span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
+ </template>
+ </el-table-column>
+ <el-table-column prop="createTime" label="时间" align="center" width="150"></el-table-column>
+ <el-table-column prop="dangerLocation" label="积分分值" align="center" ></el-table-column>
+ <el-table-column prop="dangerLocation" label="余额" align="center" ></el-table-column>
+ <el-table-column prop="dangerLocation" label="类型" align="center" ></el-table-column>
+ <el-table-column prop="title" label="说明" align="center" show-overflow-tooltip></el-table-column>
+ </el-table>
+ </div>
+ <div class="main_footer">
+ <el-pagination
+ background
+ @current-change="changePageNum"
+ @size-change="changePageSize"
+ :current-page="pageNum"
+ :page-sizes="[10, 20, 50, 100]"
+ :page-size="pageSize"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="total">
+ </el-pagination>
+ </div>
+ </div>
+</template>
+
+<script>
+import { buttonPinia } from '../../../../pinia/index';
+import { changeSize } from '../../../../plugins/public'; // 导入节流、动态切换组件尺寸方法
+ export default {
+ data() {
+ return {
+ size: changeSize(), // 组件尺寸
+ pageNum: 1,
+ pageSize: 10,
+ search:{},//查询条件
+ total: 0,
+ disabled:false,
+ loading: false,
+ dataList: [], //积分明细信息列表
+ imageList:[],
+ asyncTitle: true, // 对话框title 新增：true 修改：false
+ asyncVisible: false, // 添加 修改对话框
+ typeLists:[
+ {
+ label:'获取',
+ value:1
+ },
+ {
+ label:'消耗',
+ value:2
+ }
+ ]
+ }
+ },
+ watch: {
+ asyncVisible(bol) {
+ if(!bol) {
+ this.ruleForm = {};
+ this.$refs.ruleForm.resetFields();
+ }
+ }
+ },
+ mounted() {
+ const that = this;
+ // 根据窗口大小动态修改组件尺寸
+ window.onresize = () => {
+ that.size = changeSize();
+ }
+ },
+ methods: {
+ // 查询按钮列表信息
+ searchButtonInfo(bol) {
+ if(bol) {
+ this.pageNum = 1;
+ }
+ let params = Object.assign({},this.search,{
+ pageNum: this.pageNum,
+ pageSize: this.pageSize
+ })
+ params.startTime = this.search.time&&this.search.time[0]
+ params.endTime = this.search.time&&this.search.time[1]
+ delete params.time
+ this.loading = true;
+ this.$api.Safety.searchHiddenLists(params).then((res) => {
+ if(res.statusMsg === 'ok') {
+ this.total = res.data.total;
+ this.dataList = res.data.list;
+ }
+ this.loading = false;
+ })
+ },
+ //导出excel
+ exportFiles(){},
+ // 判断按钮权限信息
+ showButton(str) {
+ const pinia = buttonPinia();
+ return pinia.$state.buttonInfo.includes(str);
+ },
+ // 切换页数
+ changePageNum(page) {
+ this.pageNum = page;
+ this.searchButtonInfo();
+ },
+ // 切换每页条数
+ changePageSize(size) {
+ this.pageSize = size;
+ this.searchButtonInfo();
+ }
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+@import '../../../../style/layout-main.scss';
+.score_index{
+ width:200px;
+ line-height: 30px;
+ background-color: #0E6D90;
+ border-radius: 4px;
+ display: flex;
+ margin-bottom: 15px;
+ margin-left: 25px;
+ padding: 2px 0px 2px 15px;
+
+ .score_titles{
+ color: #E2EDF2;
+ font-size: 15px;
+ }
+ .score_datas{
+ color: #E2EDF2;
+ font-size: 15px;
+ span{
+ padding: 0 10px;
+ color: #19F9FA;
+ font-size: 24px;
+ }
+ }
+}
+</style>
\ No newline at end of file
diff --git a/web/src/views/SecureManage/NipCheck/components/ScoreMarket.vue b/web/src/views/SecureManage/NipCheck/components/ScoreMarket.vue
new file mode 100644
index 0000000..bd03c77
--- /dev/null
+++ b/web/src/views/SecureManage/NipCheck/components/ScoreMarket.vue
@@ -0,0 +1,131 @@
+<template>
+ <div class="main" style="height:89%">
+ <div class="main_header">
+ <div class="header_item">
+ <span class="header_label">时间范围：</span>
+ <el-date-picker
+ v-model="search.time"
+ type="daterange"
+ value-format="yyyy-MM-dd HH:mm:ss"
+ :default-time="['00:00:00','23:59:59']"
+ range-separator="-"
+ start-placeholder="起始时间"
+ end-placeholder="结束时间">
+ </el-date-picker>
+ </div>
+ <div class="header_item">
+ <el-button icon="el-icon-search" v-if="showButton('search')" @click="searchButtonInfo(true)">查询</el-button>
+ <el-button class="search_btn" icon="el-icon-plus" v-if="showButton('export')" @click="exportFiles">导出Excel</el-button>
+ </div>
+ </div>
+ <div class="main_content">
+ <el-table
+ v-loading="loading"
+ :data="dataList"
+ height="100%">
+ <el-table-column align="center" label="序号" width="60">
+ <template #default="scope">
+ <span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
+ </template>
+ </el-table-column>
+ <el-table-column prop="createTime" label="时间" align="center" width="150"></el-table-column>
+ <el-table-column prop="dangerLocation" label="积分分值" align="center" ></el-table-column>
+ <el-table-column prop="title" label="说明" align="center" show-overflow-tooltip></el-table-column>
+ </el-table>
+ </div>
+ <div class="main_footer">
+ <el-pagination
+ background
+ @current-change="changePageNum"
+ @size-change="changePageSize"
+ :current-page="pageNum"
+ :page-sizes="[10, 20, 50, 100]"
+ :page-size="pageSize"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="total">
+ </el-pagination>
+ </div>
+ </div>
+</template>
+
+<script>
+import { buttonPinia } from '../../../../pinia/index';
+import { changeSize } from '../../../../plugins/public'; // 导入节流、动态切换组件尺寸方法
+ export default {
+ data() {
+ return {
+ size: changeSize(), // 组件尺寸
+ pageNum: 1,
+ pageSize: 10,
+ search:{},//查询条件
+ total: 0,
+ disabled:false,
+ loading: false,
+ dataList: [], //举报隐患信息列表
+ imageList:[],
+ asyncTitle: true, // 对话框title 新增：true 修改：false
+ asyncVisible: false, // 添加 修改对话框
+ }
+ },
+ watch: {
+ asyncVisible(bol) {
+ if(!bol) {
+ this.ruleForm = {};
+ this.$refs.ruleForm.resetFields();
+ }
+ }
+ },
+ mounted() {
+ const that = this;
+ // 根据窗口大小动态修改组件尺寸
+ window.onresize = () => {
+ that.size = changeSize();
+ }
+ that.searchButtonInfo(true);
+ },
+ methods: {
+ // 查询按钮列表信息
+ searchButtonInfo(bol) {
+ if(bol) {
+ this.pageNum = 1;
+ }
+ let params = Object.assign({},this.search,{
+ pageNum: this.pageNum,
+ pageSize: this.pageSize
+ })
+ params.startTime = this.search.time&&this.search.time[0]
+ params.endTime = this.search.time&&this.search.time[1]
+ delete params.time
+ this.loading = true;
+ this.$api.Safety.searchHiddenLists(params).then((res) => {
+ if(res.statusMsg === 'ok') {
+ this.total = res.data.total;
+ this.dataList = res.data.list;
+ }
+ this.loading = false;
+ })
+ },
+ //导出excel
+ exportFiles(){},
+ // 判断按钮权限信息
+ showButton(str) {
+ const pinia = buttonPinia();
+ return pinia.$state.buttonInfo.includes(str);
+ },
+ // 切换页数
+ changePageNum(page) {
+ this.pageNum = page;
+ this.searchButtonInfo();
+ },
+ // 切换每页条数
+ changePageSize(size) {
+ this.pageSize = size;
+ this.searchButtonInfo();
+ }
+ }
+ }
+</script>
+
+<style lang="sass" scoped>
+@import '../../../../style/layout-main.scss';
+</style>
\ No newline at end of file
--
Gitblit v1.9.3