fire-mh/src/components/unitBox/index.vue

<template>
    <!-- 摸排报告  列表 -->
    <div  v-if="typeValue==6" style="margin-top:.25rem">
        <el-row class="ebItem">
            <el-col :offset="1" :span="4"><img  src="@/assets/img/securityPlan/iconEb.svg" alt="" class="img" width="20"></el-col>
            <el-col  :span="8">华漕镇</el-col>
            <el-col  :span="9" ><a href="http://32.0.15.107:8080/mhvi/hcddc.pdf" target="_blank">摸排报告</a></el-col>
            <el-col  :span="2" style="color:#73FBFD;text-align:center"></el-col>
            <div class="panel-footer"></div>
        </el-row>
        <el-row class="ebItem">
            <el-col :offset="1" :span="4"><img  src="@/assets/img/securityPlan/iconEb.svg" alt="" class="img" width="20"></el-col>
            <el-col  :span="8">新虹街道</el-col>
            <el-col  :span="9" ><a href="http://32.0.15.107:8080/mhvi/xhddc.pdf" target="_blank">摸排报告</a></el-col>
            <el-col  :span="2" style="color:#73FBFD;text-align:center"></el-col>
            <div class="panel-footer"></div>
        </el-row>
        <el-row class="ebItem">
            <el-col :offset="1" :span="4"><img  src="@/assets/img/securityPlan/iconEb.svg" alt="" class="img" width="20"></el-col>
            <el-col  :span="8">七宝镇</el-col>
            <el-col  :span="9" ><a href="http://32.0.15.107:8080/mhvi/qbddc.pdf" target="_blank">摸排报告</a></el-col>
            <el-col  :span="2" style="color:#73FBFD;text-align:center"></el-col>
            <div class="panel-footer"></div>
        </el-row>
        <el-row class="ebItem">
            <el-col :offset="1" :span="4"><img  src="@/assets/img/securityPlan/iconEb.svg" alt="" class="img" width="20"></el-col>
            <el-col  :span="8">虹桥镇</el-col>
            <el-col  :span="9" ><a href="http://32.0.15.107:8080/mhvi/hqddc.pdf" target="_blank">摸排报告</a></el-col>
            <el-col  :span="2" style="color:#73FBFD;text-align:center"></el-col>
            <div class="panel-footer"></div>
        </el-row>
    </div> 

     

    <!-- 养老  医疗机构清单 表格 -->
    <!-- <div>{{ arrayData }}</div> -->
    <div class="rightBotContent" v-else-if="typeValue==29||typeValue==30" style="margin-top:15px;height: calc(100% - .7rem)">
        <el-table  ref="reportTable" height="100%" :data="arrayData"  class="transparentTableRow" style="width: 100%"
            @mouseenter="autoScroll(true)" @mouseleave="autoScroll()">
            <el-table-column align="left" label="单位名称" prop="facilityName" show-overflow-tooltip></el-table-column>
            <!-- <el-table-column align="left" label="设施类型"  prop="facilityType"></el-table-column> -->
            <el-table-column align="left" label="地址" prop="address" show-overflow-tooltip></el-table-column>
            <el-table-column align="left" label="所属街镇" prop="streetTown" show-overflow-tooltip></el-table-column>
            <!-- <el-table-column align="left" label="隐患问题" prop="extendData" show-overflow-tooltip>
                <template #default="scope">
                        {{scope.row}}
                </template>
            </el-table-column> -->
          
        </el-table>
    </div>

    <!-- 图表+统计 -->
    <div v-else>
        <el-row >
            <el-col :span="10">
            <bar :total="staticData.total" v-if="staticData.total"></bar>
        
        </el-col>
            <el-col :span="14">
                <el-row>
                    <el-col :span="10" style="border: 1px solid rgba(48, 207, 255, 0.6); margin: .25rem .125rem .125rem; box-shadow: inset 0 0 0.07rem 0.04rem rgb(115 251 253 / 40%); box-sizing: border-box"
                     v-for="(item,index) in staticData.array" :key="index"
                     @click="staticsPoint(item.streetTown)">
                        <div style="padding: 0.2rem 0; text-align: center">
                            <span style="display: block">
                                <Strong :style="{ color: item.color, fontSize: '0.3rem'}" >
                                    <CountTo :startVal='0' :endVal='item.count || 0' :duration='3000'>{{ item.count || 0 }}</CountTo>
                                </Strong>
                                家
                            </span>
                            <span>{{item.streetTown}}</span>
                        </div>
                    </el-col>

                </el-row>

            </el-col>
        </el-row>
    </div>
    <!-- <div>{{ staticData.array }}</div> -->

    <!-- <div v-else style="text-align:center;margin-top:1rem;color:antiquewhite">暂无数据 ...</div> -->


     



   

</template>

<script>

import linstener from "@c/mixins/linstener";



import bar from "@c/bar/index2";
export default {
    mixins: [linstener],
    components: { bar },
    props: {
        typeValue: { type: Number, default: () => 1 },
        arrayData:{ type: Array, default: () => [] },
        staticData:{type: Object, default: () => {} }

    },
    mixins: [linstener],
    data() {
        return {
            streetDynamicData: [
                {
                    "dangerIssue": "15.6%",
                    "address": 14,
                    "medicalName": 90,
                    "streetTown": "华漕镇",
                    "processedRate": "0.0%"
                },
                {
                    "dangerIssue": "78.8%",
                    "address": 67,
                    "medicalName": 85,
                    "streetTown": "新虹街道",
                    "processedRate": "0.0%"
                },
                {
                    "dangerIssue": "17.8%",
                    "address": 292,
                    "medicalName": 1641,
                    "streetTown": "七宝镇",
                    "processedRate": "0.0%"
                },
                {
                    "dangerIssue": "37.4%",
                    "address": 474,
                    "medicalName": 1266,
                    "streetTown": "虹桥镇",
                    "processedRate": "0.0%"
                },
                {
                    "dangerIssue": "34.3%",
                    "address": 82,
                    "medicalName": 239,
                    "streetTown": "古美路街道",
                    "processedRate": "0.0%"
                },
                {
                    "dangerIssue": "15.7%",
                    "address": 336,
                    "medicalName": 2144,
                    "streetTown": "莘庄镇",
                    "processedRate": "0.0%"
                },
                {
                    "dangerIssue": "39.1%",
                    "address": 358,
                    "medicalName": 916,
                    "streetTown": "梅陇镇",
                    "processedRate": "0.0%"
                },
                {
                    "dangerIssue": "16.1%",
                    "address": 293,
                    "medicalName": 1823,
                    "streetTown": "颛桥镇",
                    "processedRate": "0.0%"
                },
                {
                    "dangerIssue": "19.8%",
                    "address": 133,
                    "medicalName": 673,
                    "streetTown": "马桥镇",
                    "processedRate": "0.0%"
                },
                {
                    "dangerIssue": "49.6%",
                    "address": 64,
                    "medicalName": 129,
                    "streetTown": "江川路街道",
                    "processedRate": "0.0%"
                },
                {
                    "dangerIssue": "16.0%",
                    "address": 512,
                    "medicalName": 3205,
                    "streetTown": "吴泾镇",
                    "processedRate": "0.0%"
                },
                {
                    "dangerIssue": "97.1%",
                    "address": 4652,
                    "medicalName": 4791,
                    "streetTown": "浦锦街道",
                    "processedRate": "0.0%"
                },
                {
                    "dangerIssue": "15.9%",
                    "address": 342,
                    "medicalName": 2157,
                    "streetTown": "浦江镇",
                    "processedRate": "0.0%"
                },
                {
                    "dangerIssue": "8.0%",
                    "address": 174,
                    "medicalName": 2174,
                    "streetTown": "莘庄工业区",
                    "processedRate": "0.0%"
                }], //各街镇物联动态-数据存储
            streetDynamicHeaderData: [
                { prop: "streetTown", name: "街镇" },
                { prop: "medicalName", name: "医疗机构名称" },
                { prop: "address", name: "地址" },
                { prop: "dangerIssue", name: "隐患问题" },
            ], //各街镇物联动态-table表格prop头部定义
        };
    },
    watch: {
       "props.typeValue" :function(val){
        alert(val)
        // console.log(this.staticData)

        }

    },
    mounted() {

    },
    created() {
        setTimeout(() => {
            this.autoScroll()

        }, 2000)
    },
    methods: {
        staticsPoint(val){
            let that = this
            this.$axios.post(this.$api.water.baseGgpFacilityList,{
                                "facilityType": [this.typeValue] ,
                                "streetTown": val 
                        }).then((res) => {
                            console.log(res)
                                let arr = []
                                if(res.data.length>0){
                                    arr = res.data;
                                    that.$emit("staticsPoint",arr,this.typeValue,val)
                                }  
                        });

        },
        beforeDestroy() {
            this.autoScroll(true)
        },

    },
};
</script>

<style scoped lang="scss">
.ebItem{
    margin-top:0.17rem;
    background:rgba(115, 251, 253, 0.06) !important;
    padding:.1rem 0;
    font-size:0.175rem;
    a{
        color:rgb(115, 251, 253)
    }
    &::before {
        position: absolute;
        top: 0;
        left: 0;
        content: "";
        width: 10px;
        height: 10px;
        border-left: 1px solid #02a6b5;
        border-top: 1px solid #02a6b5;
    }
    &::after {
        position: absolute;
        top: 0;
        right: 0;
        content: "";
        width: 10px;
        height: 10px;
        border-right: 1px solid #02a6b5;
        border-top: 1px solid #02a6b5;
    }
    .panel-footer {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        &::before {
            position: absolute;
            bottom: 0;
            left: 0;
            content: "";
            width: 10px;
            height: 10px;
            border-left: 1px solid #02a6b5;
            border-bottom: 1px solid #02a6b5;
        }
        &::after {
            position: absolute;
            right: 0;
            bottom: 0;
            content: "";
            width: 10px;
            height: 10px;
            border-right: 1px solid #02a6b5;
            border-bottom: 1px solid #02a6b5;
        }
    }
}
</style>