EHR
/
app-big-data
másolva lulihong0928/bigScreenShow


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>医保费用支出分析</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link href="../../../css/bootstrap.min.css" rel="stylesheet">
    <link href="../../../css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="../../../css/plugins/toastr/toastr.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link href="../../../css/style.min.css" rel="stylesheet">
    <link href="../../../css/flex.css" rel="stylesheet">
    <link href="../css/insurance.css" rel="stylesheet">
</head>
<body>
    <div id="app" v-cloak>
        <!-- 遮罩层 -->
        <div class="div-mask-layer">
            <div class="ibox-content">
                <div class="spiner-example">
                    <div class="sk-spinner sk-spinner-fading-circle">
                        <div class="sk-circle1 sk-circle"></div>
                        <div class="sk-circle2 sk-circle"></div>
                        <div class="sk-circle3 sk-circle"></div>
                        <div class="sk-circle4 sk-circle"></div>
                        <div class="sk-circle5 sk-circle"></div>
                        <div class="sk-circle6 sk-circle"></div>
                        <div class="sk-circle7 sk-circle"></div>
                        <div class="sk-circle8 sk-circle"></div>
                        <div class="sk-circle9 sk-circle"></div>
                        <div class="sk-circle10 sk-circle"></div>
                        <div class="sk-circle11 sk-circle"></div>
                        <div class="sk-circle12 sk-circle"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="div-header flex f_y_c pl20">
            <div class="div-title" @click="skipClick()">大数据应用服务平台 <input type="checkbox" class="sanjiao"><img style="transition: all .3s ease-in-out"
                    src="../images/sanjiao.png"></div>
            <div class="div-skip" :class="{'div-skip-active':skipShow}">
                <div>
                    <a href="medical.html">
                        医疗服务大数据分析
                    </a>
                </div>
                <div>
                    <a href="home.html">
                        居民健康管理大数据分析
                    </a>
                </div>
                <div>
                    <a href="insurance.html" style="color:rgb(4, 128, 211);">
                        医保费用支出分析
                    </a>
                </div>
            </div>
        </div>
        <div class="left">
            <div class="chart mb-20">
                <bar-chart :config="leftData1"></bar-chart>
            </div>
            <div class="chart mb-20">
                <div v-show = "leftData2_legend != null" class="flex f_xy_c chart-legend">
                    <p>参保就医费用<br>{{leftData2_legend}}万元</p>
                </div>
                <bar-chart :config="leftData2" :legend="true"></bar-chart>
            </div>
            <div class="chart">
                <bar-chart :config="leftData3"></bar-chart>
            </div>
        </div>
        <div class="middle">
            <div class="select" style="position:relative">
                <div class="dropdown Mapselect">
                    <label class="diqu-label">地区</label>
                    <el-cascader :options="town":show-all-levels="false" v-model="selectTown" @change="areaChange"></el-cascader>
                    <!-- <div type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">{{city}}
                        <span class="caret"></span>
                    </div>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                        <li role="presentation" @click="setCity(item)" v-for="item in town">
                            <a role="menuitem" href="#">{{item.name}}</a>
                        </li>
                    </ul> -->
                </div>
                <div class="pick-time">
                    <label class="diqu-label">时间</label>
                    <el-date-picker
                    v-model="time"
                    type="month"
                    placeholder="选择月" clearable value-format="yyyy-MM" @change = "clickTime" :picker-options="pickerOptions0">
                  </el-date-picker>
                </div>
            </div>
            <div class="shuju flex f_y_c f_x_sb">
                <div>
                    <p class="mt-20"><span>{{middleData1}}</span>万元</p>
                    <p style="color: #a0f7ff;">本月医保支出费用</p>
                </div>
                <div>
                    <p class="mt-20"><span>{{middleData2}}%</span></p>
                    <p style="color: #ffde8e;">
                        环比
                        <img v-show="middleData2=='--' || middleData2>=0" src="../images/zengzhang.png">
                        <img v-show="middleData2!='--' && middleData2<0" src="../images/xiajiang.png">
                    </p>
                </div>
                <div>
                    <p class="mt-20"><span>{{middleData3}}</span>万元</p>
                    <p style="color: #fe9589;">上月医保支出费用</p>
                </div>
            </div>
            <div class="map mt20">
                <div class="set_all_city" @click="clickMap({name:'上饶市'})" title="选择全市" v-show="hasMapData">
                    <img src="../images/allCity.png">
                </div>
                <div v-show="!hasMapData" class="no-result-panel">
                    <div class="no-result-img" style="padding-top: 1.3rem;">
                        <img src="../images/noData.png">
                    </div>
                    <div class="no-result-text">暂无数据！</div>
                </div>
                <map-chart @map-click="clickMap" ref="map" :config="mapData" v-show="hasMapData" :tooltip="'元'" :danwei="true"></map-chart>
            </div>
        </div>
        <div class="right">
            <div class="table1">
                <div class="boxTitle mb10 mt24"><span class="ml50">住院服务情况</span></div>
                <table>
                    <thead>
                        <tr>
                            <th class="w-210">机构名称</th>
                            <th class="w-120 text-right">费用</th>
                            <th class="w-110 text-right">环比</th>
                        </tr>
                    </thead>
                </table>
                <table class="tbody">
                    <tbody  v-if = "tableData1 != false">
                        <tr v-for="item in tableData1">
                            <td class="w-210">
                                    {{item.firstColumn}}
                            </td>
                            <td class="w-120 text-right">
                                    {{item.HC_22_1001}}万元
                            </td>
                            <td class="w-110 text-right">
                                    <img v-show="item.HC_14_1028=='--' || item.HC_22_1002>=0" src="../images/zengzhang.png">
                                    <img v-show="item.HC_14_1028!='--' && item.HC_22_1002<0" src="../images/xiajiang.png">
                                    {{item.HC_22_1002}}%
                            </td>
                        </tr>
                    </tbody>
                    <div v-if="tableData1 == false" class="tableNoData flex f_xy_c">
                        <div class="chart-no-data noData">
                            <img src="../../bigData/images/noData.png" alt="">
                            暂无数据
                        </div>
                    </div>
                </table>
            </div>
            <div class="table2">
                    <div class="boxTitle mb10 mt24"><span class="ml50">疾病排行</span></div>
                    <table>
                        <thead>
                            <tr>
                                <th class="w-210">疾病名称</th>
                                <th class="w-120 text-right">费用</th>
                                <th class="w-110 text-right">环比</th>
                            </tr>
                        </thead>
                    </table>
                    <table class="tbody"  v-if = "tableData1 != false">
                        <tbody>
                            <tr v-for="item in tableData2">
                                <td class="w-210">
                                        {{item.firstColumn}}
                                </td>
                                <td class="w-120 text-right">
                                        {{item.HC_22_1004}}万元
                                </td>
                                <td class="w-110 text-right">
                                        <img v-show="item.HC_14_1028=='--' || item.HC_22_1005>=0" src="../images/zengzhang.png">
                                        <img v-show="item.HC_14_1028!='--' && item.HC_22_1005<0" src="../images/xiajiang.png">
                                        {{item.HC_22_1005}}%
                                </td>
                            </tr>
                        </tbody>
                        <div v-if = "tableData1 == false" class="tableNoData flex f_xy_c">
                            <div class="chart-no-data noData">
                                <img src="../../bigData/images/noData.png" alt="">
                                暂无数据
                            </div>
                        </div>
                    </table>
                </div>
        </div>
        <img src="../images/full-q.png" alt="" id="full">
    </div>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1W9gqPiqc7C9TDliPP8S9Rj9"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
    <script src="../../../js/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="../../../js/jquery.min.js?v=2.1.4"></script>
    <script src="../../../component/common/event-bus.js"></script>
    <script src="../../../js/plugins/echarts/echarts.js"></script>
    <script src="../../../js/plugins/toastr/toastr.min.js"></script>
    <script src="../../../js/bootstrap.min.js"></script>
    <script src="../../../js/es6-promise.js"></script>
    <script src="../../../js/underscore.js"></script>
    <script src="../../../js/util.js"></script>
    <script src="../../../js/plugins/layer/layer.min.js"></script>
    <script src="../../../js/api/http-request.js"></script>
    <script src="../../../js/api/bigData-api.js"></script>
    <script src="../../../component/chart/bar-chart.js"></script>
    <script src="../../../component/chart/map-chart.js"></script>
    <script src="../layui/layui.js"></script>
    <script src="../js/insuranceCharts.js"></script>
    <script src="../js/insurance.js"></script>
</body>
</html>