<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,user-scalable=no" />
    <title>露天矿山数据总览</title>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/index.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../css/element-ui.css">
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="../css/vant@4.css" />

       <!-- 引入大屏内页公共样式 -->
       <link rel="stylesheet" href="./static/css/public-detail.css" />
    <!-- 先引入 Vue -->
    <script src="../js/vue.min.js"></script>
    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="../js/vue@2.6.14"></script>
    <script src="../js/vant.min.js"></script>
    <style>
    </style>
</head>

<body style="background-image: url('../static/bg-img.png');background-size: 100% 100%;">
    <div id="app">
        <div style="height: 80px;">
            <div class="flex-text color-theme f30 wp100 relative maxIndex fixed" style="height: 80px;">
                <div class="flex-1"
                    style="background-image: url('../static/title-bg-left.png');background-size: 100% 100%;height: 80px;">
                </div>
                <div class="flex-text"
                    style="background-image: url('../static/title-bg-center.png');background-size: 100% 100%;height: 80px;">
                    <div style="margin-top: -10px;">{{selectedMine.name || ''}}</div>
                </div>
                <div class="flex-1"
                    style="background-image: url('../static/title-bg-right.png');background-size: 100% 100%;height: 80px;">
                </div>
            </div>
        </div>

        <div class="fixed flex-text maxIndex pointer" style="left: 30px;top: 45px;" @click="goPrePage('emergency')">
            <img style="width: 24px;height: 24px;" src="../static/backPage.png" alt="">
            <div class="f20 color-theme ml10">返回</div>
        </div>

        <!-- <div class="fixed flex-text maxIndex pointer" style="right: 30px;top: 45px;" @click="gotoManagement()">
            <img style="width: 24px;height: 24px;" src="../static/backstage.png" alt="">
            <div class="f20 color-theme ml10">后台管理</div>
        </div> -->

        <div class="flex-text ml10 mr10 mt15" style="align-items: start;">
            <div style="width: 490px;height: calc(100vh - 110px);">
                <!-- 通知公告 -->
                <div style="background: linear-gradient(to bottom, rgba(13,27,48,.7), rgba(13,27,48,0));">
               
                    <div class="mineInfo">
                        <p>矿山名称： {{selectedMine.name}}</p>
                        <p>矿山地址：{{selectedMine.address}}</p>
                        <p>联系人：{{selectedMine.liablePerson}}</p>
                        <p>联系方式：{{selectedMine.liablePersonPhone}}</p>
                    </div>
                    <div class="menuInfo">
                        <ul>
                            <li v-for="(item, index) in menuObj[bigScreenDetailMenuModel].menuList" @click="changeMenu(item)" :class="{active: bigScreenDetailMenu===item.name}">
                                {{item.name}}
                            </li>
                        </ul>
                    </div>

                </div>

                <!-- 视频监控列表 -->
                <div class="relative mt20" style="width: 490px;height: calc(100vh - 170px);">
                    <section>
                        <div class="list-wrapper" v-show="showMenu4bianpo">
                            <div class="list-item" @click="location.href='people-location.html'"><i class="el-icon-caret-right"></i><span style="margin-left: 10px;">人员数据统计</span></div>
                            <div class="list-item active" @click="location.href='people-monitor.html'"><i class="el-icon-caret-right"></i><span style="margin-left: 10px;">人员定位图</span></div>
                        </div>
                    </section>
                </div>
            </div>

            <!-- 右侧容器 -->
            <div style="width: calc(100vw - 490px); height: calc(100vh - 110px);">
                <img :src="filePath" alt="" srcset="" style="width: 100%; height: 100%;">
                <!-- <img src="https://dummyimage.com/200x275" alt="" srcset="" style="width: 100%; height: 100%;"> -->

            </div>
        </div>
    </div>
</body>

<!-- 引入echarts -->
<script src="../js/echarts.min.js"></script>
<script src="../js/echarts-gl.js"></script>
<!-- 引入组件库 -->
<script src="../js/element-ui.js"></script>

<!-- axios -->
<script src="../js/axios.min.js"></script>
<!-- cookie -->
<script src="../js/js.cookie.js"></script>


<!-- 详情内页公用js -->
<script src="./static/js/public-detail.js"></script>

<script>
    var map;  // 地图
    new Vue({
        el: '#app',
        mixins: [gemhoUtil.detailPageMixin],
        data() {
            return {
                showMenu4bianpo: true,
              
                // 视频ai报警 列表
                aiList: [],
                filePath: ''
            }
        },
        watch: {
        },
        mounted() {
            this.getImage()
        },
        methods: {
            getImage(fn) {
                // 视频列表
                Axiosx.get(host + '/api/kdFile/natural', {
                    params: {
                        enterpriseId: this.selectedMine.id,
                        type: '8' // 1:矿山全景2:资源储量3:开发利用4:地质环境5:绿色矿山6:水监测 7:土监测
                    }
                }).then(res => {
                     this.filePath = host + '/file' + res.data.body
                });
                this.isReady = true

            },
        },
    })
</script>

</html>