| | |
| | | v-model="activeName" |
| | | v-loading="loading" |
| | | :element-loading-text="loadingText" |
| | | type="card" |
| | | type="border-card" |
| | | > |
| | | <!-- 本机信息 --> |
| | | <el-tab-pane label="本机信息" name="first"> |
| | | <el-tab-pane label="本机信息" name="sysInfo" v-if="isShow('settings:sysInfo')"> |
| | | <el-menu |
| | | :default-openeds="openeds" |
| | | background-color="#fff" |
| | | text-color="#303133" |
| | | active-text-color="#409EFF" |
| | | style="height: 100%;" |
| | | style="height: 100%" |
| | | class="menu-css" |
| | | @open="menuOpen" |
| | | @close="menuClose" |
| | |
| | | <el-form :model="sysinfo" :rules="rules" ref="sysinfo" label-width="100px"> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="名称" prop="server_name"> |
| | | <el-form-item label="服务器名称" prop="server_name"> |
| | | <el-input v-model="sysinfo.server_name" placeholder="服务器名称" size="small"></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="域名" prop="server_name"> |
| | | <el-input v-model="sysinfo.server_domain" placeholder="WEB服务域名" size="small"></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | |
| | | </el-menu-item-group> |
| | | </el-submenu> |
| | | |
| | | <!-- 详细信息 --> |
| | | <el-submenu index="1"> |
| | | <template slot="title"> |
| | | <b class="tree-font">详细信息</b> |
| | | </template> |
| | | <el-menu-item-group class="item-group"> |
| | | <el-menu-item-group class="item-group desc-info"> |
| | | <el-row :gutter="gutter"> |
| | | <el-col :span="12" class="flex-box"> |
| | | <div class="xiangqin-label">ID</div> |
| | | <div class="xiangqing-info">{{sysinfo.server_id}}</div> |
| | | <div class="xiangqin-label">设备ID</div> |
| | | <div class="xiangqing-info">{{ sysinfo.server_id }}</div> |
| | | </el-col> |
| | | <el-col :span="12" class="flex-box"> |
| | | <!-- <el-col :span="12" class="flex-box"> |
| | | <div class="xiangqin-label">设备编号</div> |
| | | <div class="xiangqing-info">{{sysinfo.deviceNum}}</div> |
| | | </el-col> |
| | | </el-col>--> |
| | | <el-col :span="12" class="flex-box"> |
| | | <div class="xiangqin-label">设备型号</div> |
| | | <div class="xiangqing-info">{{sysinfo.deviceType}}</div> |
| | | <div class="xiangqing-info">{{ sysinfo.deviceModel }}</div> |
| | | </el-col> |
| | | <el-col :span="12" class="flex-box"> |
| | | <div class="xiangqin-label">设备序列号</div> |
| | | <div class="xiangqing-info">{{sysinfo.deviceSerialNum}}</div> |
| | | </el-col> |
| | | <el-col :span="12" class="flex-box"> |
| | | <div class="xiangqin-label">主控版本</div> |
| | | <div class="xiangqing-info">{{sysinfo.masterVersion}}</div> |
| | | </el-col> |
| | | <el-col :span="12" class="flex-box"> |
| | | <div class="xiangqin-label">web版本</div> |
| | | <div class="xiangqing-info">{{sysinfo.webVersion}}</div> |
| | | <div class="xiangqin-label">设备类型</div> |
| | | <div class="xiangqing-info">{{ sysinfo.deviceDesc }}</div> |
| | | </el-col> |
| | | <el-col :span="12" class="flex-box"> |
| | | <div class="xiangqin-label">通道个数</div> |
| | | <div class="xiangqing-info">{{sysinfo.channelCount}}</div> |
| | | <div class="xiangqing-info">{{ sysinfo.channelCount }}</div> |
| | | </el-col> |
| | | <el-col :span="12" class="flex-box"> |
| | | <div class="xiangqin-label">硬盘个数</div> |
| | | <div class="xiangqing-info">{{sysinfo.diskCount}}</div> |
| | | <div class="xiangqin-label">主控版本</div> |
| | | <div class="xiangqing-info">{{ sysinfo.masterVersion }}</div> |
| | | </el-col> |
| | | <el-col :span="12" class="flex-box"> |
| | | <div class="xiangqin-label">web版本</div> |
| | | <div class="xiangqing-info">{{ sysinfo.webVersion }}</div> |
| | | </el-col> |
| | | <el-col :span="12" class="flex-box"> |
| | | <div class="xiangqin-label">硬盘信息</div> |
| | | <div class="xiangqing-info">{{ sysinfo.disks }}</div> |
| | | </el-col> |
| | | <el-col :span="12" class="flex-box"> |
| | | <div class="xiangqin-label">CPU</div> |
| | | <div class="xiangqing-info">{{ sysinfo.cpuInfo }}</div> |
| | | </el-col> |
| | | <el-col :span="12" class="flex-box"> |
| | | <div class="xiangqin-label">内存</div> |
| | | <div class="xiangqing-info">{{ sysinfo.mem }}</div> |
| | | </el-col> |
| | | <el-col :span="12" class="flex-box"> |
| | | <div class="xiangqin-label">运行时间</div> |
| | | <div class="xiangqing-info">{{ sysinfo.uptime }}</div> |
| | | </el-col> |
| | | </el-row> |
| | | </el-menu-item-group> |
| | |
| | | <b class="tree-font">事件录像时长</b> |
| | | </template> |
| | | <el-menu-item-group class="item-group"> |
| | | <el-form |
| | | label-width="150px" |
| | | class="alarmSetting" |
| | | style="padding-left:5px;padding-right:5px;" |
| | | > |
| | | <el-form-item label="视频截取最短时长" style="width:724px;"> |
| | | <el-form label-width="150px" class="alarmSetting" style="padding-left: 5px; padding-right: 5px"> |
| | | <el-form-item label="视频截取最短时长" style="width: 724px"> |
| | | <el-slider |
| | | id="cut_min_duration" |
| | | v-model="alarmConf.min_video_len" |
| | | :show-tooltip="false" |
| | | @input="min_len = min_video_len" |
| | | v-model="fakeObj.min" |
| | | :min="5 / 1.2" |
| | | :max="100" |
| | | :step="5 / 1.2" |
| | | show-stops |
| | | :show-tooltip="true" |
| | | :format-tooltip="formatTooltip" |
| | | ></el-slider> |
| | | <el-input-number |
| | | v-model="alarmConf.min_video_len" |
| | | v-model="min_len" |
| | | @change="fakeObj.min = +(min_len / 1.2)" |
| | | controls-position="right" |
| | | :min="0" |
| | | :max="100" |
| | | :min="5" |
| | | :max="120" |
| | | size="small" |
| | | ></el-input-number> s |
| | | ></el-input-number |
| | | > s |
| | | </el-form-item> |
| | | <el-form-item label="视频截取最长时长" style="width:724px"> |
| | | <el-form-item label="视频截取最长时长" style="width: 724px"> |
| | | <el-slider |
| | | id="cut_max_duration" |
| | | v-model="alarmConf.max_video_len" |
| | | :show-tooltip="false" |
| | | v-model="fakeObj.max" |
| | | :min="5 / 1.2" |
| | | @input="max_len = max_video_len" |
| | | :max="100" |
| | | :step="5 / 1.2" |
| | | show-stops |
| | | :format-tooltip="formatTooltip" |
| | | :show-tooltip="true" |
| | | ></el-slider> |
| | | <el-input-number |
| | | v-model="alarmConf.max_video_len" |
| | | v-model="max_len" |
| | | @change="fakeObj.max = +(max_len / 1.2)" |
| | | controls-position="right" |
| | | :min="0" |
| | | :max="100" |
| | | :min="5" |
| | | :max="120" |
| | | size="small" |
| | | ></el-input-number> s |
| | | ></el-input-number |
| | | > s |
| | | </el-form-item> |
| | | <div class="mt15 mb10 save-btn"> |
| | | <el-button type="primary" @click="submitAlarm" size="small">保存</el-button> |
| | |
| | | </el-menu-item-group> |
| | | </el-submenu> |
| | | <!-- 对外服务IP 改名为外部网络(新tab)--> |
| | | |
| | | <!-- 文件音视频 --> |
| | | <!-- <el-submenu index="4"> |
| | | <template slot="title"> |
| | | <b class="tree-font">文件音视频</b> |
| | | </template> |
| | | <el-menu-item-group class="item-group"> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="8"> |
| | | <div class="p5"> |
| | | <span class="iconfont iconpicture" style="margin-right: 5px;"></span> |
| | | <span class="mr10">图片端口</span> |
| | | <el-input v-model="localFile.picPort" style="width:300px;" placeholder="请输入内容"></el-input> |
| | | </div> |
| | | <div class="p5"> |
| | | <span class="iconfont iconshipin" style="margin-right: 5px;"></span> |
| | | <span class="mr10">视频端口</span> |
| | | <el-input v-model="localFile.videoPort" style="width:300px;" placeholder="请输入内容"></el-input> |
| | | </div> |
| | | <div class="p5"> |
| | | <span class="iconfont iconyinpinx" style="margin-right: 5px;"></span> |
| | | <span class="mr10">音频端口</span> |
| | | <el-input v-model="localFile.audioPort" style="width:300px;" placeholder="请输入内容"></el-input> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="16"> |
| | | <el-table |
| | | :data="localFile.fileTable" |
| | | border |
| | | style="width: 100%"> |
| | | <el-table-column |
| | | type="index" |
| | | label="序号" |
| | | align="center" |
| | | width="50"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="date" |
| | | label="名称" |
| | | align="center" |
| | | width="180"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="name" |
| | | label="ID" |
| | | align="center" |
| | | width="180"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="name" |
| | | label="IP" |
| | | align="center" |
| | | width="180"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="name" |
| | | label="在线状态" |
| | | align="center" |
| | | width="80"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | label="类别" |
| | | align="center" |
| | | width="100"> |
| | | <template> |
| | | <span class="iconfont iconpicture" style="margin-right: 5px;"></span> |
| | | <span class="iconfont iconshipin" style="margin-right: 5px;"></span> |
| | | <span class="iconfont iconyinpinx" style="margin-right: 5px;"></span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="address" |
| | | align="center" |
| | | label="备注"> |
| | | <template slot-scope="{row}"> |
| | | <div v-if="row.edit"> |
| | | <el-input :autofocus="row.edit" v-focus v-model="row.address" size="small" /> |
| | | <el-button size="mini" type="info" @click="handleCancel(row)">取消</el-button> |
| | | <el-button size="mini" type="primary" @click="handleSave(row)">保存</el-button> |
| | | </div> |
| | | <div v-else> |
| | | <span>{{ row.address }}</span> |
| | | <el-button |
| | | type="text" |
| | | style="color: black;font-size:16px" |
| | | @click="handleEdit(row)" |
| | | icon="iconfont iconbianji" |
| | | ></el-button> |
| | | </div> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </el-col> |
| | | </el-row> |
| | | </el-menu-item-group> |
| | | </el-submenu>--> |
| | | </el-menu> |
| | | </el-tab-pane> |
| | | |
| | | <!-- 时间配置 --> |
| | | <el-tab-pane label="时间配置" name="second"> |
| | | <el-tab-pane label="时间配置" name="timeSet" v-if="isShow('settings:timeSet')"> |
| | | <el-form label-width="100px"> |
| | | <el-form-item label="设备时间"> |
| | | <!-- <el-input v-model="equipmentTime" placeholder="请输入" size="small"></el-input> --> |
| | | {{ equipmentTime }} |
| | | </el-form-item> |
| | | |
| | | <el-form-item label="时区" prop="timezone"> |
| | | <el-select |
| | | v-model="timezone" |
| | | placeholder="请选择" |
| | | style="width: 360px; height: 32px" |
| | | size="small" |
| | | > |
| | | <el-option |
| | | v-for="item in timeZoneOption" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | ></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <div style="text-align: left;padding: 10px 0px"> |
| | | <div style="text-align: left; padding: 10px 0px"> |
| | | <div class="time-type">NTP校时</div> |
| | | <div style="padding: 10px 0px;"> |
| | | <div style="padding: 10px 0px"> |
| | | <el-radio v-model="syncType" label="1">NTP校时</el-radio> |
| | | </div> |
| | | </div> |
| | | |
| | | <el-form-item label="服务器地址"> |
| | | <ip-input |
| | | :ip="ntpServer" |
| | | @on-blur="ntpServer= arguments[0]" |
| | | :disabled="syncType === '2'" |
| | | ></ip-input> |
| | | <ip-input :ip="ntpServer" @on-blur="ntpServer = arguments[0]" :disabled="syncType === '2'"></ip-input> |
| | | </el-form-item> |
| | | |
| | | <el-form-item label="校时时间间隔" style="width: 41.3%;"> |
| | | <el-form-item label="校时时间间隔" style="width: 41.3%"> |
| | | <el-input-number |
| | | v-model.number="timeInterval" |
| | | :min="1" |
| | |
| | | size="small" |
| | | :controls="false" |
| | | :disabled="syncType === '2'" |
| | | ></el-input-number> 分钟 |
| | | ></el-input-number |
| | | > 分钟 |
| | | <el-button |
| | | type="text" |
| | | style="position: absolute; left: 330px;" |
| | | style="position: absolute; left: 330px" |
| | | :disabled="syncType === '2'" |
| | | @click="testNTP" |
| | | >测试</el-button> |
| | | :loading="ntpTestLoading" |
| | | >测试</el-button |
| | | > |
| | | </el-form-item> |
| | | |
| | | <div style="text-align: left;padding: 10px 0px"> |
| | | <div style="text-align: left; padding: 10px 0px"> |
| | | <div class="time-type">手动校时</div> |
| | | <div style="padding: 10px 0px;"> |
| | | <div style="padding: 10px 0px"> |
| | | <el-radio v-model="syncType" label="2">手动校时</el-radio> |
| | | </div> |
| | | </div> |
| | |
| | | placeholder="选择日期时间" |
| | | size="small" |
| | | value-format="yyyy-MM-dd HH:mm:ss" |
| | | :readonly="settimeRadio" |
| | | :disabled="syncType === '1'" |
| | | ></el-date-picker> |
| | | <el-checkbox |
| | | v-model="settimeRadio" |
| | | style="margin-left: 12px;" |
| | | style="margin-left: 12px" |
| | | @change="syncBrowser" |
| | | :disabled="syncType === '1'" |
| | | >同步本计算机时间</el-checkbox> |
| | | >同步本计算机时间</el-checkbox |
| | | > |
| | | </el-form-item> |
| | | |
| | | <el-col :span="12" style="padding-right: 40px;"> |
| | | <el-col :span="12" style="padding-right: 40px"> |
| | | <el-form-item> |
| | | <el-button type="primary" @click="submitClock" size="small">保存</el-button> |
| | | </el-form-item> |
| | |
| | | </el-tab-pane> |
| | | |
| | | <!-- 集群管理 --> |
| | | <el-tab-pane label="集群管理" name="third"> |
| | | <el-tab-pane label="集群管理" name="cluster" v-if="isShow('settings:cluster')"> |
| | | <cluster-management></cluster-management> |
| | | </el-tab-pane> |
| | | <el-tab-pane label="外部网络" name="fourth"> |
| | | <div class="flex-box"> |
| | | <label>设置外部IP</label> |
| | | <div style="width:300px;"> |
| | | <ip-input :ip="ipServer.ip" @on-blur="ipServer.ip = arguments[0]"></ip-input> |
| | | </div> |
| | | <el-checkbox label="选用本机IP" size="small" style="margin-left: 20px"></el-checkbox> |
| | | </div> |
| | | <div class="flex-box"> |
| | | <label>域名</label> |
| | | <el-input size="small" v-model="ipServer.localhost"></el-input> |
| | | </div> |
| | | <div class="flex-box"> |
| | | <label>本地文件端口</label> |
| | | <el-input size="small" v-model="ipServer.localFilePort"></el-input> |
| | | </div> |
| | | <div class="mt15 save-btn" style="width:460px; margin-bottom:20px; float:left;"> |
| | | <el-button type="primary" @click="submitResource" size="small">保存</el-button> |
| | | </div> |
| | | <div> |
| | | <el-table :data="ipServer.fileTable" border fit style="width: 100%"> |
| | | <el-table-column type="index" label="序号" align="center" width="50"></el-table-column> |
| | | <el-table-column prop="date" label="名称" align="center"></el-table-column> |
| | | <el-table-column prop="name" label="ID" align="center"></el-table-column> |
| | | <el-table-column prop="name" label="IP" align="center"></el-table-column> |
| | | <el-table-column prop="name" label="在线状态" align="center"></el-table-column> |
| | | </el-table> |
| | | </div> |
| | | <!-- <el-tab-pane label="外部访问" name="fourth"> |
| | | <el-menu |
| | | :default-openeds="openeds" |
| | | background-color="#fff" |
| | | text-color="#303133" |
| | | active-text-color="#409EFF" |
| | | style="height: 100%;" |
| | | class="menu-css" |
| | | @open="menuOpen" |
| | | @close="menuClose" |
| | | > |
| | | <el-submenu index="0"> |
| | | <template slot="title"> |
| | | <b class="tree-font">外部访问设置</b> |
| | | </template> |
| | | <el-menu-item-group class="item-group"> |
| | | <el-form :model="sysinfo" :rules="rules" ref="sysinfo" label-width="100px"> |
| | | <div class="flex-box"> |
| | | <label>设置外部IP</label> |
| | | <div style="width:300px;"> |
| | | <ip-input :ip="ipServer.ip" @on-blur="ipServer.ip = arguments[0]"></ip-input> |
| | | </div> |
| | | <el-checkbox label="选用本机IP" size="small" style="margin-left: 20px"></el-checkbox> |
| | | </div> |
| | | <div class="flex-box"> |
| | | <label>域名</label> |
| | | <el-input size="small" v-model="ipServer.localhost"></el-input> |
| | | </div> |
| | | <div class="flex-box"> |
| | | <label>本地文件端口</label> |
| | | <el-input size="small" v-model="ipServer.localFilePort"></el-input> |
| | | </div> |
| | | <div class="mt15 mb10 save-btn"> |
| | | <el-button type="primary" @click="submitSysinfo" size="small">保存</el-button> |
| | | </div> |
| | | </el-form> |
| | | </el-menu-item-group> |
| | | </el-submenu> |
| | | </el-menu> |
| | | </el-tab-pane>--> |
| | | <el-tab-pane label="权限管理" name="permission" v-if="isShow('settings:permission')"> |
| | | <authority-management v-if="activeName === 'permission'"></authority-management> |
| | | </el-tab-pane> |
| | | <el-tab-pane label="权限管理" name="user"> |
| | | <authority-management v-if="activeName === 'user'"></authority-management> |
| | | </el-tab-pane> |
| | | <el-tab-pane label="广播设置" name="radio"> |
| | | <radio-set v-if="activeName === 'radio'"></radio-set> |
| | | <el-tab-pane label="广播设置" name="broadcast" v-if="isShow('settings:broadcast')"> |
| | | <radio-set v-if="activeName === 'broadcast'"></radio-set> |
| | | </el-tab-pane> |
| | | </el-tabs> |
| | | </div> |
| | |
| | | saveClockInfo, |
| | | testNTPserver, |
| | | getResourceConfig, |
| | | saveResourceConfig, |
| | | } from "@/api/system"; |
| | | saveResourceConfig |
| | | } from "@/api/system" |
| | | |
| | | import { isPort, isIPv4 } from "@/scripts/validate"; |
| | | import ipInput from "@/components/subComponents/IPInput"; |
| | | import { isPort, isIPv4 } from "@/scripts/validate" |
| | | import ipInput from "@/components/subComponents/IPInput" |
| | | import TimeZones from "@/Pool/TimeZones" |
| | | |
| | | import ClusterManagement from "./ClusterManagement"; |
| | | import AuthorityManagement from "./AuthorityManagement"; |
| | | import RadioSet from "./RadioSet"; |
| | | import ClusterManagement from "./ClusterManagement" |
| | | import AuthorityManagement from "./AuthorityManagement" |
| | | import RadioSet from "./RadioSet" |
| | | import config from "../../../../package.json" |
| | | |
| | | export default { |
| | | name: "BasicSettings", |
| | |
| | | RadioSet |
| | | }, |
| | | computed: { |
| | | timeZoneOption() { |
| | | let options = [] |
| | | TimeZones.forEach(zone => { |
| | | options = options.concat(zone.utc.map(v => { |
| | | return { value: v, label: v } |
| | | })) |
| | | }) |
| | | return options |
| | | min_video_len() { |
| | | // return +(this.fakeObj.min * 1.2).toFixed(0); |
| | | return Math.round(this.fakeObj.min * 1.2) |
| | | }, |
| | | max_video_len() { |
| | | return Math.round(this.fakeObj.max * 1.2) |
| | | // return +(this.fakeObj.max * 1.2).toFixed(0); |
| | | }, |
| | | isAdmin() { |
| | | if (sessionStorage.getItem("userInfo") && sessionStorage.getItem("userInfo") !== "") { |
| | | let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username |
| | | return loginName === "superadmin" || loginName === "basic" |
| | | } |
| | | return false |
| | | } |
| | | }, |
| | | directives: { |
| | | focus: { |
| | | inserted: function (el) { |
| | | el.querySelector('input').focus() |
| | | inserted: function(el) { |
| | | el.querySelector("input").focus() |
| | | } |
| | | } |
| | | }, |
| | |
| | | loading: true, |
| | | loadingText: "", |
| | | gutter: 10, |
| | | activeName: "first", |
| | | activeName: "sysInfo", |
| | | timezone: "", |
| | | syncType: "1", |
| | | ntpServer: "", |
| | |
| | | timestamp: 0, |
| | | sysinfo: {}, |
| | | alarmConf: {}, |
| | | min_len: 0, |
| | | max_len: 0, |
| | | fakeObj: { |
| | | min: 0, |
| | | max: 0 |
| | | }, |
| | | originNetConfig: { |
| | | ip: "", |
| | | gw: "", |
| | |
| | | }, |
| | | { validator: isIPv4, trigger: "change" } |
| | | ], |
| | | server_name: [ |
| | | { required: true, message: "请输入名称", trigger: "change" } |
| | | ], |
| | | server_name: [{ required: true, message: "请输入名称", trigger: "change" }], |
| | | subMask: [ |
| | | { |
| | | required: true, |
| | |
| | | diyOrLocalIP: "1", |
| | | ip: "", |
| | | localhost: "", |
| | | localFilePort: "", |
| | | fileTable: [ |
| | | { |
| | | date: '2016-05-02', |
| | | name: '王小虎', |
| | | address: '上海市普陀区金沙江路 1518 弄', |
| | | edit: false |
| | | }, { |
| | | date: '2016-05-04', |
| | | name: '王小虎', |
| | | address: '上海市普陀区金沙江路 1517 弄', |
| | | edit: false |
| | | }, { |
| | | date: '2016-05-01', |
| | | name: '王小虎', |
| | | address: '上海市普陀区金沙江路 1519 弄', |
| | | edit: false |
| | | }, { |
| | | date: '2016-05-03', |
| | | name: '王小虎', |
| | | address: '上海市普陀区金沙江路 1516 弄', |
| | | edit: false |
| | | } |
| | | ] |
| | | localFilePort: "" |
| | | }, |
| | | locationCity: { |
| | | province: '', |
| | | city: '', |
| | | county: '', |
| | | province: "", |
| | | city: "", |
| | | county: "", |
| | | provinceOptions: [], |
| | | cityOptions: [], |
| | | countyOptions: [] |
| | | }, |
| | | }; |
| | | webPort: 0; |
| | | webPort: 0, |
| | | ntpTestLoading: false, |
| | | buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [] |
| | | } |
| | | }, |
| | | created() { |
| | | if (this.isShow("settings:sysInfo")) { |
| | | this.activeName = "sysInfo" |
| | | } else if (this.isShow("settings:timeSet")) { |
| | | this.activeName = "timeSet" |
| | | } else if (this.isShow("settings:cluster")) { |
| | | this.activeName = "cluster" |
| | | } else if (this.isShow("settings:permission")) { |
| | | this.activeName = "permission" |
| | | } else if (this.isShow("settings:broadcast")) { |
| | | this.activeName = "broadcast" |
| | | } |
| | | }, |
| | | mounted() { |
| | | this.$nextTick(() => { |
| | | this.initSysinfo(); |
| | | this.initSysinfo() |
| | | // this.initAlarmConf(); |
| | | this.initResourceConfig(); |
| | | this.initClockConf(); |
| | | }); |
| | | this.initResourceConfig() |
| | | this.initClockConf() |
| | | //this.markStartTime(); |
| | | }) |
| | | }, |
| | | beforeDestroy() { |
| | | clearTimeout(this.clockTimer); |
| | | clearInterval(this.browserTimer); |
| | | clearTimeout(this.clockTimer) |
| | | clearInterval(this.browserTimer) |
| | | }, |
| | | methods: { |
| | | formatTooltip(v) { |
| | | return Math.round(v * 1.2) |
| | | }, |
| | | isShow(authority) { |
| | | return this.isAdmin || this.buttonAuthority.indexOf("," + authority + ",") > -1 |
| | | }, |
| | | initSysinfo() { |
| | | this.loadingText = "正在获取设备信息..."; |
| | | getDevInfo().then(rsp => { |
| | | if (rsp && rsp.success) { |
| | | this.sysinfo = rsp.data; |
| | | this.sysinfo.gateway = this.sysinfo.gateway.trim(); |
| | | this.originNetConfig.ip = this.sysinfo.ip; |
| | | this.originNetConfig.mask = this.sysinfo.subMask; |
| | | this.originNetConfig.gw = this.sysinfo.gateway.trim(); |
| | | this.originNetConfig.dns = this.sysinfo.dns ? this.sysinfo.dns : ""; |
| | | this.alarmConf.min_video_len = rsp.data.min_video_len; |
| | | this.alarmConf.max_video_len = rsp.data.max_video_len; |
| | | this.loadingText = "正在获取设备信息..." |
| | | getDevInfo() |
| | | .then((rsp) => { |
| | | if (rsp && rsp.success) { |
| | | this.sysinfo = rsp.data |
| | | this.sysinfo.gateway = this.sysinfo.gateway.trim() |
| | | this.originNetConfig.ip = this.sysinfo.ip |
| | | this.originNetConfig.mask = this.sysinfo.subMask |
| | | this.originNetConfig.gw = this.sysinfo.gateway.trim() |
| | | this.originNetConfig.dns = this.sysinfo.dns ? this.sysinfo.dns : "" |
| | | // this.alarmConf.min_video_len = rsp.data.min_video_len; |
| | | // this.alarmConf.max_video_len = rsp.data.max_video_len; |
| | | this.fakeObj.min = rsp.data.min_video_len / 1.2 |
| | | this.fakeObj.max = rsp.data.max_video_len / 1.2 |
| | | if (this.sysinfo.deviceInfo) { |
| | | let devInfo = this.sysinfo.deviceInfo |
| | | |
| | | if (!this.sysinfo.server_port) { |
| | | this.sysinfo.server_port = 7003; |
| | | this.sysinfo.cpuInfo = devInfo.cpu[0].modelName |
| | | this.sysinfo.disks = "( " + devInfo.disk + ") " |
| | | this.sysinfo.mem = (devInfo.mem.total / 1024 / 1024 / 1024).toFixed(2) + "GB" |
| | | // this.sysinfo.arch = devInfo.host.kernelArch; |
| | | this.sysinfo.uptime = this.secondsFormat(devInfo.host.uptime) |
| | | } |
| | | |
| | | if (!this.sysinfo.server_port) { |
| | | this.sysinfo.server_port = 7003 |
| | | } |
| | | |
| | | this.webPort = this.sysinfo.server_port |
| | | |
| | | this.sysinfo.webVersion = "V" + config.version |
| | | } |
| | | |
| | | this.webPort = this.sysinfo.server_port; |
| | | } |
| | | |
| | | this.loading = false; |
| | | }).catch(err => { |
| | | this.loading = false; |
| | | }); |
| | | this.loading = false |
| | | }) |
| | | .catch((err) => { |
| | | this.loading = false |
| | | }) |
| | | }, |
| | | initClockConf() { |
| | | getClockInfo().then(rsp => { |
| | | secondsFormat(s) { |
| | | var day = Math.floor(s / (24 * 3600)) // Math.floor()向下取整 |
| | | var hour = Math.floor((s - day * 24 * 3600) / 3600) |
| | | var minute = Math.floor((s - day * 24 * 3600 - hour * 3600) / 60) |
| | | var second = s - day * 24 * 3600 - hour * 3600 - minute * 60 |
| | | return day + "天" + hour + "时" + minute + "分" + second + "秒" |
| | | }, |
| | | initClockConf(ntpTest = false) { |
| | | getClockInfo().then((rsp) => { |
| | | if (rsp && rsp.success) { |
| | | this.timezone = rsp.data.time_zone; |
| | | this.syncType = rsp.data.ntp ? "1" : "2"; |
| | | this.timezone = rsp.data.time_zone |
| | | if (!ntpTest) { |
| | | this.syncType = rsp.data.ntp ? "1" : "2" |
| | | } |
| | | if (rsp.data.ntp) { |
| | | this.ntpServer = rsp.data.ntp_server; |
| | | this.timeInterval = rsp.data.interval; |
| | | this.ntpServer = rsp.data.ntp_server |
| | | this.timeInterval = rsp.data.interval |
| | | } |
| | | this.timestamp = rsp.data.local_time |
| | | if (this.clockTimer === null) { |
| | | this.runClock(); |
| | | this.runClock() |
| | | } |
| | | } |
| | | }) |
| | | }, |
| | | runClock() { |
| | | this.equipmentTime = this.formatTime(++this.timestamp, 'Y-M-D h:m:s'); |
| | | // console.log(this.equipmentTime) |
| | | this.equipmentTime = this.formatTime(++this.timestamp, "Y-M-D h:m:s") |
| | | this.clockTimer = setTimeout(() => { |
| | | this.runClock(); |
| | | this.runClock() |
| | | }, 1000) |
| | | }, |
| | | initAlarmConf() { |
| | |
| | | // }); |
| | | }, |
| | | initResourceConfig() { |
| | | getResourceConfig().then(rsp => { |
| | | getResourceConfig().then((rsp) => { |
| | | if (rsp && rsp.success) { |
| | | this.ipServer.diyOrLocalIP = rsp.data.ipType |
| | | this.ipServer.ip = rsp.data.serviceIp |
| | |
| | | clearInterval(this.browserTimer) |
| | | } else { |
| | | this.browserTimer = setInterval(() => { |
| | | let timestamp = new Date().getTime() / 1000; |
| | | this.settime = this.formatTime(timestamp, 'Y-M-D h:m:s') |
| | | let timestamp = new Date().getTime() / 1000 |
| | | this.settime = this.formatTime(timestamp, "Y-M-D h:m:s") |
| | | }, 1000) |
| | | } |
| | | }, |
| | | markStartTime() { |
| | | let timestamp = new Date().getTime() / 1000 |
| | | this.settime = this.formatTime(timestamp, "Y-M-D h:m:s") |
| | | }, |
| | | submitSysinfo() { |
| | | this.$refs["sysinfo"].validate(valid => { |
| | | this.$refs["sysinfo"].validate((valid) => { |
| | | if (valid) { |
| | | if (this.sysinfo.ip !== this.originNetConfig.ip |
| | | || this.sysinfo.subMask !== this.originNetConfig.mask |
| | | || this.sysinfo.dns !== this.originNetConfig.dns |
| | | || this.sysinfo.gateway !== this.originNetConfig.gw) { |
| | | |
| | | if ( |
| | | this.sysinfo.ip !== this.originNetConfig.ip || |
| | | this.sysinfo.subMask !== this.originNetConfig.mask || |
| | | this.sysinfo.dns !== this.originNetConfig.dns || |
| | | this.sysinfo.gateway !== this.originNetConfig.gw || |
| | | this.sysinfo.server_port !== this.originNetConfig.server_port || |
| | | this.sysinfo.server_domain !== this.originNetConfig.server_domain |
| | | ) { |
| | | if (this.sysinfo.ip !== this.originNetConfig.ip) { |
| | | let newUri = location.protocol + "//" + this.sysinfo.ip + ":" + this.sysinfo.server_port; |
| | | let newUri = location.protocol + "//" + this.sysinfo.ip + ":" + this.sysinfo.server_port |
| | | var changeIPTimer = setTimeout(() => { |
| | | this.$alert('<strong>您已修改了服务器ip, 请重新登录</strong><a href="' + newUri + '"> ' + newUri + '<a/>', '提示', { |
| | | dangerouslyUseHTMLString: true |
| | | }); |
| | | this.$alert( |
| | | '<strong>您已修改了服务器配置, 请重新登录</strong><a target="_parent" href="' + |
| | | newUri + |
| | | '"> ' + |
| | | newUri + |
| | | "<a/>", |
| | | "提示", |
| | | { |
| | | dangerouslyUseHTMLString: true |
| | | } |
| | | ) |
| | | }, 10000) |
| | | } |
| | | |
| | | this.$confirm("确认需要修改服务器网络配置吗?", { |
| | | this.$confirm("确认需要修改服务器配置吗?", { |
| | | center: true, |
| | | cancelButtonClass: "comfirm-class-cancle", |
| | | confirmButtonClass: "comfirm-class-sure" |
| | | }).then(() => { |
| | | this.loading = true; |
| | | this.loadingText = "正在处理..." |
| | | saveDevInfo(this.sysinfo).then(rsp => { |
| | | if (rsp && rsp.success) { |
| | | this.$notify({ |
| | | type: "success", |
| | | message: "本机信息保存成功" |
| | | }); |
| | | } |
| | | this.initSysinfo(); |
| | | this.loading = false; |
| | | }).catch(err => { |
| | | this.loading = false; |
| | | clearTimeout(changeIPTimer) |
| | | this.$notify({ |
| | | type: "error", |
| | | message: "保存失败" |
| | | }); |
| | | }); |
| | | }).catch(err => { |
| | | }); |
| | | }) |
| | | .then(() => { |
| | | this.loading = true |
| | | this.loadingText = "正在处理..." |
| | | saveDevInfo(this.sysinfo) |
| | | .then((rsp) => { |
| | | if (rsp && rsp.success) { |
| | | this.$notify({ |
| | | type: "success", |
| | | message: "服务器配置成功" |
| | | }) |
| | | } |
| | | this.initSysinfo() |
| | | this.loading = false |
| | | }) |
| | | .catch((err) => { |
| | | this.loading = false |
| | | clearTimeout(changeIPTimer) |
| | | this.$notify({ |
| | | type: "error", |
| | | message: "保存失败" |
| | | }) |
| | | }) |
| | | }) |
| | | .catch((err) => {}) |
| | | } else { |
| | | saveDevInfo(this.sysinfo).then(rsp => { |
| | | saveDevInfo(this.sysinfo).then((rsp) => { |
| | | if (rsp && rsp.success) { |
| | | this.$notify({ |
| | | type: "success", |
| | | message: "本机信息保存成功" |
| | | }); |
| | | this.initSysinfo(); |
| | | message: "本机信息修改成功" |
| | | }) |
| | | this.initSysinfo() |
| | | } else { |
| | | this.$notify({ |
| | | type: "error", |
| | | message: "保存失败" |
| | | }) |
| | | } |
| | | }); |
| | | |
| | | if (this.sysinfo.server_port !== this.webPort) { |
| | | let newUri = location.protocol + "//" + this.sysinfo.ip + ":" + this.sysinfo.server_port; |
| | | var changeIPTimer = setTimeout(() => { |
| | | this.$alert('<strong>您已修改了服务器端口, 请重新登录</strong><a href="' + newUri + '"> ' + newUri + '<a/>', '提示', { |
| | | dangerouslyUseHTMLString: true |
| | | }); |
| | | }, 5000) |
| | | } |
| | | }) |
| | | } |
| | | } else { |
| | | console.log("error submit!!"); |
| | | return false; |
| | | console.log("error submit!!") |
| | | return false |
| | | } |
| | | }); |
| | | }) |
| | | }, |
| | | checkTimeZone(val) {}, |
| | | submitClock() { |
| | | if (this.syncType === '1') { |
| | | if (this.syncType === "1") { |
| | | if (this.ntpServer === "") { |
| | | this.$notify({ |
| | | type: "error", |
| | | message: "NTP 服务器地址不能为空" |
| | | }); |
| | | }) |
| | | return false |
| | | } else if (this.timeInterval === "") { |
| | | this.timeInterval = 1; |
| | | this.timeInterval = 1 |
| | | } |
| | | } else { |
| | | if (this.settime === "") { |
| | | this.$notify({ |
| | | type: "error", |
| | | message: "设置时间不能为空" |
| | | }); |
| | | }) |
| | | return false |
| | | } |
| | | } |
| | | let requestBody = { |
| | | timeZone: this.timezone, |
| | | ntp: this.syncType === '1', |
| | | ntp: this.syncType === "1", |
| | | ntpServer: this.ntpServer, |
| | | interval: this.timeInterval, |
| | | newTime: this.settime |
| | | } |
| | | saveClockInfo(requestBody).then(rsp => { |
| | | saveClockInfo(requestBody).then((rsp) => { |
| | | if (rsp && rsp.success) { |
| | | this.$notify({ |
| | | type: "success", |
| | | message: "设置成功" |
| | | }); |
| | | }) |
| | | } |
| | | this.initClockConf() |
| | | }) |
| | | }, |
| | | testNTP() { |
| | | testNTPserver({ server: this.ntpServer }).then(rsp => { |
| | | if (rsp && rsp.success) { |
| | | this.$notify({ |
| | | type: "success", |
| | | message: "时间同步成功" |
| | | }); |
| | | } else { |
| | | this.ntpTestLoading = true |
| | | testNTPserver({ server: this.ntpServer }) |
| | | .then((rsp) => { |
| | | if (rsp && rsp.success) { |
| | | this.$notify({ |
| | | type: "success", |
| | | message: "时间同步成功" |
| | | }) |
| | | } else { |
| | | this.$notify({ |
| | | type: "error", |
| | | message: "时间同步失败" |
| | | }) |
| | | } |
| | | this.ntpTestLoading = false |
| | | this.initClockConf(true) |
| | | }) |
| | | .catch((err) => { |
| | | this.$notify({ |
| | | type: "error", |
| | | message: "时间同步失败" |
| | | }); |
| | | } |
| | | }).catch(err => { |
| | | this.$notify({ |
| | | type: "error", |
| | | message: "时间同步失败,请检查服务器ip" |
| | | }); |
| | | }) |
| | | message: "时间同步失败,请检查服务器ip" |
| | | }) |
| | | this.ntpTestLoading = false |
| | | }) |
| | | }, |
| | | submitAlarm() { |
| | | saveAlarmConfig(this.alarmConf).then(rsp => { |
| | | saveAlarmConfig({ |
| | | min_video_len: this.min_video_len, |
| | | max_video_len: this.max_video_len |
| | | }).then((rsp) => { |
| | | if (rsp && rsp.success) { |
| | | this.$notify({ |
| | | type: "success", |
| | | message: "保存成功" |
| | | }); |
| | | } |
| | | }); |
| | | }, |
| | | submitResource() { |
| | | let regNum = /^[0-9]*$/; |
| | | if (!this.vaildHost(this.ipServer.localhost)) { |
| | | this.$notify({ |
| | | type: "warning", |
| | | message: "请输入正确格式得域名!" |
| | | }) |
| | | return false; |
| | | } |
| | | if (!regNum.test(this.ipServer.localFilePort)) { |
| | | this.$notify({ |
| | | type: 'warning', |
| | | message: "请输入正确的端口号!" |
| | | }) |
| | | return false; |
| | | } |
| | | saveResourceConfig({ |
| | | domain: this.ipServer.localhost, |
| | | ipType: this.ipServer.diyOrLocalIP, |
| | | serviceIp: this.ipServer.ip, |
| | | filePort: Number(this.ipServer.localFilePort) |
| | | }).then(res => { |
| | | if (res && res.success) { |
| | | this.$notify({ |
| | | type: "success", |
| | | message: "保存成功" |
| | | }); |
| | | } else { |
| | | this.$notify({ |
| | | type: "error", |
| | | message: "保存失败" |
| | | }); |
| | | }) |
| | | } |
| | | }) |
| | | }, |
| | | onIpBlur(e, ip) { |
| | | console.log(e, ip); |
| | | }, |
| | | // submitResource() { |
| | | // let regNum = /^[0-9]*$/; |
| | | // if (!this.vaildHost(this.ipServer.localhost)) { |
| | | // this.$notify({ |
| | | // type: "warning", |
| | | // message: "请输入正确格式得域名!", |
| | | // }); |
| | | // return false; |
| | | // } |
| | | // if (!regNum.test(this.ipServer.localFilePort)) { |
| | | // this.$notify({ |
| | | // type: "warning", |
| | | // message: "请输入正确的端口号!", |
| | | // }); |
| | | // return false; |
| | | // } |
| | | // saveResourceConfig({ |
| | | // domain: this.ipServer.localhost, |
| | | // ipType: this.ipServer.diyOrLocalIP, |
| | | // serviceIp: this.ipServer.ip, |
| | | // filePort: Number(this.ipServer.localFilePort), |
| | | // }).then((res) => { |
| | | // if (res && res.success) { |
| | | // this.$notify({ |
| | | // type: "success", |
| | | // message: "保存成功", |
| | | // }); |
| | | // } else { |
| | | // this.$notify({ |
| | | // type: "error", |
| | | // message: "保存失败", |
| | | // }); |
| | | // } |
| | | // }); |
| | | // }, |
| | | // onIpBlur(e, ip) { |
| | | // console.log(e, ip); |
| | | // }, |
| | | formatTime(number, format) { |
| | | var formateArr = ['Y', 'M', 'D', 'h', 'm', 's']; |
| | | var returnArr = []; |
| | | var formateArr = ["Y", "M", "D", "h", "m", "s"] |
| | | var returnArr = [] |
| | | |
| | | var date = new Date(number * 1000); |
| | | returnArr.push(date.getFullYear()); |
| | | returnArr.push(this.formatNumber(date.getMonth() + 1)); |
| | | returnArr.push(this.formatNumber(date.getDate())); |
| | | var date = new Date(number * 1000) |
| | | returnArr.push(date.getFullYear()) |
| | | returnArr.push(this.formatNumber(date.getMonth() + 1)) |
| | | returnArr.push(this.formatNumber(date.getDate())) |
| | | |
| | | returnArr.push(this.formatNumber(date.getHours())); |
| | | returnArr.push(this.formatNumber(date.getMinutes())); |
| | | returnArr.push(this.formatNumber(date.getSeconds())); |
| | | returnArr.push(this.formatNumber(date.getHours())) |
| | | returnArr.push(this.formatNumber(date.getMinutes())) |
| | | returnArr.push(this.formatNumber(date.getSeconds())) |
| | | |
| | | for (var i in returnArr) { |
| | | format = format.replace(formateArr[i], returnArr[i]); |
| | | format = format.replace(formateArr[i], returnArr[i]) |
| | | } |
| | | return format; |
| | | return format |
| | | }, |
| | | |
| | | //数据转化 |
| | | //数据转化 |
| | | formatNumber(n) { |
| | | n = n.toString() |
| | | return n[1] ? n : '0' + n |
| | | return n[1] ? n : "0" + n |
| | | }, |
| | | menuOpen(event) { |
| | | |
| | | }, |
| | | menuClose(event) { |
| | | |
| | | }, |
| | | handleEdit(row) { |
| | | console.log(row); |
| | | row.edit = true; |
| | | }, |
| | | handleCancel(row) { |
| | | row.edit = false; |
| | | console.log(row); |
| | | }, |
| | | handleSave(row) { |
| | | console.log(row); |
| | | row.edit = false; |
| | | this.$notify({ |
| | | message: "保存成功", |
| | | type: "success" |
| | | }); |
| | | }, |
| | | menuOpen(event) {}, |
| | | menuClose(event) {}, |
| | | // handleEdit(row) { |
| | | // console.log(row); |
| | | // row.edit = true; |
| | | // }, |
| | | // handleCancel(row) { |
| | | // row.edit = false; |
| | | // console.log(row); |
| | | // }, |
| | | // handleSave(row) { |
| | | // console.log(row); |
| | | // row.edit = false; |
| | | // this.$notify({ |
| | | // message: "保存成功", |
| | | // type: "success", |
| | | // }); |
| | | // }, |
| | | //校验域名 |
| | | vaildHost(str) { |
| | | let re = /^(?=^.{3,255}$)(http(s)?:\/\/)?(www\.)?[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+(:\d+)*(\/\w+\.\w+)*$/ |
| | | return re.test(str) |
| | | }, |
| | | } |
| | | } |
| | | }; |
| | | } |
| | | </script> |
| | | <style lang="scss"> |
| | | .s-basic-setting { |
| | |
| | | // margin-left: -80px; |
| | | .el-form-item { |
| | | text-align: left; |
| | | &.is-required:not(.is-no-asterisk) > .el-form-item__label:before { |
| | | margin-left: -8px; |
| | | } |
| | | .el-button { |
| | | float: right; |
| | | } |
| | |
| | | list-style: none; |
| | | position: relative; |
| | | margin: 0; |
| | | padding-left: 0; |
| | | padding-left: 10px; |
| | | background-color: #ffffff; |
| | | .el-submenu__title { |
| | | height: 35px; |
| | |
| | | width: 300px; |
| | | } |
| | | } |
| | | .desc-info { |
| | | margin-bottom: 14px; |
| | | .flex-box { |
| | | height: 40px; |
| | | line-height: 40px; |
| | | .xiangqin-label { |
| | | width: 80px; |
| | | } |
| | | } |
| | | } |
| | | .menu-css, |
| | | .el-menu { |
| | | border-right: none; |