hbt-training-ui/src/components/home/right/homeRight.component.html

<div class="env-right emergency-part">
    <div class="box-content">
        <title-component :imgSrc="imgSrc">
            能耗统计
        </title-component>
        <hbt-echarts className="line-chart-emergency" :options="option" @onChartInit="getEcharts($event,'lineChart')"></hbt-echarts>
    </div>
    <div class="box-content flex-15 margin-top-20 device-box">
        <title-component :imgSrc="imgSrc">
            设备在线统计
        </title-component>
        <div class="energyRightTitle d-flex is-justify-space-between margin-top-23">
            <div class="d-flex align-items-center">
                <img src="~@/assets/img/home/security-equipment.png" alt="">
                <span>安防设备</span>
                </div>
            <span>100<span class="grayColor">/300</span></span>
        </div>
        <div class="energyRightTitle d-flex is-justify-space-between margin-top-10">
            <div class="d-flex align-items-center">
                <img src="~@/assets/img/home/training-devices.png" alt="">
                <span>训练设备</span>
            </div>
            <span>100<span class="grayColor">/300</span></span>
        </div>
        <div class="energyRightTitle d-flex is-justify-space-between margin-top-10">
            <div class="d-flex align-items-center">
                <img src="~@/assets/img/home/logistics.png" alt="">
                <span>配套设备</span>
            </div>
            <span>100<span class="grayColor">/300</span></span>
        </div>
    </div>
    <div class="box-content margin-top-20 emergency-part">
        <title-component :imgSrc="imgSrc">
            物资盘点
        </title-component>
        <div class="charts-box">
            <div class="text">
                <div class="count">{{count}}%</div>
                物资完备度
            </div>
            <el-progress type="circle" :width="200" define-back-color="rgba(255,255,255,0.16)" :format="textFormat" :stroke-width="20" :percentage="count" :color="colors"></el-progress>
        </div>
    </div>
    <!-- 开启应急演练弹窗 -->
    <div class="pop-box right-position" v-if="showPop">
        <div class="close" @click="showPop=false">×</div>
        <div class="border l-t"></div>
        <div class="border r-t"></div>
        <div class="border r-b"></div>
        <div class="border l-b"></div>
        <div class="title">{{popTitle}}</div>
        <el-form class="margin-top-23" label-width="90px">
            <el-form-item label="事件类型：">
                <el-select v-model="popObj.typeId" filterable @change="val=>setData(val,'typeName')" class="item-radius-style">
                    <el-option v-for="(item,i) in typeList" :key="i" :label="item.label" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="事件等级：">
                <el-select v-model="popObj.level" filterable class="item-radius-style">
                    <el-option v-for="(item,i) in levelList" :key="i" :label="item.label" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="演练计划：">
                <el-select v-model="popObj.plan" filterable class="item-radius-style">
                    <el-option v-for="(item,i) in planList" :key="i" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="关联预案：">
                <el-select v-model="popObj.linkPlan" filterable  class="item-radius-style">
                    <el-option v-for="(item,i) in linkPlanList" :key="i" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div class="d-flex btn-group">
            <div class="btn-style" @click="submitWaring">确认</div>
            <div class="btn-style cancel" @click="showPop=false">取消</div>
        </div>
    </div>
    <!-- 开启应急演练弹窗 -->
    <div class="pop-box right-log-position" v-if="showLogPop">
        <div class="close" @click="showLogPop=false">×</div>
        <div class="border l-t"></div>
        <div class="border r-t"></div>
        <div class="border r-b"></div>
        <div class="border l-b"></div>
        <div class="title">报警记录</div>
       <div class="head">
           <span>告警类型</span>
           <span>告警内容</span>
           <span>报警内容</span>
           <span>上报人员</span>
           <span>事故地点</span>
           <span>处理意见</span>
       </div>
        <div class="tbody">
            <div class="tr" :key="i" v-for="(item,i) in tableData">
                <span>{{item.type}}</span>
                <span>{{item.content}}</span>
                <span>{{item.alarm}}</span>
                <span>{{item.reporter}}</span>
                <span>{{item.address}}</span>
                <span>{{item.suggestion}}</span>
            </div>
        </div>
        <el-pagination
                background
                layout="prev, pager, next"
                :total="1000">
        </el-pagination>
    </div>
</div>