<template>
|
<div class="menu">
|
<ul class="main-ul">
|
<li class="main-li" v-for="(item, idx) in menuList" :key="'main_' + idx">
|
<div
|
:class="['title', { active: item.active }]"
|
@click="clickMain(item)"
|
>
|
{{ item.title }}
|
</div>
|
<ul class="sub-ul" v-show="item.visible">
|
<li
|
:class="['sub-li', { disabled: subItem.disabled }]"
|
v-for="(subItem, index) in item.children"
|
:key="'sub_' + index"
|
@click="clickSub(subItem)"
|
>
|
{{ subItem.title }}
|
</li>
|
</ul>
|
</li>
|
</ul>
|
<!-- mask -->
|
<div class="mask" v-show="maskVisible" @click="closeMenu"></div>
|
<!-- 文件属性 -->
|
<el-dialog
|
title="属性"
|
class="file-info"
|
:visible.sync="fileInfoVisible"
|
append-to-body
|
:close-on-click-modal="false"
|
:close-on-press-escape="false"
|
:show-close="false"
|
width="800px"
|
>
|
<file-info
|
:info="fileData"
|
@ok="editOk"
|
@cancel="editCancel"
|
@quit="quit"
|
></file-info>
|
</el-dialog>
|
<!-- 对比分析 -->
|
<el-dialog
|
title="对比分析"
|
class="compare"
|
:visible.sync="compareVisible"
|
append-to-body
|
:close-on-click-modal="false"
|
:close-on-press-escape="false"
|
width="800px"
|
>
|
<el-form ref="compareForm" :model="compareForm" label-width="80px">
|
<el-form-item label="参照对象">
|
<el-select
|
v-model="compareForm.id1"
|
clearable
|
placeholder="请选择参照对象"
|
>
|
<el-option
|
v-for="item in fileList1"
|
:key="item.fileId"
|
:label="item.stationName + ' ' + item.fileName"
|
:value="item.fileId"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="比较对象">
|
<el-select
|
v-model="compareForm.id2"
|
clearable
|
placeholder="请选择比较对象"
|
>
|
<el-option
|
v-for="item in fileList2"
|
:key="item.fileId"
|
:label="item.stationName + ' ' + item.fileName"
|
:value="item.fileId"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="对比项目">
|
<el-checkbox-group v-model="compareForm.type">
|
<el-checkbox :label="1" name="type">电池电压</el-checkbox>
|
<el-checkbox :label="2" name="type">电池内阻</el-checkbox>
|
</el-checkbox-group>
|
</el-form-item>
|
</el-form>
|
<div class="footer">
|
<el-button type="primary" @click="goCompare">开始对比分析</el-button>
|
</div>
|
</el-dialog>
|
<!-- 窗口配置 -->
|
<el-dialog
|
title="窗口配置"
|
class="winconfig"
|
:visible.sync="winConfigVisible"
|
append-to-body
|
:close-on-click-modal="false"
|
:close-on-press-escape="false"
|
width="600px"
|
>
|
<el-form ref="form" :model="winConfigForm" label-position="top">
|
<el-form-item label="请勾选要显示的模块">
|
<el-checkbox-group v-model="winConfigForm.type">
|
<el-checkbox label="Vol" name="type">电压(V)</el-checkbox>
|
<el-checkbox label="Res" name="type">内阻(mΩ)</el-checkbox>
|
<el-checkbox label="Cap" name="type">容量(Ah)</el-checkbox>
|
<el-checkbox label="Chain" name="type">连接条(μΩ)</el-checkbox>
|
<el-checkbox label="Cond" name="type">电导(S)</el-checkbox>
|
<el-checkbox label="Table" name="type">表格</el-checkbox>
|
</el-checkbox-group>
|
</el-form-item>
|
</el-form>
|
<div class="footer">
|
<el-button @click="winConfigCancel">取消</el-button>
|
<el-button type="primary" @click="winConfigOk">确定</el-button>
|
</div>
|
</el-dialog>
|
|
<!-- 分级评价 -->
|
<el-dialog
|
title="分级评价"
|
class="winconfig"
|
:visible.sync="paramsVisible"
|
append-to-body
|
:close-on-click-modal="false"
|
:close-on-press-escape="false"
|
width="600px"
|
>
|
<table class="table">
|
<thead>
|
<tr>
|
<th>系数名称</th>
|
<th>系数值</th>
|
<th>评价</th>
|
</tr>
|
</thead>
|
<tbody>
|
<tr>
|
<td>低压系数K1</td>
|
<td>
|
<el-input
|
size="mini"
|
type="number"
|
v-model="params.volLowCoeK1"
|
placeholder="请输入低压系数K1"
|
></el-input>
|
</td>
|
<td class="alarm"></td>
|
</tr>
|
<tr>
|
<td>高压系数K2</td>
|
<td>
|
<el-input
|
size="mini"
|
type="number"
|
v-model="params.volHighCoeK2"
|
placeholder="请输入高压系数K2"
|
></el-input>
|
</td>
|
<td class="warn"></td>
|
</tr>
|
<tr>
|
<td>内阻告警K3</td>
|
<td>
|
<el-input
|
size="mini"
|
type="number"
|
v-model="params.resGoodCoeK3"
|
placeholder="请输入内阻告警K3"
|
></el-input>
|
</td>
|
<td class="warn"></td>
|
</tr>
|
<tr>
|
<td>内阻更换K4</td>
|
<td>
|
<el-input
|
size="mini"
|
type="number"
|
v-model="params.resBadCoeK4"
|
placeholder="请输入内阻更换K4"
|
></el-input>
|
</td>
|
<td class="alarm"></td>
|
</tr>
|
<tr>
|
<td>连接条K5</td>
|
<td>
|
<el-input
|
size="mini"
|
type="number"
|
v-model="params.chainResCoeK5"
|
placeholder="请输入连接条K5"
|
></el-input>
|
</td>
|
<td class="alarm"></td>
|
</tr>
|
</tbody>
|
</table>
|
<div class="footer">
|
<el-button @click="paramsCancel">取消</el-button>
|
<el-button type="primary" @click="paramsOk">确定</el-button>
|
</div>
|
</el-dialog>
|
<!-- 单数据分析 -->
|
<el-dialog
|
title="单数据分析"
|
class="fileParse"
|
:visible.sync="fileParseVisible"
|
append-to-body
|
:close-on-click-modal="false"
|
:close-on-press-escape="false"
|
width="800px"
|
>
|
<el-form ref="compareForm" label-width="80px">
|
<el-form-item label="文件">
|
<el-select v-model="fileUrl" clearable placeholder="请选择分析对象">
|
<el-option
|
v-for="item in fileList"
|
:key="item.fileId"
|
:label="item.stationName + ' ' + item.fileName"
|
:value="item.fileUrl + '&&&&&' + item.fileId"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<div class="footer">
|
<el-button type="primary" @click="fileParseOk">开始分析</el-button>
|
</div>
|
</el-dialog>
|
<div class="process-wrap" v-show="processVisible">
|
<el-progress
|
:text-inside="true"
|
:stroke-width="26"
|
:percentage="percent"
|
></el-progress>
|
</div>
|
<div class="process-mask" v-show="processVisible"></div>
|
<!-- 是否安装更新 -->
|
<el-dialog
|
title="是否安装更新"
|
class="ask-install"
|
:visible.sync="askInstallVisible"
|
append-to-body
|
:close-on-click-modal="false"
|
:close-on-press-escape="false"
|
width="450px"
|
>
|
<div class="">
|
新版本
|
<div class="version">{{ pkgVersion }}</div>
|
已下载完成
|
</div>
|
<div class="">安装包路径：{{ pkgPath }}</div>
|
<div class="footer">
|
<el-button type="primary" @click="install">安装</el-button>
|
<el-button @click="installCancel">取消</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import FileInfo from "@/components/fileInfo";
|
import { getXmlValue, getFileList, getParams, setParams } from "@/apis";
|
import { mapMutations } from "vuex";
|
|
export default {
|
name: "MenuList",
|
|
data() {
|
const menuList = [
|
{
|
title: "文件",
|
visible: false,
|
children: [
|
{
|
title: "打开文件",
|
method: "openFile",
|
},
|
{
|
title: "关闭文件",
|
method: "closeFile",
|
},
|
{
|
title: "关闭所有文件",
|
method: "closeAllFiles",
|
},
|
],
|
},
|
{
|
title: "分析",
|
visible: false,
|
children: [
|
{
|
title: "单数据分析",
|
method: "parseOneFile",
|
},
|
{
|
title: "对比分析",
|
method: "compareFiles",
|
},
|
{
|
title: "分级评价",
|
method: "viewsParams",
|
},
|
{
|
title: "生成报告",
|
method: "exportReport",
|
disabled: true,
|
},
|
],
|
},
|
{
|
title: "配置",
|
visible: false,
|
children: [
|
{
|
title: "窗口配置",
|
method: "windowConfig",
|
},
|
{
|
title: "数据管理",
|
method: "goData",
|
},
|
// {
|
// title: "语言设置",
|
// },
|
],
|
},
|
{
|
title: "help",
|
visible: false,
|
children: [
|
{
|
title: "说明书",
|
method: "instructionBook",
|
},
|
{
|
title: "操作视频",
|
method: "video",
|
},
|
{
|
title: "升级",
|
method: "checkForUpdate",
|
},
|
{
|
title: "联系支持",
|
method: "contact",
|
},
|
// {
|
// title: "其它",
|
// },
|
],
|
},
|
];
|
const params = {
|
chainResCoeK5: 1.2,
|
enabled: 1,
|
resBadCoeK4: 1.6,
|
resGoodCoeK3: 1.25,
|
volHighCoeK2: 1.2,
|
volLowCoeK1: 0.8,
|
};
|
return {
|
askInstallVisible: false,
|
pkgVersion: "",
|
pkgPath: "",
|
percent: 0,
|
processVisible: false,
|
fileParseVisible: false,
|
fileUrl: "",
|
params,
|
paramsVisible: false,
|
winConfigVisible: false,
|
winConfigForm: {
|
type: [],
|
},
|
compareVisible: false,
|
compareForm: {
|
id1: undefined,
|
id2: undefined,
|
type: [],
|
},
|
fileList: [],
|
menuList,
|
maskVisible: false,
|
fileInfoVisible: false,
|
fileData: {},
|
currFile: {
|
name: "",
|
url: "",
|
fileId: undefined,
|
},
|
};
|
},
|
components: {
|
FileInfo,
|
},
|
computed: {
|
fileList1() {
|
return this.fileList.filter((v) => v.fileId != this.compareForm.id2);
|
},
|
fileList2() {
|
return this.fileList.filter((v) => v.fileId != this.compareForm.id1);
|
},
|
},
|
watch: {
|
$route(n) {
|
// console.log(n, n.name, !["compare", "result"].includes(n.name));
|
this.menuList[1].children[3].disabled = !["compare", "result"].includes(
|
n.name
|
);
|
},
|
},
|
methods: {
|
...mapMutations("setting", [
|
"setVolVisiable",
|
"setResVisiable",
|
"setCapVisiable",
|
"setTableVisiable",
|
"setChainVisiable",
|
"setCondVisiable",
|
"setParams",
|
]),
|
clickMain(obj) {
|
// console.log(obj)
|
this.closeMenu();
|
obj.visible = true;
|
obj.active = true;
|
this.maskVisible = true;
|
},
|
clickSub(obj) {
|
// console.log(obj)
|
if (
|
obj.method &&
|
"function" == typeof this[obj.method] &&
|
!obj.disabled
|
) {
|
this.closeMenu();
|
this[obj.method]();
|
}
|
},
|
closeMenu() {
|
this.menuList.forEach((v) => {
|
v.visible = false;
|
v.active = false;
|
});
|
this.maskVisible = false;
|
},
|
openFile() {
|
// console.log("openfile");
|
window.api.send("open-file-dialog", "MenuList");
|
},
|
closeFile() {
|
this.$bus.$emit("closeFile");
|
},
|
closeAllFiles() {
|
this.$bus.$emit("closeAll");
|
},
|
initEvents() {
|
window.api.receive("selected-file", (path, data) => {
|
if (data && data == "MenuList") {
|
// console.log(path.filePaths, "MenuList");
|
this.parseFile(path.filePaths[0]);
|
}
|
});
|
|
window.api.receive("messageupdate", (data) => {
|
// console.log(data, "====update?");
|
if(data.status == -1) {
|
this.$message.error(data.msg);
|
} else {
|
this.$message.info(data.msg);
|
}
|
});
|
|
window.api.receive("autodownloadprogress", (data) => {
|
// console.log(data, "====autodownloadprogress?");
|
this.updateProgress(data);
|
});
|
|
window.api.receive("isUpdateNow", (data) => {
|
// console.log(data, "====isUpdateNow?");
|
const {
|
event: { version, downloadedFile },
|
} = data;
|
this.processVisible = false;
|
this.pkgVersion = version;
|
this.pkgPath = downloadedFile;
|
this.askInstallVisible = true;
|
});
|
},
|
install() {
|
this.askInstallVisible = false;
|
window.api.send("quitAndInstall");
|
},
|
installCancel() {
|
this.askInstallVisible = false;
|
},
|
updateProgress(progressObj) {
|
if (!this.processVisible) {
|
this.processVisible = true;
|
}
|
this.percent = Math.round(progressObj.percent * 100) / 100;
|
},
|
parseFile(url, notTmp, cbfn) {
|
notTmp = notTmp || false;
|
let _url = url,
|
fileId;
|
if (notTmp) {
|
[_url, fileId] = url.split("&&&&&");
|
}
|
const params = {
|
filePath: _url,
|
};
|
getXmlValue(params).then((res) => {
|
const { code, data, data2 } = res.data;
|
if (code && data) {
|
// console.log(data2, 'xxxxx');
|
this.fileData = data2.fileParam;
|
this.currFile.name = !notTmp ? data2.fileNameTmp : data2.fileName;
|
this.currFile.url = data2.fileUrl;
|
this.currFile.fileId = fileId;
|
this.fileInfoVisible = true;
|
if (cbfn && "function" == typeof cbfn) {
|
cbfn();
|
}
|
} else {
|
this.$message.error("文件解析失败");
|
}
|
});
|
},
|
editOk(data) {
|
this.fileInfoVisible = false;
|
this.toRes();
|
},
|
editCancel(data) {
|
this.fileInfoVisible = false;
|
this.toRes();
|
},
|
toRes() {
|
const { name, url, fileId } = this.currFile;
|
this.$router.push({
|
path: "/result/" + name,
|
query: {
|
url,
|
fileId,
|
},
|
});
|
this.$bus.$emit("checkScroll");
|
},
|
quit() {
|
this.fileInfoVisible = false;
|
},
|
// 对比分析
|
compareFiles() {
|
this.compareForm = {
|
id1: undefined,
|
id2: undefined,
|
type: [],
|
};
|
this.compareVisible = true;
|
},
|
getFileList() {
|
getFileList().then((res) => {
|
let { code, data, data2 } = res.data;
|
let list = [];
|
if (code && data) {
|
// console.log(data2);
|
list = data2;
|
}
|
this.fileList = list;
|
});
|
},
|
goCompare() {
|
const { id1: baseFileId, id2: fileId, type } = this.compareForm;
|
if (!baseFileId) {
|
this.$message.warning("请选择参照对象");
|
return false;
|
}
|
if (!fileId) {
|
this.$message.warning("请选择比较对象");
|
return false;
|
}
|
if (!type.length) {
|
this.$message.warning("请勾选对比项目");
|
return false;
|
}
|
const opts = type.reduce((total, num) => total + num);
|
this.compareVisible = false;
|
this.$router.push({
|
path: "/compare",
|
query: {
|
baseFileId,
|
fileId,
|
opts,
|
},
|
});
|
},
|
// 窗口配置
|
windowConfig() {
|
this.winConfigVisible = true;
|
},
|
winConfigCancel() {
|
this.winConfigVisible = false;
|
},
|
winConfigOk() {
|
const type = this.winConfigForm.type;
|
if (!type.length) {
|
this.$message.warning("请至少勾选一个模块");
|
return false;
|
}
|
["Vol", "Res", "Cap", "Table", "Chain", "Cond"].forEach((v) => {
|
let method = "set" + v + "Visiable";
|
this[method](type.some((val) => val == v));
|
});
|
this.winConfigVisible = false;
|
},
|
goData() {
|
this.$router.push("/data");
|
},
|
instructionBook() {
|
this.$router.push("/book");
|
},
|
video() {
|
this.$router.push("/qrcode");
|
},
|
contact() {
|
this.$router.push("/contact");
|
},
|
exportReport() {
|
this.$bus.$emit("export");
|
},
|
// 分级评价 设置参数
|
viewsParams() {
|
// 如果当前页面不是分析页面则提示 并终止
|
// const { name, query } = this.$route;
|
// debugger;
|
// if (!["compare", "result"].includes(name)) {
|
// console.log(this.$route);
|
// this.$message.warning("当前活动页面不能分级评价");
|
// return false;
|
// }
|
// this.$bus.$emit("export");
|
this.paramsVisible = true;
|
},
|
paramsCancel() {
|
this.paramsVisible = false;
|
},
|
paramsOk() {
|
// TODO
|
// 参数要查看
|
const {
|
chainResCoeK5,
|
resBadCoeK4,
|
resGoodCoeK3,
|
volHighCoeK2,
|
volLowCoeK1,
|
} = this.params;
|
if (
|
!volLowCoeK1 ||
|
volLowCoeK1 != volLowCoeK1 * 1 ||
|
!volHighCoeK2 ||
|
volHighCoeK2 != volHighCoeK2 * 1 ||
|
!resGoodCoeK3 ||
|
resGoodCoeK3 != resGoodCoeK3 * 1 ||
|
!resBadCoeK4 ||
|
resBadCoeK4 != resBadCoeK4 * 1 ||
|
!chainResCoeK5 ||
|
chainResCoeK5 != chainResCoeK5 * 1
|
) {
|
this.$message.error("系数不能为空 应为大于0的数值");
|
return false;
|
}
|
// console.log(this.params);
|
// 更新分级参数
|
setParams(this.params).then((res) => {
|
const { code, data } = res.data;
|
if (code) {
|
this.$message.success("更新成功");
|
} else {
|
this.$message.error("操作失败");
|
}
|
});
|
this.paramsVisible = false;
|
},
|
fileParseOk() {
|
if (!this.fileUrl) {
|
this.$message.warning("请选择要分析的文件");
|
return false;
|
}
|
// console.log(this.fileUrl);
|
this.parseFile(this.fileUrl, true, () => {
|
this.fileParseVisible = false;
|
});
|
},
|
parseOneFile() {
|
this.fileUrl = "";
|
this.fileParseVisible = true;
|
},
|
getParams() {
|
getParams().then((res) => {
|
let { code, data } = res.data;
|
if (code) {
|
this.params = data;
|
this.setParams(data);
|
}
|
});
|
},
|
checkForUpdate() {
|
window.api.send("check-update");
|
},
|
},
|
|
mounted() {
|
this.getParams();
|
this.initEvents();
|
this.getFileList();
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.main-ul {
|
position: relative;
|
z-index: 1000;
|
display: flex;
|
align-items: stretch;
|
.main-li {
|
flex: 1;
|
position: relative;
|
.title {
|
cursor: pointer;
|
border: 1px solid #333;
|
background: #0dced1;
|
line-height: 30px;
|
border-radius: 4px;
|
vertical-align: middle;
|
&.active {
|
background: #00f7f9;
|
}
|
&:hover {
|
background: #62cbfa;
|
}
|
}
|
}
|
.sub-ul {
|
// display: none;
|
display: flex;
|
flex-direction: column;
|
position: absolute;
|
left: 0;
|
top: 100%;
|
min-width: 8em;
|
background: #c0c0c0;
|
padding: 4px;
|
.sub-li {
|
border-radius: 4px;
|
border: 1px #fff solid;
|
background: #d9dce2;
|
&:hover {
|
background: #169bd5;
|
}
|
}
|
}
|
.disabled.disabled.disabled {
|
cursor: not-allowed;
|
color: #eee;
|
background: #999;
|
}
|
}
|
.mask {
|
position: fixed;
|
left: 0;
|
right: 0;
|
top: 0;
|
bottom: 0;
|
background: transparent;
|
z-index: 999;
|
}
|
.file-info {
|
:deep(.el-dialog__header) {
|
position: relative;
|
z-index: 0;
|
text-align: center;
|
padding-bottom: 16px;
|
filter: drop-shadow(0 1px 2px #333);
|
&::before {
|
content: "";
|
position: absolute;
|
left: 0;
|
top: 0;
|
bottom: 0;
|
right: 0;
|
background: #ccc;
|
z-index: -1;
|
clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%);
|
background: linear-gradient(#ccc 10%, #fff 50%, #ccc 90%);
|
}
|
}
|
}
|
.fileParse,
|
.compare {
|
:deep(.el-select) {
|
display: block;
|
}
|
.footer {
|
text-align: right;
|
}
|
}
|
.winconfig {
|
:deep(.el-form-item__label) {
|
font-weight: 700;
|
padding-bottom: 0;
|
}
|
:deep(.el-checkbox-group) {
|
display: flex;
|
flex-wrap: wrap;
|
.el-checkbox {
|
width: 30%;
|
margin-right: 0;
|
}
|
}
|
.footer {
|
text-align: right;
|
}
|
}
|
.table {
|
width: 100%;
|
table-layout: fixed;
|
border-collapse: collapse;
|
text-align: center;
|
color: #333;
|
margin-bottom: 10px;
|
thead {
|
font-weight: 700;
|
}
|
th,
|
td {
|
border: 1px #333 solid;
|
padding: 4px;
|
}
|
td {
|
// color: #13c2c2;
|
&.warn {
|
background: #ff0;
|
}
|
&.alarm {
|
background: #d9001b;
|
}
|
}
|
}
|
:deep(input)[type="number"]::-webkit-outer-spin-button,
|
:deep(input)[type="number"]::-webkit-inner-spin-button {
|
-webkit-appearance: none !important;
|
}
|
.process-wrap {
|
position: fixed;
|
left: 50%;
|
top: 30%;
|
transform: translate(-50%, -70%);
|
width: 400px;
|
z-index: 1999;
|
}
|
.process-mask {
|
position: fixed;
|
z-index: 1998;
|
left: 0;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
background: rgba(0, 0, 0, 0.4);
|
}
|
.ask-install {
|
.version {
|
display: inline-block;
|
font-weight: 700;
|
color: #090;
|
}
|
.footer {
|
margin-top: 1.6em;
|
text-align: right;
|
}
|
}
|
</style>
|
