0515

src/api/safetyIndex/index.js

@@ -129,3 +129,11 @@ export function statisticsDetail(params) {
         params
     })
 }
+//排名
+export function topRanking(params) {
+    return request({
+        url: '/safety/index/company/top/ranking',
+        method: 'post',
+        params
+    })
+}

src/views/safetyIndex/index.vue

@@ -6,8 +6,8 @@
             <wupin></wupin>
         </div>
         <div class="middleBox">
-            <toubu></toubu>
+            <toubu @tabChange="tabChange"></toubu>
-
+            <paiming :scoreType="scoreType"></paiming>
         </div>
     </div>
 </template>
@@ -17,19 +17,28 @@ import yuangong from './yuangong.vue'
 import cheliang from './cheliang.vue'
 import wupin from './wupin.vue'
 import toubu from './toubu.vue'
+import paiming from './paiming.vue'
+
 
 export default {
     components: {
         yuangong,
         cheliang,
         wupin,
-        toubu
+        toubu,
+        paiming
     },
     data() {
         return {
             staffStatisticsList: [],
+            scoreType: 'month',
         }
     },
+    methods: {
+        tabChange(val) {
+            this.scoreType = val
+        }
+    }
 
 }
 </script>

src/views/safetyIndex/paiming.vue

@@ -0,0 +1,415 @@
+<template>
+    <div class="pmwp">
+        <div class="title">&nbsp;&nbsp;企业排名</div>
+        <div class="more">更多>></div>
+        <el-table :cell-style="{ background: 'revert' }" :data="fangkeList" class="table"
+            style="width: calc(100% - 40px);  margin:0 20px;" :row-style="tableRowStyle"
+            :header-row-style="tableHeaderColor" :header-cell-style="tableHeaderCellColor">
+            <el-table-column width="80" label="序号">
+                <template slot-scope="scope">
+                    <div :class="{ 'yellow': scope.$index == 0, 'blue': scope.$index == 1, 'green': scope.$index == 2 }">
+                        NO.{{ scope.$index + 1 }}
+                    </div>
+                </template>
+            </el-table-column>
+            <el-table-column show-overflow-tooltip prop="companyName" label="企业名称">
+            </el-table-column>
+            <el-table-column show-overflow-tooltip prop="companyAddress" label="企业地址">
+            </el-table-column>
+            <el-table-column show-overflow-tooltip prop="emergencyContact" label="安全负责人" width="90">
+            </el-table-column>
+            <el-table-column show-overflow-tooltip prop="score" label="综合得分" width="90">
+            </el-table-column>
+        </el-table>
+
+    </div>
+</template>
+
+<script>
+import { topRanking } from '@/api/safetyIndex'
+export default {
+    props: {
+        scoreType: { type: String, default: 'month' }
+    },
+    data() {
+
+        return {
+            staffStatisticsList: [],
+            staffDetailList: [],
+            listTotal: {},
+            fangkeVisible: false,
+            fangkepageSize: 10,
+            fangkepageNum: 1,
+            fangketotal: 0,
+            fangkeList: [],
+            wupinList: [],
+            intotal: 0,
+            outtotal: 0,
+            ziyouTotal: 0,
+            zulintotal: 0,
+            goodsType: 0,
+            fsyData: {},
+            yzdData: {},
+            yzbData: {},
+            mbData: {},
+        }
+    },
+    created() {
+        this.getindexGoods()
+    },
+    watch: {
+        'scoreType'(newVal) {
+            topRanking({ scoreType: newVal }).then(res => {
+                this.fangkeList = res.data
+            })
+        }
+    },
+    methods: {
+        tableRowStyle({ rowIndex }) {
+            if ((rowIndex + 1) % 2 == 1) {
+                return { 'background': 'rgba(0,0,0,0)', 'color': '#fff', 'border': '0', 'height': '30px', 'cursor': ' pointer' }
+            } else {
+                return { 'background': 'rgba(61, 85, 102, 0.16)', 'border': '0', 'color': '#fff', 'height': '30px', 'cursor': ' pointer' }
+            }
+        },
+        tableHeaderColor() {
+            return { 'background': 'linear-gradient( rgba(38, 88, 76, 0.6) 100%, rgba(55, 131, 128, 0.6) 100%, rgba(34, 74, 53, 0.46) 46%)', 'height': '30px' }
+            // return { 'background': 'url("~@/assets/archives/列表9910.png") no-repeat;', 'background-size': '100% 100%;', 'color': '#fff' }
+        },
+        tableHeaderCellColor() {
+            return { 'background': 'rgba(0,0,0,0)', 'border': '0', 'color': '#fff', 'height': '24px' }
+        },
+        fangkeSizeChange(val) {
+            this.fangkepageNum = 1;
+            this.fangkepageSize = val;
+            this.getindexGoods(this.goodsType)
+        },
+        fangkeCurrentChange(val) {
+            this.fangkepageNum = val;
+            this.getindexGoods(this.goodsType)
+        },
+        getindexGoods() {
+            topRanking({ scoreType: this.scoreType }).then(res => {
+                this.fangkeList = res.data
+            })
+        },
+
+    },
+}
+</script>
+
+<style lang="less" scoped>
+.pmwp {
+    height: calc(100% - 506px);
+    width: 100%;
+    margin-bottom: 20px;
+    background: url('~@/assets/safetyIndex/主屏板块5.png') no-repeat;
+    background-size: 100% 100%;
+    margin-top: 20px;
+    padding-top: 33px;
+    box-sizing: border-box;
+    overflow: hidden;
+    position: relative;
+
+    .title {
+        width: 60%;
+        height: 33px;
+        line-height: 33px;
+        font-size: 16px;
+        color: #D9E7FF;
+        letter-spacing: 1px;
+        text-align: center;
+        font-weight: 500;
+        display: flex;
+        align-items: center;
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        img {
+            width: 16px;
+            height: 16px;
+            margin: 0 12px;
+        }
+    }
+
+    .more {
+        width: 90px;
+        height: 33px;
+        line-height: 33px;
+        font-size: 16px;
+        color: #D9E7FF;
+        letter-spacing: 1px;
+        text-align: right;
+        font-weight: 500;
+        display: flex;
+        align-items: center;
+        position: absolute;
+        top: 0;
+        right: 0;
+        cursor: pointer;
+    }
+
+    .qyclBody {
+        width: 100%;
+        height: calc(100% - 33px);
+        padding: 0 20px;
+        box-sizing: border-box;
+
+
+        .today {
+            width: 100%;
+            height: 23%;
+            margin-bottom: 5px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px 0;
+            box-sizing: border-box;
+            background: url('~@/assets/safetyIndex/99108881.png') no-repeat;
+            background-size: 100% 100%;
+            cursor: pointer;
+
+            .todayChild {
+                width: 45%;
+                height: 100%;
+                display: flex;
+                align-items: center;
+                box-sizing: border-box;
+                border-right: 1px solid rgba(114, 155, 137, 0.48);
+
+
+                .iconBox {
+                    width: 48px;
+                    height: 48px;
+                    margin-left: 20px;
+                    box-sizing: border-box;
+
+                    img {
+                        width: 48px;
+                        height: 48px;
+                    }
+                }
+
+                .iconmsg {
+                    margin-left: 10px;
+
+                    width: 108px;
+                    height: 42px;
+                    box-sizing: border-box;
+
+                    .msgText {
+                        height: 50%;
+                        width: 100%;
+                        font-size: 14px;
+                        color: #D0DEEE;
+                        letter-spacing: 1px;
+                        vertical-align: middle;
+                        box-sizing: border-box;
+                        font-weight: 400;
+                        line-height: 22px;
+                        padding-left: 10px;
+                        font-size: 14px;
+
+                    }
+
+                    .msgNum {
+                        height: 50%;
+                        width: 100%;
+                        font-size: 12px;
+                        color: rgba(255, 255, 255, 0.5);
+                        letter-spacing: 1.25px;
+
+                        font-weight: 600;
+
+                        line-height: 22px;
+                        padding-left: 10px;
+                        box-sizing: border-box;
+
+                        span {
+                            font-size: 19px;
+                            color: #FFFFFF;
+                            letter-spacing: 2.08px;
+
+                            font-weight: 700;
+
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .buySail {
+                width: 55%;
+                height: 100%;
+                display: flex;
+                align-items: center;
+                box-sizing: border-box;
+                justify-content: space-evenly;
+
+                .sailChild {
+                    width: 40%;
+                    height: 100%;
+
+                    .buymsg {
+                        margin-left: 10px;
+
+                        width: 108px;
+                        height: 42px;
+                        box-sizing: border-box;
+
+                        .msgText {
+                            height: 50%;
+                            width: 100%;
+                            font-size: 14px;
+                            color: #D0DEEE;
+                            letter-spacing: 1px;
+                            vertical-align: middle;
+                            box-sizing: border-box;
+                            font-weight: 400;
+                            line-height: 22px;
+                            padding-left: 10px;
+                            font-size: 14px;
+
+                        }
+
+                        .msgNum {
+                            height: 50%;
+                            width: 100%;
+                            font-size: 12px;
+                            color: rgba(255, 255, 255, 0.5);
+                            letter-spacing: 1.25px;
+                            line-height: 22px;
+                            font-weight: 600;
+
+
+                            padding-left: 10px;
+                            box-sizing: border-box;
+
+                            span {
+                                font-size: 19px;
+                                color: #FFFFFF;
+                                letter-spacing: 2.08px;
+
+                                font-weight: 700;
+
+
+                            }
+                        }
+
+                    }
+
+                    .sailmsg {
+
+                        margin-left: 10px;
+
+                        width: 108px;
+                        height: 42px;
+                        box-sizing: border-box;
+
+                        .msgText {
+                            height: 50%;
+                            width: 100%;
+                            font-size: 14px;
+                            color: #D0DEEE;
+                            letter-spacing: 1px;
+                            vertical-align: middle;
+                            box-sizing: border-box;
+                            font-weight: 400;
+                            line-height: 22px;
+                            padding-left: 10px;
+                            font-size: 14px;
+                            letter-spacing: 1px;
+                        }
+
+                        .msgNum {
+                            height: 50%;
+                            width: 100%;
+                            font-size: 12px;
+                            color: rgba(255, 255, 255, 0.5);
+                            letter-spacing: 1.25px;
+                            line-height: 29;
+                            font-weight: 600;
+
+                            line-height: 22px;
+                            padding-left: 10px;
+                            box-sizing: border-box;
+
+                            span {
+                                font-size: 19px;
+                                color: #FEF699;
+                                letter-spacing: 2.08px;
+
+                                font-weight: 700;
+
+
+                            }
+                        }
+
+
+                    }
+                }
+            }
+        }
+
+    }
+
+
+
+}
+
+/deep/.el-table {
+    background: rgba(0, 0, 0, 0);
+
+    td.el-table__cell {
+        border: 0;
+    }
+
+    .el-table__cell {
+        padding: 10px 0;
+
+    }
+
+    .xiangqing {
+        background: rgba(0, 0, 0, 0);
+        border: 0;
+        color: rgba(48, 196, 255, 0.7);
+        cursor: pointer;
+    }
+
+    .staffPic {
+        width: 19px;
+        height: 20px;
+    }
+
+    .yellow {
+        color: #FEF699;
+    }
+
+    .blue {
+        color: #66C3FF;
+    }
+
+    .green {
+        color: #19F7C3;
+    }
+}
+
+/deep/.el-input__inner {
+    // background: url('~@/assets/companyFile/2121.png') no-repeat;
+    background: url('~@/assets/companyFile/矩形备份 18.png') no-repeat;
+    background-size: 100% 100%;
+    border: 1px solid rgba(40, 132, 126, 1);
+    color: rgba(234, 246, 255, 0.7);
+    ;
+
+    .el-range-separator {
+        color: #ccc;
+    }
+
+    .el-range-input {
+        background: rgba(0, 0, 0, 0);
+        color: #ccc;
+    }
+}
+</style>

src/views/safetyIndex/toubu.vue

@@ -80,7 +80,9 @@
                         企业名称&nbsp;&nbsp;<span>{{ topSortData[1].companyName }}</span>
                     </div>
                     <div class="mingcheng">
-                        企业地址&nbsp;&nbsp;<span>{{ topSortData[1].companyAddress }}</span>
+
+                        企业地址&nbsp;&nbsp; <el-tooltip :content="topSortData[1].companyAddress" placement="top-start"><span>{{
+                            topSortData[1].companyAddress }}</span></el-tooltip>
                     </div>
                 </div>
             </div>
@@ -97,7 +99,8 @@
                         企业名称&nbsp;&nbsp;<span>{{ topSortData[2].companyName }}</span>
                     </div>
                     <div class="mingcheng">
-                        企业地址&nbsp;&nbsp;<span>{{ topSortData[2].companyAddress }}</span>
+                        企业地址&nbsp;&nbsp;<el-tooltip :content="topSortData[1].companyAddress" placement="top-start"><span>{{
+                            topSortData[2].companyAddress }}</span></el-tooltip>
                     </div>
                 </div>
             </div>
@@ -114,7 +117,8 @@
                         企业名称&nbsp;&nbsp;<span>{{ topSortData[0].companyName }}</span>
                     </div>
                     <div class="mingcheng">
-                        企业地址&nbsp;&nbsp;<span>{{ topSortData[0].companyAddress }}</span>
+                        企业地址&nbsp;&nbsp;<el-tooltip :content="topSortData[0].companyAddress" placement="top-start"><span>{{
+                            topSortData[0].companyAddress }}</span></el-tooltip>
                     </div>
                 </div>
             </div>
@@ -159,6 +163,7 @@ export default {
             })
         },
         gettopSort() {
+            this.$emit('tabChange', this.topTabsName)
             topSort({ scoreType: this.topTabsName }).then(res => {
                 this.topSortData = res.data
             })
@@ -177,6 +182,7 @@ export default {
     box-sizing: border-box;
     position: relative;
 
+
     .topBox {
         width: 100%;
         height: 30%;
@@ -417,7 +423,7 @@ export default {
 
                 .mingcheng {
                     padding-left: 5px;
-                    height: 33.33%;
+                    height: 50%;
 
                     width: 100%;
                     font-size: 12px;
@@ -425,12 +431,16 @@ export default {
                     letter-spacing: 0.86px;
                     font-weight: 400;
                     text-align: left;
+                    overflow: hidden;
+                    white-space: nowrap; //禁止换行
+                    text-overflow: ellipsis; //...
 
                     span {
                         font-size: 14px;
                         color: #D0DEEE;
                         letter-spacing: 0.75px;
                         font-weight: 500;
+
                     }
                 }
             }
@@ -488,7 +498,7 @@ export default {
 
                 .mingcheng {
                     padding-left: 5px;
-                    height: 33.33%;
+                    height: 50%;
 
                     width: 100%;
                     font-size: 12px;
@@ -496,6 +506,9 @@ export default {
                     letter-spacing: 0.86px;
                     font-weight: 400;
                     text-align: left;
+                    overflow: hidden;
+                    white-space: nowrap; //禁止换行
+                    text-overflow: ellipsis; //...
 
                     span {
                         font-size: 14px;
@@ -566,7 +579,7 @@ export default {
 
                 .mingcheng {
                     padding-left: 5px;
-                    height: 33.33%;
+                    height: 59%;
 
                     width: 100%;
                     font-size: 12px;
@@ -574,6 +587,9 @@ export default {
                     letter-spacing: 0.86px;
                     font-weight: 400;
                     text-align: left;
+                    overflow: hidden;
+                    white-space: nowrap; //禁止换行
+                    text-overflow: ellipsis; //...
 
                     span {
                         font-size: 14px;

src/views/safetyIndex/yuangong.vue

@@ -155,7 +155,7 @@ export default {
         },
         initygtb() {
             let myChart = echarts.init(document.getElementById("ygtb"));
-            const colors = ['#66C3FF', '#FEF699', '#19F7C3', '#E4FEF0', '#ADF1FF']
+            const colors = ['#66C3FF', '#FEF699', '#19F7C3', '#ADF1FF']
 
             let data = []
             this.staffStatisticsList.forEach((item, index) => {
@@ -168,12 +168,17 @@ export default {
                     trigger: 'item'
                 },
                 legend: {
-                    top: '20%',
+                    // type: 'scroll',
+                    orient: 'vertical',
+                    top: '5%',
                     right: '5%',
                     padding: [5, 10],
+                    itemGap: 10,
                     itemWidth: 6,
                     itemHeight: 6,
+                    width: 100,
                     backgroundColor: 'rgba(108,128,151,0.2)',
+                    lineHeight: 24,
                     textStyle: {
                         rich: {
                             a: {