<template>
  <div id="overview" v-show="showModal"
    :style="{ width: this.modeWidth, height: this.modeHeight, margintop: this.margintop }">
    <div class="top">
      <div class="icon"></div>
      <div class="name">{{ title }}</div>
      <div class="close clickmode" @click="closeModal"></div>
      <div class="line"></div>
      <!-- <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
        <a-button type="primary" icon="import">导入</a-button>
      </a-upload> -->
    </div>
    <div class="main">
      <div class="form">
        <div class="modeChoose" v-if="modal == 'modeChoose'">
          <div class="lines">
            <div class="leftline"></div>
            <div class="name">{{ content_word.modeChoosename1 }}</div>
            <div class="rightline"></div>
          </div>
          <div class="modes">
            <div class="mode mode1 clickmode" @click="selectMode('t', 1)">
              <div :class="selectmodeIdT == 1 ? 'unchoose choose' : 'unchoose'">{{ content_word.modename1 }}</div>
            </div>
            <div class="mode mode2 clickmode" @click="selectMode('t', 2)">
              <div :class="selectmodeIdT == 2 ? 'unchoose choose' : 'unchoose'">{{ content_word.modename2 }}</div>
            </div>
            <div class="mode mode3 clickmode" @click="selectMode('t', 3)">
              <div :class="selectmodeIdT == 3 ? 'unchoose choose' : 'unchoose'">{{ content_word.modename3 }}</div>
            </div>
            <div class="mode mode4 clickmode" @click="selectMode('t', 4)">
              <div :class="selectmodeIdT == 4 ? 'unchoose choose' : 'unchoose'">{{ content_word.modename4 }}</div>
            </div>
            <div class="mode mode5 clickmode" @click="selectMode('t', 5)">
              <div :class="selectmodeIdT == 5 ? 'unchoose choose' : 'unchoose'">{{ content_word.modename5 }}</div>
            </div>
            <div class="mode mode6 clickmode" @click="selectMode('t', 6)">
              <div :class="selectmodeIdT == 6 ? 'unchoose choose' : 'unchoose'">{{ content_word.modename6 }}</div>
            </div>
          </div>
          <div class="lines">
            <div class="leftline"></div>
            <div class="name">{{ content_word.modeChoosename2 }}</div>
            <div class="rightline"></div>
          </div>
          <div class="modes2">
            <div class="mode clickmode" @click="selectMode('b', 1)">
              <div :class="selectmodeIdB == 1 ? 'unchoose choose' : 'unchoose'">{{ content_word.mode2name1 }}</div>
            </div>
            <div class="mode clickmode" @click="selectMode('b', 2)">
              <div :class="selectmodeIdB == 2 ? 'unchoose choose' : 'unchoose'">{{ content_word.mode2name2 }}</div>
            </div>
          </div>
        </div>
        <div class="searchTable" v-if="modal == 'newproject'">
          <a-form layout="inline">
            <a-row :gutter="24">
              <a-col :col="24">
                <a-form-item label="工程名称：" :label-col="{ span: 5 }" :wrapper-col="{ span: 16 }">
                  <j-input placeholder="" v-model="queryParam.proname"></j-input>
                </a-form-item>
              </a-col>
              <a-col :col="24">
                <a-form-item label="创建人：" :label-col="{ span: 5 }" :wrapper-col="{ span: 16 }">
                  <j-input placeholder="" v-model="queryParam.username"></j-input>
                </a-form-item>
              </a-col>
              <a-col :col="24">
                <a-form-item label="创建时间：" :label-col="{ span: 5 }" :wrapper-col="{ span: 16 }">
                  <j-input placeholder="" v-model="queryParam.crateTime"></j-input>
                </a-form-item>
              </a-col>
              <a-col :col="24">
                <a-form-item label="备注：" :label-col="{ span: 5 }" :wrapper-col="{ span: 16 }">
                  <a-textarea ref="textarea" :value="inputContent" style="height: 130px" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <div class="searchTable" v-if="modal == 'openproject'">
          <a-form layout="inline">
            <a-row :gutter="24">
              <a-col :md="6" :sm="6">
                <a-form-item label="工程名称:" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
                  <a-input placeholder="请输入工程名称" v-model="queryParam.dataTable"></a-input>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="6">
                <a-form-item label="创建时间：" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
                  <a-date-picker placeholder="请选择创建时间" v-model="queryParam.dataId" format="YYYY-MM-DD" />
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="6">
                <a-button type="ok" @click="searchQuery">查询</a-button>
              </a-col>
            </a-row>
          </a-form>
          <a-table class="protable" ref="table" size="middle" rowKey="id" :columns="projectcolumns"
            :dataSource="tabledataSource" :pagination="false">
            <span slot="action" slot-scope="text, record">
              <a-popconfirm title="确定删除吗?" @confirm="() => dataDelete(record.id, 'projectcolumns')">
                <a>删除</a>
              </a-popconfirm>
            </span>
          </a-table>
        </div>
        <div class="searchTable" v-if="modal == 'weatherdata'">
          <a-tabs @change="wentherChangeTab">
            <a-tab-pane tab="历史数据" key="历史数据" :forceRender="true">
              <a-form layout="inline">
                <a-row :gutter="24">
                  <a-col :md="6" :sm="6">
                    <a-form-item label="气象名称:" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
                      <a-input placeholder="请输入气象名称" v-model="queryParam.weatherName"></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :md="6" :sm="6">
                    <a-form-item label="类别" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
                      <a-select placeholder="请选择" v-model="queryParam.weatherType">
                        <a-select-option value="0">中国</a-select-option>
                        <a-select-option value="1">美国</a-select-option>
                        <a-select-option value="2">欧洲</a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                  <a-col :md="3" :sm="3">
                    <a-button type="ok" @click="searchQuery">查询</a-button>
                  </a-col>
                </a-row>
              </a-form>
              <a-table class="protable" ref="table" size="middle" rowKey="id" :columns="wenthercolumns"
                :dataSource="tabledataSource" :pagination="false">
                <span slot="action" slot-scope="text, record">
                  <a>启用</a>
                  <a-divider type="vertical" />
                  <a>下载</a>
                </span>
              </a-table>
            </a-tab-pane>
            <a-tab-pane tab="气象预报" key="气象预报" :forceRender="true">
              <a-form layout="inline">
                <a-row :gutter="24">
                  <a-col :md="6" :sm="6">
                    <a-form-item label="气象名称:" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
                      <a-input placeholder="请输入气象名称" v-model="queryParam.weatherName"></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :md="3" :sm="3">
                    <a-button type="ok" @click="searchQuery">查询</a-button>
                  </a-col>
                </a-row>
              </a-form>
              <a-table class="protable" ref="table" size="middle" rowKey="id" :columns="forecastcolumns"
                :dataSource="tabledataSource" :pagination="false">
                <span slot="action" slot-scope="text, record">
                  <a>启用</a>
                  <a-divider type="vertical" />
                  <a>下载</a>
                </span>
              </a-table>
            </a-tab-pane>
          </a-tabs>
        </div>
        <div class="searchTable" v-if="modal == 'nuclidedata'">
          <a-form layout="inline">
            <a-row :gutter="24">
              <a-col :md="7" :sm="7">
                <a-form-item label="XX名称:" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
                  <a-select placeholder="请选择" v-model="queryParam.nuclideName">
                    <a-select-option value="0">xxx</a-select-option>
                    <a-select-option value="1">xxx</a-select-option>
                    <a-select-option value="2">xxx</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="7" :sm="7">
                <a-form-item label="时间:" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                  <a-date-picker placeholder="请选择创建时间" v-model="queryParam.dataId" format="YYYY-MM-DD" />
                </a-form-item>
              </a-col>
              <a-col :md="3" :sm="3">
                <a-button type="ok" @click="searchQuery">查询</a-button>
              </a-col>
            </a-row>
          </a-form>
          <a-table class="protable" ref="table" size="middle" rowKey="id" :columns="nuclidecolumns"
            :dataSource="tabledataSource" :pagination="false">
            <span slot="action" slot-scope="text, record">
              <a>查看</a>
            </span>
          </a-table>
        </div>
        <div class="searchTable" v-if="modal == 'weapondata'">
          <a-form layout="inline">
            <a-row :gutter="24">
              <a-col :md="7" :sm="7">
                <a-form-item label="XX名称:" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
                  <a-select placeholder="请选择" v-model="queryParam.weaponType">
                    <a-select-option value="0">xxx</a-select-option>
                    <a-select-option value="1">xxx</a-select-option>
                    <a-select-option value="2">xxx</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="7" :sm="7">
                <a-form-item label="时间:" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                  <a-date-picker placeholder="请选择创建时间" v-model="queryParam.dataId" format="YYYY-MM-DD" />
                </a-form-item>
              </a-col>
              <a-col :md="3" :sm="3">
                <a-button type="ok" @click="searchQuery">查询</a-button>
              </a-col>
            </a-row>
          </a-form>
          <a-table class="protable" ref="table" size="middle" rowKey="id" :columns="weaponcolumns"
            :dataSource="tabledataSource" :pagination="false">
            <span slot="action" slot-scope="text, record">
              <a-popconfirm title="确定删除吗?" @confirm="() => dataDelete(record.id, 'weaponcolumns')">
                <a>删除</a>
              </a-popconfirm>
            </span>
          </a-table>
        </div>
        <div class="searchTable" v-if="modal == 'topographydata'">
          <a-tabs @change="topographyChangeTab">
            <a-tab-pane tab="地理数据" key="地理数据" :forceRender="true">
              <a-form layout="inline">
                <a-row :gutter="24">
                  <a-col :md="7" :sm="7">
                    <a-form-item label="地形名称:" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
                      <a-input placeholder="请输入气象名称" v-model="queryParam.topographyName"></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :md="3" :sm="3">
                    <a-button type="ok" @click="searchQuery">查询</a-button>
                  </a-col>
                </a-row>
              </a-form>
              <a-table class="protable" ref="table" size="middle" rowKey="id" :columns="topographycolumns"
                :dataSource="tabledataSource" :pagination="false">
                <span slot="action" slot-scope="text, record">
                  <a>下载</a>
                  <a-divider type="vertical" />
                  <a-popconfirm title="确定删除吗?" @confirm="() => dataDelete(record.id, 'topographycolumns')">
                    <a>删除</a>
                  </a-popconfirm>
                </span>
              </a-table>
            </a-tab-pane>
            <a-tab-pane tab="本构参数" key="本构参数" :forceRender="true">
            </a-tab-pane>
          </a-tabs>
        </div>
        <div class="searchTable" v-if="modal == 'citydata'">
          <a-tabs @change="cityChangeTab">
            <a-tab-pane tab="城市目标" key="城市目标" :forceRender="true">
              <a-form layout="inline">
                <a-row :gutter="24">
                  <a-col :md="8" :sm="8">
                    <a-form-item label="城市名称:" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
                      <a-input placeholder="请输入城市名称" v-model="queryParam.cityName"></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :md="3" :sm="3">
                    <a-button type="ok" @click="searchQuery">查询</a-button>
                  </a-col>
                </a-row>
              </a-form>
              <a-table class="protable" ref="table" size="middle" rowKey="id" :columns="citycolumns"
                :dataSource="tabledataSource" :pagination="false">
                <span slot="action" slot-scope="text, record">
                  <a>查看</a>
                  <a-divider type="vertical" />
                  <a-popconfirm title="确定删除吗?" @confirm="() => dataDelete(record.id, 'citycolumns')">
                    <a>删除</a>
                  </a-popconfirm>
                </span>
              </a-table>
            </a-tab-pane>
            <a-tab-pane tab="设施目标" key="设施目标" :forceRender="true">
              <a-form layout="inline">
                <a-row :gutter="24">
                  <a-col :md="8" :sm="8">
                    <a-form-item label="气象名称:" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
                      <a-input placeholder="请输入气象名称" v-model="queryParam.weatherName"></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :md="3" :sm="3">
                    <a-button type="ok" @click="searchQuery">查询</a-button>
                  </a-col>
                </a-row>
              </a-form>
              <a-table class="protable" ref="table" size="middle" rowKey="id" :columns="facilitycolumns"
                :dataSource="tabledataSource" :pagination="false">
                <span slot="action" slot-scope="text, record">
                  <a>查看</a>
                  <a-divider type="vertical" />
                  <a-popconfirm title="确定删除吗?" @confirm="() => dataDelete(record.id, 'facilitycolumns')">
                    <a>删除</a>
                  </a-popconfirm>
                </span>
              </a-table>
            </a-tab-pane>
          </a-tabs>
        </div>
        <div class="searchTable" v-if="modal == 'equdata'">
          <a-tabs @change="equChangeTab">
            <a-tab-pane tab="机动装备" key="机动装备" :forceRender="true">
              <a-form layout="inline">
                <a-row :gutter="24">
                  <a-col :md="10" :sm="10">
                    <a-form-item label="机动装备名称:" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
                      <a-input placeholder="请输入机动装备名称" v-model="queryParam.weatherName"></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :md="3" :sm="3">
                    <a-button type="ok" @click="searchQuery">查询</a-button>
                  </a-col>
                </a-row>
              </a-form>
              <a-table class="protable" ref="table" size="middle" rowKey="id" :columns="equmotcolumns"
                :dataSource="tabledataSource" :pagination="false">
                <span slot="action" slot-scope="text, record">
                  <a>查看</a>
                  <a-divider type="vertical" />
                  <a-popconfirm title="确定删除吗?" @confirm="() => dataDelete(record.id, 'equmotcolumns')">
                    <a>删除</a>
                  </a-popconfirm>
                </span>
              </a-table>
            </a-tab-pane>
            <a-tab-pane tab="防护装备" key="防护装备" :forceRender="true">
              <a-form layout="inline">
                <a-row :gutter="24">
                  <a-col :md="10" :sm="10">
                    <a-form-item label="防护装备名称:" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
                      <a-input placeholder="请输入防护装备名称" v-model="queryParam.weatherName"></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :md="3" :sm="3">
                    <a-button type="ok" @click="searchQuery">查询</a-button>
                  </a-col>
                </a-row>
              </a-form>
              <a-table class="protable" ref="table" size="middle" rowKey="id" :columns="equprocolumns"
                :dataSource="tabledataSource" :pagination="false">
                <span slot="action" slot-scope="text, record">
                  <a>查看</a>
                  <a-divider type="vertical" />
                  <a-popconfirm title="确定删除吗?" @confirm="() => dataDelete(record.id, 'equprocolumns')">
                    <a>删除</a>
                  </a-popconfirm>
                </span>
              </a-table>
            </a-tab-pane>
          </a-tabs>
        </div>
        <div class="searchTable" v-if="modal == 'sysuser'">
          <a-form layout="inline">
            <a-row :gutter="24">
              <a-col :md="7" :sm="7">
                <a-form-item label="用户名:" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
                  <a-input placeholder="请输入用户名" v-model="queryParam.username"></a-input>
                </a-form-item>
              </a-col>
              <a-col :md="3" :sm="3">
                <a-button type="ok" @click="searchQuery">查询</a-button>
              </a-col>
            </a-row>
          </a-form>
          <a-table class="protable" ref="table" size="middle" rowKey="id" :columns="sysusercolumns"
            :dataSource="tabledataSource" :pagination="false">
            <span slot="action" slot-scope="text, record">
              <a-popconfirm title="确定删除吗?" @confirm="() => dataDelete(record.id, 'sysusercolumns')">
                <a>删除</a>
              </a-popconfirm>
            </span>
          </a-table>
        </div>
        <div class="userroles" v-if="modal == 'roleops'">
          <div v-for="(roleitem, roleindex) in userroles" :key="roleindex" class="panels">
            <div class="rolesname">{{ roleitem }}</div>
              <a-checkbox v-for="(role, rolekey) in rolesOptions" :key="rolekey" :value="role">{{ role }}</a-checkbox>
          </div>
        </div>
        <div class="userroles" v-if="modal == 'gisops'">
          <div v-for="(gisitem, gisindex) in userroles" :key="gisindex" class="panels">
            <div class="rolesname">{{ gisitem }}</div>
            <a-checkbox v-for="(gis, giskey) in gisOptions" :key="giskey" :value="gis">{{ gis }}</a-checkbox>
          </div>
        </div>
      </div>
      <div class="footerButton" v-if="hasfooterButton">
        <a-button type="cannel" @click="closeModal">取消</a-button>
        <a-button type="ok" @click="buttonOk">确定</a-button>
      </div>
    </div>
  </div>
</template>

<script>
import { CONTENT_WORD } from './config'
import { getAction, postAction } from '@/api/manage'
export default {
  name: "Overview",
  props: {
    spliter: {
      type: String,
      required: false,
      default: ','
    },
  },
  data() {
    return {
      title: "",
      modal: '',
      modeChoosename1: '',
      CONTENT_WORD: {},
      showModal: false,
      hasfooterButton: false,
      selectmodeIdT: 1,
      selectmodeIdB: 1,
      modeWidth: '700px',
      modeHeight: '530px',
      margintop: '230px',
      queryParam: {},
      tabaldataurl: '',
      deldataurl: '',
      editmenuid: 0,
      arrayValue: [],
      userroles: ['开发维护者', '研究使用者', '普通用户者'],
      rolesOptions: ['源项分析', '扩散分析', '剂量计算', '剂量评估', '路径优化', '报表展示', '场景选择', '新建工程', '打开工程', '数据管理', '系统管理', 'GIS工具箱'],
      gisOptions: ['地图更换', '放大', '缩小', '标注', '空间测量', '点位测量', '面积测量', '水平距离测量'],
      //打开工程表头
      projectcolumns: [
        { title: '序号', dataIndex: '', key: 'rowIndex', width: "50", align: "center", customRender: function (t, r, index) { return parseInt(index) + 1; } },
        { title: '工程名称', align: 'center', dataIndex: 'engineeringName' },
        { title: '场景类型', align: 'center', dataIndex: 'sceneType' },
        { title: '创建人', align: 'center', dataIndex: 'createBy' },
        { title: '创建时间', align: 'center', dataIndex: 'createTime' },
        { title: '存放位置', align: 'center', dataIndex: 'engineeringPath' },
        { title: '备注', align: 'center', dataIndex: 'remark' },
        { title: '操作', dataIndex: 'action', align: "center", scopedSlots: { customRender: 'action' }, },
      ],
      //气象历史数据
      wenthercolumns: [
        { title: '序号', dataIndex: '', key: 'rowIndex', width: "50", align: "center", customRender: function (t, r, index) { return parseInt(index) + 1; } },
        { title: '气象名称', align: 'center', dataIndex: 'weatherName', },
        { title: '类别', align: 'center', dataIndex: 'weatherType' },
        { title: '气象时间', align: 'center', dataIndex: 'weatherTime' },
        { title: '上传日期', align: 'center', dataIndex: 'createTime' },
        { title: '文件路径', align: 'center', dataIndex: 'filePath' },
        { title: '操作', dataIndex: 'action', align: "center", scopedSlots: { customRender: 'action' }, },
      ],
      //气象预报数据
      forecastcolumns: [
        { title: '序号', dataIndex: '', key: 'rowIndex', width: "50", align: "center", customRender: function (t, r, index) { return parseInt(index) + 1; } },
        { title: '气象名称', align: 'center', dataIndex: 'forecastName', },
        { title: '采集时间', align: 'center', dataIndex: 'gatherTime' },
        { title: '上传日期', align: 'center', dataIndex: 'createTime' },
        { title: '文件路径', align: 'center', dataIndex: 'forecastPath' },
        { title: '操作', dataIndex: 'action', align: "center", scopedSlots: { customRender: 'action' }, },
      ],
      //核素模块数据
      nuclidecolumns: [
        { title: '序号', dataIndex: '', key: 'rowIndex', width: "50", align: "center", customRender: function (t, r, index) { return parseInt(index) + 1; } },
        { title: 'xx名称', align: 'center', dataIndex: 'nuclideName', },
        { title: 'Conc.[mBq/m^3]', align: 'center', dataIndex: 'conc' },
        { title: 'Uncertainty', align: 'center', dataIndex: 'uncertainty' },
        { title: 'MDC[mBq/m^3]', align: 'center', dataIndex: 'mdc' },
        { title: '操作', dataIndex: 'action', align: "center", scopedSlots: { customRender: 'action' }, },
      ],
      //WQ类型数据
      weaponcolumns: [
        { title: '序号', dataIndex: '', key: 'rowIndex', width: "50", align: "center", customRender: function (t, r, index) { return parseInt(index) + 1; } },
        { title: 'WQ名称', align: 'center', dataIndex: 'weaponName', },
        { title: '裂变材料', align: 'center', dataIndex: 'fission' },
        { title: '分凝温度', align: 'center', dataIndex: 'condensationT' },
        { title: '分凝时间', align: 'center', dataIndex: 'condensationTime' },
        { title: '操作', dataIndex: 'action', align: "center", scopedSlots: { customRender: 'action' }, },
      ],
      //地形信息数据
      topographycolumns: [
        { title: '序号', dataIndex: '', key: 'rowIndex', width: "50", align: "center", customRender: function (t, r, index) { return parseInt(index) + 1; } },
        { title: '地形名称', align: 'center', dataIndex: 'topographyName', },
        { title: '上传时间', align: 'center', dataIndex: 'createTime' },
        { title: '文件路径', align: 'center', dataIndex: 'topographyPath' },
        { title: '备注', align: 'center', dataIndex: 'remark' },
        { title: '操作', dataIndex: 'action', align: "center", scopedSlots: { customRender: 'action' }, },
      ],
      //城市目标数据
      citycolumns: [
        { title: '序号', dataIndex: '', key: 'rowIndex', width: "50", align: "center", customRender: function (t, r, index) { return parseInt(index) + 1; } },
        { title: '城市名称', align: 'center', dataIndex: 'cityName', },
        { title: '行政区', align: 'center', dataIndex: 'district' },
        { title: '经维度', align: 'center', dataIndex: 'cityLon', customRender: function (t, r, index) { return r.cityLon + ' , ' + r.cityLat; } },
        { title: '备注', align: 'center', dataIndex: 'remark' },
        { title: '操作', dataIndex: 'action', align: "center", scopedSlots: { customRender: 'action' }, },
      ],
      //设施目标数据
      facilitycolumns: [
        { title: '序号', dataIndex: '', key: 'rowIndex', width: "50", align: "center", customRender: function (t, r, index) { return parseInt(index) + 1; } },
        { title: '设施名称', align: 'center', dataIndex: 'facilityName', },
        { title: '设施类型', align: 'center', dataIndex: 'facilityType' },
        { title: '国家/地区', align: 'center', dataIndex: 'facilityArea' },
        { title: '经维度', align: 'center', dataIndex: 'cityLon', customRender: function (t, r, index) { return r.facilityLon + ' , ' + r.facilityLat; } },
        { title: '海拔', align: 'center', dataIndex: 'elevation' },
        { title: '操作', dataIndex: 'action', align: "center", scopedSlots: { customRender: 'action' }, },
      ],
      //城市目标数据
      equmotcolumns: [
        { title: '序号', dataIndex: '', key: 'rowIndex', width: "50", align: "center", customRender: function (t, r, index) { return parseInt(index) + 1; } },
        { title: '机动装备名称', align: 'center', dataIndex: 'motorName', },
        { title: '类型', align: 'center', dataIndex: 'motorType' },
        { title: '速度', align: 'center', dataIndex: 'speed' },
        { title: '备注', align: 'center', dataIndex: 'remark' },
        { title: '操作', dataIndex: 'action', align: "center", scopedSlots: { customRender: 'action' }, },
      ],
      //设施目标数据
      equprocolumns: [
        { title: '序号', dataIndex: '', key: 'rowIndex', width: "50", align: "center", customRender: function (t, r, index) { return parseInt(index) + 1; } },
        { title: '防护装备名称', align: 'center', dataIndex: 'protectionName', },
        { title: '防护等级', align: 'center', dataIndex: 'protectionLevel' },
        { title: '辐射屏蔽率', align: 'center', dataIndex: 'protectionRate' },
        { title: '备注', align: 'center', dataIndex: 'remark' },
        { title: '操作', dataIndex: 'action', align: "center", scopedSlots: { customRender: 'action' }, },
      ],
      //用户管理
      sysusercolumns: [
        { title: '序号', dataIndex: '', key: 'rowIndex', width: "50", align: "center", customRender: function (t, r, index) { return parseInt(index) + 1; } },
        { title: '用户名', align: 'center', dataIndex: 'username', },
        { title: '姓名', align: 'center', dataIndex: 'realname' },
        { title: '所属角色', align: 'center', dataIndex: 'roleName' },
        { title: '操作', dataIndex: 'action', align: "center", scopedSlots: { customRender: 'action' }, },
      ],
      tabledataSource: [],
    }
  },
  computed: {
  },
  created() {
  },
  mounted() {
    this.content_word = CONTENT_WORD
  },
  methods: {
    selectMode(type, modeid) {
      if (type == 't') this.selectmodeIdT = modeid
      else if (type == 'b') this.selectmodeIdB = modeid

    },
    menuCilck(menuid) {
      this.hasfooterButton = false
      this.editmenuid = menuid
      if (menuid == 1) {
        this.title = '场景及模式选择'
        this.modal = 'modeChoose'
        this.resetMode('700px', '530px')
      }
      else if (menuid == 2) {
        this.hasfooterButton = true
        this.title = '新建工程'
        this.modal = 'newproject'
        this.resetMode('700px', '480px')
      }
      else if (menuid == 3) {
        this.hasfooterButton = true
        this.title = '打开工程'
        this.modal = 'openproject'
        this.tabaldataurl = '/bizEngineering/list'
        this.deldataurl = ''
        this.searchQuery(menuid)
        this.resetMode('1240px', '540px')
      }
      else if (menuid == 12) {
        this.title = this.content_word.data2name
        this.modal = 'weatherdata'
        this.tabaldataurl = '/bizWeatherHistory/bizWeatherHistory/list'
        this.deldataurl = ''
        this.searchQuery(menuid)
        this.resetMode('1200px', '480px')
      }
      else if (menuid == 13) {
        this.title = this.content_word.data3name
        this.modal = 'nuclidedata'
        this.tabaldataurl = '/bizNuclide/bizNuclide/list'
        this.deldataurl = ''
        this.searchQuery(menuid)
        this.resetMode('900px', '540px')
      }
      else if (menuid == 14) {
        this.title = this.content_word.data4name
        this.modal = 'weapondata'
        this.tabaldataurl = '/bizWeapon/bizWeapon/list'
        this.deldataurl = '/bizWeapon/bizWeapon/delete'
        this.deldataurl = ''
        this.searchQuery(menuid)
        this.resetMode('900px', '540px')
      }
      else if (menuid == 15) {
        this.title = this.content_word.data5name
        this.modal = 'topographydata'
        this.tabaldataurl = '/bizTopographyInfo/bizTopographyInfo/list'
        this.deldataurl = '/bizTopographyInfo/bizTopographyInfo/delete'
        this.deldataurl = ''
        this.searchQuery(menuid)
        this.resetMode('1100px', '540px')
      }
      else if (menuid == 16) {
        this.title = this.content_word.data6name
        this.modal = 'citydata'
        this.tabaldataurl = '/bizCityAim/bizCityAim/list'
        this.deldataurl = '/bizCityAim/bizCityAim/delete'
        this.searchQuery(menuid)
        this.resetMode('900px', '540px')
      }
      else if (menuid == 17) {
        this.title = this.content_word.data7name
        this.modal = 'equdata'
        this.tabaldataurl = '/bizEquipmentMotor/bizEquipmentMotor/list'
        this.deldataurl = '/bizEquipmentMotor/bizEquipmentMotor/delete'
        this.searchQuery(menuid)
        this.resetMode('900px', '540px')
      }
      else if (menuid == 21) {
        this.title = this.content_word.system1name
        this.modal = 'sysuser'
        this.tabaldataurl = '/sys/user/list'
        this.deldataurl = '/sys/user/delete'
        this.searchQuery(menuid)
        this.resetMode('900px', '540px')
      }
      else if (menuid == 22) {
        this.title = this.content_word.system2name
        this.modal = 'roleops'
        this.resetMode('800px', '540px')
        this.hasfooterButton = true
        // getAction('/bizRole/bizRole/list').then((res) => {
        //   if (res.success) {
        //     this.userrolesdata = res.result.records
        //   }
        // })
      }
      else if (menuid == 23) {
        this.title = this.content_word.system3name
        this.modal = 'gisops'
        this.resetMode('800px', '540px')
        this.hasfooterButton = true
        // getAction('/bizRole/bizRole/list').then((res) => {
        //   if (res.success) {
        //     this.userrolesdata = res.result.records
        //   }
        // })
      }
    },
    resetMode(width, height) {
      this.modeWidth = width
      this.modeHeight = height
      this.showModal = true
    },
    closeModal() {
      this.showModal = false
    },
    buttonOk() {
      this.showModal = false
      if (this.editmenuid == 22) {
        // this.userrolesdata

      }
      else if (this.editmenuid == 23) {

      }

    },
    dataDelete() {

    },
    wentherChangeTab(key) {
      if (key == '气象数据') {
        this.tabaldataurl = '/bizWeatherHistory/bizWeatherHistory/list'
        this.searchQuery()
      }
      else {
        this.tabaldataurl = '/bizWeatherForecast/bizWeatherForecast/list'
        this.searchQuery()
      }
    },
    topographyChangeTab(key) {
      if (key == '地理数据') {
        this.tabaldataurl = '/bizTopographyInfo/bizTopographyInfo/list'
        this.deldataurl = '/bizFacilityAim/bizFacilityAim/delete'
        this.searchQuery()
      }
      else {
      }
    },
    cityChangeTab(key) {
      if (key == '城市目标') {
        this.tabaldataurl = '/bizCityAim/bizCityAim/list'
        this.deldataurl = '/bizCityAim/bizCityAim/delete'
        this.searchQuery()
      }
      else {
        this.tabaldataurl = '/bizFacilityAim/bizFacilityAim/list'
        this.deldataurl = '/bizFacilityAim/bizFacilityAim/delete'
        this.searchQuery()
      }
    },
    equChangeTab(key) {
      if (key == '机动装备') {
        this.tabaldataurl = '/bizEquipmentMotor/bizEquipmentMotor/list'
        this.deldataurl = '/bizEquipmentMotor/bizEquipmentMotor/delete'
        this.searchQuery()
      }
      else {
        this.tabaldataurl = '/bizEquipmentProtection/bizEquipmentProtection/list'
        this.deldataurl = '/bizEquipmentProtection/bizEquipmentProtection/delete'
        this.searchQuery()
      }
    },
    searchQuery(menuid) {
      this.tabledataSource = []
      getAction(this.tabaldataurl).then((res) => {
        if (res.success) {
          if (menuid == 3) {
            this.tabledataSource = res.result
          }
          else {
            this.tabledataSource = res.result.records
          }
        } else {
        }
      })
    },
  }
}
</script>

<style scoped>
#overview {
  .top {
    width: 100%;
    height: 37px;
    background: url(~@/assets/imgs/bg/viewBg.png);
    position: relative;

    .line {
      width: 100%;
      height: 3px;
      top: 36px;
      position: absolute;
      background-image: url(~@/assets/imgs/line.png);
      background-size: cover;
    }

    .icon {
      width: 30px;
      height: 37px;
      float: left;
      background: url(~@/assets/imgs/viewicon.png) center center no-repeat;
    }

    .name {
      width: 200px;
      height: 37px;
      float: left;
      font-size: 16px;
      font-weight: bold;
      font-stretch: normal;
      letter-spacing: 2px;
      color: #ffffff;
      line-height: 32px;
    }

    .close {
      width: 30px;
      height: 37px;
      float: right;
      background: url(~@/assets/imgs/close.png) center center no-repeat;
    }
  }


  .clickmode {
    cursor: pointer;
  }

  .main {
    width: 100%;
    height: calc(100% - 40px);
    background-color: #083b67;
    border: solid 1px #1673cb;

    .footerButton {
      width: 100%;
      height: 40px;
    }

    .form {
      width: 100%;
      height: calc(100% - 60px);

      .userroles {
        margin: 20px;
        background-color: #073e71;
        border: solid 1px #1869b6;
        height: calc(100% - 20px);

        .panels {
          padding: 0 20px;
        }

        .rolesname {
          font-size: 16px;
          line-height: 50px;
          letter-spacing: 2px;
          color: #0bd4f2;
          border-bottom: solid 1px #1869b6;
          margin-bottom: 5px;
        }

        .ant-checkbox-wrapper {
          font-size: 15px;
          line-height: 36px;
          letter-spacing: 2px;
          color: #ffffff;
        }

        .ant-checkbox-inner {
          background-color: #062d51;
          border: solid 1px #195b95;
          opacity: 0.8;
        }

        .ant-checkbox-checked .ant-checkbox-inner {
          background-color: #1d79dd;
          border: solid 1px #1d79dd;
          opacity: 0.8;
        }

        .ant-checkbox-wrapper {
          margin: 0 10px 0 0 !important;
          min-width: 100px;
        }
      }

      .ant-form-item {
        display: block;
        margin-top: 20px;
      }

      .ant-form-item label {
        font-size: 16px;
        line-height: 39px;
        color: #ffffff;
      }

      .ant-btn.ant-btn-ok {
        margin-top: 25px;
      }

      .ant-divider {
        background: transparent;
        margin: 0 6px;
      }

      .modeChoose {
        .lines {
          width: 100%;
          height: 22px;
          margin-top: 30px;
          display: flex;
          justify-content: center;
          align-items: center;

          .leftline {
            width: 291px;
            height: 17px;
            background: url(~@/assets/imgs/leftline.png);
          }

          .name {
            width: 120px;
            text-align: center;
            font-size: 22px;
            letter-spacing: 2px;
            color: #00f6ff;
          }

          .rightline {
            width: 291px;
            height: 17px;
            background: url(~@/assets/imgs/rightline.png);
          }
        }

        .modes {
          width: 660px;
          height: 280px;
          margin-left: calc(50% - 330px);

          .mode {
            width: 200px;
            height: 120px;
            float: left;
            margin: 20px 10px 0;
            box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.44);

            .unchoose {
              width: 180px;
              height: 24px;
              margin: 96px 10px 0;
              font-size: 16px;
              letter-spacing: 3px;
              color: #ffffff;
              text-align: center;
              background: url(~@/assets/imgs/unchoose16.png) center right no-repeat;
            }

            .choose {
              background: url(~@/assets/imgs/choose16.png) center right no-repeat;
            }
          }

          .mode1 {
            background: url(~@/assets/imgs/mode1.png);
          }

          .mode2 {
            background: url(~@/assets/imgs/mode2.png);
          }

          .mode3 {
            background: url(~@/assets/imgs/mode3.png);
          }

          .mode4 {
            background: url(~@/assets/imgs/mode4.png);
          }

          .mode5 {
            background: url(~@/assets/imgs/mode5.png);
          }

          .mode6 {
            background: url(~@/assets/imgs/mode5.png);
          }
        }

        .modes2 {
          width: 660px;
          height: 40px;
          margin-left: calc(50% - 330px);

          .mode {
            width: 304px;
            height: 40px;
            float: left;
            margin: 20px 10px 0;
            background-color: #042b4f;
            box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.44);
            border: solid 1px #0892da;

            .unchoose {
              width: 280px;
              height: 24px;
              margin: 7px 10px 0;
              font-size: 16px;
              letter-spacing: 3px;
              color: #ffffff;
              text-align: left;
              background: url(~@/assets/imgs/unchoose20.png) center right no-repeat;
            }

            .choose {
              background: url(~@/assets/imgs/choose20.png) center right no-repeat;
            }
          }
        }
      }

      .protable {
        margin: 10px 20px;
      }

    }

  }
}
</style>