|
|
@@ -0,0 +1,1746 @@
|
|
|
+<template>
|
|
|
+ <div id="wrap">
|
|
|
+ <div class="wrap-box-top">
|
|
|
+ <div class="wrap-box-top-box1">
|
|
|
+ <div class="wrap-box-top-box1-header">
|
|
|
+ <span>人员五率</span>
|
|
|
+ <a
|
|
|
+ class="btn btn-xs btn-info btn-view btn-dialog"
|
|
|
+ @click="editor1(this)"
|
|
|
+ style="padding-left: 10px"
|
|
|
+ >
|
|
|
+ 编辑</a
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="wrap-box-top-box1-center">
|
|
|
+ <div class="wrap-box-top-box1-center-top">
|
|
|
+ <div
|
|
|
+ id="wrap-box-top-box1-center-top-box1"
|
|
|
+ class="wrap-box-top-box1-center-top-box1"
|
|
|
+ ></div>
|
|
|
+ <div
|
|
|
+ id="wrap-box-top-box1-center-top-box2"
|
|
|
+ class="wrap-box-top-box1-center-top-box1"
|
|
|
+ ></div>
|
|
|
+ <div
|
|
|
+ id="wrap-box-top-box1-center-top-box3"
|
|
|
+ class="wrap-box-top-box1-center-top-box1"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ <div class="wrap-box-top-box1-center-top">
|
|
|
+ <div
|
|
|
+ id="wrap-box-top-box1-center-top-box4"
|
|
|
+ class="wrap-box-top-box1-center-top-box1"
|
|
|
+ style="margin-left: 90px"
|
|
|
+ ></div>
|
|
|
+ <div
|
|
|
+ id="wrap-box-top-box1-center-top-box5"
|
|
|
+ class="wrap-box-top-box1-center-top-box1"
|
|
|
+ style="margin-right: 90px"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="wrap-box-top-box2">
|
|
|
+ <div class="wrap-box-top-box1-header">
|
|
|
+ <span>装备五率</span>
|
|
|
+ <a class="btn btn-xs btn-info btn-view btn-dialog" @click="editor2"
|
|
|
+ ><img src="/static/icon-img/编辑.png" alt="" />编辑</a
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="wrap-box-top-box1-center">
|
|
|
+ <div class="wrap-box-top-box1-center-top">
|
|
|
+ <div
|
|
|
+ id="wrap-box-top-box1-center-top-box6"
|
|
|
+ class="wrap-box-top-box1-center-top-box1"
|
|
|
+ ></div>
|
|
|
+ <div
|
|
|
+ id="wrap-box-top-box1-center-top-box7"
|
|
|
+ class="wrap-box-top-box1-center-top-box1"
|
|
|
+ ></div>
|
|
|
+ <div
|
|
|
+ id="wrap-box-top-box1-center-top-box8"
|
|
|
+ class="wrap-box-top-box1-center-top-box1"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ <div class="wrap-box-top-box1-center-top">
|
|
|
+ <div
|
|
|
+ id="wrap-box-top-box1-center-top-box9"
|
|
|
+ class="wrap-box-top-box1-center-top-box1"
|
|
|
+ style="margin-left: 90px"
|
|
|
+ ></div>
|
|
|
+ <div
|
|
|
+ id="wrap-box-top-box1-center-top-box10"
|
|
|
+ class="wrap-box-top-box1-center-top-box1"
|
|
|
+ style="margin-right: 90px"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="wrap-box-botom">
|
|
|
+ <div class="wrap-box-top-box1-header" id="wrap-box-top-box1-header">
|
|
|
+ <span style="margin-left: 58px">六量</span>
|
|
|
+ <a class="btn btn-xs btn-info btn-view btn-dialog" @click="editor3"
|
|
|
+ ><img src="/static/icon-img/编辑.png" alt="" />编辑</a
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="wrap-box-botom-list" id="wrap-box-botom-list-id">
|
|
|
+ <div class="wrap-box-botom-list-item">
|
|
|
+ <div class="wrap-box-botom-list-item-title">
|
|
|
+ <img
|
|
|
+ src="../../../images/小标题.png"
|
|
|
+ alt=""
|
|
|
+ class="img-left"
|
|
|
+ /><span>油料储备量</span
|
|
|
+ ><img
|
|
|
+ src="../../../images/小标题右边.png"
|
|
|
+ alt=""
|
|
|
+ class="img-right"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <ul class="wrap-box-botom-list-item-ul" id="ul-id">
|
|
|
+ <li>
|
|
|
+ <img src="/static/icon-img/油料.png" alt="" />
|
|
|
+ <div class="wrap-box-botom-list-item-ul-left">油料战术储备</div>
|
|
|
+ <div class="wrap-box-botom-list-item-ul-right"></div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="/static/icon-img/阈值.png" alt="" />
|
|
|
+ <div class="wrap-box-botom-list-item-ul-left">储备阈值</div>
|
|
|
+ <div class="wrap-box-botom-list-item-ul-right"></div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="/static/icon-img/自持能力.png" alt="" />
|
|
|
+ <div class="wrap-box-botom-list-item-ul-left">自持能力</div>
|
|
|
+ <div class="wrap-box-botom-list-item-ul-right"></div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="wrap-box-botom-list-item">
|
|
|
+ <div class="wrap-box-botom-list-item-title">
|
|
|
+ <img
|
|
|
+ src="../../../images/小标题.png"
|
|
|
+ alt=""
|
|
|
+ class="img-left"
|
|
|
+ /><span>军需储备量</span
|
|
|
+ ><img
|
|
|
+ src="../../../images/小标题右边.png"
|
|
|
+ alt=""
|
|
|
+ class="img-right"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <ul class="wrap-box-botom-list-item-ul" id="ul-id">
|
|
|
+ <li>
|
|
|
+ <img src="/static/icon-img/军需物资.png" alt="" />
|
|
|
+ <div class="wrap-box-botom-list-item-ul-left">军需战术储备</div>
|
|
|
+ <div class="wrap-box-botom-list-item-ul-right"></div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="/static/icon-img/阈值.png" alt="" />
|
|
|
+ <div class="wrap-box-botom-list-item-ul-left">储备阈值</div>
|
|
|
+ <div class="wrap-box-botom-list-item-ul-right"></div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="/static/icon-img/自持能力.png" alt="" />
|
|
|
+ <div class="wrap-box-botom-list-item-ul-left">自持能力</div>
|
|
|
+ <div class="wrap-box-botom-list-item-ul-right"></div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="wrap-box-botom-list-item">
|
|
|
+ <div class="wrap-box-botom-list-item-title">
|
|
|
+ <img
|
|
|
+ src="../../../images/小标题.png"
|
|
|
+ alt=""
|
|
|
+ class="img-left"
|
|
|
+ /><span>战备金储备量</span
|
|
|
+ ><img
|
|
|
+ src="../../../images/小标题右边.png"
|
|
|
+ alt=""
|
|
|
+ class="img-right"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <ul class="wrap-box-botom-list-item-ul" id="ul-id">
|
|
|
+ <li>
|
|
|
+ <img src="/static/icon-img/战备金.png" alt="" />
|
|
|
+ <div class="wrap-box-botom-list-item-ul-left">战备金战术存储</div>
|
|
|
+ <div class="wrap-box-botom-list-item-ul-right"></div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="wrap-box-botom-list-item">
|
|
|
+ <div class="wrap-box-botom-list-item-title">
|
|
|
+ <img
|
|
|
+ src="../../../images/小标题.png"
|
|
|
+ alt=""
|
|
|
+ class="img-left"
|
|
|
+ /><span>战救药材储备量</span
|
|
|
+ ><img
|
|
|
+ src="../../../images/小标题右边.png"
|
|
|
+ alt=""
|
|
|
+ class="img-right"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <ul class="wrap-box-botom-list-item-ul" id="ul-id">
|
|
|
+ <li>
|
|
|
+ <img src="/static/icon-img/卫生物资.png" alt="" />
|
|
|
+ <div class="wrap-box-botom-list-item-ul-left">
|
|
|
+ 卫生物资战术储备
|
|
|
+ </div>
|
|
|
+ <div class="wrap-box-botom-list-item-ul-right"></div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="/static/icon-img/阈值.png" alt="" />
|
|
|
+ <div class="wrap-box-botom-list-item-ul-left">储备阈值</div>
|
|
|
+ <div class="wrap-box-botom-list-item-ul-right"></div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="wrap-box-botom-list-item">
|
|
|
+ <div class="wrap-box-botom-list-item-title">
|
|
|
+ <img
|
|
|
+ src="../../../images/小标题.png"
|
|
|
+ alt=""
|
|
|
+ class="img-left"
|
|
|
+ /><span>弹药储备量</span
|
|
|
+ ><img
|
|
|
+ src="../../../images/小标题右边.png"
|
|
|
+ alt=""
|
|
|
+ class="img-right"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <ul class="wrap-box-botom-list-item-ul" id="ul-id">
|
|
|
+ <li>
|
|
|
+ <img src="/static/icon-img/弹药.png" alt="" />
|
|
|
+ <div class="wrap-box-botom-list-item-ul-left">弹药储存量</div>
|
|
|
+ <div class="wrap-box-botom-list-item-ul-right"></div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="wrap-box-botom-list-item">
|
|
|
+ <div class="wrap-box-botom-list-item-title">
|
|
|
+ <img
|
|
|
+ src="../../../images/小标题.png"
|
|
|
+ alt=""
|
|
|
+ class="img-left"
|
|
|
+ /><span>维修器材储备量</span
|
|
|
+ ><img
|
|
|
+ src="../../../images/小标题右边.png"
|
|
|
+ alt=""
|
|
|
+ class="img-right"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <ul class="wrap-box-botom-list-item-ul" id="ul-id">
|
|
|
+ <li>
|
|
|
+ <img src="/static/icon-img/维修.png" alt="" />
|
|
|
+ <div class="wrap-box-botom-list-item-ul-left">维修器材储存量</div>
|
|
|
+ <div class="wrap-box-botom-list-item-ul-right"></div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 编辑人员五率弹框 -->
|
|
|
+ <el-dialog
|
|
|
+ style="color: white"
|
|
|
+ title="编辑人员五率"
|
|
|
+ :visible.sync="open"
|
|
|
+ width="940px"
|
|
|
+ append-to-body
|
|
|
+ class="el-dialog__header bianzhi"
|
|
|
+ >
|
|
|
+ <el-form
|
|
|
+ ref="form"
|
|
|
+ :model="form"
|
|
|
+ :rules="rules"
|
|
|
+ label-width="80px"
|
|
|
+ :inline="true"
|
|
|
+ >
|
|
|
+ <el-form-item label="编制人数" prop="comPlan">
|
|
|
+ <el-input-number
|
|
|
+ class="BIANJI"
|
|
|
+ v-model="form.peopleNum"
|
|
|
+ controls-position="right"
|
|
|
+ :min="0"
|
|
|
+ :max="1000"
|
|
|
+ ></el-input-number>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="实际人数" prop="shijirenshu">
|
|
|
+ <div class="thistexts">{{ this.form.shijirenshu }}</div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="在位人数" prop="zaiweirenshu">
|
|
|
+ <div class="thistexts">{{ this.form.zaiweirenshu }}</div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="对口人数" prop="duikourenshu">
|
|
|
+ <div class="thistexts">{{ this.form.duikourenshu }}</div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="出动人数" prop="chudongrenshu">
|
|
|
+ <div class="thistexts">{{ this.form.chudongrenshu }}</div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="submitForm">确 定</el-button>
|
|
|
+ <el-button @click="cancel">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <!--编辑 装备五率的弹框 -->
|
|
|
+ <el-dialog
|
|
|
+ style="color: white"
|
|
|
+ title="装备五率的弹框"
|
|
|
+ :visible.sync="open1"
|
|
|
+ width="980px"
|
|
|
+ append-to-body
|
|
|
+ class="el-dialog__header"
|
|
|
+ >
|
|
|
+ <el-form
|
|
|
+ ref="form1"
|
|
|
+ :model="form1"
|
|
|
+ :rules="rules"
|
|
|
+ label-width="100px"
|
|
|
+ :inline="true"
|
|
|
+ >
|
|
|
+ <el-form-item prop="name" label="装备编制数">
|
|
|
+ <el-input-number
|
|
|
+ v-model="form1"
|
|
|
+ controls-position="right"
|
|
|
+ :min="0"
|
|
|
+ :max="100"
|
|
|
+ ></el-input-number>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="name" label="装备实有数">
|
|
|
+ <el-input-number
|
|
|
+ v-model="form1"
|
|
|
+ controls-position="right"
|
|
|
+ :min="0"
|
|
|
+ :max="100"
|
|
|
+ ></el-input-number>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="name" label="装备可用数">
|
|
|
+ <div class="thistexts"></div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="name" label="实际配套数">
|
|
|
+ <el-input-number
|
|
|
+ v-model="form1"
|
|
|
+ controls-position="right"
|
|
|
+ :min="0"
|
|
|
+ :max="100"
|
|
|
+ ></el-input-number>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="name" label="编制配套数">
|
|
|
+ <el-input-number
|
|
|
+ v-model="form1"
|
|
|
+ controls-position="right"
|
|
|
+ :min="0"
|
|
|
+ :max="100"
|
|
|
+ ></el-input-number>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="name" label="达到装备储存标准配套数">
|
|
|
+ <el-input-number
|
|
|
+ v-model="form1"
|
|
|
+ controls-position="right"
|
|
|
+ :min="0"
|
|
|
+ :max="100"
|
|
|
+ ></el-input-number>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="name" label="装备出动数">
|
|
|
+ <el-input-number
|
|
|
+ v-model="form1"
|
|
|
+ controls-position="right"
|
|
|
+ :min="0"
|
|
|
+ :max="100"
|
|
|
+ ></el-input-number>
|
|
|
+ </el-form-item>
|
|
|
+ <div></div>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="submitForm1">确 定</el-button>
|
|
|
+ <el-button @click="cancel">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <!-- 编辑六量弹框 -->
|
|
|
+ <el-dialog
|
|
|
+ style="color: white"
|
|
|
+ title="编辑六量"
|
|
|
+ :visible.sync="open2"
|
|
|
+ width="1010px"
|
|
|
+ append-to-body
|
|
|
+ class="el-dialog__header"
|
|
|
+ >
|
|
|
+ <el-form
|
|
|
+ ref="form2"
|
|
|
+ :model="form2"
|
|
|
+ :rules="rules"
|
|
|
+ label-width="100px"
|
|
|
+ :inline="true"
|
|
|
+ >
|
|
|
+ <div class="jiben">基本信息</div>
|
|
|
+ <el-form-item prop="comPlan">
|
|
|
+ <el-form-item label="油料战术储备">
|
|
|
+ <el-input v-model="form2.name"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="comPlan">
|
|
|
+ <el-form-item label="油料储备阈值">
|
|
|
+ <el-input v-model="form.name"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="comPlan">
|
|
|
+ <el-form-item label="油料自持能力">
|
|
|
+ <el-input v-model="form.name"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="comPlan">
|
|
|
+ <el-form-item label="军需物资战术储备">
|
|
|
+ <el-input v-model="form.name"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="comPlan">
|
|
|
+ <el-form-item label="军需储备阈值">
|
|
|
+ <el-input v-model="form.name"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="comPlan">
|
|
|
+ <el-form-item label="军需自持能力">
|
|
|
+ <el-input v-model="form.name"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="comPlan">
|
|
|
+ <el-form-item label="战备金战术存储">
|
|
|
+ <el-input v-model="form.name"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="comPlan">
|
|
|
+ <el-form-item label="卫生物资战术储备">
|
|
|
+ <el-input v-model="form.name"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="comPlan">
|
|
|
+ <el-form-item label="卫生物资储备阈值">
|
|
|
+ <el-input v-model="form.name"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="comPlan">
|
|
|
+ <el-form-item label="弹药储存量">
|
|
|
+ <el-input v-model="form.name"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="comPlan">
|
|
|
+ <el-form-item label="维修器材储存量">
|
|
|
+ <el-input v-model="form.name"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="submitForm2">确 定</el-button>
|
|
|
+ <el-button @click="cancel">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import * as echarts from "echarts";
|
|
|
+import { getReteOfTen } from "@/api/combatduty/ReteOfTen";
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ list: 50,
|
|
|
+ open: false,
|
|
|
+ open1: false,
|
|
|
+ open2: false,
|
|
|
+ // 人员五率
|
|
|
+ form: {},
|
|
|
+ // 装备五率
|
|
|
+ form1: {},
|
|
|
+ // 六量
|
|
|
+ form2: {},
|
|
|
+ // 表单校验
|
|
|
+ rules: {},
|
|
|
+ zaiweirenshu: 0,
|
|
|
+ chudongrenshu: 0,
|
|
|
+ shijirenshu: 0,
|
|
|
+ duikourenshu: 0,
|
|
|
+ peopleNum:0
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+
|
|
|
+ getReteOfTen().then((res) => {
|
|
|
+ this.form = res.data;
|
|
|
+
|
|
|
+ this.zaiweirenshu = this.form.zaiweirenshu;
|
|
|
+ this.peopleNum = 0;
|
|
|
+ this.chudongrenshu = this.form.chudongrenshu;
|
|
|
+ this.shijirenshu = this.form.shijirenshu;
|
|
|
+ this.duikourenshu = this.form.duikourenshu;
|
|
|
+ this.myEcharts();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ beforeCreate() {
|
|
|
+ // getReteOfTen().then((res) => {
|
|
|
+ // this.form = res.data;
|
|
|
+ // this.zaiweirenshu = this.form.zaiweirenshu;
|
|
|
+ // console.log(this.zaiweirenshu)
|
|
|
+ // this.peopleNum = 0;
|
|
|
+ // this.chudongrenshu = this.form.chudongrenshu;
|
|
|
+ // this.shijirenshu = this.form.shijirenshu;
|
|
|
+ // this.duikourenshu = this.form.duikourenshu;
|
|
|
+ // });
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 编辑人员五率
|
|
|
+ editor1() {
|
|
|
+ this.open = true;
|
|
|
+ },
|
|
|
+ // 编辑装备五率
|
|
|
+ editor2() {
|
|
|
+ this.open1 = true;
|
|
|
+ },
|
|
|
+ editor3() {
|
|
|
+ this.open2 = true;
|
|
|
+ },
|
|
|
+ // 编辑人员五率确定
|
|
|
+ submitForm() {
|
|
|
+ console.log(this.form);
|
|
|
+ this.$refs["form"].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.form = this.form;
|
|
|
+ // this.zaiweirenshu = this.form.zaiweirenshu;
|
|
|
+ // this.peopleNum = this.form.peopleNum;
|
|
|
+ // this.chudongrenshu = this.form.chudongrenshu;
|
|
|
+ // this.shijirenshu = this.form.shijirenshu;
|
|
|
+ // this.duikourenshu = this.form.duikourenshu;
|
|
|
+ this.open = false;
|
|
|
+ this.myEcharts();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 编辑装备五率确定
|
|
|
+ submitForm1() {
|
|
|
+ this.$refs["form1"].validate((valid) => {
|
|
|
+ // console.log(this.form);
|
|
|
+ if (valid) {
|
|
|
+ addFileinfo(this.form).then((response) => {
|
|
|
+ this.$modal.msgSuccess("上传成功");
|
|
|
+ this.open = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 编辑六量确定
|
|
|
+ submitForm2() {
|
|
|
+ this.$refs["form2"].validate((valid) => {
|
|
|
+ // console.log(this.form);
|
|
|
+ if (valid) {
|
|
|
+ addFileinfo(this.form).then((response) => {
|
|
|
+ this.$modal.msgSuccess("上传成功");
|
|
|
+ this.open = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 取消按钮
|
|
|
+ cancel() {
|
|
|
+ this.open = false;
|
|
|
+ this.open1 = false;
|
|
|
+ this.open2 = false;
|
|
|
+ },
|
|
|
+ myEcharts() {
|
|
|
+ var _this = this;
|
|
|
+
|
|
|
+ let bzrs = this.form.peopleNum; //编制人数
|
|
|
+ // 满编率
|
|
|
+ var myChart1 = echarts.init(
|
|
|
+ document.getElementById("wrap-box-top-box1-center-top-box1")
|
|
|
+ );
|
|
|
+ // 在位率
|
|
|
+ var myChart2 = echarts.init(
|
|
|
+ document.getElementById("wrap-box-top-box1-center-top-box2")
|
|
|
+ );
|
|
|
+ // 对口率
|
|
|
+ var myChart3 = echarts.init(
|
|
|
+ document.getElementById("wrap-box-top-box1-center-top-box3")
|
|
|
+ );
|
|
|
+ // 出动率
|
|
|
+ var myChart4 = echarts.init(
|
|
|
+ document.getElementById("wrap-box-top-box1-center-top-box4")
|
|
|
+ );
|
|
|
+ // 称职率
|
|
|
+ var myChart5 = echarts.init(
|
|
|
+ document.getElementById("wrap-box-top-box1-center-top-box5")
|
|
|
+ );
|
|
|
+ // 装备满编率
|
|
|
+ var myChart6 = echarts.init(
|
|
|
+ document.getElementById("wrap-box-top-box1-center-top-box6")
|
|
|
+ );
|
|
|
+ // 装备可用率
|
|
|
+ var myChart7 = echarts.init(
|
|
|
+ document.getElementById("wrap-box-top-box1-center-top-box7")
|
|
|
+ );
|
|
|
+ // 装备配套率
|
|
|
+ var myChart8 = echarts.init(
|
|
|
+ document.getElementById("wrap-box-top-box1-center-top-box8")
|
|
|
+ );
|
|
|
+ // 装备战备存储率
|
|
|
+ var myChart9 = echarts.init(
|
|
|
+ document.getElementById("wrap-box-top-box1-center-top-box9")
|
|
|
+ );
|
|
|
+ // 装备出动率
|
|
|
+ var myChart10 = echarts.init(
|
|
|
+ document.getElementById("wrap-box-top-box1-center-top-box10")
|
|
|
+ );
|
|
|
+ // 满编率
|
|
|
+ var data = [
|
|
|
+ {
|
|
|
+ value: 50,
|
|
|
+ name: "实力数",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: this.form.peopleNum,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ data[1].value = bzrs - data[0].value;
|
|
|
+ var option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ position: ["10%", "50%"],
|
|
|
+ formatter: function (params) {
|
|
|
+ return (
|
|
|
+ data[0].name +
|
|
|
+ "(" +
|
|
|
+ data[0].value +
|
|
|
+ ")" +
|
|
|
+ ":" +
|
|
|
+ "编制人数" +
|
|
|
+ "(" +
|
|
|
+ bzrs +
|
|
|
+ ")"
|
|
|
+ );
|
|
|
+ },
|
|
|
+ backgroundColor: "rgba(32, 99, 200,0.9 ) ",
|
|
|
+ borderColor: "#fff",
|
|
|
+ },
|
|
|
+ color: ["#F2AC72", "#144d72"],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "",
|
|
|
+ type: "pie",
|
|
|
+ radius: ["70%", "80%"],
|
|
|
+ center: ["50%", "50%"],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ hoverOffset: 5,
|
|
|
+ itemStyle: {
|
|
|
+ borderRadius: 8,
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: "center",
|
|
|
+ rich: {
|
|
|
+ value: { fontSize: 28, color: "#fff" },
|
|
|
+ name: { color: "#fff", fontSize: 14 },
|
|
|
+ },
|
|
|
+ formatter: function (params) {
|
|
|
+ // 设置满编率
|
|
|
+ // var n = data[0].value / (data[1].value + data[0].value);
|
|
|
+ var n=_this.zaiweirenshu
|
|
|
+ var s =
|
|
|
+ `{value|${(n * 100).toFixed()}%}` +
|
|
|
+ "\n" +
|
|
|
+ "\n" +
|
|
|
+ `{name|满编率}`;
|
|
|
+ return s;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 样式
|
|
|
+ itemStyle: {
|
|
|
+ borderRadius: 2,
|
|
|
+ borderWidth: 10,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ fontSize: "16",
|
|
|
+ fontWeight: "bold",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ data: data,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ // 在位率
|
|
|
+ var data2 = [
|
|
|
+ {
|
|
|
+ value: _this.form.zaiweirenshu,
|
|
|
+ name: "在位人数",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 2,
|
|
|
+ name: "未在位人数",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ data2[1].value = bzrs - data[0].value;
|
|
|
+
|
|
|
+ var data3 = [
|
|
|
+ {
|
|
|
+ value: this.form.duikourenshu,
|
|
|
+ name: "指挥员/参谋员/专业技术人员/主战专业军士实际专业对口",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 2,
|
|
|
+ name: "不对口人数",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ data3[1].value = data[0].value - data3[0].value;
|
|
|
+ console.log(data3[1].value)
|
|
|
+ var data4 = [
|
|
|
+ {
|
|
|
+ value: this.form.chudongrenshu,
|
|
|
+ name: "出动人数",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 2,
|
|
|
+ name: "未出动率",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ data4[1].value = bzrs - data4[0].value;
|
|
|
+
|
|
|
+ var data5 = [
|
|
|
+ {
|
|
|
+ value: 6,
|
|
|
+ name: "军事训练成绩达到合格人数",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 200,
|
|
|
+ name: "未合格人数",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ data5[1].value = data2[0].value - data5[0].value;
|
|
|
+
|
|
|
+ var data6 = [
|
|
|
+ {
|
|
|
+ value: 300,
|
|
|
+ name: "按编配配备的装备实力数",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 200,
|
|
|
+ name: "未配备人数",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ data6[1].value = bzrs - data6[0].value;
|
|
|
+
|
|
|
+ var data7 = [
|
|
|
+ {
|
|
|
+ value: 420,
|
|
|
+ name: "装备可用数",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 200,
|
|
|
+ name: "装备不可用数",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ data7[1].value = bzrs - data7[0].value;
|
|
|
+
|
|
|
+ var data8 = [
|
|
|
+ {
|
|
|
+ value: 86,
|
|
|
+ name: "装备实际配套数",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 200,
|
|
|
+ name: "装备未配套数",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ data8[1].value = data6[0].value - data8[0].value;
|
|
|
+
|
|
|
+ var data9 = [
|
|
|
+ {
|
|
|
+ value: 104,
|
|
|
+ name: "建制单位达到战备战备储存标准的装备数量",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 200,
|
|
|
+ name: "未达标",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ data9[1].value = bzrs - data9[0].value;
|
|
|
+
|
|
|
+ var data10 = [
|
|
|
+ {
|
|
|
+ value: 135,
|
|
|
+ name: "装备出动数",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 200,
|
|
|
+ name: "装备未出动数",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ data10[1].value = data7[0].value - data10[0].value;
|
|
|
+
|
|
|
+ var option2 = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ position: ["10%", "50%"],
|
|
|
+ formatter: function (params) {
|
|
|
+ return (
|
|
|
+ data2[0].name +
|
|
|
+ "(" +
|
|
|
+ data2[0].value +
|
|
|
+ ")" +
|
|
|
+ ":" +
|
|
|
+ "编制人数" +
|
|
|
+ "(" +
|
|
|
+ bzrs +
|
|
|
+ ")"
|
|
|
+ );
|
|
|
+ },
|
|
|
+ backgroundColor: "rgba(32, 99, 200,0.8 )",
|
|
|
+ borderColor: "#17F765",
|
|
|
+ },
|
|
|
+ color: ["#27A1F8", "#144d72"],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "",
|
|
|
+ type: "pie",
|
|
|
+ radius: ["70%", "80%"],
|
|
|
+ center: ["50%", "50%"],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ hoverOffset: 5,
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: "center",
|
|
|
+ // formatter: (params)=> { let str =(`{value|${params.value}}`)+ '\n'+(`{name|${params.name}}`); return str },
|
|
|
+ // borderWidth: 5, borderRadius: 5, // padding: [0, 86], height: 70, fontSize: 20, show: true,
|
|
|
+ rich: {
|
|
|
+ value: { fontSize: 28, color: "#fff" },
|
|
|
+ name: { color: "#fff", fontSize: 14 },
|
|
|
+ },
|
|
|
+ formatter: function (params) {
|
|
|
+ console.log(params)
|
|
|
+ console.log(_this.form.peopleNum);
|
|
|
+ var n = _this.form.zaiweirenshu / _this.form.shijirenshu;
|
|
|
+ var s =
|
|
|
+ `{value|${(n * 100).toFixed()}%}` +
|
|
|
+ "\n" +
|
|
|
+ "\n" +
|
|
|
+ `{name|在位率}`;
|
|
|
+ return s;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ borderRadius: 2,
|
|
|
+ borderWidth: 10,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ fontSize: "16",
|
|
|
+ fontWeight: "bold",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ data: data2,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ var option3 = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ position: ["10%", "50%"],
|
|
|
+ formatter: function (params) {
|
|
|
+ // var strs=data3[0].name.split('');
|
|
|
+ // var str='';
|
|
|
+ // for(var i=0,s;s=strs[i++];){
|
|
|
+ // str+=s;
|
|
|
+ // if(!(i%15)) str+='\n';
|
|
|
+ // }
|
|
|
+ if (data3[0].name.length > 20) {
|
|
|
+ return (
|
|
|
+ data3[0].name.slice(0, 20) +
|
|
|
+ "<br/>" +
|
|
|
+ data3[0].name.slice(20, data3[0].name.length) +
|
|
|
+ "(" +
|
|
|
+ data3[0].value +
|
|
|
+ ")" +
|
|
|
+ ":" +
|
|
|
+ data[0].name +
|
|
|
+ "(" +
|
|
|
+ data[0].value +
|
|
|
+ ")"
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ return (
|
|
|
+ data3[0].name +
|
|
|
+ "(" +
|
|
|
+ data3[0].value +
|
|
|
+ ")" +
|
|
|
+ ":" +
|
|
|
+ data[0].name +
|
|
|
+ "(" +
|
|
|
+ data[0].value +
|
|
|
+ ")"
|
|
|
+ );
|
|
|
+ }
|
|
|
+ },
|
|
|
+ backgroundColor: "rgba(32, 99, 200,0.8 )",
|
|
|
+ borderColor: "#17F765",
|
|
|
+ },
|
|
|
+ color: ["#FAC858", "#144d72"],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "",
|
|
|
+ type: "pie",
|
|
|
+ radius: ["70%", "80%"],
|
|
|
+ center: ["50%", "50%"],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ hoverOffset: 5,
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: "center",
|
|
|
+ rich: {
|
|
|
+ value: { fontSize: 28, color: "#fff" },
|
|
|
+ name: { color: "#fff", fontSize: 14 },
|
|
|
+ },
|
|
|
+ formatter: function (params) {
|
|
|
+ var n = data3[0].value / (data3[1].value + data3[0].value);
|
|
|
+ var s =
|
|
|
+ `{value|${(n * 100).toFixed()}%}` +
|
|
|
+ "\n" +
|
|
|
+ "\n" +
|
|
|
+ `{name|对口率}`;
|
|
|
+ return s;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ borderRadius: 2,
|
|
|
+ borderWidth: 10,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ fontSize: "16",
|
|
|
+ fontWeight: "bold",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ data: data3,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ var option4 = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ position: ["10%", "50%"],
|
|
|
+ formatter: function (params) {
|
|
|
+ return (
|
|
|
+ data4[0].name +
|
|
|
+ "(" +
|
|
|
+ data4[0].value +
|
|
|
+ ")" +
|
|
|
+ ":" +
|
|
|
+ "编制人数" +
|
|
|
+ "(" +
|
|
|
+ bzrs +
|
|
|
+ ")"
|
|
|
+ );
|
|
|
+ },
|
|
|
+ backgroundColor: "rgba(32, 99, 200,0.8 )",
|
|
|
+ borderColor: "#17F765",
|
|
|
+ },
|
|
|
+ color: ["#05D5E9", "#144d72"],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "",
|
|
|
+ type: "pie",
|
|
|
+ radius: ["70%", "80%"],
|
|
|
+ center: ["50%", "50%"],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ hoverOffset: 5,
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: "center",
|
|
|
+ rich: {
|
|
|
+ value: { fontSize: 28, color: "#fff" },
|
|
|
+ name: { color: "#fff", fontSize: 14 },
|
|
|
+ },
|
|
|
+ formatter: function (params) {
|
|
|
+ var n = data4[0].value / (data4[1].value + data4[0].value);
|
|
|
+ var s =
|
|
|
+ `{value|${(n * 100).toFixed()}%}` +
|
|
|
+ "\n" +
|
|
|
+ "\n" +
|
|
|
+ `{name|出动率}`;
|
|
|
+ return s;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ borderRadius: 2,
|
|
|
+ borderWidth: 8,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ fontSize: "16",
|
|
|
+ fontWeight: "bold",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ data: data4,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ var option5 = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ position: ["10%", "50%"],
|
|
|
+ formatter: function (params) {
|
|
|
+ return (
|
|
|
+ data5[0].name +
|
|
|
+ "(" +
|
|
|
+ data5[0].value +
|
|
|
+ ")" +
|
|
|
+ ":" +
|
|
|
+ data2[0].name +
|
|
|
+ "(" +
|
|
|
+ data2[0].value +
|
|
|
+ ")"
|
|
|
+ );
|
|
|
+ },
|
|
|
+ backgroundColor: "rgba(32, 99, 200,0.8 )",
|
|
|
+ borderColor: "#17F765",
|
|
|
+ },
|
|
|
+ color: ["#11F0A0 ", "#144d72"],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "",
|
|
|
+ type: "pie",
|
|
|
+ radius: ["70%", "80%"],
|
|
|
+ center: ["50%", "50%"],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ hoverOffset: 5,
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: "center",
|
|
|
+ rich: {
|
|
|
+ value: { fontSize: 28, color: "#fff" },
|
|
|
+ name: { color: "#fff", fontSize: 14 },
|
|
|
+ },
|
|
|
+ formatter: function (params) {
|
|
|
+ var n = data5[0].value / (data5[1].value + data5[0].value);
|
|
|
+ var s =
|
|
|
+ `{value|${(n * 100).toFixed()}%}` +
|
|
|
+ "\n" +
|
|
|
+ "\n" +
|
|
|
+ `{name|称职率}`;
|
|
|
+ return s;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ borderRadius: 2,
|
|
|
+ borderWidth: 10,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ fontSize: "16",
|
|
|
+ fontWeight: "bold",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ data: data5,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ var option6 = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ position: ["10%", "50%"],
|
|
|
+ formatter: function (params) {
|
|
|
+ return (
|
|
|
+ data6[0].name +
|
|
|
+ "(" +
|
|
|
+ data6[0].value +
|
|
|
+ ")" +
|
|
|
+ ":" +
|
|
|
+ "编制数" +
|
|
|
+ "(" +
|
|
|
+ (data6[1].value + data6[0].value) +
|
|
|
+ ")"
|
|
|
+ );
|
|
|
+ },
|
|
|
+ backgroundColor: "rgba(32, 99, 200,0.8 )",
|
|
|
+ borderColor: "#17F765",
|
|
|
+ },
|
|
|
+ color: ["#F2AC72", "#144d72"],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "",
|
|
|
+ type: "pie",
|
|
|
+ radius: ["70%", "80%"],
|
|
|
+ center: ["50%", "50%"],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ hoverOffset: 5,
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: "center",
|
|
|
+ rich: {
|
|
|
+ value: { fontSize: 28, color: "#fff" },
|
|
|
+ name: { color: "#fff", fontSize: 14 },
|
|
|
+ },
|
|
|
+ formatter: function (params) {
|
|
|
+ var n = data6[0].value / (data6[1].value + data6[0].value);
|
|
|
+ var s =
|
|
|
+ `{value|${(n * 100).toFixed()}%}` +
|
|
|
+ "\n" +
|
|
|
+ "\n" +
|
|
|
+ `{name|装备满编率}`;
|
|
|
+ return s;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ borderRadius: 2,
|
|
|
+ borderWidth: 10,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ fontSize: "16",
|
|
|
+ fontWeight: "bold",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ data: data6,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ var option7 = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ position: ["10%", "50%"],
|
|
|
+ formatter: function (params) {
|
|
|
+ return (
|
|
|
+ data7[0].name +
|
|
|
+ "(" +
|
|
|
+ data7[0].value +
|
|
|
+ ")" +
|
|
|
+ ":" +
|
|
|
+ "装备实有数" +
|
|
|
+ "(" +
|
|
|
+ (data7[1].value + data7[0].value) +
|
|
|
+ ")"
|
|
|
+ );
|
|
|
+ },
|
|
|
+ backgroundColor: "rgba(32, 99, 200,0.8 )",
|
|
|
+ borderColor: "#17F765",
|
|
|
+ },
|
|
|
+ color: ["#27A1F8", "#144d72"],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "Access From",
|
|
|
+ type: "pie",
|
|
|
+ radius: ["70%", "80%"],
|
|
|
+ center: ["50%", "50%"],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ hoverOffset: 5,
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: "center",
|
|
|
+ rich: {
|
|
|
+ value: { fontSize: 28, color: "#fff" },
|
|
|
+ name: { color: "#fff", fontSize: 14 },
|
|
|
+ },
|
|
|
+ formatter: function (params) {
|
|
|
+ var n = data7[0].value / (data7[1].value + data7[0].value);
|
|
|
+ var s =
|
|
|
+ `{value|${(n * 100).toFixed()}%}` +
|
|
|
+ "\n" +
|
|
|
+ "\n" +
|
|
|
+ `{name|装备可用率}`;
|
|
|
+ return s;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ borderRadius: 2,
|
|
|
+ borderWidth: 10,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ fontSize: "16",
|
|
|
+ fontWeight: "bold",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ data: data7,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ var option8 = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ position: ["10%", "50%"],
|
|
|
+ formatter: function (params) {
|
|
|
+ return (
|
|
|
+ data8[0].name +
|
|
|
+ "(" +
|
|
|
+ data8[0].value +
|
|
|
+ ")" +
|
|
|
+ ":" +
|
|
|
+ "编制配套数" +
|
|
|
+ "(" +
|
|
|
+ data6[0].value +
|
|
|
+ ")"
|
|
|
+ );
|
|
|
+ },
|
|
|
+ backgroundColor: "rgba(32, 99, 200,0.8 )",
|
|
|
+ borderColor: "#17F765",
|
|
|
+ },
|
|
|
+ color: ["#FAC858", "#144d72"],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "",
|
|
|
+ type: "pie",
|
|
|
+ radius: ["70%", "80%"],
|
|
|
+ center: ["50%", "50%"],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ hoverOffset: 5,
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: "center",
|
|
|
+ rich: {
|
|
|
+ value: { fontSize: 28, color: "#fff" },
|
|
|
+ name: { color: "#fff", fontSize: 14 },
|
|
|
+ },
|
|
|
+ formatter: function (params) {
|
|
|
+ var n = data8[0].value / (data8[1].value + data8[0].value);
|
|
|
+ var s =
|
|
|
+ `{value|${(n * 100).toFixed()}%}` +
|
|
|
+ "\n" +
|
|
|
+ "\n" +
|
|
|
+ `{name|装备配套率}`;
|
|
|
+ return s;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ borderRadius: 2,
|
|
|
+ borderWidth: 10,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ fontSize: "16",
|
|
|
+ fontWeight: "bold",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ data: data8,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ var option9 = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ position: ["10%", "50%"],
|
|
|
+ formatter: function (params) {
|
|
|
+ if (data9[0].name.length > 15) {
|
|
|
+ return (
|
|
|
+ data9[0].name.slice(0, 15) +
|
|
|
+ "<br/>" +
|
|
|
+ data9[0].name.slice(15, data9[0].name.length) +
|
|
|
+ "(" +
|
|
|
+ data9[0].value +
|
|
|
+ ")" +
|
|
|
+ ":" +
|
|
|
+ "装备实有数" +
|
|
|
+ "(" +
|
|
|
+ (data7[1].value + data7[0].value) +
|
|
|
+ ")"
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ return (
|
|
|
+ data9[0].name +
|
|
|
+ "(" +
|
|
|
+ data9[0].value +
|
|
|
+ ")" +
|
|
|
+ ":" +
|
|
|
+ "装备实有数" +
|
|
|
+ "(" +
|
|
|
+ (data7[1].value + data7[0].value) +
|
|
|
+ ")"
|
|
|
+ );
|
|
|
+ }
|
|
|
+ },
|
|
|
+ backgroundColor: "rgba(32, 99, 200,0.8 )",
|
|
|
+ borderColor: "#17F765",
|
|
|
+ },
|
|
|
+ color: ["#05D5E9", "#144d72"],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "",
|
|
|
+ type: "pie",
|
|
|
+ radius: ["70%", "80%"],
|
|
|
+ center: ["50%", "50%"],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ hoverOffset: 5,
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: "center",
|
|
|
+ rich: {
|
|
|
+ value: { fontSize: 28, color: "#fff" },
|
|
|
+ name: { color: "#fff", fontSize: 14 },
|
|
|
+ },
|
|
|
+ formatter: function (params) {
|
|
|
+ var n = data9[0].value / (data9[1].value + data9[0].value);
|
|
|
+ var s =
|
|
|
+ `{value|${(n * 100).toFixed()}%}` +
|
|
|
+ "\n" +
|
|
|
+ "\n" +
|
|
|
+ `{name|装备战备储存率}`;
|
|
|
+ return s;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ borderRadius: 2,
|
|
|
+ borderWidth: 10,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ fontSize: "16",
|
|
|
+ fontWeight: "bold",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ data: data9,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ var option10 = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ position: ["10%", "50%"],
|
|
|
+ formatter: function (params) {
|
|
|
+ return (
|
|
|
+ data10[0].name +
|
|
|
+ "(" +
|
|
|
+ data10[0].value +
|
|
|
+ ")" +
|
|
|
+ ":" +
|
|
|
+ "编制数" +
|
|
|
+ "(" +
|
|
|
+ (data10[1].value + data10[0].value) +
|
|
|
+ ")"
|
|
|
+ );
|
|
|
+ },
|
|
|
+ backgroundColor: "rgba(32, 99, 200,0.8 )",
|
|
|
+ borderColor: "#17F765",
|
|
|
+ },
|
|
|
+ color: ["#11F0A0", "#144d72"],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "",
|
|
|
+ type: "pie",
|
|
|
+ radius: ["70%", "80%"],
|
|
|
+ center: ["50%", "50%"],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ hoverOffset: 5,
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: "center",
|
|
|
+ rich: {
|
|
|
+ value: { fontSize: 28, color: "#fff" },
|
|
|
+ name: { color: "#fff", fontSize: 14 },
|
|
|
+ },
|
|
|
+ formatter: function (params) {
|
|
|
+ var n = data10[0].value / (data10[1].value + data10[0].value);
|
|
|
+ var s =
|
|
|
+ `{value|${(n * 100).toFixed()}%}` +
|
|
|
+ "\n" +
|
|
|
+ "\n" +
|
|
|
+ `{name|装备出动率}`;
|
|
|
+ return s;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ borderRadius: 2,
|
|
|
+ borderWidth: 10,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ fontSize: "16",
|
|
|
+ fontWeight: "bold",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ data: data10,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ myChart1.setOption(option);
|
|
|
+ myChart1.dispatchAction({
|
|
|
+ type: "highlight",
|
|
|
+ seriesIndex: 0,
|
|
|
+ dataIndex: 0,
|
|
|
+ });
|
|
|
+ myChart2.setOption(option2);
|
|
|
+ myChart2.dispatchAction({
|
|
|
+ type: "highlight",
|
|
|
+ seriesIndex: 0,
|
|
|
+ dataIndex: 0,
|
|
|
+ });
|
|
|
+ myChart3.setOption(option3);
|
|
|
+ myChart3.dispatchAction({
|
|
|
+ type: "highlight",
|
|
|
+ seriesIndex: 0,
|
|
|
+ dataIndex: 0,
|
|
|
+ });
|
|
|
+ myChart4.setOption(option4);
|
|
|
+ myChart4.dispatchAction({
|
|
|
+ type: "highlight",
|
|
|
+ seriesIndex: 0,
|
|
|
+ dataIndex: 0,
|
|
|
+ });
|
|
|
+ myChart5.setOption(option5);
|
|
|
+ myChart5.dispatchAction({
|
|
|
+ type: "highlight",
|
|
|
+ seriesIndex: 0,
|
|
|
+ dataIndex: 0,
|
|
|
+ });
|
|
|
+ myChart6.setOption(option6);
|
|
|
+ myChart6.dispatchAction({
|
|
|
+ type: "highlight",
|
|
|
+ seriesIndex: 0,
|
|
|
+ dataIndex: 0,
|
|
|
+ });
|
|
|
+ myChart7.setOption(option7);
|
|
|
+ myChart7.dispatchAction({
|
|
|
+ type: "highlight",
|
|
|
+ seriesIndex: 0,
|
|
|
+ dataIndex: 0,
|
|
|
+ });
|
|
|
+ myChart8.setOption(option8);
|
|
|
+ myChart8.dispatchAction({
|
|
|
+ type: "highlight",
|
|
|
+ seriesIndex: 0,
|
|
|
+ dataIndex: 0,
|
|
|
+ });
|
|
|
+ myChart9.setOption(option9);
|
|
|
+ myChart9.dispatchAction({
|
|
|
+ type: "highlight",
|
|
|
+ seriesIndex: 0,
|
|
|
+ dataIndex: 0,
|
|
|
+ });
|
|
|
+ myChart10.setOption(option10);
|
|
|
+ myChart10.dispatchAction({
|
|
|
+ type: "highlight",
|
|
|
+ seriesIndex: 0,
|
|
|
+ dataIndex: 0,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+html,
|
|
|
+body {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #103360;
|
|
|
+}
|
|
|
+
|
|
|
+#wrap {
|
|
|
+ background-color: #103360;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.content {
|
|
|
+ background-color: #103360;
|
|
|
+}
|
|
|
+.wrap-box-top {
|
|
|
+ display: flex;
|
|
|
+ flex-flow: flex-flow;
|
|
|
+ margin-left: 20px;
|
|
|
+}
|
|
|
+/* 备注 */
|
|
|
+.thistext {
|
|
|
+ color: white;
|
|
|
+ width: 940px;
|
|
|
+ border: 1px solid #fff;
|
|
|
+ border-radius: 4px;
|
|
|
+ height: auto;
|
|
|
+ min-height: 35px;
|
|
|
+ text-indent: 1em;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ /* margin: auto; */
|
|
|
+}
|
|
|
+/* 备注 */
|
|
|
+.thistexts {
|
|
|
+ color: white;
|
|
|
+ width: 200px;
|
|
|
+ border: 1px solid #fff;
|
|
|
+ border-radius: 4px;
|
|
|
+ height: auto;
|
|
|
+ min-height: 35px;
|
|
|
+ /* text-align: center; */
|
|
|
+ text-indent: 5.3em;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ /* margin: auto; */
|
|
|
+}
|
|
|
+.wrap-box-top-box1 {
|
|
|
+ width: 46.5%;
|
|
|
+ height: 400px;
|
|
|
+ background: #002e4f;
|
|
|
+ background-image: url("/supervision-ui/src/images/五率底.png");
|
|
|
+ margin: 3px 1.5%;
|
|
|
+ background-size: 100% 100%;
|
|
|
+
|
|
|
+ /*margin-top: 3px;*/
|
|
|
+ background-repeat: no-repeat;
|
|
|
+}
|
|
|
+.wrap-box-top-box2 {
|
|
|
+ width: 46.5%;
|
|
|
+ height: 400px;
|
|
|
+ background: #002e4f;
|
|
|
+ background-image: url("/supervision-ui/src/images/五率底.png");
|
|
|
+ margin: 3px 1.5%;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ /*margin-top: 10px;*/
|
|
|
+ background-repeat: no-repeat;
|
|
|
+}
|
|
|
+
|
|
|
+.wrap-box-top-box1-header {
|
|
|
+ width: 95%;
|
|
|
+ height: 30px;
|
|
|
+ background-image: url("../../../images/标题底.png");
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-left: 2%;
|
|
|
+ display: inline-block;
|
|
|
+}
|
|
|
+
|
|
|
+.wrap-box-top-box1-header span {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #fff;
|
|
|
+ margin-left: 60px;
|
|
|
+ line-height: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.wrap-box-top-box1-header a {
|
|
|
+ height: 20px;
|
|
|
+ float: right;
|
|
|
+ margin-right: -5px;
|
|
|
+ margin-top: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.wrap-box-top-box1-header a img {
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
+ margin-bottom: 3px;
|
|
|
+ margin-right: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.wrap-box-top-box1-center {
|
|
|
+ width: 100%;
|
|
|
+ height: 370px;
|
|
|
+ /* background-color: #fff; */
|
|
|
+}
|
|
|
+
|
|
|
+.wrap-box-top-box1-center-top {
|
|
|
+ width: 100%;
|
|
|
+ height: 180px;
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+
|
|
|
+.wrap-box-top-box1-center-top-box1 {
|
|
|
+ flex: 1;
|
|
|
+ height: 180px;
|
|
|
+}
|
|
|
+.wrap-box-botom {
|
|
|
+ width: 95%;
|
|
|
+ height: 420px;
|
|
|
+ background-image: url("../../../images/六量底.png");
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-left: 2.5%;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ position: relative;
|
|
|
+ margin-top: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.wrap-box-botom-header {
|
|
|
+ width: 100%;
|
|
|
+ height: 35px;
|
|
|
+ /* background-image: url("./img/dtitle.png");
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%; */
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.wrap-box-botom-header img {
|
|
|
+ width: 95%;
|
|
|
+ height: 35px;
|
|
|
+ position: absolute;
|
|
|
+ left: 2%;
|
|
|
+ top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.wrap-box-botom-header h3 {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #fff;
|
|
|
+ margin-left: 170px;
|
|
|
+ line-height: 50px;
|
|
|
+}
|
|
|
+
|
|
|
+.wrap-box-botom-list {
|
|
|
+ width: 100%;
|
|
|
+ height: 400px;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.wrap-box-botom-list-item {
|
|
|
+ width: 30%;
|
|
|
+ height: 168px;
|
|
|
+ background-color: #002843;
|
|
|
+ margin: 0 1.5%;
|
|
|
+ display: inline-block;
|
|
|
+}
|
|
|
+
|
|
|
+.wrap-box-botom-list-item-title {
|
|
|
+ width: 100%;
|
|
|
+ height: 30px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 30px;
|
|
|
+ color: #fff;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.wrap-box-botom-list-item-title .img-left {
|
|
|
+ margin-right: 5px;
|
|
|
+ height: 15px;
|
|
|
+ /* margin-left: 140px; */
|
|
|
+ margin-bottom: -2px;
|
|
|
+}
|
|
|
+
|
|
|
+.wrap-box-botom-list-item-title .img-right {
|
|
|
+ margin-left: 5px;
|
|
|
+ height: 15px;
|
|
|
+ margin-bottom: -2px;
|
|
|
+}
|
|
|
+
|
|
|
+.wrap-box-botom-list-item-ul {
|
|
|
+ width: 100%;
|
|
|
+ height: 120px;
|
|
|
+ overflow: hidden;
|
|
|
+ list-style: none;
|
|
|
+ margin-top: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.wrap-box-botom-list-item-ul li {
|
|
|
+ width: 90%;
|
|
|
+ height: 30px;
|
|
|
+ background-color: #103a5e;
|
|
|
+ margin: 0 1.5%;
|
|
|
+ display: flex;
|
|
|
+ margin-top: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.wrap-box-botom-list-item-ul li div {
|
|
|
+ flex: 1;
|
|
|
+ height: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.wrap-box-botom-list-item-ul-left {
|
|
|
+ text-align: left;
|
|
|
+ line-height: 30px;
|
|
|
+ color: #fff;
|
|
|
+ margin-left: 10px;
|
|
|
+ font-size: 0.14rem;
|
|
|
+}
|
|
|
+
|
|
|
+.wrap-box-botom-list-item-ul-right {
|
|
|
+ text-align: right;
|
|
|
+ line-height: 30px;
|
|
|
+ margin-right: 10px;
|
|
|
+ color: #19f8a2;
|
|
|
+ font-size: 18px;
|
|
|
+}
|
|
|
+.btn-info {
|
|
|
+ width: 80px;
|
|
|
+ height: 30px !important;
|
|
|
+ color: #fff;
|
|
|
+ background-color: #18bc9c;
|
|
|
+ border-color: #18bc9c;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 30px;
|
|
|
+ font-size: 15px;
|
|
|
+ border-radius: 5px;
|
|
|
+ background-image: url("../../../images/编辑.png");
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: 10px;
|
|
|
+}
|
|
|
+.wrap-box-top-box1-header a {
|
|
|
+ margin-top: 0px;
|
|
|
+}
|
|
|
+.wrap-box-botom-list-item-title {
|
|
|
+ color: #05d5e9;
|
|
|
+}
|
|
|
+#wrap-box-top-box1-header {
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-position: 0px 2px;
|
|
|
+ background-image: url("../../../assets/images/六量标题底.png");
|
|
|
+}
|
|
|
+/* 弹框背景 */
|
|
|
+::v-deep .el-dialog {
|
|
|
+ background-color: #004d86 !important;
|
|
|
+}
|
|
|
+::v-deep .el-input input {
|
|
|
+ background-color: #004d86 !important;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+::v-deep .el-input-number__increase {
|
|
|
+ background-color: #004d86 !important;
|
|
|
+ color: white !important;
|
|
|
+}
|
|
|
+::v-deep .el-input-number__decrease {
|
|
|
+ background-color: #004d86 !important;
|
|
|
+ color: white !important;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-dialog__title {
|
|
|
+ color: white !important;
|
|
|
+}
|
|
|
+::v-deep .el-form-item__label {
|
|
|
+ text-align: start !important;
|
|
|
+}
|
|
|
+</style>
|
ltao
