<!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 class="fixed wp100 hv100" style="background-color: #000000;left: 0;top: 0;z-index: 1999;"
            v-show="!isReady"></div>

        <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="flex-text ml10 mr10 mt15">
            <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.natural.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" :class="{active: item.equipNo===currentSensorId}"
                                v-for="(item, index) in sensorLIst" @click="changeSensor(item)"><i
                                    class="el-icon-caret-right"></i><span>{{item.equipName}}</span></div>
                        </div>
                    </section>
                </div>
            </div>


            <div class="flex-1 ml15 flex-text flex-column ovh"
                style="height: calc(100vh - 110px); justify-content: space-between">
                <img :src="filePath" 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>
    new Vue({
        el: '#app',
        mixins: [gemhoUtil.detailPageMixin],
        data() {
            return {
                // 菜单折叠显隐
                showMenu4bianpo: true,
                sensorLIst: [],
                currentSensorId: '',

                // 表格数据
                tableList: [],
                filePath: ''

            }
        },
        mounted() {
            // this.getCharts();
            // this.getChartsData()

            this.getImage();
            // this.getChartsData();

        },
        watch: {
            createTime() {
                this.getChartsData()
            }
        },
        methods: {
            getImage() {
                // 视频列表
                Axiosx.get(host + '/api/kdFile/natural', {
                    params: {
                        enterpriseId: this.selectedMine.id,
                        type: '2' // 1:矿山全景2:资源储量3:开发利用4:地质环境5:绿色矿山6:水监测 7:土监测
                    }
                }).then(res => {
                     this.filePath = host + '/file' + res.data.body
                });
                this.isReady = true

            },
        },
    })
</script>

</html>