Merge pull request 'master' (#32) from master into lukeyan

Reviewed-on: #32

src/api/safetyIndex/index.js

@@ -31,7 +31,16 @@ export function visitDetail(params) {
         params
     })
 }
-//企业访客详情
+//流动人员详情
+export function flowStatistics(params) {
+    return request({
+        url: '/safety/index/flow/statistics',
+        method: 'post',
+        params
+    })
+}
+
+//流动人员详情
 export function flowDetail(params) {
     return request({
         url: '/safety/index/flow/detail',
@@ -39,3 +48,84 @@ export function flowDetail(params) {
         params
     })
 }
+//企业今日进园区
+export function vehicleIn(params) {
+    return request({
+        url: '/safety/index/vehicle/in',
+        method: 'post',
+        params
+    })
+}
+//企业今日出园区
+export function vehicleOut(params) {
+    return request({
+        url: '/safety/index/vehicle/out',
+        method: 'post',
+        params
+    })
+}
+//企业车辆使用方式
+export function vehicleUserType(params) {
+    return request({
+        url: '/safety/index/vehicle/userType',
+        method: 'post',
+        params
+    })
+}
+//企业车辆使用列表
+export function vehicleDetail(params) {
+    return request({
+        url: '/safety/index/vehicle/detail',
+        method: 'post',
+        params
+    })
+}
+//企业物品统计
+export function indexGoods(params) {
+    return request({
+        url: '/safety/index/goods',
+        method: 'post',
+        params
+    })
+}
+//企业物品详情
+export function indexGoodsDetail(params) {
+    return request({
+        url: '/safety/index/goods/detail',
+        method: 'post',
+        params
+    })
+}
+//企业统计平安企业石化企业预警企业统计
+export function statisticsAlarm(params) {
+    return request({
+        url: '/safety/index/company/statistics/alarm',
+        method: 'post',
+        params
+    })
+}
+//企业统计剧毒企业易制爆企业易制毒企业放射源企业数量
+export function statisticsDanger(params) {
+    return request({
+        url: '/safety/index/company/statistics/danger',
+        method: 'post',
+        params
+    })
+}
+//企业统计剧毒企业易制爆企业易制毒企业放射源企业数量
+export function topSort(params) {
+    return request({
+        url: '/safety/index/company/top/sort',
+        method: 'post',
+        params
+    })
+}
+
+//石化总数,预警,剧毒,易制爆,易制毒,放射源
+export function statisticsDetail(params) {
+    return request({
+        url: '/safety/index/company/statistics/detail',
+        method: 'post',
+        params
+    })
+}

src/views/archives/anjian.vue

@@ -38,7 +38,7 @@
         <el-dialog title="案件详情" :visible.sync="diaVisible" class="picForm" v-if="anjianDetail">
 
             <div class="jibenx">
-                <div class="jibenhang">
+                <!-- <div class="jibenhang">
                     <div class="jibenhangTitle">企业名称</div>
                     <div class="jibenhangleftText">
                         <span v-html="anjianDetail.caseName"></span>
@@ -47,7 +47,7 @@
                     <div class="jibenhangrightText">
                         <div>{{ anjianDetail.caseName }}</div>
                     </div>
-                </div>
+                </div> -->
                 <div class="jibenhang">
                     <div class="jibenhangTitle">案件编号</div>
                     <div class="jibenhangleftText">
@@ -292,7 +292,7 @@ export default {
                     border: 1px solid rgba(91, 116, 140, 0.6);
 
                     .jibenhang {
-                        height: 16%;
+                        height: 19%;
                         width: 100%;
                         display: flex;
                         border-bottom: 1px solid rgba(91, 116, 140, 0.6);
@@ -350,7 +350,7 @@ export default {
                     }
 
                     .jibenhang1 {
-                        height: 19%;
+                        height: 24%;
                         width: 100%;
                         border-bottom: 0;
                         box-sizing: border-box;

src/views/archives/car.vue

@@ -6,7 +6,7 @@
         </div>
         <el-form :model="formInline" class="search">
             <el-form-item label="车牌号：" class="formItem">
-                <el-input v-model.trim="formInline.plateNo" class="formIpt"></el-input>
+                <el-input v-model.trim="formInline.plateNo" clearable class="formIpt"></el-input>
             </el-form-item>
             <el-button type="primary" @click="getList()">搜索</el-button>
         </el-form>

src/views/archives/fangke.vue

@@ -8,11 +8,11 @@
             <el-form-item label="时间：" class="formItem" style="width:500px">
                 <el-date-picker v-model="chooseTime" type="datetimerange" range-separator="至" start-placeholder="开始日期"
                     end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" @change="GetchangeTime"
-                    value-format="yyyy-MM-dd HH:mm:ss">
+                    :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss">
                 </el-date-picker>
             </el-form-item>
             <el-form-item label="人员姓名：" class="formItem">
-                <el-input v-model.trim="formInline.flowName" class="formIpt"></el-input>
+                <el-input v-model.trim="formInline.visitName" clearable class="formIpt"></el-input>
             </el-form-item>
             <el-button type="primary" @click="getList()">搜索</el-button>
         </el-form>
@@ -67,6 +67,35 @@ export default {
             wpCount: {},
             goodsType: null,
             chooseTime: '',
+            pickerOptions: {
+                shortcuts: [{
+                    text: '近一周',
+                    onClick(picker) {
+                        const end = new Date();
+                        const start = new Date();
+                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+                        picker.$emit('pick', [start, end]);
+                    }
+                },
+                {
+                    text: '近一个月',
+                    onClick(picker) {
+                        const end = new Date();
+                        const start = new Date();
+                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+                        picker.$emit('pick', [start, end]);
+                    }
+                },
+                {
+                    text: '近三个月',
+                    onClick(picker) {
+                        const end = new Date();
+                        const start = new Date();
+                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+                        picker.$emit('pick', [start, end]);
+                    }
+                }]
+            },
         }
     },
     created() {

src/views/archives/index.vue

@@ -175,8 +175,8 @@
                     <el-dialog title="企业图片" :visible.sync="diaVisible" class="picForm">
                         <img :src="companyData.picUrl" @mouseover="showpic()">
                         <div class="zhezhao" v-if="picShow" @mouseleave="closepic()">
-                            <el-button>重新上传</el-button>
+                            <el-button @click="uploadPic()">重新上传</el-button>
-                            <el-button type="primary">下载图片</el-button>
+                            <el-button type="primary" @click="downloadPic()">下载图片</el-button>
                         </div>
                     </el-dialog>
                 </div>
@@ -195,9 +195,9 @@
 </template>
 
 <script>
-//import download from '@/api/download'
-import { safeIndex, baseInfo } from '@/api/archives'
 
+import { safeIndex, baseInfo } from '@/api/archives'
+//import { download } from '@/api/download'
 import monitor from './monitor.vue'
 import kakou from './kakou.vue'
 import yujing from './yujing.vue'
@@ -327,6 +327,10 @@ export default {
         },
         goBack() {
             this.$router.go(-1)
+        },
+        downloadPic() {
+        },
+        uploadPic() {
         }
     }
 }

src/views/archives/kakou.vue

@@ -8,21 +8,21 @@
             <el-form-item label="时间：" class="formItem" style="width:500px">
                 <el-date-picker v-model="chooseTime" type="datetimerange" range-separator="至" start-placeholder="开始日期"
                     end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" @change="GetchangeTime"
-                    value-format="yyyy-MM-dd HH:mm:ss">
+                    :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss">
                 </el-date-picker>
             </el-form-item>
             <el-form-item label="身份证号：" class="formItem" v-if="activeName == 'first'">
-                <el-input v-model.trim="formInline.idcard" class="formIpt"></el-input>
+                <el-input v-model.trim="formInline.idcard" clearable class="formIpt" @change="clearPage()"></el-input>
             </el-form-item>
-            <el-form-item label="姓名：" class="formItem" v-if="activeName == 'first'">
+            <el-form-item label="姓名：" class="formItem" v-if="activeName == 'first'" @change="clearPage()">
-                <el-input v-model.trim="formInline.userName" class="formIpt"></el-input>
+                <el-input v-model.trim="formInline.userName" clearable class="formIpt"></el-input>
             </el-form-item>
-            <el-form-item label="车牌号：" class="formItem" v-if="activeName == 'second'">
+            <el-form-item label="车牌号：" class="formItem" v-if="activeName == 'second'" @change="clearPage()">
-                <el-input v-model.trim="formInline.plateNo" class="formIpt"></el-input>
+                <el-input v-model.trim="formInline.plateNo" clearable class="formIpt"></el-input>
             </el-form-item>
             <el-button type="primary" @click="getList()">搜索</el-button>
         </el-form>
-        <el-tabs v-model="activeName" type="card">
+        <el-tabs v-model="activeName" type="card" @tab-click="getList()">
             <el-tab-pane name="first">
                 <div slot="label" class="tabdv">人脸 </div>
                 <div style="width: 100%; height: 622px;  display: flex; justify-content: space-between;"
@@ -158,6 +158,35 @@ export default {
             chooseTime: '',
             imgDetailList: {},
             vechileDetailList: {},
+            pickerOptions: {
+                shortcuts: [{
+                    text: '近一周',
+                    onClick(picker) {
+                        const end = new Date();
+                        const start = new Date();
+                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+                        picker.$emit('pick', [start, end]);
+                    }
+                },
+                {
+                    text: '近一个月',
+                    onClick(picker) {
+                        const end = new Date();
+                        const start = new Date();
+                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+                        picker.$emit('pick', [start, end]);
+                    }
+                },
+                {
+                    text: '近三个月',
+                    onClick(picker) {
+                        const end = new Date();
+                        const start = new Date();
+                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+                        picker.$emit('pick', [start, end]);
+                    }
+                }]
+            },
         }
     },
     computed: {
@@ -179,16 +208,27 @@ export default {
     },
     methods: {
         getList() {
+            if (this.activeName == 'first') {
                 realTimePassageFlowFace({ pageSize: this.pageSize, pageNum: this.pageNum, ...this.formInline, companyId: this.companyID }).then(res => {
                     this.tableData = res.data
                     this.imgDetailList = res.data[0] || {}
                     this.total = res.total
+                    if (!res.data.length) {
+                        this.$message.warning('没有匹配数据')
+                    }
                 })
+            } else {
                 realTimePassageFlowVehicle({ pageSize: this.pageSize, pageNum: this.pageNum, ...this.formInline, companyId: this.companyID }).then(res => {
                     this.vechileList = res.data
                     this.total = res.total
                     this.vechileDetailList = res.data[0] || {}
+                    if (!res.data.length) {
+                        this.$message.warning('没有匹配数据')
+                    }
                 })
+            }
+
+
         },
         GetchangeTime() {
             console.log(this.chooseTime);
@@ -199,6 +239,7 @@ export default {
                 this.formInline.startTime = null
                 this.formInline.endTime = null
             }
+            this.pageNum = 1;
         },
         showDetail(item) {
             this.imgDetailList = item
@@ -222,6 +263,10 @@ export default {
             })
             imgs[index].className = 'imgListItem imgListItemFocus'
         },
+        clearPage() {
+            console.log('clearPage');
+            this.pageNum = 1;
+        },
         handleSizeChange(val) {
             console.log(`每页 ${val} 条`);
             this.pageNum = 1;
@@ -486,7 +531,7 @@ export default {
         height: 622px;
 
         display: flex;
-        justify-content: space-evenly;
+
         align-content: space-between;
         flex-wrap: wrap;
 
@@ -496,6 +541,7 @@ export default {
             background: url("~@/assets/archives/背景9001.png") no-repeat;
             background-size: 100% 100%;
             padding: 10px;
+            margin: 0 7px;
 
             .ListItem {
                 background: url("~@/assets/archives/矩形备份 2921.png") no-repeat;

src/views/archives/liudongrenyuan.vue

@@ -6,7 +6,7 @@
         </div>
         <el-form :model="formInline" class="search">
             <el-form-item label="人员姓名：" class="formItem">
-                <el-input v-model.trim="formInline.flowName" class="formIpt"></el-input>
+                <el-input v-model.trim="formInline.flowName" clearable class="formIpt"></el-input>
             </el-form-item>
             <el-button type="primary" @click="getList()">搜索</el-button>
         </el-form>

src/views/archives/monitor.vue

@@ -6,7 +6,7 @@
         </div>
         <el-form :model="formInline" class="search">
             <el-form-item label="设备名称：" class="formItem">
-                <el-input v-model.trim="formInline.deviceName" class="formIpt"></el-input>
+                <el-input v-model.trim="formInline.deviceName" clearable class="formIpt"></el-input>
             </el-form-item>
             <el-button type="primary" @click="getList()">搜索</el-button>
         </el-form>

src/views/archives/qiyeyuangong.vue

@@ -6,7 +6,7 @@
         </div>
         <el-form :model="formInline" class="search">
             <el-form-item label="员工姓名：" class="formItem">
-                <el-input v-model.trim="formInline.staffName" class="formIpt"></el-input>
+                <el-input v-model.trim="formInline.staffName" clearable class="formIpt"></el-input>
             </el-form-item>
             <el-button type="primary" @click="getList()">搜索</el-button>
         </el-form>

src/views/archives/wupin.vue

@@ -6,7 +6,7 @@
         </div>
         <el-form :model="formInline" class="search">
             <el-form-item label="物品名称：" class="formItem">
-                <el-input v-model.trim="formInline.goodsName" class="formIpt"></el-input>
+                <el-input v-model.trim="formInline.goodsName" clearable class="formIpt"></el-input>
             </el-form-item>
             <el-button type="primary" @click="getList()">搜索</el-button>
         </el-form>

src/views/archives/yujing.vue

@@ -10,20 +10,22 @@
                 :header-row-style="tableHeaderColor" :header-cell-style="tableHeaderCellColor">
                 <el-table-column type="index" width="50" label="序号">
                 </el-table-column>
-                <el-table-column show-overflow-tooltip label="预警类型">
+                <el-table-column show-overflow-tooltip label="预警等级">
                     <template slot-scope="scope">
                         <div class="alarmType">
                             <div class="red" v-if="scope.row.alarmColor == 'red'">红色预警</div>
                             <div class="yellow" v-if="scope.row.alarmColor == 'yellow'">黄色预警</div>
+                            <div class="blue" v-if="scope.row.alarmColor == 'blue'">蓝色预警</div>
+                            <div class="green" v-if="scope.row.alarmColor == 'green'">绿色预警</div>
                         </div>
                     </template>
                 </el-table-column>
-                <el-table-column show-overflow-tooltip prop="alarmIndex" label="预警指标">
+
+                <el-table-column show-overflow-tooltip prop="alarmindex" label="预警指标">
                 </el-table-column>
+
                 <el-table-column show-overflow-tooltip prop="alarmTime" label="预警时间">
                 </el-table-column>
-                <el-table-column show-overflow-tooltip prop="responsibleDepartment" label="责任部门">
-                </el-table-column>
                 <el-table-column show-overflow-tooltip prop="alarmStatusCn" label="处置状态">
                 </el-table-column>
                 <el-table-column show-overflow-tooltip prop="updateTime" label="更新时间">
@@ -181,6 +183,26 @@ export default {
                 justify-content: center;
                 align-items: center;
             }
+
+            .blue {
+                width: 100%;
+                height: 100%;
+                background: rgba(6, 89, 197, 0.21);
+                border: 1px solid rgb(11, 108, 205);
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+
+            .green {
+                width: 100%;
+                height: 100%;
+                background: rgba(6, 184, 27, 0.21);
+                border: 1px solid rgb(1, 170, 43);
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
         }
     }
 

src/views/enterpriseArchives/result.vue

@@ -148,7 +148,13 @@ export default {
         gethistoryList() {
             historyList().then((res) => {
                 this.historyList1 = res.data
+                this.historyList1 = this.historyList1.filter((item, index) => {
+                    if (index < 5) {
+                        return item
+                    }
                 })
+            })
+
         },
     }
 }

src/views/safetyIndex/cheliang.vue

@@ -0,0 +1,346 @@
+<template>
+    <div class="qycl">
+        <div class="title"><img src="../../assets/safetyIndex/装饰009991.png" alt="">企业车辆</div>
+        <div class="qyclBody">
+            <div class="today">
+                <div class="todayChild">
+                    <div class="iconBox"><img src="../../assets/safetyIndex/今日进园区.png" alt=""></div>
+                    <div class="iconmsg">
+                        <div class="msgText">今日进园区</div>
+                        <div class="msgNum"><span>{{ intotal }}</span>&nbsp;辆</div>
+                    </div>
+                </div>
+                <div class="todayChild">
+                    <div class="iconBox"><img src="../../assets/safetyIndex/今日出园区.png" alt=""></div>
+                    <div class="iconmsg">
+                        <div class="msgText">今日出园区</div>
+                        <div class="msgNum"><span>{{ outtotal }}</span>&nbsp;辆</div>
+                    </div>
+                </div>
+            </div>
+            <div class="today">
+                <div class="todayChild" @click="showfangkeVisible(1)" style="cursor: pointer;">
+                    <div class="iconBox"><img src="../../assets/safetyIndex/物流.png" alt=""></div>
+                    <div class="iconmsg">
+                        <div class="msgText">自有</div>
+                        <div class="msgNum"><span>{{ ziyouTotal }}</span>&nbsp;辆</div>
+                    </div>
+                </div>
+                <div class="todayChild" @click="showfangkeVisible(2)" style="cursor: pointer;">
+                    <div class="iconBox"><img src="../../assets/safetyIndex/消防.png" alt=""></div>
+                    <div class="iconmsg">
+                        <div class="msgText">租赁</div>
+                        <div class="msgNum"><span>{{ zulintotal }}</span>&nbsp;辆</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <el-dialog title="企业车辆详情" :visible.sync="fangkeVisible" class="fangkeForm">
+            <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 type="index" width="50" label="序号">
+                </el-table-column>
+                <el-table-column show-overflow-tooltip prop="plateNo" label="车牌号" width="100">
+                </el-table-column>
+                <el-table-column show-overflow-tooltip prop="vehicleType" label="车型" width="120">
+                </el-table-column>
+                <el-table-column show-overflow-tooltip prop="useTypeCn" label="使用方式" width="80">
+                </el-table-column>
+                <el-table-column show-overflow-tooltip prop="companyName" label="归属单位">
+                </el-table-column>
+                <el-table-column show-overflow-tooltip prop="vinNo" label="车架号" width="180">
+                </el-table-column>
+                <el-table-column show-overflow-tooltip prop="nuclearLoad" label="核载" width="80">
+                </el-table-column>
+                <el-table-column show-overflow-tooltip prop="deadWeight" label="自重" width="80">
+                </el-table-column>
+                <el-table-column show-overflow-tooltip prop="plateColor" label="车牌颜色" width="80">
+                </el-table-column>
+                <el-table-column show-overflow-tooltip prop="transportLicense" label="运输许可证" width="120">
+                </el-table-column>
+                <el-table-column show-overflow-tooltip prop="registerTime" label="登记时间">
+                </el-table-column>
+            </el-table>
+            <div class="block">
+                <el-pagination style="float:right;margin:5px;" class="msg-pagination-container" :background="true"
+                    @size-change="fangkeSizeChange" @current-change="fangkeCurrentChange" :current-page="fangkepageNum"
+                    :page-sizes="[10]" layout="total, sizes, prev, pager, next, jumper" :total="fangketotal">
+                </el-pagination>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import { vehicleUserType, vehicleOut, vehicleIn, vehicleDetail } from '@/api/safetyIndex'
+export default {
+    data() {
+        return {
+            staffStatisticsList: [],
+            staffDetailList: [],
+            listTotal: {},
+            fangkeVisible: false,
+            fangkepageSize: 10,
+            fangkepageNum: 1,
+            fangketotal: 0,
+            fangkeList: [],
+            intotal: 0,
+            outtotal: 0,
+            ziyouTotal: 0,
+            zulintotal: 0,
+            useType: 0,
+        }
+    },
+    created() {
+        this.getUserType()
+        vehicleIn().then(res => {
+            this.intotal = res.data
+        })
+        vehicleOut().then(res => {
+            this.outtotal = res.data
+        })
+    },
+    methods: {
+        tableRowStyle({ rowIndex }) {
+            if ((rowIndex + 1) % 2 == 1) {
+                return { 'background': 'rgba(0,0,0,0)', 'color': '#fff', 'border': '0' }
+            } else {
+                return { 'background': 'rgba(61, 85, 102, 0.16)', 'border': '0', 'color': '#fff' }
+            }
+        },
+        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%)' }
+            // 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' }
+        },
+
+        fangkeSizeChange(val) {
+            this.fangkepageNum = 1;
+            this.fangkepageSize = val;
+            this.showfangkeVisible(this.useType)
+        },
+        fangkeCurrentChange(val) {
+            this.fangkepageNum = val;
+            this.showfangkeVisible(this.useType)
+        },
+
+        getUserType() {
+            vehicleUserType({ useType: 1 }).then(res => {
+                this.ziyouTotal = res.data
+            })
+            vehicleUserType({ useType: 2 }).then(res => {
+                this.zulintotal = res.data
+            })
+
+        },
+        showfangkeVisible(val) {
+            this.useType = val
+            vehicleDetail({ pageSize: this.fangkepageSize, pageNum: this.fangkepageNum, useType: this.useType }).then(res => {
+                this.fangkeList = res.data
+                this.fangketotal = res.total
+                this.fangkeVisible = true
+            })
+
+        }
+    },
+}
+</script>
+
+<style lang="less" scoped>
+.qycl {
+    height: 186px;
+    width: 100%;
+    margin-bottom: 20px;
+    background: url('~@/assets/safetyIndex/主屏板块1.png') no-repeat;
+    background-size: 100% 100%;
+
+
+
+    .title {
+        width: 100%;
+        height: 33px;
+        background: url('~@/assets/safetyIndex/标题样式.png') no-repeat;
+        background-size: 100% 100%;
+        font-size: 16px;
+        color: #D9E7FF;
+        letter-spacing: 1px;
+        text-align: center;
+        font-weight: 500;
+        display: flex;
+        align-items: center;
+
+        img {
+            width: 16px;
+            height: 16px;
+            margin: 0 12px;
+        }
+    }
+
+    .qyclBody {
+        width: 100%;
+        height: calc(100% - 33px);
+        padding: 0 20px;
+        box-sizing: border-box;
+
+        .today {
+            width: 100%;
+            height: 50%;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 5px 0;
+            box-sizing: border-box;
+
+            .todayChild {
+                width: 48%;
+                height: 100%;
+                display: flex;
+
+                align-items: center;
+                box-sizing: border-box;
+
+                .iconBox {
+                    width: 48px;
+                    height: 48px;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    background: url('~@/assets/safetyIndex/编组 16.png') no-repeat;
+                    background-size: 100% 100%;
+                    margin-left: 20px;
+
+                    img {
+                        width: 18px;
+                        height: 18px;
+                    }
+                }
+
+                .iconmsg {
+                    margin-left: 10px;
+                    width: 108px;
+                    height: 58px;
+
+
+                    .msgText {
+                        height: 50%;
+                        width: 100%;
+                        font-size: 14px;
+                        color: #D0DEEE;
+                        letter-spacing: 1px;
+                        vertical-align: middle;
+                        font-weight: 400;
+                        line-height: 29px;
+                    }
+
+                    .msgNum {
+                        height: 50%;
+                        width: 100%;
+                        background: url('~@/assets/safetyIndex/矩形21.png') no-repeat;
+                        background-size: 100% 100%;
+                        font-size: 12px;
+                        color: rgba(255, 255, 255, 0.5);
+                        letter-spacing: 1.25px;
+                        line-height: 18px;
+                        font-weight: 600;
+                        vertical-align: middle;
+                        line-height: 29px;
+                        padding-left: 10px;
+                        box-sizing: border-box;
+
+                        span {
+                            font-size: 20px;
+                            color: #FFFFFF;
+                            letter-spacing: 2.08px;
+                            line-height: 21px;
+                            font-weight: 700;
+                            vertical-align: middle;
+                            line-height: 29px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .today:first-child {
+            border-bottom: 1px solid rgba(114, 155, 137, 0.48);
+        }
+    }
+
+
+
+}
+
+
+.fangkeForm {
+
+
+    /deep/ .el-dialog {
+        background-color: rgba(0, 0, 0, 0);
+        background: url('~@/assets/head/编组 3021112.png') no-repeat;
+        background-size: 100% 100%;
+        width: 1241px;
+        height: 640px;
+        position: relative;
+
+        .el-dialog__title {
+            font-size: 16px;
+            color: #EBFFF4;
+            letter-spacing: 2px;
+
+            text-shadow: 0 0 9px rgba(21, 255, 195, 0.77);
+            font-weight: 400;
+        }
+
+        .el-dialog__body {
+            box-sizing: border-box;
+            height: 360px;
+
+            .scopeQuantity {
+                letter-spacing: 2px;
+            }
+
+        }
+    }
+}
+
+/deep/.el-table {
+    background: rgba(0, 0, 0, 0);
+
+    td.el-table__cell {
+        border: 0;
+    }
+
+    .xiangqing {
+        background: rgba(0, 0, 0, 0);
+        border: 0;
+        color: rgba(48, 196, 255, 0.7);
+        cursor: pointer;
+    }
+
+    .staffPic {
+        width: 19px;
+        height: 25px;
+    }
+}
+
+/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/index.vue

@@ -2,21 +2,28 @@
     <div class="main">
         <div class="leftBox">
             <yuangong></yuangong>
-            <div class="qycl">
+            <cheliang></cheliang>
-
+            <wupin></wupin>
         </div>
-            <div class="qywp">
+        <div class="middleBox">
+            <toubu></toubu>
 
         </div>
     </div>
-    </div>
 </template>
 
 <script>
 import yuangong from './yuangong.vue'
+import cheliang from './cheliang.vue'
+import wupin from './wupin.vue'
+import toubu from './toubu.vue'
+
 export default {
     components: {
-        yuangong
+        yuangong,
+        cheliang,
+        wupin,
+        toubu
     },
     data() {
         return {
@@ -39,7 +46,8 @@ export default {
     .leftBox {
         width: 440px;
         height: 100%;
-
+        margin-right: 20px;
+        box-sizing: border-box;
 
 
         .qycl {
@@ -58,5 +66,12 @@ export default {
             background-size: 100% 100%;
         }
     }
+
+    .middleBox {
+        width: calc(100% - 920px);
+        height: 100%;
+
+
+    }
 }
 </style>

src/views/safetyIndex/toubu.vue

@@ -0,0 +1,667 @@
+<template>
+    <div class="toubu">
+        <div class="topBox">
+            <div class="topleftIcon"></div>
+            <div class="toprightIcon"></div>
+            <div class="topHead">
+                <div class="topHeadItem">
+                    平安&nbsp;&nbsp;<span class="blue">{{ statisticsAlarmData.safeSum }}</span><span
+                        class="jia">&nbsp;家</span>
+                </div>
+                <div class="shu"></div>
+                <div class="topHeadItem">
+                    石化企业总数&nbsp;&nbsp;<span class="yellow">{{ statisticsAlarmData.companySum }}</span><span
+                        class="jia">&nbsp;家</span>
+                </div>
+                <div class="shu"></div>
+                <div class="topHeadItem">
+                    预警&nbsp;&nbsp;<span class="red">{{ statisticsAlarmData.alarmSum }}</span><span
+                        class="jia">&nbsp;家</span>
+                </div>
+            </div>
+            <div class="topBottom">
+                <div class="topBottomItem">
+                    <img src="../../assets/safetyIndex/涉危企业.png" alt="">
+                    <div class="itemBox">
+                        <div class="qiye">{{ statisticsDangerData[0].companyTypeName }}</div>
+                        <div class="qiyeshu"><span class="qiyenum">{{ statisticsDangerData[0].companyTypeSum }}</span>
+                            &nbsp;家</div>
+                    </div>
+                </div>
+                <div class="topBottomItem">
+                    <img src="../../assets/safetyIndex/易制爆企业2.png" alt="">
+                    <div class="itemBox">
+                        <div class="qiye">{{ statisticsDangerData[1].companyTypeName }}</div>
+                        <div class="qiyeshu"><span class="qiyenum">{{ statisticsDangerData[1].companyTypeSum }}</span>
+                            &nbsp;家</div>
+                    </div>
+                </div>
+                <div class="topBottomItem">
+                    <img src="../../assets/safetyIndex/易制毒2.png" alt="">
+                    <div class="itemBox">
+                        <div class="qiye">{{ statisticsDangerData[2].companyTypeName }}</div>
+                        <div class="qiyeshu"><span class="qiyenum">{{ statisticsDangerData[2].companyTypeSum }}</span>
+                            &nbsp;家</div>
+                    </div>
+                </div>
+                <div class="topBottomItem">
+                    <img src="../../assets/safetyIndex/放射源2.png" alt="">
+                    <div class="itemBox">
+                        <div class="qiye">{{ statisticsDangerData[3].companyTypeName }}</div>
+                        <div class="qiyeshu"><span class="qiyenum">{{ statisticsDangerData[3].companyTypeSum }}</span>
+                            &nbsp;家</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <el-select v-model="Selectvalue" placeholder="请选择" class="topSelect">
+            <el-option label="排名" value="排名">
+            </el-option>
+            <el-option label="地图" value="地图">
+            </el-option>
+        </el-select>
+        <div class="middleBox" v-if="Selectvalue == '排名'">
+            <el-tabs type="border-card" class="topTabs" v-model="topTabsName" @tab-click="gettopSort()">
+                <el-tab-pane label="月度" name="month"></el-tab-pane>
+                <el-tab-pane label="季度" name="season"></el-tab-pane>
+                <el-tab-pane label="年度" name="year"></el-tab-pane>
+            </el-tabs>
+
+            <div class="second" v-if="topSortData.length > 1">
+                <div class="mingci">
+                    <img src="../../assets/safetyIndex/第二名.png" alt="">&nbsp;
+                    总得分：&nbsp;<span>{{ topSortData[1].score }}</span>
+                </div>
+                <div class="tupian">
+                    <img :src="topSortData[1].picUrl" alt="">
+                </div>
+                <div class="companyMsg">
+                    <div class="mingcheng">
+                        企业名称&nbsp;&nbsp;<span>{{ topSortData[1].companyName }}</span>
+                    </div>
+                    <div class="mingcheng">
+                        企业地址&nbsp;&nbsp;<span>{{ topSortData[1].companyAddress }}</span>
+                    </div>
+                </div>
+            </div>
+            <div class="third" v-if="topSortData.length > 2">
+                <div class="mingci">
+                    <img src="../../assets/safetyIndex/第三名.png" alt="">&nbsp;
+                    总得分：&nbsp;<span>{{ topSortData[2].score }}</span>
+                </div>
+                <div class="tupian">
+                    <img :src="topSortData[2].picUrl" alt="">
+                </div>
+                <div class="companyMsg">
+                    <div class="mingcheng">
+                        企业名称&nbsp;&nbsp;<span>{{ topSortData[2].companyName }}</span>
+                    </div>
+                    <div class="mingcheng">
+                        企业地址&nbsp;&nbsp;<span>{{ topSortData[2].companyAddress }}</span>
+                    </div>
+                </div>
+            </div>
+            <div class="first" v-if="topSortData.length">
+                <div class="mingci">
+                    <img src="../../assets/safetyIndex/第一名.png" alt="">&nbsp;
+                    总得分：&nbsp;<span>{{ topSortData[0].score }}</span>
+                </div>
+                <div class="tupian">
+                    <img :src="topSortData[0].picUrl" alt="">
+                </div>
+                <div class="companyMsg">
+                    <div class="mingcheng">
+                        企业名称&nbsp;&nbsp;<span>{{ topSortData[0].companyName }}</span>
+                    </div>
+                    <div class="mingcheng">
+                        企业地址&nbsp;&nbsp;<span>{{ topSortData[0].companyAddress }}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import { statisticsAlarm, statisticsDanger, statisticsDetail, topSort } from '@/api/safetyIndex'
+export default {
+    data() {
+        return {
+            Selectvalue: '排名',
+            topTabsName: 'month',
+            statisticsAlarmData: {},
+            statisticsDangerData: [],
+            statisticsDetailData: {},
+            topSortData: [],
+
+
+        }
+    },
+    created() {
+        this.getStatisticsAlarm()
+        this.getstatisticsDanger()
+        // this.getstatisticsDetail()
+        this.gettopSort()
+    },
+    methods: {
+        getStatisticsAlarm() {
+            statisticsAlarm().then(res => {
+                this.statisticsAlarmData = res.data
+            })
+        },
+        getstatisticsDanger() {
+            statisticsDanger().then(res => {
+                this.statisticsDangerData = res.data
+            })
+        },
+        getstatisticsDetail() {
+            statisticsDetail().then(res => {
+                this.statisticsDetailData = res.data
+            })
+        },
+        gettopSort() {
+            topSort({ scoreType: this.topTabsName }).then(res => {
+                this.topSortData = res.data
+            })
+        },
+
+    },
+}
+</script>
+<style lang="less" scoped>
+.toubu {
+    width: 100%;
+    height: 496px;
+    background: url('~@/assets/safetyIndex/主屏板块4.png') no-repeat;
+    background-size: 100% 100%;
+    padding: 35px 20px 20px;
+    box-sizing: border-box;
+    position: relative;
+
+    .topBox {
+        width: 100%;
+        height: 30%;
+        background: url('~@/assets/safetyIndex/90981.png') no-repeat;
+        background-size: 100% 100%;
+        box-sizing: border-box;
+        position: relative;
+        padding: 8px 0;
+
+        .topleftIcon {
+            width: 18px;
+            height: 18px;
+            position: absolute;
+            background: url('~@/assets/safetyIndex/装饰6710.png') no-repeat;
+            background-size: 100% 100%;
+            left: 18px;
+            top: 15px;
+        }
+
+        .toprightIcon {
+            width: 18px;
+            height: 18px;
+            position: absolute;
+            background: url('~@/assets/safetyIndex/装饰6710.png') no-repeat;
+            background-size: 100% 100%;
+            right: 18px;
+            top: 15px;
+        }
+
+        .topHead {
+            height: 40px;
+            width: 80%;
+
+            margin: 0 auto;
+            display: flex;
+
+            .topHeadItem {
+                height: 40px;
+                width: 33%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 16px;
+                color: #D0DEEE;
+                letter-spacing: 1.14px;
+                font-weight: 500;
+
+                .blue {
+                    font-size: 20px;
+                    color: #66D9FF;
+                    letter-spacing: 1.25px;
+                    text-align: right;
+                    font-weight: 700;
+                }
+
+                .yellow {
+                    font-size: 20px;
+                    color: #FEF699;
+                    letter-spacing: 1.25px;
+                    text-align: right;
+                    font-weight: 700;
+                }
+
+                .red {
+                    font-family: AlimamaShuHeiTi;
+                    font-size: 20px;
+                    color: #FA3737;
+                    letter-spacing: 1.25px;
+                    text-align: right;
+                    font-weight: 700;
+                }
+
+                .jia {
+                    font-size: 12px;
+                    color: #FFFFFF;
+                    letter-spacing: 1.25px;
+                    line-height: 18px;
+                    font-weight: 600;
+                    opacity: 0.5;
+
+                }
+            }
+
+            .shu {
+                width: 1px;
+                height: 40px;
+                background-image: linear-gradient(180deg, rgba(71, 88, 99, 0.00) 0%, #79919D 48%, rgba(69, 88, 97, 0.00) 100%);
+            }
+        }
+
+        .topBottom {
+            height: 70px;
+            width: 95%;
+            margin: 5px auto;
+            display: flex;
+            justify-content: space-between;
+
+            .topBottomItem {
+                height: 100%;
+                width: calc(25% - 15px);
+                background: url('~@/assets/safetyIndex/23111.png') no-repeat;
+                background-size: 100% 100%;
+                display: flex;
+                justify-content: space-around;
+                align-items: center;
+
+                img {
+                    width: 46px;
+                    height: 35px;
+                }
+
+                .itemBox {
+                    width: 100px;
+                    height: 40px;
+
+                    .qiye {
+                        font-size: 14px;
+                        color: #C4E5FF;
+                        letter-spacing: 0.78px;
+                        font-weight: 500;
+                    }
+
+                    .qiyeshu {
+                        font-size: 12px;
+                        color: rgba(255, 255, 255, 0.5);
+                        letter-spacing: 1.25px;
+                        line-height: 18px;
+                        font-weight: 600;
+
+                        .qiyenum {
+                            font-size: 20px;
+                            color: #EBF9FF;
+                            letter-spacing: 1px;
+                            line-height: 37px;
+                            text-shadow: 0 0 9px #159AFF;
+                            font-weight: 700;
+                        }
+                    }
+                }
+
+            }
+        }
+    }
+
+    .topSelect {
+        position: absolute;
+        top: 35%;
+        right: 20px;
+        z-index: 22;
+
+        /deep/ .el-input {
+            width: 100px;
+            height: 30px;
+
+            .el-select__caret {
+                line-height: 30px;
+            }
+
+            .el-input__inner {
+                height: 30px;
+                background: url('~@/assets/safetyIndex/选择框.png') no-repeat;
+                background-size: 100% 100%;
+                font-size: 14px;
+                color: #C4E5FF;
+                letter-spacing: 1px;
+                text-align: center;
+                font-weight: 400;
+                border: 0;
+
+
+
+
+            }
+        }
+    }
+
+    .middleBox {
+        width: 100%;
+        height: 67.5%;
+        margin-top: 10px;
+        position: relative;
+        padding-top: 30px;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+        align-items: end;
+        position: relative;
+
+        .second {
+            width: 31.34%;
+            height: 80%;
+            background: url('~@/assets/safetyIndex/39088132.png') no-repeat;
+            background-size: 100% 100%;
+            padding: 5px 27px 12px 10px;
+            box-sizing: border-box;
+            text-align: center;
+
+            .mingci {
+                height: 18px;
+                width: 100%;
+                font-size: 12px;
+                color: rgba(235, 249, 255, 0.8);
+                letter-spacing: 1.5px;
+                font-weight: 400;
+
+                img {
+                    height: 18px;
+                    width: 22px;
+                }
+
+                span {
+                    font-size: 16px;
+                    color: #FFFCEB;
+                    letter-spacing: 2px;
+                    line-height: 16px;
+                    text-shadow: 0 0 9px rgba(255, 236, 21, 0.58);
+                    font-weight: 700;
+                }
+            }
+
+            .tupian {
+                margin-top: 10px;
+                width: 100%;
+                height: 105px;
+
+                img {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+
+            .companyMsg {
+                margin-top: 10px;
+                height: calc(100% - 143px);
+                width: 100%;
+                overflow: hidden;
+                text-overflow: ellipsis;
+
+                .mingcheng {
+                    padding-left: 5px;
+                    height: 33.33%;
+
+                    width: 100%;
+                    font-size: 12px;
+                    color: rgba(208, 222, 238, 0.8);
+                    letter-spacing: 0.86px;
+                    font-weight: 400;
+                    text-align: left;
+
+                    span {
+                        font-size: 14px;
+                        color: #D0DEEE;
+                        letter-spacing: 0.75px;
+                        font-weight: 500;
+                    }
+                }
+            }
+        }
+
+        .third {
+            width: 31.34%;
+            height: 80%;
+            background: url('~@/assets/safetyIndex/编组 352111.png') no-repeat;
+            background-size: 100% 100%;
+            padding: 5px 10px 12px 27px;
+            box-sizing: border-box;
+            text-align: center;
+
+            .mingci {
+                height: 18px;
+                width: 100%;
+                font-size: 12px;
+                color: rgba(235, 249, 255, 0.8);
+                letter-spacing: 1.5px;
+                font-weight: 400;
+
+                img {
+                    height: 18px;
+                    width: 22px;
+                }
+
+                span {
+                    font-size: 16px;
+                    color: #FFFCEB;
+                    letter-spacing: 2px;
+                    line-height: 16px;
+                    text-shadow: 0 0 9px rgba(255, 31, 21, 0.75);
+                    font-weight: 700;
+                }
+            }
+
+            .tupian {
+                margin-top: 10px;
+                width: 100%;
+                height: 105px;
+
+                img {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+
+            .companyMsg {
+                margin-top: 10px;
+                height: calc(100% - 143px);
+                width: 100%;
+                overflow: hidden;
+                text-overflow: ellipsis;
+
+                .mingcheng {
+                    padding-left: 5px;
+                    height: 33.33%;
+
+                    width: 100%;
+                    font-size: 12px;
+                    color: rgba(208, 222, 238, 0.8);
+                    letter-spacing: 0.86px;
+                    font-weight: 400;
+                    text-align: left;
+
+                    span {
+                        font-size: 14px;
+                        color: #D0DEEE;
+                        letter-spacing: 0.75px;
+                        font-weight: 500;
+                    }
+                }
+            }
+
+        }
+
+        .first {
+            position: absolute;
+            box-sizing: border-box;
+            width: 41%;
+            height: calc(100% - 30px);
+            left: 50%;
+            top: 30px;
+            margin-left: -20.5%;
+            background: url('~@/assets/safetyIndex/编组 3521.png') no-repeat;
+            background-size: 100% 100%;
+            padding: 10px 16px 16px;
+            text-align: center;
+
+            .mingci {
+                height: 22px;
+                width: 100%;
+
+                color: rgba(235, 249, 255, 0.8);
+                font-size: 14px;
+                color: #EBF9FF;
+                letter-spacing: 1.75px;
+                font-weight: 400;
+
+                img {
+                    height: 20px;
+                    width: 24px;
+                }
+
+                span {
+                    font-size: 20px;
+                    color: #EBF9FF;
+                    letter-spacing: 2.5px;
+                    line-height: 37px;
+                    text-shadow: 0 0 9px #159AFF;
+                    font-weight: 700;
+                }
+            }
+
+            .tupian {
+                margin-top: 20px;
+                width: 100%;
+                height: 135px;
+
+                img {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+
+            .companyMsg {
+                margin-top: 10px;
+                height: calc(100% - 187px);
+                width: 100%;
+                overflow: hidden;
+                text-overflow: ellipsis;
+
+                .mingcheng {
+                    padding-left: 5px;
+                    height: 33.33%;
+
+                    width: 100%;
+                    font-size: 12px;
+                    color: rgba(208, 222, 238, 0.8);
+                    letter-spacing: 0.86px;
+                    font-weight: 400;
+                    text-align: left;
+
+                    span {
+                        font-size: 14px;
+                        color: #D0DEEE;
+                        letter-spacing: 0.75px;
+                        font-weight: 500;
+                    }
+                }
+            }
+        }
+
+
+        .topTabs {
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
+
+
+
+        /deep/.el-tabs--border-card {
+            background: rgba(0, 0, 0, 0);
+            border: 0;
+            height: 30px;
+            width: calc(100% - 40px);
+            margin: 0;
+            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
+
+            .el-tabs__header {
+                display: inline-block;
+                width: auto;
+                background: rgba(0, 0, 0, 0);
+                // background: linear-gradient(180deg, rgba(234, 241, 248, 0.1) 0%, rgba(208, 222, 238, 0.1) 100%);
+                // opacity: 0.7;
+                // border: 1px solid #5B748C;
+
+                .el-tabs__nav {
+                    display: inline-block;
+                    width: auto;
+                    display: flex;
+
+                }
+
+                .el-tabs__item {
+                    width: 70px;
+                    height: 30px;
+                    border: 0;
+                    color: #8FABBF;
+                    padding: 5px;
+                    box-sizing: border-box;
+                    text-align: center;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    background: url('~@/assets/safetyIndex/编组 6221.png') no-repeat;
+                    background-size: 100% 100%;
+
+                    .paneInner {
+                        width: 100px;
+                        height: 100%;
+                        text-align: center;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+
+                    }
+
+
+
+
+                }
+
+
+
+                .el-tabs__item.is-active {
+                    background: url('~@/assets/safetyIndex/90866.png') no-repeat;
+                    background-size: 100% 100%;
+                    border: 0;
+                    color: #4BFFAD;
+                    padding: 5px;
+                    box-sizing: border-box;
+
+                    .paneInner {
+                        background: rgba(129, 255, 204, 0.26);
+                    }
+                }
+            }
+        }
+    }
+}
+</style>

src/views/safetyIndex/wupin.vue

@@ -0,0 +1,517 @@
+<template>
+    <div class="qywp">
+        <div class="title"><img src="../../assets/safetyIndex/装饰009991.png" alt="">企业物品</div>
+        <div class="qyclBody">
+            <div class="today" @click="showfangkeVisible(2)">
+                <div class="todayChild">
+                    <div class="iconBox"><img src="../../assets/safetyIndex/易制毒.png" alt=""></div>
+                    <div class="iconmsg">
+                        <div class="msgText">易制毒</div>
+                        <div class="msgNum"><span>{{ parseFloat(yzdData.quantitySum).toFixed(2) }}</span>&nbsp;吨</div>
+                    </div>
+                </div>
+                <div class="buySail">
+                    <div class="sailChild">
+                        <div class="buymsg">
+                            <div class="msgText">购进</div>
+                            <div class="msgNum"><span>{{ yzdData.purchase }}</span>&nbsp;吨</div>
+                        </div>
+                    </div>
+                    <div class="sailChild">
+                        <div class="sailmsg">
+                            <div class="msgText">销出</div>
+                            <div class="msgNum"><span>{{ yzdData.sale }}</span>&nbsp;吨</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="today" @click="showfangkeVisible(3)">
+                <div class="todayChild">
+                    <div class="iconBox"><img src="../../assets/safetyIndex/易爆炸.png" alt=""></div>
+                    <div class="iconmsg">
+                        <div class="msgText">易爆炸</div>
+                        <div class="msgNum"><span>{{ yzbData.quantitySum }}</span>&nbsp;吨</div>
+                    </div>
+                </div>
+                <div class="buySail">
+                    <div class="sailChild">
+                        <div class="buymsg">
+                            <div class="msgText">购进</div>
+                            <div class="msgNum"><span>{{ yzbData.purchase }}</span>&nbsp;吨</div>
+                        </div>
+                    </div>
+                    <div class="sailChild">
+                        <div class="sailmsg">
+                            <div class="msgText">销出</div>
+                            <div class="msgNum"><span>{{ yzbData.sale }}</span>&nbsp;吨</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="today" @click="showfangkeVisible(1)">
+                <div class="todayChild">
+                    <div class="iconBox"><img src="../../assets/safetyIndex/放射源.png" alt=""></div>
+                    <div class="iconmsg">
+                        <div class="msgText">放射源</div>
+                        <div class="msgNum"><span>{{ fsyData.quantitySum }}</span>&nbsp;吨</div>
+                    </div>
+                </div>
+                <div class="buySail">
+                    <div class="sailChild">
+                        <div class="buymsg">
+                            <div class="msgText">购进</div>
+                            <div class="msgNum"><span>{{ fsyData.purchase }}</span>&nbsp;吨</div>
+                        </div>
+                    </div>
+                    <div class="sailChild">
+                        <div class="sailmsg">
+                            <div class="msgText">销出</div>
+                            <div class="msgNum"><span>{{ fsyData.sale }}</span>&nbsp;吨</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="today" @click="showfangkeVisible(4)">
+                <div class="todayChild">
+                    <div class="iconBox"><img src="../../assets/safetyIndex/民爆.png" alt=""></div>
+                    <div class="iconmsg">
+                        <div class="msgText">民爆</div>
+                        <div class="msgNum"><span>{{ mbData.quantitySum }}</span>&nbsp;吨</div>
+                    </div>
+                </div>
+                <div class="buySail">
+                    <div class="sailChild">
+                        <div class="buymsg">
+                            <div class="msgText">购进</div>
+                            <div class="msgNum"><span>{{ mbData.purchase }}</span>&nbsp;吨</div>
+                        </div>
+                    </div>
+                    <div class="sailChild">
+                        <div class="sailmsg">
+                            <div class="msgText">销出</div>
+                            <div class="msgNum"><span>{{ mbData.sale }}</span>&nbsp;吨</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <el-dialog title="企业物品详情" :visible.sync="fangkeVisible" class="fangkeForm">
+            <el-table :cell-style="{ background: 'revert' }" :data="wupinList" class="table"
+                style="width: calc(100% - 40px);  margin:0 20px;" :row-style="tableRowStyle"
+                :header-row-style="tableHeaderColor" :header-cell-style="tableHeaderCellColor">
+                <el-table-column type="index" width="50" label="序号">
+                </el-table-column>
+                <el-table-column show-overflow-tooltip prop="goodsName" label="物品名称">
+                </el-table-column>
+                <el-table-column show-overflow-tooltip prop="goodsTypeCn" label="物品类型" width="100">
+                </el-table-column>
+                <el-table-column show-overflow-tooltip prop="quantity" label="总量（t）" width="100">
+                </el-table-column>
+                <el-table-column show-overflow-tooltip prop="companyName" label="隶属企业">
+                </el-table-column>
+                <el-table-column show-overflow-tooltip prop="emergencyContact" label="安全责任人" width="100">
+                </el-table-column>
+                <el-table-column show-overflow-tooltip prop="emergencyContactPhone" label="联系方式" width="150">
+                </el-table-column>
+                <el-table-column show-overflow-tooltip label="登记时间" prop="registerTime" width="250">
+                </el-table-column>
+            </el-table>
+            <div class="block">
+                <el-pagination style="float:right;margin:5px;" class="msg-pagination-container" :background="true"
+                    @size-change="fangkeSizeChange" @current-change="fangkeCurrentChange" :current-page="fangkepageNum"
+                    :page-sizes="[10]" layout="total, sizes, prev, pager, next, jumper" :total="fangketotal">
+                </el-pagination>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import { indexGoods, indexGoodsDetail } from '@/api/safetyIndex'
+export default {
+    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()
+    },
+    methods: {
+        tableRowStyle({ rowIndex }) {
+            if ((rowIndex + 1) % 2 == 1) {
+                return { 'background': 'rgba(0,0,0,0)', 'color': '#fff', 'border': '0' }
+            } else {
+                return { 'background': 'rgba(61, 85, 102, 0.16)', 'border': '0', 'color': '#fff' }
+            }
+        },
+        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%)' }
+            // 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' }
+        },
+        fangkeSizeChange(val) {
+            this.fangkepageNum = 1;
+            this.fangkepageSize = val;
+            this.showfangkeVisible(this.goodsType)
+        },
+        fangkeCurrentChange(val) {
+            this.fangkepageNum = val;
+            this.showfangkeVisible(this.goodsType)
+        },
+        getindexGoods() {
+            indexGoods().then(res => {
+                this.fangkeList = res.data
+                this.fangkeList.forEach(item => {
+                    if (item.goodsType == 1) {
+                        this.fsyData = item
+                    } else if (item.goodsType == 2) {
+                        this.yzdData = item
+                    } else if (item.goodsType == 3) {
+                        this.yzbData = item
+                    } else if (item.goodsType == 4) {
+                        this.mbData = item
+                    }
+                })
+                console.log(this.fangkeList, 'this.fangkeList');
+            })
+        },
+        showfangkeVisible(val) {
+            this.goodsType = val
+            indexGoodsDetail({ pageSize: this.fangkepageSize, pageNum: this.fangkepageNum, goodsType: this.goodsType }).then(res => {
+                this.wupinList = res.data
+                this.fangketotal = res.total
+                this.fangkeVisible = true
+            })
+
+        }
+    },
+}
+</script>
+
+<style lang="less" scoped>
+.qywp {
+    height: 305px;
+    width: 100%;
+    margin-bottom: 20px;
+    background: url('~@/assets/safetyIndex/主屏板块1.png') no-repeat;
+    background-size: 100% 100%;
+
+
+
+    .title {
+        width: 100%;
+        height: 33px;
+        background: url('~@/assets/safetyIndex/标题样式.png') no-repeat;
+        background-size: 100% 100%;
+        font-size: 16px;
+        color: #D9E7FF;
+        letter-spacing: 1px;
+        text-align: center;
+        font-weight: 500;
+        display: flex;
+        align-items: center;
+
+        img {
+            width: 16px;
+            height: 16px;
+            margin: 0 12px;
+        }
+    }
+
+    .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;
+
+
+                            }
+                        }
+
+
+                    }
+                }
+            }
+        }
+
+    }
+
+
+
+}
+
+
+.fangkeForm {
+    /deep/ .el-dialog {
+        background-color: rgba(0, 0, 0, 0);
+        background: url('~@/assets/head/编组 3021112.png') no-repeat;
+        background-size: 100% 100%;
+        width: 1241px;
+        height: 640px;
+        position: relative;
+
+        .el-dialog__title {
+            font-size: 16px;
+            color: #EBFFF4;
+            letter-spacing: 2px;
+
+            text-shadow: 0 0 9px rgba(21, 255, 195, 0.77);
+            font-weight: 400;
+        }
+
+        .el-dialog__body {
+            box-sizing: border-box;
+            height: 360px;
+
+            .scopeQuantity {
+                letter-spacing: 2px;
+            }
+
+        }
+    }
+}
+
+/deep/.el-table {
+    background: rgba(0, 0, 0, 0);
+
+    td.el-table__cell {
+        border: 0;
+    }
+
+    .xiangqing {
+        background: rgba(0, 0, 0, 0);
+        border: 0;
+        color: rgba(48, 196, 255, 0.7);
+        cursor: pointer;
+    }
+
+    .staffPic {
+        width: 19px;
+        height: 25px;
+    }
+}
+
+/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/yuangong.vue

@@ -12,14 +12,14 @@
                 <div class="iconBox"><img src="../../assets/safetyIndex/访客icon.png" alt=""></div>
                 <div class="iconNum">
                     <div class="iconName">访客</div>
-                    <div class="number1">1200</div>
+                    <div class="number1">{{ fangketotal }}</div>
                 </div>
             </div>
             <div class="fangke" @click="showliudongVisible()">
                 <div class="iconBox"><img src="../../assets/safetyIndex/流动人员icon.png" alt=""></div>
                 <div class="iconNum">
                     <div class="iconName">流动人员</div>
-                    <div class="number1">700</div>
+                    <div class="number1">{{ liudongtotal }}</div>
                 </div>
             </div>
         </div>
@@ -109,7 +109,7 @@
 <script>
 import * as echarts from 'echarts';
 import "echarts-gl";
-import { staffStatistics, staffDetail, visitDetail, flowDetail } from '@/api/safetyIndex'
+import { staffStatistics, staffDetail, visitDetail, flowDetail, flowStatistics, visitStatistics } from '@/api/safetyIndex'
 export default {
     data() {
         return {
@@ -134,7 +134,12 @@ export default {
     },
     created() {
         this.getstaffStatistics()
-
+        flowStatistics().then(res => {
+            this.liudongtotal = res.data
+        })
+        visitStatistics().then(res => {
+            this.fangketotal = res.data
+        })
     },
     methods: {
         getstaffStatistics() {
@@ -331,7 +336,7 @@ export default {
     .zongshu {
         width: 400px;
         height: 33px;
-        margin: 12px 20px;
+        margin: 10px 20px;
         background: url('~@/assets/safetyIndex/7691.png') no-repeat;
         background-size: 100% 100%;
         display: flex;