diff --git a/src/App.vue b/src/App.vue
index 04bfa89..182997d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -146,6 +146,18 @@
 
 }
 
+.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
+  background-color: transparent !important;
+}
+
+.el-table__body tr.current-row>td.el-table__cell {
+  background-color: transparent !important;
+}
+
+.el-table .el-table__cell.gutter {
+  display: none;
+}
+
 .el-menu .is-active {
   border: 0 !important;
 }
diff --git a/src/api/companyCanban/index.js b/src/api/companyCanban/index.js
index 4da97cd..d4bf4d8 100644
--- a/src/api/companyCanban/index.js
+++ b/src/api/companyCanban/index.js
@@ -1,5 +1,14 @@
 import request from '@/utils/request'
-//基本信息
+//企业基本信息
+export function companyBaseInfo(params) {
+    return request({
+        url: '/safety/enterpriseArchives/baseInfo',
+        method: 'get',
+        params
+    })
+}
+
+//中高风险返企数
 export function epidemicTrend(params) {
     return request({
         url: '/safety/signboard/epidemic/trend',
@@ -7,3 +16,51 @@ export function epidemicTrend(params) {
         params
     })
 }
+//疫苗接种数
+export function epidemicInoculations(params) {
+    return request({
+        url: '/safety/signboard/epidemic/inoculations',
+        method: 'post',
+        params
+    })
+}
+//核酸检测率
+export function epidemicNucleicAcid(params) {
+    return request({
+        url: '/safety/signboard/epidemic/nucleicAcid',
+        method: 'post',
+        params
+    })
+}
+//场所码异常数
+export function epidemicSiteCode(params) {
+    return request({
+        url: '/safety/signboard/epidemic/siteCode',
+        method: 'post',
+        params
+    })
+}
+//二级指标分类统计上报数据量之和
+export function personSafety(params) {
+    return request({
+        url: '/safety/signboard/person/safety',
+        method: 'post',
+        params
+    })
+}
+//人员安全详情
+export function personSafetyDetail(params) {
+    return request({
+        url: '/safety/signboard/person/safety/detail',
+        method: 'post',
+        params
+    })
+}
+//危化品运输
+export function chemicalsDetail(params) {
+    return request({
+        url: '/safety/signboard/hazardous/chemicals/detail',
+        method: 'post',
+        params
+    })
+}
diff --git a/src/assets/companyCanban/Element 03_00000.png b/src/assets/companyCanban/Element 03_00000.png
new file mode 100644
index 0000000..9451ca9
Binary files /dev/null and b/src/assets/companyCanban/Element 03_00000.png differ
diff --git a/src/assets/companyCanban/编组 20312.png b/src/assets/companyCanban/编组 20312.png
index 416e2ff..138479b 100644
Binary files a/src/assets/companyCanban/编组 20312.png and b/src/assets/companyCanban/编组 20312.png differ
diff --git a/src/assets/companyCanban/跳转.png b/src/assets/companyCanban/跳转.png
index a20d0cd..af19930 100644
Binary files a/src/assets/companyCanban/跳转.png and b/src/assets/companyCanban/跳转.png differ
diff --git a/src/assets/companyCanban/道路安全（绿）_00000.png b/src/assets/companyCanban/道路安全（绿）_00000.png
new file mode 100644
index 0000000..0a85948
Binary files /dev/null and b/src/assets/companyCanban/道路安全（绿）_00000.png differ
diff --git a/src/utils/request.js b/src/utils/request.js
index b04d4c8..690ca1f 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -4,8 +4,8 @@ import vm from "../main";
 import { getToken } from '@/utils/auth'
 axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
 const request = axios.create({
-  //baseURL: 'http://172.18.113.50:8080/zhapi',
-  baseURL: 'http://192.168.0.188:8888/zhapi',
+  baseURL: 'http://172.18.113.50:8080/zhapi',
+  //baseURL: 'http://192.168.0.188:8888/zhapi',
   //baseURL: `http://${window.location.host}/zhapi`,
   timeout: 50000,
   headers: { 'content-type': 'application/json' },
diff --git a/src/views/companyCanban/canban.vue b/src/views/companyCanban/canban.vue
new file mode 100644
index 0000000..a50c86e
--- /dev/null
+++ b/src/views/companyCanban/canban.vue
@@ -0,0 +1,160 @@
+<template>
+    <div class="cbdt">
+        <div class="titleBox">
+            <div class="titleText">{{ companyData.companyName }} <div class="tiaozhuanBtn" @click="toDangan()">档案 &nbsp;<img
+                        src="../../assets/companyCanban/跳转.png" alt=""></div>
+            </div>
+            <el-tabs type="border-card" class="topTabs" v-model="topTabsName" @tab-click="getList()">
+                <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>
+    </div>
+</template>
+
+<script>
+export default {
+    props: ['companyId', 'companyData'],
+    data() {
+        return {
+            companyID: this.companyId,
+            companydata: this.companyData,
+            topTabsName: 'month',
+        }
+    },
+    methods: {
+        getList() {
+
+        },
+        toDangan() {
+            sessionStorage.setItem('companyID', this.companyData.id)
+            sessionStorage.setItem('companyName', this.companyData.companyName)
+            this.$router.push({
+                name: 'archives',
+            })
+        }
+    },
+}
+</script>
+
+<style lang="less" scoped>
+.cbdt {
+    width: 100%;
+    height: calc(62.06% + 20px);
+    background: url('~@/assets/companyCanban/编组 20312.png') no-repeat;
+    background-size: 100% 100%;
+    box-sizing: border-box;
+    padding-top: 5px;
+
+    .titleBox {
+        box-sizing: border-box;
+        width: 100%;
+        height: 50px;
+        margin: 0 auto;
+        background: url('~@/assets/companyCanban/标题.png') no-repeat;
+        background-size: 100% 100%;
+        font-size: 20px;
+        font-family: AlimamaShuHeiTi;
+        color: rgba(255, 255, 255, 0.9);
+        letter-spacing: 2px;
+        font-weight: 700;
+        line-height: 50px;
+        text-align: center;
+        position: relative;
+
+        .titleText {
+            display: inline-block;
+            position: relative;
+
+            .tiaozhuanBtn {
+                position: absolute;
+                right: -60px;
+                bottom: 0;
+                font-size: 14px;
+                color: #4BCCFF;
+                letter-spacing: 0;
+                text-align: center;
+                font-weight: 500;
+                cursor: pointer;
+
+                img {
+                    width: 14px;
+                    height: 12px;
+                }
+            }
+        }
+
+        /deep/.el-tabs--border-card {
+            background: rgba(0, 0, 0, 0);
+            border: 0;
+            height: 30px;
+            // width: calc(100% - 40px);
+            width: 210px;
+            margin: 0;
+            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
+            font-family: PingFangSC-Medium;
+            position: absolute;
+            top: 30px;
+            left: 20px;
+
+            .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);
+                    }
+                }
+            }
+
+            .el-tabs__content {
+                display: none;
+            }
+        }
+
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/companyCanban/fangyi.vue b/src/views/companyCanban/fangyi.vue
index 354e8c8..bf2a20e 100644
--- a/src/views/companyCanban/fangyi.vue
+++ b/src/views/companyCanban/fangyi.vue
@@ -1,14 +1,65 @@
 <template>
     <div class="fangyi">
-        <div class="title"><img src="../../assets/safetyIndex/装饰009991.png" alt="">防疫安全</div>
+        <div class="title" @click="showDialog"><img src="../../assets/safetyIndex/装饰009991.png" alt="">防疫安全</div>
         <div class="fytb" id="fytb"></div>
-        <div class="bottomBtns"></div>
+        <div class="bottomBtns" @click="showDialog">
+            <div class="bottomChild">
+                <div class="bottomImgBox_yellow">
+                    <img src="../../assets/companyCanban/icon／核酸检测.png" alt="">
+                </div>
+                <div class="bottomChildSJ">
+                    <div class="ChildSJTitle">核酸检测率</div>
+                    <div class="ChildSJNum">{{ hesuanData.numValue }}%</div>
+                </div>
+            </div>
+            <div class="bottomChild">
+                <div class="bottomImgBox_yellow">
+                    <img src="../../assets/companyCanban/icon/场所码数据.png" alt="">
+                </div>
+                <div class="bottomChildSJ">
+                    <div class="ChildSJTitle">场所码异常</div>
+                    <div class="ChildSJNum">{{ changsuoData.numValue }}</div>
+                </div>
+            </div>
+            <div class="bottomChild">
+                <div class="bottomImgBox_blue">
+                    <img src="../../assets/companyCanban/icon/疫苗接种总数.png" alt="">
+                </div>
+                <div class="bottomChildSJ">
+                    <div class="ChildSJTitle">疫苗接种数</div>
+                    <div class="ChildSJNum_b">{{ yimiaoData.numValue }}</div>
+                </div>
+            </div>
+        </div>
+        <el-dialog title="防疫安全上报数据详情" :visible.sync="diaVisible" class="picForm">
+            <div class="tjsj">
+                <div class="tjsjTitle">数据统计</div>
+                <div class="zhuangshi"></div>
+                <div class="tjsjChild" id="ymjzs">
+                    <div class="numNum">{{ yimiaoData.numValue }}</div>
+                    <div class="numText">疫苗接种数</div>
+                </div>
+                <div class="tjsjChild" id="hsjcl">
+                    <div class="numNum">{{ hesuanData.numValue }}%</div>
+                    <div class="numText">核酸检测率</div>
+                </div>
+                <div class="tjsjChild" id="csmycs">
+                    <div class="numNum">{{ changsuoData.numValue }}</div>
+                    <div class="numText">场所码异常</div>
+                </div>
+            </div>
+            <div class="fqs">
+                <div class="tjsjTitle">中高风险返企数</div>
+                <div class="zhuangshi"></div>
+                <div class="fxfqs" id="fxfqs"></div>
+            </div>
+        </el-dialog>
     </div>
 </template>
 <script>
 import * as echarts from 'echarts';
 import "echarts-gl";
-import { epidemicTrend } from '@/api/companyCanban'
+import { epidemicTrend, epidemicInoculations, epidemicNucleicAcid, epidemicSiteCode } from '@/api/companyCanban'
 export default {
     props: ['companyId'],
     data() {
@@ -18,6 +69,10 @@ export default {
             dateList: [],
             jingneiList: [],
             jingwaiList: [],
+            yimiaoData: {},
+            hesuanData: {},
+            changsuoData: {},
+            diaVisible: false,
         }
     },
     created() {
@@ -26,6 +81,15 @@ export default {
             this.fangyiList = res.data
             this.initfytb()
         })
+        epidemicInoculations({ companyId: this.companyID }).then(res => {
+            this.yimiaoData = res.data
+        })
+        epidemicNucleicAcid({ companyId: this.companyID }).then(res => {
+            this.hesuanData = res.data
+        })
+        epidemicSiteCode({ companyId: this.companyID }).then(res => {
+            this.changsuoData = res.data
+        })
     },
     methods: {
         initfytb() {
@@ -61,12 +125,11 @@ export default {
                     top: '5%',
                     right: 'center',
                     width: 200,
-                    data: ['境外', '境内'],
+                    data: ['境外人员', '境内人员'],
                     textStyle: {
                         color: 'rgba(255, 255, 255, 0.7)'
                     },
                 },],
-
                 xAxis: {
                     type: "category",
                     show: true,
@@ -96,7 +159,7 @@ export default {
                 },
                 series: [
                     {
-                        name: "境外",
+                        name: "境外人员",
                         type: "line",
                         showSymbol: false,
                         stack: "Total",
@@ -126,7 +189,7 @@ export default {
                         data: jingnwaiList,
                     },
                     {
-                        name: "境内",
+                        name: "境内人员",
                         type: "line",
                         showSymbol: false,
                         stack: "Total",
@@ -157,9 +220,146 @@ export default {
                     },
                 ],
             };
+            option && myChart.setOption(option);
+        },
+        initfxfqs() {
+            let myChart = echarts.init(document.getElementById("fxfqs"));
+            const dateList = this.fangyiList.list_12.map(item => {
+                return item.statisticsDate
+            })
+            const jingnwaiList = this.fangyiList.list_12.map(item => {
+                return item.numValue
+            })
+            const jingnneiList = this.fangyiList.list_13.map(item => {
+                return item.numValue
+            })
+            const option = {
+                tooltip: {
+                    trigger: "axis",
+                },
+                grid: {
+                    top: "5%",
+                    right: "5%",
+                    bottom: "15%",
+                    left: "15%",
+                },
+                legend: [{
+                    data: ['这是一个小标题'],
+                    top: '5%',
+                    width: 100,
+                    selectedMode: false,
+                    textStyle: {
+                        color: 'rgba(255, 255, 255, 0.7)'
+                    },
+                }, {
+                    top: '5%',
+                    right: 'center',
+                    width: 200,
+                    data: ['境外人员', '境内人员'],
+                    textStyle: {
+                        color: 'rgba(255, 255, 255, 0.7)'
+                    },
+                },],
+                xAxis: {
+                    type: "category",
+                    show: true,
+                    minInterval: 1,
+                    splitLine: {
+                        show: false,
+                    },
+                    axisLabel: {
+                        show: true, // 是否显示刻度标签
+                        color: "#D0DEEE", // 刻度标签文字的颜色
+                    },
+                    minorTick: { show: false },
+                    data: dateList,
+                },
+                yAxis: {
+                    type: "value",
+                    show: true,
+                    minInterval: 1,
+                    splitLine: {
+                        show: false,
+                    },
+                    minorTick: { show: false },
+                    axisLabel: {
+                        show: true, // 是否显示刻度标签
+                        color: "#FFF", // 刻度标签文字的颜色
+                    },
+                },
+                series: [
+                    {
+                        name: "境外人员",
+                        type: "line",
+                        showSymbol: false,
+                        stack: "Total",
+                        emphasis: {
+                            focus: "series",
+                        },
+                        areaStyle: {
+                            opacity: 0.8,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(128, 255, 165)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(1, 191, 236)",
+                                },
+                            ]),
+                        },
+                        smooth: true,
+
+                        itemStyle: {
+                            normal: {
+                                color: "#00d2c4",
+                            },
+                        },
+                        data: jingnwaiList,
+                    },
+                    {
+                        name: "境内人员",
+                        type: "line",
+                        showSymbol: false,
+                        stack: "Total",
+                        emphasis: {
+                            focus: "series",
+                        },
+                        areaStyle: {
+                            opacity: 0.8,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(255, 191, 0)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(224, 62, 76)",
+                                },
+                            ]),
+                        },
+                        smooth: true,
 
+                        itemStyle: {
+                            normal: {
+                                color: "#FFCB6A",
+                            },
+                        },
+                        data: jingnneiList,
+                    },
+                ],
+            };
             option && myChart.setOption(option);
         },
+        showDialog() {
+            this.diaVisible = true
+            this.$nextTick(() => {
+
+                this.initfxfqs()
+
+            })
+        },
     },
 }
 </script>
@@ -184,6 +384,7 @@ export default {
         font-weight: 500;
         display: flex;
         align-items: center;
+        cursor: pointer;
 
         img {
             width: 16px;
@@ -203,7 +404,216 @@ export default {
         width: 100%;
         height: 50px;
         margin-bottom: 10px;
-        padding: 0 15px;
+        padding: 0 10px;
+        display: flex;
+        box-sizing: border-box;
+        cursor: pointer;
+        justify-content: space-between;
+
+        .bottomChild {
+            width: 33%;
+            height: 50px;
+            background: url('~@/assets/companyCanban/7691备份 3.png') no-repeat;
+            background-size: 100% 100%;
+            padding: 7px 5px;
+            box-sizing: border-box;
+            display: flex;
+
+            .bottomImgBox_yellow {
+                width: 36px;
+                height: 36px;
+                border: 1px solid rgba(169, 121, 64, 1);
+                box-shadow: 0px 0px 6px 0px rgba(195, 143, 74, 1);
+                box-sizing: border-box;
+                background-image: linear-gradient(180deg, rgba(169, 121, 64, 0.37) 0%, rgba(98, 155, 227, 0.02) 43%, rgba(169, 121, 64, 0.37) 100%);
+                display: flex;
+
+                img {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+
+            .bottomImgBox_blue {
+                width: 36px;
+                height: 36px;
+                border: 1px solid rgba(64, 145, 169, 1);
+                box-shadow: 0px 0px 6px 0px rgba(74, 176, 195, 1);
+                box-sizing: border-box;
+                background-image: linear-gradient(180deg, rgba(74, 176, 195, 0.37) 0%, rgba(98, 155, 227, 0.02) 43%, rgba(74, 176, 195, 0.37) 100%);
+                display: flex;
+
+                img {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+
+            .bottomChildSJ {
+                height: 36px;
+                margin-left: 5px;
+
+                .ChildSJTitle {
+                    font-size: 10px;
+                    color: #D0DEEE;
+                    letter-spacing: 0;
+                    text-align: center;
+                    line-height: 16px;
+                    font-weight: 400;
+                }
+
+                .ChildSJNum {
+                    font-size: 18px;
+                    color: #FFE6D9;
+                    letter-spacing: 0.9px;
+                    line-height: 33px;
+                    text-shadow: 0 0 8px rgba(255, 119, 52, 0.50);
+                    font-weight: 500;
+                }
+
+                .ChildSJNum_b {
+                    font-size: 18px;
+                    color: #EBF9FF;
+                    letter-spacing: 0.9px;
+                    line-height: 33px;
+                    text-shadow: 0 0 8px rgba(21, 154, 255, 0.50);
+                    font-weight: 500;
+                }
+            }
+
+            // background: #000;
+        }
+    }
+
+    .picForm {
+        /deep/ .el-dialog {
+            background-color: rgba(0, 0, 0, 0);
+            background: url('~@/assets/companyFile/背景2.png') no-repeat;
+            background-size: 100% 100%;
+            width: 811px;
+            height: 480px;
+            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: 420px;
+                padding: 15px;
+
+                .tjsj {
+                    width: 100%;
+                    height: 145px;
+                    margin: 10px 0;
+                    background: url('~@/assets/companyCanban/09091.png') no-repeat;
+                    background-size: 100% 100%;
+                    position: relative;
+                    padding: 0 100px;
+                    box-sizing: border-box;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+
+                    .tjsjTitle {
+                        position: absolute;
+                        left: 14px;
+                        top: 10px;
+                        font-size: 16px;
+                        color: #FFE6D9;
+                        letter-spacing: 0;
+                        line-height: 16px;
+                        text-shadow: 0 0 8px rgba(255, 119, 52, 0.50);
+                        font-weight: 500;
+                    }
+
+                    .zhuangshi {
+                        position: absolute;
+                        left: 0;
+                        top: 0;
+                        background: url('~@/assets/companyCanban/矩形（装饰）.png') no-repeat;
+                        background-size: 100% 100%;
+                        width: 15px;
+                        height: 15px;
+                    }
+
+                    .tjsjChild {
+                        height: 134px;
+                        width: 134px;
+                        background: url('~@/assets/companyCanban/Element 03_00000.png') no-repeat;
+                        background-size: 100% 100%;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        position: relative;
+
+                        .numNum {
+                            font-family: AlimamaShuHeiTi;
+                            font-size: 20px;
+                            color: #E3FEFF;
+                            letter-spacing: 1px;
+                            line-height: 22px;
+                            text-shadow: 0 0 9px rgba(87, 240, 255, 0.88);
+                            font-weight: 700;
+                        }
+
+                        .numText {
+                            position: absolute;
+                            bottom: 5px;
+                            left: 0;
+                            font-size: 14px;
+                            color: #D9E7FF;
+                            letter-spacing: 1px;
+                            font-weight: 500;
+                            width: 100%;
+                            height: 16px;
+                            text-align: center;
+                        }
+                    }
+                }
+
+                .fqs {
+                    width: 100%;
+                    height: 225px;
+                    background: url('~@/assets/companyCanban/09091.png') no-repeat;
+                    background-size: 100% 100%;
+                    position: relative;
+
+                    .tjsjTitle {
+                        position: absolute;
+                        left: 14px;
+                        top: 10px;
+                        font-size: 16px;
+                        color: #FFE6D9;
+                        letter-spacing: 0;
+                        line-height: 16px;
+                        text-shadow: 0 0 8px rgba(255, 119, 52, 0.50);
+                        font-weight: 500;
+                    }
+
+                    .zhuangshi {
+                        position: absolute;
+                        left: 0;
+                        top: 0;
+                        background: url('~@/assets/companyCanban/矩形（装饰）.png') no-repeat;
+                        background-size: 100% 100%;
+                        width: 15px;
+                        height: 15px;
+                    }
+
+                    .fxfqs {
+                        width: 100%;
+                        height: 100%;
+                    }
+                }
+            }
+        }
     }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/companyCanban/index.vue b/src/views/companyCanban/index.vue
index d20b3fc..2cc0c87 100644
--- a/src/views/companyCanban/index.vue
+++ b/src/views/companyCanban/index.vue
@@ -2,26 +2,42 @@
     <div class="mainBox">
         <div class="leftBox">
             <fangyi :companyId="companyId" v-if="companyId"></fangyi>
+            <renyuan :companyId="companyId" v-if="companyId"></renyuan>
+            <weihuapin :companyId="companyId" v-if="companyId"></weihuapin>
+        </div>
+        <div class="middleBox">
+            <canban :companyId="companyId" :companyData="companyData" v-if="companyId && companyData"></canban>
+
         </div>
-        <div class="middleBox"></div>
         <div class="rightBox"></div>
     </div>
 </template>
 
 <script>
 import fangyi from './fangyi.vue'
-
+import renyuan from './renyuan.vue'
+import weihuapin from './weihuapin.vue'
+import canban from './canban.vue'
+import { companyBaseInfo } from '@/api/companyCanban'
 export default {
     components: {
         fangyi,
+        renyuan,
+        weihuapin,
+        canban
     },
     data() {
         return {
             companyId: '',
+            companyData: {}
         }
     },
     created() {
         this.companyId = sessionStorage.getItem('companyID')
+        companyBaseInfo({ id: this.companyId }).then(res => [
+            this.companyData = res.data,
+            console.log(this.companyData, 'this.companyData')
+        ])
     },
 }
 </script>
@@ -39,8 +55,6 @@ export default {
         height: 100%;
         margin-right: 20px;
         box-sizing: border-box;
-
-
     }
 
     .middleBox {
diff --git a/src/views/companyCanban/renyuan.vue b/src/views/companyCanban/renyuan.vue
new file mode 100644
index 0000000..a69fdcd
--- /dev/null
+++ b/src/views/companyCanban/renyuan.vue
@@ -0,0 +1,633 @@
+<template>
+    <div class="qyyg">
+        <div class="title" @click="showDialog"><img src="../../assets/safetyIndex/装饰009991.png" alt="">企业员工</div>
+        <div class="ygtb" id="ygtb">
+        </div>
+        <el-dialog title="人员安全上报数据详情" :visible.sync="diaVisible" class="picForm"
+            v-if="detailList && detailList.flows && detailList.keyPersons && detailList.keyPositionPersons">
+            <div class="tjsj">
+                <div class="tjsjTitle">流动人员</div>
+                <div class="zhuangshi"></div>
+                <div class="green">{{ detailList.flows[0].safeRuleName }}<p>{{ detailList.flows[0].numValue }}</p>
+                </div>
+                <div class="red">{{ detailList.flows[1].safeRuleName }}<p>{{ detailList.flows[1].numValue }}</p>
+                </div>
+                <div class="yellow">{{ detailList.flows[2].safeRuleName }}<p>{{ detailList.flows[2].numValue }}</p>
+                </div>
+                <div class="blue">{{ detailList.flows[3].safeRuleName }}<p>{{ detailList.flows[3].numValue }}</p>
+                </div>
+            </div>
+            <div class="zdgw">
+                <div class="tjsjTitle">流动人员</div>
+                <div class="zhuangshi"></div>
+                <div class="zdItem">
+                    <div class="yellowIconBox"><img src="../../assets/companyCanban/icon/危险品领用、保管、使用人员.png" alt=""></div>
+                    <div class="yellowTextBox">
+                        {{ detailList.keyPositionPersons[0].safeRuleName }}<p>{{ detailList.keyPositionPersons[0].numValue
+                        }}</p>
+                    </div>
+                </div>
+                <div class="zdItem">
+                    <div class="blueIconBox"><img src="../../assets/companyCanban/icon/危险品技术资质人员.png" alt=""></div>
+                    <div class="blueTextBox">
+                        {{ detailList.keyPositionPersons[1].safeRuleName }}<p>{{ detailList.keyPositionPersons[1].numValue
+                        }}</p>
+                    </div>
+                </div>
+            </div>
+            <div class="zdrr">
+                <div class="tjsjTitle">重点人员</div>
+                <div class="zhuangshi"></div>
+                <div class="zdrrTu" id="zdrrTu"></div>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+<script>
+import * as echarts from 'echarts';
+import "echarts-gl";
+import { personSafety, personSafetyDetail } from '@/api/companyCanban'
+export default {
+    props: ['companyId'],
+    data() {
+        return {
+            staffStatisticsList: [],
+            diaVisible: false,
+            companyID: this.companyId,
+            detailList: {},
+        }
+    },
+    created() {
+        this.getstaffStatistics()
+
+    },
+    methods: {
+        getstaffStatistics() {
+            personSafety({ companyId: this.companyID }).then(res => {
+                this.staffStatisticsList = res.data
+                this.$nextTick(() => {
+                    this.initygtb()
+                })
+            })
+        },
+        initygtb() {
+            let myChart = echarts.init(document.getElementById("ygtb"));
+            const colors = ['#66C3FF', '#FEF699', '#19F7C3', '#ADF1FF']
+            let data = []
+            this.staffStatisticsList.forEach((item, index) => {
+                data.push({
+                    value: item.sumNumValue, name: item.levelIndexTwo, itemStyle: { color: colors[index], }
+                })
+            })
+            let option = {
+                tooltip: {
+                    trigger: 'item'
+                },
+                legend: {
+                    // 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: {
+                                color: "#D0DEEE",
+                                lineHeight: 10,
+                                padding: [3, 0, 3, 0],
+                                width: 120,
+                                height: 20,
+                            },
+                            b: {
+                                color: "#FFFFF",
+                                fontSize: 18,
+                                fontWeight: 700,
+                                padding: [3, 0, 3, 0],
+                                width: 120,
+                                height: 20,
+                            },
+                        },
+                    },
+                    formatter: function (name) {
+                        var percent = 0;
+                        for (var i = 0; i < data.length; i++) {
+                            if (data[i].name == name) {
+                                percent = data[i].value
+                            }
+                        }
+                        return "{a|" + name + "}" + "{b|" + percent + "}";
+                    },
+                },
+                graphic: [{
+                    type: 'image',  // 插入圆环中间的图片
+                    style: {
+                        image: require('../../assets/safetyIndex/89771.png'), // 本地图片要用require引入
+                        width: 90, // 设置图片大小
+                        height: 90
+                    },
+                    // 设置图片位置
+                    top: "24.8%",
+                    left: "9%",
+                },],
+                backgroundColor: 'rgba(255,255,255,0)',
+                series: [
+                    {
+                        type: 'pie',
+                        radius: ['55%', '70%'],
+                        top: "middle",
+                        left: "left",
+                        width: '45%',
+                        height: 190,
+                        center: ['45%', '50%'],
+                        itemStyle: {
+                            borderRadius: 0,
+                            borderColor: 'rgba(255,255,255,0)',
+                            borderWidth: 5
+                        },
+                        label: {
+                            show: false,
+                            position: 'center'
+                        },
+                        data
+                    }
+                ]
+            };
+            option && myChart.setOption(option);
+        },
+        initdrrTu() {
+            let myChart = echarts.init(document.getElementById("zdrrTu"));
+            //  const colors = ['#40E2CA', '#E2B171', '#EE6666'];
+            let yczData = this.detailList.keyPersons.map((item) => {
+                return {
+                    value: item.numValue, itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 0,
+                            y2: 1,
+                            colorStops: [{
+                                offset: 0, color: '#66E1DF' // 0% 处的颜色
+                            }, {
+                                offset: 1, color: 'rgba(0,89,84,0)' // 100% 处的颜色
+                            }],
+                            global: false // 缺省为 false
+                        }, borderWidth: 1,
+                    },
+                }
+            })
+            let dateData = this.detailList.keyPersons.map((item) => {
+                return item.safeRuleName
+            })
+            console.log(yczData, 'yczData');
+            console.log(dateData, 'dateData');
+            let option = {
+                xAxis: [
+                    {
+                        type: 'category',
+
+                        axisTick: {
+                            show: false
+                        },
+                        splitLine: { show: false },
+                        nameTextStyle: {
+                            color: '#ccc',
+                            fontSize: 10,
+                        },
+                        axisLabel: {
+                            rotate: -25
+                            ,
+                        },
+                        axisLine: {
+                            lineStyle: {
+                                color: '#ccc',
+
+                            }
+                        }
+                        ,
+                        data: dateData,
+                    }
+                ],
+                yAxis: [
+
+                    {
+                        type: 'value',
+                        name: '次数',
+                        position: 'left',
+                        splitLine: { show: false },
+                        alignTicks: true,
+                        axisLine: {
+                            show: false,
+                            lineStyle: {
+                                color: '#ccc'
+                            }
+                        },
+
+                    },
+
+
+                ],
+                series: [
+                    {
+                        name: '',
+                        type: 'bar',
+                        data: yczData
+                    },
+
+                ]
+            }
+            option && myChart.setOption(option);
+        },
+        showDialog() {
+            personSafetyDetail({ companyId: this.companyID }).then(res => {
+                this.detailList = res.data
+                this.$nextTick(() => {
+                    this.initdrrTu()
+                })
+                this.diaVisible = true
+            })
+        },
+
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.qyyg {
+    height: 25.64%;
+    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;
+        cursor: pointer;
+
+        img {
+            width: 16px;
+            height: 16px;
+            margin: 0 12px;
+        }
+    }
+
+
+    .ygtb {
+        height: calc(100% - 35px);
+        width: 100%;
+
+    }
+
+
+}
+
+.picForm {
+    /deep/ .el-dialog {
+        background-color: rgba(0, 0, 0, 0);
+        background: url('~@/assets/head/编组 3021112.png') no-repeat;
+        background-size: 100% 100%;
+        width: 841px;
+        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;
+            padding: 15px;
+            height: 580px;
+
+            .tjsj {
+                width: 100%;
+                height: 130px;
+                margin: 10px 0;
+                background: url('~@/assets/companyCanban/09091.png') no-repeat;
+                background-size: 100% 100%;
+                position: relative;
+                padding: 0 100px;
+                box-sizing: border-box;
+                display: flex;
+                justify-content: space-between;
+                align-items: end;
+
+                .tjsjTitle {
+                    position: absolute;
+                    left: 14px;
+                    top: 10px;
+                    font-size: 16px;
+                    color: #FFE6D9;
+                    letter-spacing: 0;
+                    line-height: 16px;
+                    text-shadow: 0 0 8px rgba(255, 119, 52, 0.50);
+                    font-weight: 500;
+                }
+
+                .zhuangshi {
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    background: url('~@/assets/companyCanban/矩形（装饰）.png') no-repeat;
+                    background-size: 100% 100%;
+                    width: 15px;
+                    height: 15px;
+                }
+
+                .green {
+                    width: 90px;
+                    height: 90px;
+                    background: url('~@/assets/safetyIndex/绿色.png') no-repeat;
+                    background-size: 100% 100%;
+                    margin: 0 auto;
+                    margin-bottom: 10px;
+                    padding: 18px 5px;
+                    line-height: 16.5px;
+                    font-size: 12px;
+                    color: #DDFFF9;
+                    letter-spacing: 0;
+                    font-weight: 400;
+                    text-align: center;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+
+                    p {
+                        margin-top: 10px;
+                        font-size: 18px;
+                        color: #13FFD4;
+                        letter-spacing: 2.25px;
+                        font-weight: 600;
+                    }
+                }
+
+                .blue {
+                    width: 90px;
+                    height: 90px;
+                    background: url('~@/assets/safetyIndex/蓝色.png') no-repeat;
+                    background-size: 100% 100%;
+                    margin: 0 auto;
+                    margin-bottom: 10px;
+                    padding: 18px 5px;
+                    line-height: 16.5px;
+                    font-size: 12px;
+                    color: #FFF8DD;
+                    letter-spacing: 0;
+                    font-weight: 400;
+                    text-align: center;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+
+                    p {
+                        margin-top: 10px;
+                        font-size: 18px;
+                        color: #46F3FF;
+                        letter-spacing: 2.25px;
+                        font-weight: 600;
+                    }
+                }
+
+                .yellow {
+                    width: 90px;
+                    height: 90px;
+                    background: url('~@/assets/safetyIndex/黄色.png') no-repeat;
+                    background-size: 100% 100%;
+                    margin: 0 auto;
+                    margin-bottom: 10px;
+                    padding: 18px 5px;
+                    line-height: 16.5px;
+                    font-size: 12px;
+                    color: #FFF8DD;
+                    letter-spacing: 0;
+                    font-weight: 400;
+                    text-align: center;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+
+                    p {
+                        margin-top: 10px;
+                        font-size: 18px;
+                        color: #FFE346;
+                        letter-spacing: 2.25px;
+                        font-weight: 600;
+                    }
+                }
+
+                .red {
+                    width: 90px;
+                    height: 90px;
+                    background: url('~@/assets/safetyIndex/红色.png') no-repeat;
+                    background-size: 100% 100%;
+                    margin: 0 auto;
+                    margin-bottom: 10px;
+                    padding: 18px 5px;
+                    line-height: 16.5px;
+                    font-size: 12px;
+                    color: #FFE8DD;
+                    letter-spacing: 0;
+                    font-weight: 400;
+                    text-align: center;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+
+                    p {
+                        margin-top: 10px;
+                        font-size: 18px;
+                        color: #FF4646;
+                        letter-spacing: 2.25px;
+                        font-weight: 600;
+                    }
+                }
+            }
+
+            .zdgw {
+                width: 100%;
+                height: 130px;
+                margin: 10px 0;
+                background: url('~@/assets/companyCanban/09091.png') no-repeat;
+                background-size: 100% 100%;
+                position: relative;
+                padding: 0 100px;
+                box-sizing: border-box;
+                display: flex;
+                justify-content: space-around;
+                align-items: center;
+
+                .tjsjTitle {
+                    position: absolute;
+                    left: 14px;
+                    top: 10px;
+                    font-size: 16px;
+                    color: #FFE6D9;
+                    letter-spacing: 0;
+                    line-height: 16px;
+                    text-shadow: 0 0 8px rgba(255, 119, 52, 0.50);
+                    font-weight: 500;
+                }
+
+                .zhuangshi {
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    background: url('~@/assets/companyCanban/矩形（装饰）.png') no-repeat;
+                    background-size: 100% 100%;
+                    width: 15px;
+                    height: 15px;
+                }
+
+                .zdItem {
+                    height: 60px;
+                    width: 270px;
+                    position: relative;
+                    padding: 10px;
+                    box-sizing: border-box;
+                    display: flex;
+
+                    .yellowIconBox {
+                        width: 40px;
+                        height: 40px;
+                        border: 1px solid rgba(169, 121, 64, 1);
+                        box-shadow: 0px 0px 6px 0px rgba(195, 143, 74, 1);
+                        box-sizing: border-box;
+                        background-image: linear-gradient(180deg, rgba(169, 121, 64, 0.37) 0%, rgba(98, 155, 227, 0.02) 43%, rgba(169, 121, 64, 0.37) 100%);
+                        display: flex;
+                        margin-right: 10px;
+
+                        img {
+                            width: 100%;
+                            height: 100%;
+                        }
+                    }
+
+                    .yellowTextBox {
+                        font-size: 14px;
+                        color: #D0DEEE;
+                        letter-spacing: 0;
+                        line-height: 16px;
+                        font-weight: 400;
+
+                        p {
+                            margin: 0;
+                            font-size: 18px;
+                            color: #FFE6D9;
+                            letter-spacing: 0.9px;
+                            line-height: 33px;
+                            text-shadow: 0 0 8px rgba(255, 119, 52, 0.50);
+                            font-weight: 500;
+                        }
+                    }
+
+                    .blueIconBox {
+                        width: 40px;
+                        height: 40px;
+                        border: 1px solid rgba(64, 145, 169, 1);
+                        box-shadow: 0px 0px 6px 0px rgba(74, 176, 195, 1);
+                        box-sizing: border-box;
+                        background-image: linear-gradient(180deg, rgba(74, 176, 195, 0.37) 0%, rgba(98, 155, 227, 0.02) 43%, rgba(74, 176, 195, 0.37) 100%);
+                        display: flex;
+                        margin-right: 10px;
+
+                        img {
+                            width: 100%;
+                            height: 100%;
+                        }
+                    }
+
+                    .blueTextBox {
+                        font-size: 14px;
+                        color: #D0DEEE;
+                        letter-spacing: 0;
+                        line-height: 16px;
+                        font-weight: 400;
+
+                        p {
+                            margin: 0;
+                            font-size: 18px;
+                            color: #EBF9FF;
+                            letter-spacing: 0.9px;
+                            line-height: 33px;
+                            text-shadow: 0 0 8px rgba(21, 154, 255, 0.50);
+                            font-weight: 500;
+                        }
+                    }
+                }
+
+                .zdItem::after {
+                    content: "";
+                    background: url('~@/assets/safetyIndex/0091.png') no-repeat;
+                    background-size: 100% 100%;
+                    opacity: 0.5;
+                    top: 0;
+                    left: 0;
+                    bottom: 0;
+                    right: 0;
+                    position: absolute;
+                    z-index: 0;
+                }
+            }
+
+            .zdrr {
+                width: 100%;
+                height: 260px;
+                margin: 10px 0;
+                background: url('~@/assets/companyCanban/09091.png') no-repeat;
+                background-size: 100% 100%;
+                position: relative;
+                padding: 0 30px;
+                box-sizing: border-box;
+                display: flex;
+                justify-content: space-around;
+                align-items: end;
+
+                .tjsjTitle {
+                    position: absolute;
+                    left: 14px;
+                    top: 10px;
+                    font-size: 16px;
+                    color: #FFE6D9;
+                    letter-spacing: 0;
+                    line-height: 16px;
+                    text-shadow: 0 0 8px rgba(255, 119, 52, 0.50);
+                    font-weight: 500;
+                }
+
+                .zhuangshi {
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    background: url('~@/assets/companyCanban/矩形（装饰）.png') no-repeat;
+                    background-size: 100% 100%;
+                    width: 15px;
+                    height: 15px;
+                }
+
+                .zdrrTu {
+                    width: 100%;
+                    height: 230px;
+                }
+            }
+        }
+    }
+
+}
+</style>
\ No newline at end of file
diff --git a/src/views/companyCanban/weihuapin.vue b/src/views/companyCanban/weihuapin.vue
new file mode 100644
index 0000000..018463e
--- /dev/null
+++ b/src/views/companyCanban/weihuapin.vue
@@ -0,0 +1,513 @@
+<template>
+    <div class="fangyi">
+        <div class="title" @click="showDialog"><img src="../../assets/safetyIndex/装饰009991.png" alt="">危化品运输安全</div>
+        <div class="whpys" id="whpys">
+
+        </div>
+        <el-dialog title="危化品运输安全上报数据详情" :visible.sync="diaVisible" class="picForm"
+            v-if="fangyiList && fangyiList.violations">
+            <div class="fqs">
+                <div class="tjsjTitle">运输安全数据</div>
+                <div class="zhuangshi"></div>
+                <div class="fxfqs" id="fxfqs"></div>
+            </div>
+            <div class="tjsj">
+                <div class="tjsjTitle">违章数据</div>
+                <div class="zhuangshi"></div>
+                <div class="tjsjChild" id="ymjzs">
+                    <div class="imgBox_yellow"><img src="../../assets/companyCanban/icon/违停.png" alt=""></div>
+                    <div class="textBox">
+                        <div class="numText">{{ fangyiList.violations[0].safeRuleName }}</div>
+                        <div class="numNum_yellow">{{ fangyiList.violations[0].numValue }}</div>
+                    </div>
+                </div>
+                <div class="tjsjChild" id="ymjzs">
+                    <div class="imgBox_red"><img src="../../assets/companyCanban/icon/闯禁.png" alt=""></div>
+                    <div class="textBox">
+                        <div class="numText">{{ fangyiList.violations[1].safeRuleName }}</div>
+                        <div class="numNum_red">{{ fangyiList.violations[1].numValue }}</div>
+                    </div>
+                </div>
+                <div class="tjsjChild" id="ymjzs">
+                    <div class="imgBox_blue"><img src="../../assets/companyCanban/icon/超速.png" alt=""></div>
+                    <div class="textBox">
+                        <div class="numText">{{ fangyiList.violations[2].safeRuleName }}</div>
+                        <div class="numNum_blue">{{ fangyiList.violations[2].numValue }}</div>
+                    </div>
+                </div>
+                <div class="tjsjChild" id="ymjzs">
+                    <div class="imgBox_blue"><img src="../../assets/companyCanban/icon/疲劳驾驶.png" alt=""></div>
+                    <div class="textBox">
+                        <div class="numText">{{ fangyiList.violations[3].safeRuleName }}</div>
+                        <div class="numNum_blue">{{ fangyiList.violations[3].numValue }}</div>
+                    </div>
+                </div>
+                <div class="tjsjChild" id="ymjzs">
+                    <div class="imgBox_blue"><img src="../../assets/companyCanban/icon/未按车道行驶.png" alt=""></div>
+                    <div class="textBox">
+                        <div class="numText">{{ fangyiList.violations[4].safeRuleName }}</div>
+                        <div class="numNum_blue">{{ fangyiList.violations[4].numValue }}</div>
+                    </div>
+                </div>
+            </div>
+
+        </el-dialog>
+    </div>
+</template>
+<script>
+import * as echarts from 'echarts';
+import "echarts-gl";
+import { chemicalsDetail } from '@/api/companyCanban'
+export default {
+    props: ['companyId'],
+    data() {
+        return {
+            companyID: this.companyId,
+            fangyiList: {},
+            dateList: [],
+            jingneiList: [],
+            jingwaiList: [],
+            yimiaoData: {},
+            hesuanData: {},
+            changsuoData: {},
+            diaVisible: false,
+        }
+    },
+    created() {
+        console.log(this.companyID, 'this.companyID');
+        chemicalsDetail({ companyId: this.companyID }).then(res => {
+            this.fangyiList = res.data
+            this.initdrrTu()
+        })
+
+    },
+    methods: {
+        showDialog() {
+            this.diaVisible = true
+            this.$nextTick(() => {
+                this.initfxfqs()
+            })
+        },
+        initdrrTu() {
+            let myChart = echarts.init(document.getElementById("whpys"));
+            //  const colors = ['#40E2CA', '#E2B171', '#EE6666'];
+            let yczData = this.fangyiList.transportation.map((item) => {
+                return {
+                    value: item.numValue, itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 1,
+                            y: 0,
+                            x2: 0,
+                            y2: 0,
+                            colorStops: [{
+                                offset: 0, color: '#66E1DF' // 0% 处的颜色
+                            }, {
+                                offset: 1, color: 'rgba(0,89,84,0)' // 100% 处的颜色
+                            }],
+                            global: false // 缺省为 false
+                        }, borderWidth: 1,
+                    },
+                }
+            })
+            let dateData = this.fangyiList.transportation.map((item) => {
+                return item.safeRuleName
+            })
+            console.log(yczData, 'yczData');
+            console.log(dateData, 'dateData');
+            let option = {
+                tooltip: { trigger: 'item' },
+                xAxis: [
+                    {
+                        type: 'value',
+                        name: '次数',
+                        position: 'left',
+                        splitLine: { show: false },
+                        alignTicks: true,
+                        axisLine: {
+                            show: false,
+                            lineStyle: {
+                                color: '#ccc'
+                            }
+                        },
+                    },
+                ],
+                yAxis: [
+
+                    {
+                        type: 'category',
+
+                        axisTick: {
+                            show: false,
+
+                        },
+                        splitLine: { show: false },
+                        nameTextStyle: {
+                            color: '#ccc',
+                            fontSize: 10,
+                        },
+                        axisLabel: {
+                            inside: true,
+                            color: '#D0DEEE'
+                        },
+                        axisLine: {
+                            show: false,
+                            lineStyle: {
+                                color: '#ccc'
+                            }
+                        },
+
+                        data: dateData,
+                    }
+
+                ],
+                series: [
+                    {
+                        name: '',
+                        type: 'bar',
+                        showBackground: true,
+                        backgroundStyle: {
+                            color: '#6C8097',
+                            opacity: 0.1
+                        },
+                        barWidth: 20,
+                        barCategoryGap: '40%',
+                        barGap: '40%',
+                        data: yczData
+                    },
+                ]
+            }
+            option && myChart.setOption(option);
+        },
+        initfxfqs() {
+            let myChart = echarts.init(document.getElementById("fxfqs"));
+            //  const colors = ['#40E2CA', '#E2B171', '#EE6666'];
+            let yczData = this.fangyiList.transportation.map((item) => {
+                return {
+                    value: item.numValue, itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 0,
+                            y2: 1,
+                            colorStops: [{
+                                offset: 0, color: '#66E1DF' // 0% 处的颜色
+                            }, {
+                                offset: 1, color: 'rgba(0,89,84,0)' // 100% 处的颜色
+                            }],
+                            global: false // 缺省为 false
+                        }, borderWidth: 1,
+                    },
+                }
+            })
+            let dateData = this.fangyiList.transportation.map((item) => {
+                return item.safeRuleName
+            })
+            let option = {
+                xAxis: [
+                    {
+                        type: 'category',
+
+                        axisTick: {
+                            show: false
+                        },
+                        splitLine: { show: false },
+                        nameTextStyle: {
+                            color: '#ccc',
+                            fontSize: 10,
+                        },
+
+                        axisLine: {
+                            lineStyle: {
+                                color: '#ccc',
+
+                            }
+                        }
+                        ,
+                        data: dateData,
+                    }
+                ],
+                yAxis: [
+
+                    {
+                        type: 'value',
+                        name: '次数',
+                        position: 'left',
+                        splitLine: { show: false },
+                        alignTicks: true,
+                        axisLine: {
+                            show: false,
+                            lineStyle: {
+                                color: '#ccc'
+                            }
+                        },
+
+                    },
+
+
+                ],
+                series: [
+                    {
+                        name: '',
+                        type: 'bar',
+                        barWidth: 20,
+                        data: yczData
+                    },
+
+                ]
+            }
+            option && myChart.setOption(option);
+        }
+    },
+}
+</script>
+
+<style lang="less" scoped>
+.fangyi {
+    height: calc(37.94% - 40px);
+    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;
+        cursor: pointer;
+
+        img {
+            width: 16px;
+            height: 16px;
+            margin: 0 12px;
+        }
+    }
+
+    .whpys {
+        height: calc(100% - 35px);
+        width: 100%;
+    }
+
+
+    .picForm {
+        /deep/ .el-dialog {
+            background-color: rgba(0, 0, 0, 0);
+            background: url('~@/assets/companyFile/背景2.png') no-repeat;
+            background-size: 100% 100%;
+            width: 811px;
+            height: 480px;
+            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: 420px;
+                padding: 15px;
+
+                .tjsj {
+                    width: 100%;
+                    height: 110px;
+                    margin: 10px 0;
+                    background: url('~@/assets/companyCanban/09091.png') no-repeat;
+                    background-size: 100% 100%;
+                    position: relative;
+                    padding: 0 10px;
+                    box-sizing: border-box;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: flex-end;
+
+                    .tjsjTitle {
+                        position: absolute;
+                        left: 14px;
+                        top: 10px;
+                        font-size: 16px;
+                        color: #FFE6D9;
+                        letter-spacing: 0;
+                        line-height: 16px;
+                        text-shadow: 0 0 8px rgba(255, 119, 52, 0.50);
+                        font-weight: 500;
+                    }
+
+                    .zhuangshi {
+                        position: absolute;
+                        left: 0;
+                        top: 0;
+                        background: url('~@/assets/companyCanban/矩形（装饰）.png') no-repeat;
+                        background-size: 100% 100%;
+                        width: 15px;
+                        height: 15px;
+                    }
+
+                    .tjsjChild {
+                        height: 60px;
+                        width: calc(20% - 11px);
+
+                        display: flex;
+                        //  justify-content: center;
+                        align-items: center;
+                        position: relative;
+                        margin-bottom: 10px;
+
+                        .imgBox_yellow {
+                            margin-left: 10px;
+                            width: 40px;
+                            height: 40px;
+                            border: 1px solid rgba(169, 121, 64, 1);
+                            box-shadow: 0px 0px 6px 0px rgba(195, 143, 74, 1);
+                            box-sizing: border-box;
+                            background-image: linear-gradient(180deg, rgba(169, 121, 64, 0.37) 0%, rgba(98, 155, 227, 0.02) 43%, rgba(169, 121, 64, 0.37) 100%);
+                            display: flex;
+
+                            img {
+                                width: 100%;
+                                height: 100%;
+                            }
+                        }
+
+                        .imgBox_red {
+                            margin-left: 10px;
+                            width: 40px;
+                            height: 40px;
+                            border: 1px solid rgba(169, 64, 64, 1);
+                            box-shadow: 0px 0px 6px 0px rgba(195, 74, 74, 1);
+
+                            box-sizing: border-box;
+                            background-image: linear-gradient(180deg, rgba(169, 64, 64, 0.37) 0%, rgba(98, 155, 227, 0.02) 43%, rgba(169, 64, 64, 0.37) 100%);
+
+                            display: flex;
+
+                            img {
+                                width: 100%;
+                                height: 100%;
+                            }
+                        }
+
+                        .imgBox_blue {
+                            margin-left: 10px;
+                            width: 40px;
+                            height: 40px;
+                            border: 1px solid rgba(64, 145, 169, 1);
+                            box-shadow: 0px 0px 6px 0px rgba(74, 176, 195, 1);
+                            box-sizing: border-box;
+                            background-image: linear-gradient(180deg, rgba(74, 176, 195, 0.37) 0%, rgba(98, 155, 227, 0.02) 43%, rgba(74, 176, 195, 0.37) 100%);
+                            display: flex;
+
+                            img {
+                                width: 100%;
+                                height: 100%;
+                            }
+                        }
+
+                        .textBox {
+                            margin-left: 15px;
+
+                            .numNum_yellow {
+                                font-size: 18px;
+                                color: #FFE6D9;
+                                letter-spacing: 0.9px;
+                                line-height: 33px;
+                                text-shadow: 0 0 8px rgba(255, 119, 52, 0.50);
+                                font-weight: 500;
+                            }
+
+                            .numNum_red {
+                                font-size: 18px;
+                                color: #FFD9D9;
+                                letter-spacing: 0.9px;
+                                line-height: 33px;
+                                text-shadow: 0 0 8px rgba(255, 52, 52, 0.50);
+                                font-weight: 500;
+                            }
+
+                            .numNum_blue {
+                                font-size: 18px;
+                                color: #EBF9FF;
+                                letter-spacing: 0.9px;
+                                line-height: 33px;
+                                text-shadow: 0 0 8px rgba(21, 154, 255, 0.50);
+                                font-weight: 500;
+                            }
+
+                            .numText {
+                                font-size: 12px;
+                                color: #D0DEEE;
+                                letter-spacing: 0;
+                                line-height: 16px;
+                                font-weight: 300;
+                            }
+                        }
+
+                    }
+
+                    .tjsjChild::after {
+                        content: "";
+                        background: url('~@/assets/companyCanban/矩形背景0122.png') no-repeat;
+                        background-size: 100% 100%;
+                        opacity: 0.5;
+                        top: 0;
+                        left: 0;
+                        bottom: 0;
+                        right: 0;
+                        position: absolute;
+                        z-index: 0;
+                    }
+                }
+
+                .fqs {
+                    width: 100%;
+                    height: 255px;
+                    background: url('~@/assets/companyCanban/09091.png') no-repeat;
+                    background-size: 100% 100%;
+                    position: relative;
+                    margin: 10px 0;
+
+                    .tjsjTitle {
+                        position: absolute;
+                        left: 14px;
+                        top: 10px;
+                        font-size: 16px;
+                        color: #FFE6D9;
+                        letter-spacing: 0;
+                        line-height: 16px;
+                        text-shadow: 0 0 8px rgba(255, 119, 52, 0.50);
+                        font-weight: 500;
+                    }
+
+                    .zhuangshi {
+                        position: absolute;
+                        left: 0;
+                        top: 0;
+                        background: url('~@/assets/companyCanban/矩形（装饰）.png') no-repeat;
+                        background-size: 100% 100%;
+                        width: 15px;
+                        height: 15px;
+                    }
+
+                    .fxfqs {
+                        width: 100%;
+                        height: 100%;
+                    }
+                }
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/enterpriseRank/index.vue b/src/views/enterpriseRank/index.vue
index a2eb4af..17f0e99 100644
--- a/src/views/enterpriseRank/index.vue
+++ b/src/views/enterpriseRank/index.vue
@@ -20,7 +20,12 @@
                 <el-table :cell-style="{ background: 'revert' }" :data="companyList" class="table"
                     style="width: calc(100% );  margin:0 ;" :row-style="tableRowStyle" :header-row-style="tableHeaderColor"
                     :header-cell-style="tableHeaderCellColor">
-                    <el-table-column show-overflow-tooltip prop="companyName" label="企业列表">
+                    <el-table-column show-overflow-tooltip label="企业列表">
+                        <template slot-scope="scope">
+                            <div style="cursor: pointer;" @click="goCanban(scope.row)">
+                                {{ scope.row.companyName }}
+                            </div>
+                        </template>
                     </el-table-column>
                     <el-table-column label="防疫安全">
                         <el-table-column show-overflow-tooltip label="疫苗接种" width="35">
@@ -341,7 +346,13 @@
                             </template>
                         </el-table-column>
                     </el-table-column>
-                    <el-table-column label="综合指数" width="80" prop="score"></el-table-column>
+                    <el-table-column label="综合指数" width="80">
+                        <template slot-scope="scope">
+                            <div style="cursor: pointer;" @click="goCanban(scope.row)">
+                                {{ scope.row.score }}
+                            </div>
+                        </template>
+                    </el-table-column>
                 </el-table>
             </div>
             <div class="block">
@@ -575,6 +586,12 @@ export default {
         tableHeaderCellColor() {
             return { 'background': 'rgba(0,0,0,0)', 'border': '1px solid rgba(91, 116, 140, 0.6)', 'font-Weight': '300', 'color': 'rgba(255, 255, 255, 0.8)', 'text-align': 'center' }
         },
+        goCanban(val) {
+            sessionStorage.setItem('companyID', val.companyId)
+            this.$router.push({
+                path: '/home/companyCanban',
+            })
+        },
         handleSizeChange(val) {
             console.log(`每页 ${val} 条`);
             this.pageNum = 1;