拖旺项目:聊城公交辅助决策系统
master
2022-04-27 493930a42a2ea3e13905ffd8772cdb945baa7bcf
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<template>
    <div>
        <!-- 内容 -->
        <div class="content-wrap">
            <!-- 事故快报审核 -->
            <div class="column">
                <!-- 标题 -->
                <v-title-home content="规章制度和工作要求管理" width="100%" :showDateFlag="false">
 
                </v-title-home>
                <!-- banner -->
                <img src="../../../assets/safety/banner3.png" class="mt16" >
                <!-- <div class="layer layer-1"></div> -->
                <!-- 操作栏 -->
                 <div class="action-bar">
                    <div
                        @click="$to('/safetyArticleList')"
                        class="action-item orange pointer"
                    >
                        查看全部
                    </div>
                    <div
                        @click="$to('/safetyArticleEdit?type=4')"
                        class="action-item blue pointer"
                    >
                        新建内容
                    </div>
                </div>
                <!-- 列表 -->
                 <perfect-scrollbar>
                    <div class="list-wrap">
                      <div class="no-data" v-if="ruleList.length == 0">
                        - 暂无数据 -
                      </div>
                      <div :key="i" @click="$router.push('/safetyArticleDetail?id='+item.id)" class="list-item flex"
                           v-for="(item, i) in ruleList">
                        <div class="img-wrap">
                          <img :src="getImgSrc(item.publishContent)" alt=""
                               v-if="getImgSrc(item.publishContent)"/>
                          <img :src="require('@/assets/safety/rule.png')" alt="" v-else>
                          <div class="top-left inner-border"></div>
                          <div class="top-right inner-border"></div>
                          <div class="bottom-left inner-border"></div>
                          <div class="bottom-right inner-border"></div>
                        </div>
                        <div class="item-info">
                          <div class="item-title font18">{{ item.title }}</div>
                          <div class="item-ellipsis-info text_clamp_2">
                            {{ getText(item.publishContent) }}
                          </div>
                          <div class="item-sub">{{item.createDate}}</div>
                        </div>
                      </div>
                    </div>
                  </perfect-scrollbar>
            
                   <div class="g-pagination">
                        <el-pagination
                        layout="total, prev, pager, next"
                        :current-page="pageNum"
                        :page-size="pageSize"
                        :total="total"
                        background
                        prev-text="上一页"
                        next-text="下一页"
                        @current-change="pageChange"
                        ></el-pagination>
                    </div>
            </div>
        </div>
    </div>
</template>
<script>
    import moment from 'moment'
    import {PerfectScrollbar} from "vue2-perfect-scrollbar";
    export default {
        name: "safety",
        components: {
            PerfectScrollbar,
        },
        data() {
            return {
                ruleList: [],
                pageSize: 20,
                pageNum: 1,
                total: 1, // 总页数
            };
        },
        created() {
           this.loadDataList();
        },
        activated() {
            this.loadDataList();
        },
        methods: {
            pageChange(page) {
                this.pageNum = page;
                this.loadDataList();
            },
            loadDataList() {
                this.$axios
                .get(this.$Interface.safetyArticle.list, {
                    params: {
                        limit: this.pageSize,
                        page: this.pageNum,
                        type: '4'
                    },
                })
                .then((res) => {
                    this.ruleList = res.data.records;
                    this.total = Math.ceil(Number(res.data.total) / this.pageSize) || 1;
                });
            },
             getText(str) {
                return str
                    .replace(/<[^<>]+>/g, "")
                    .replace(/&nbsp;/gi, "");
            },
            getImgSrc(str) {
                let data = '';
                str.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/, function (match, capture) {
                    data = capture;
                });
                return data;
            },
            getTime(value) {
              return  moment(value).format('yyyy-MM-DD HH:mm:ss')
            }
        },
        mounted() {
 
        },
    };
</script>
<style scoped lang="less">
</style>