Skip to content

seeta-device / deviceManage

Go to a project
Commit 24fbbb4f by 李俊
Options

feat: 前端页面 设备和服务部分搭建完成

1 parent 6aa710ea
Inline Side-by-side
Showing with 2879 additions and 122 deletions
package-lock.json
......@@ -1871,63 +1871,6 @@
"integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=",
"dev": true
},
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"optional": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"ssri": {
"version": "8.0.1",
"resolved": "https://registry.nlark.com/ssri/download/ssri-8.0.1.tgz?cache=0&sync_timestamp=1621364668574&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fssri%2Fdownload%2Fssri-8.0.1.tgz",
......@@ -1936,28 +1879,6 @@
"requires": {
"minipass": "^3.1.1"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.4.1",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.4.1.tgz",
"integrity": "sha512-nL1bDhfMAZgTVmVkOXQaK/WJa9zFDLM9vKHbh5uGv6HeH1TmZrXMWUEVhUrACT38XPhXM4Awtjj25EvhChEgXw==",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
}
}
}
},
......@@ -13804,6 +13725,87 @@
}
}
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.5.0",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.5.0.tgz",
"integrity": "sha512-WXh+7AgFxGTgb5QAkQtFeUcHNIEq3PGVQ8WskY5ZiFbWBkOwcCPRs4w/2tVyTbh2q6TVRlO3xfvIukUtjsu62A==",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"optional": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
}
}
},
"vue-property-decorator": {
"version": "9.1.2",
"resolved": "https://registry.npmjs.org/vue-property-decorator/-/vue-property-decorator-9.1.2.tgz",
......
src/App.vue
......@@ -25,7 +25,7 @@ export default {
<style>
#app {
font-family: PingFangSC-Regular, PingFang SC, Avenir, Helvetica, Arial, sans-serif;
font-family: PingFangSC-Regular, 微软雅黑;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
......
src/assets/workflow-empty.svg
......@@ -48,7 +48,7 @@
<g id="page2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="任务流-导航收起" transform="translate(-647.000000, -297.000000)">
<g id="编组-9" transform="translate(651.000000, 299.000000)">
<text id="请从左侧拖入元素开始运行" font-family="PingFangSC-Regular, PingFang SC" font-size="14" font-weight="normal" fill="#99A1A9">
<text id="请从左侧拖入元素开始运行" font-family="PingFangSC-Regular, 微软雅黑" font-size="14" font-weight="normal" fill="#99A1A9">
<tspan x="223" y="349">请从左侧拖入元素开始运行</tspan>
</text>
<g id="编组-8">
......@@ -63,7 +63,7 @@
<path d="M0.00398211327,2.32857083 L0.669189476,2.32857083 L0.669189476,10.3110592 L0.00398211327,10.3110592 L0.00398211327,2.32857083 Z M10.6472999,2.32857083 L11.3125073,2.32857083 L11.3125073,10.3110592 L10.6472999,10.3110592 L10.6472999,2.32857083 Z" id="形状"></path>
<path d="M10.6472999,10.3110592 L11.3125073,10.3110592 C11.3125073,11.596905 8.78072806,12.639285 5.6582447,12.639285 C2.53576134,12.639285 0.00398211327,11.596905 0.00398211327,10.3110592 L0.669189476,10.3110592 C0.669189476,11.0680652 2.86903023,11.9740776 5.6582447,11.9740776 C8.44745917,11.9740776 10.6472999,11.0680652 10.6472999,10.3110592 Z M10.6472999,10.3110592 L11.3125073,10.3110592 C11.3125073,11.596905 8.78072806,12.639285 5.6582447,12.639285 C2.53576134,12.639285 0.00398211327,11.596905 0.00398211327,10.3110592 L0.669189476,10.3110592 C0.669189476,11.0680652 2.86903023,11.9740776 5.6582447,11.9740776 C8.44745917,11.9740776 10.6472999,11.0680652 10.6472999,10.3110592 Z M10.6472999,7.65022974 L11.3125073,7.65022974 C11.3125073,8.93607557 8.78072806,9.9784555 5.6582447,9.9784555 C2.53576134,9.9784555 0.00398211327,8.93607557 0.00398211327,7.65022974 L0.669189476,7.65022974 C0.669189476,8.40723571 2.86903023,9.31324814 5.6582447,9.31324814 C8.44745917,9.31324814 10.6472999,8.40723571 10.6472999,7.65022974 Z M10.6472999,7.65022974 L11.3125073,7.65022974 C11.3125073,8.93607557 8.78072806,9.9784555 5.6582447,9.9784555 C2.53576134,9.9784555 0.00398211327,8.93607557 0.00398211327,7.65022974 L0.669189476,7.65022974 C0.669189476,8.40723571 2.86903023,9.31324814 5.6582447,9.31324814 C8.44745917,9.31324814 10.6472999,8.40723571 10.6472999,7.65022974 Z M10.6472999,4.98940028 L11.3125073,4.98940028 C11.3125073,6.27524612 8.78072806,7.31762605 5.6582447,7.31762605 C2.53576134,7.31762605 0.00398211327,6.27524612 0.00398211327,4.98940028 L0.669189476,4.98940028 C0.669189476,5.74640626 2.86903023,6.65241869 5.6582447,6.65241869 C8.44745917,6.65241869 10.6472999,5.74640626 10.6472999,4.98940028 L10.6472999,4.98940028 Z M10.6472999,4.98940028 L11.3125073,4.98940028 C11.3125073,6.27524612 8.78072806,7.31762605 5.6582447,7.31762605 C2.53576134,7.31762605 0.00398211327,6.27524612 0.00398211327,4.98940028 L0.669189476,4.98940028 C0.669189476,5.74640626 2.86903023,6.65241869 5.6582447,6.65241869 C8.44745917,6.65241869 10.6472999,5.74640626 10.6472999,4.98940028 L10.6472999,4.98940028 Z M5.6582447,3.99158924 C8.44745917,3.99158924 10.6472999,3.08557681 10.6472999,2.32857083 C10.6472999,1.57156485 8.44745917,0.665552426 5.6582447,0.665552426 C2.86903022,0.665552426 0.669189476,1.57156485 0.669189476,2.32857083 C0.669189476,3.08557681 2.86903023,3.99158924 5.6582447,3.99158924 L5.6582447,3.99158924 Z M5.6582447,4.6567966 C2.53576134,4.6567966 0.00398211327,3.61441667 0.00398211327,2.32857083 C0.00398211327,1.042725 2.53576134,0.000345063332 5.6582447,0.000345063332 C8.78072806,0.000345063332 11.3125073,1.042725 11.3125073,2.32857083 C11.3125073,3.61441667 8.78072806,4.6567966 5.6582447,4.6567966 L5.6582447,4.6567966 Z M9.15058335,4.6567966 C9.42612126,4.6567966 9.64948887,4.88016421 9.64948887,5.15570212 C9.64948887,5.43124004 9.42612126,5.65460765 9.15058335,5.65460765 C8.87504544,5.65460765 8.65167783,5.43124004 8.65167783,5.15570212 C8.65167783,4.88016421 8.87504544,4.6567966 9.15058335,4.6567966 Z M9.15058335,7.31762605 C9.42612126,7.31762605 9.64948887,7.54099366 9.64948887,7.81653158 C9.64948887,8.09206949 9.42612126,8.3154371 9.15058335,8.3154371 C8.87504544,8.3154371 8.65167783,8.09206949 8.65167783,7.81653158 C8.65167783,7.54099366 8.87504544,7.31762605 9.15058335,7.31762605 L9.15058335,7.31762605 Z M9.15058335,9.9784555 C9.42612126,9.9784555 9.64948887,10.2018231 9.64948887,10.477361 C9.64948887,10.7528989 9.42612126,10.9762665 9.15058335,10.9762665 C8.87504544,10.9762665 8.65167783,10.7528989 8.65167783,10.477361 C8.65167783,10.2018231 8.87504544,9.9784555 9.15058335,9.9784555 L9.15058335,9.9784555 Z" id="形状"></path>
</g>
<text id="数据集备份-15" font-family="PingFangSC-Regular, PingFang SC" font-size="12" font-weight="normal" fill="#99A1A9">
<text id="数据集备份-15" font-family="PingFangSC-Regular, 微软雅黑" font-size="12" font-weight="normal" fill="#99A1A9">
<tspan x="28" y="148">数据集</tspan>
</text>
<g id="编组-10备份" transform="translate(217.000000, 0.000000)">
......@@ -77,7 +77,7 @@
<g id="形状-2备份-9" transform="translate(12.000000, 34.000000)" fill="#ACACAC" fill-rule="nonzero">
<path d="M0.666666666,3.33333333 L0.666666666,2.66666667 L11.3333333,2.66666667 L11.3333333,0.666666667 L0.666666666,0.666666667 L0.666666666,10 L11.3333333,10 L11.3333333,3.33333333 L0.666666666,3.33333333 Z M0.666666666,1.51212376e-13 L11.3333333,1.51212376e-13 C11.5101443,1.51212376e-13 11.6797136,0.0702378937 11.8047379,0.195262146 C11.9297621,0.320286398 12,0.489855674 12,0.666666667 L12,10 C12,10.176811 11.9297621,10.3463803 11.8047379,10.4714045 C11.6797136,10.5964288 11.5101443,10.6666667 11.3333333,10.6666667 L0.666666666,10.6666667 C0.489855673,10.6666667 0.320286398,10.5964288 0.195262146,10.4714045 C0.0702378933,10.3463803 0,10.176811 0,10 L0,0.666666667 C0,0.489855674 0.0702378933,0.320286398 0.195262146,0.195262146 C0.320286398,0.0702378937 0.489855673,1.51212376e-13 0.666666666,1.51212376e-13 Z M4.236,7.512 C4.3661551,7.6423392 4.36600585,7.85351156 4.23566666,7.98366666 C4.10532746,8.11382176 3.89415511,8.11367253 3.764,7.98333333 L2.35066667,6.56933333 C2.2879722,6.50679716 2.25273748,6.42188484 2.25273748,6.33333333 C2.25273748,6.24478183 2.2879722,6.15986951 2.35066667,6.09733333 L3.764,4.684 C3.84757067,4.59723764 3.97145193,4.56231662 4.08803308,4.59265798 C4.20461424,4.62299934 4.29575399,4.71388163 4.32642501,4.83037649 C4.35709604,4.94687135 4.32252561,5.0708509 4.236,5.15466667 L3.05733333,6.33333333 L4.236,7.512 Z M7.764,5.15466667 C7.63384489,5.02432747 7.63399413,4.81315511 7.76433333,4.683 C7.89467253,4.55284489 8.10584489,4.55299413 8.236,4.68333333 L9.64933333,6.09733333 C9.7120278,6.15986951 9.74726252,6.24478183 9.74726252,6.33333333 C9.74726252,6.42188484 9.7120278,6.50679716 9.64933333,6.56933333 L8.236,7.98266667 C8.15242933,8.06942903 8.02854807,8.10435004 7.91196692,8.07400868 C7.79538577,8.04366732 7.70424602,7.95278503 7.67357499,7.83629018 C7.64290396,7.71979532 7.67747439,7.59581577 7.764,7.512 L8.94266667,6.33333333 L7.764,5.15466667 Z M6.95533333,5.34533333 L5.622,7.65466667 C5.52933142,7.81273789 5.32645098,7.86637624 5.16776855,7.77475821 C5.00908612,7.68314017 4.95410321,7.48061999 5.04466667,7.32133333 L6.378,5.012 C6.47005013,4.85257728 6.67390656,4.79795689 6.83333333,4.89 C6.99275605,4.98205013 7.04737645,5.18590656 6.95533333,5.34533333 Z" id="形状"></path>
</g>
<text id="算法" font-family="PingFangSC-Regular, PingFang SC" font-size="12" font-weight="normal" fill="#99A1A9">
<text id="算法" font-family="PingFangSC-Regular, 微软雅黑" font-size="12" font-weight="normal" fill="#99A1A9">
<tspan x="28" y="44">算法</tspan>
</text>
</g>
......@@ -101,7 +101,7 @@
<g id="形状-2备份-11" transform="translate(466.000000, 137.000000)" fill="#ACACAC" fill-rule="nonzero">
<path d="M0.666666666,3.33333333 L0.666666666,2.66666667 L11.3333333,2.66666667 L11.3333333,0.666666667 L0.666666666,0.666666667 L0.666666666,10 L11.3333333,10 L11.3333333,3.33333333 L0.666666666,3.33333333 Z M0.666666666,1.51212376e-13 L11.3333333,1.51212376e-13 C11.5101443,1.51212376e-13 11.6797136,0.0702378937 11.8047379,0.195262146 C11.9297621,0.320286398 12,0.489855674 12,0.666666667 L12,10 C12,10.176811 11.9297621,10.3463803 11.8047379,10.4714045 C11.6797136,10.5964288 11.5101443,10.6666667 11.3333333,10.6666667 L0.666666666,10.6666667 C0.489855673,10.6666667 0.320286398,10.5964288 0.195262146,10.4714045 C0.0702378933,10.3463803 0,10.176811 0,10 L0,0.666666667 C0,0.489855674 0.0702378933,0.320286398 0.195262146,0.195262146 C0.320286398,0.0702378937 0.489855673,1.51212376e-13 0.666666666,1.51212376e-13 Z M4.236,7.512 C4.3661551,7.6423392 4.36600585,7.85351156 4.23566666,7.98366666 C4.10532746,8.11382176 3.89415511,8.11367253 3.764,7.98333333 L2.35066667,6.56933333 C2.2879722,6.50679716 2.25273748,6.42188484 2.25273748,6.33333333 C2.25273748,6.24478183 2.2879722,6.15986951 2.35066667,6.09733333 L3.764,4.684 C3.84757067,4.59723764 3.97145193,4.56231662 4.08803308,4.59265798 C4.20461424,4.62299934 4.29575399,4.71388163 4.32642501,4.83037649 C4.35709604,4.94687135 4.32252561,5.0708509 4.236,5.15466667 L3.05733333,6.33333333 L4.236,7.512 Z M7.764,5.15466667 C7.63384489,5.02432747 7.63399413,4.81315511 7.76433333,4.683 C7.89467253,4.55284489 8.10584489,4.55299413 8.236,4.68333333 L9.64933333,6.09733333 C9.7120278,6.15986951 9.74726252,6.24478183 9.74726252,6.33333333 C9.74726252,6.42188484 9.7120278,6.50679716 9.64933333,6.56933333 L8.236,7.98266667 C8.15242933,8.06942903 8.02854807,8.10435004 7.91196692,8.07400868 C7.79538577,8.04366732 7.70424602,7.95278503 7.67357499,7.83629018 C7.64290396,7.71979532 7.67747439,7.59581577 7.764,7.512 L8.94266667,6.33333333 L7.764,5.15466667 Z M6.95533333,5.34533333 L5.622,7.65466667 C5.52933142,7.81273789 5.32645098,7.86637624 5.16776855,7.77475821 C5.00908612,7.68314017 4.95410321,7.48061999 5.04466667,7.32133333 L6.378,5.012 C6.47005013,4.85257728 6.67390656,4.79795689 6.83333333,4.89 C6.99275605,4.98205013 7.04737645,5.18590656 6.95533333,5.34533333 Z" id="形状"></path>
</g>
<text id="算法" font-family="PingFangSC-Regular, PingFang SC" font-size="12" font-weight="normal" fill="#99A1A9">
<text id="算法" font-family="PingFangSC-Regular, 微软雅黑" font-size="12" font-weight="normal" fill="#99A1A9">
<tspan x="482" y="147">算法</tspan>
</text>
<circle id="Oval-Copy-2复制备份-14" stroke="#C5CCD2" fill="#FFFFFF" cx="454" cy="132" r="5"></circle>
......@@ -113,7 +113,7 @@
<text id="处理器名称" font-family="PingFang-SC-Bold, PingFang SC" font-size="13" font-weight="bold" fill="#99A1A9">
<tspan x="12" y="22">处理器名称</tspan>
</text>
<text id="处理器" font-family="PingFangSC-Regular, PingFang SC" font-size="12" font-weight="normal" fill="#99A1A9">
<text id="处理器" font-family="PingFangSC-Regular, 微软雅黑" font-size="12" font-weight="normal" fill="#99A1A9">
<tspan x="28" y="44">处理器</tspan>
</text>
<g id="model备份-3" transform="translate(12.000000, 34.000000)" fill="#ACACAC" fill-rule="nonzero">
......
src/assets/workflow-ja-empty.svg
......@@ -48,7 +48,7 @@
<g id="page2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="任务流-导航收起" transform="translate(-647.000000, -297.000000)">
<g id="编组-9" transform="translate(651.000000, 299.000000)">
<text id="请从左侧拖入元素开始运行" font-family="PingFangSC-Regular, PingFang SC" font-size="14" font-weight="normal" fill="#99A1A9">
<text id="请从左侧拖入元素开始运行" font-family="PingFangSC-Regular, 微软雅黑" font-size="14" font-weight="normal" fill="#99A1A9">
<tspan x="223" y="349">左側のモジュールをドラッグアンドドロップしてください</tspan>
</text>
<g id="编组-8">
......@@ -63,7 +63,7 @@
<path d="M0.00398211327,2.32857083 L0.669189476,2.32857083 L0.669189476,10.3110592 L0.00398211327,10.3110592 L0.00398211327,2.32857083 Z M10.6472999,2.32857083 L11.3125073,2.32857083 L11.3125073,10.3110592 L10.6472999,10.3110592 L10.6472999,2.32857083 Z" id="形状"></path>
<path d="M10.6472999,10.3110592 L11.3125073,10.3110592 C11.3125073,11.596905 8.78072806,12.639285 5.6582447,12.639285 C2.53576134,12.639285 0.00398211327,11.596905 0.00398211327,10.3110592 L0.669189476,10.3110592 C0.669189476,11.0680652 2.86903023,11.9740776 5.6582447,11.9740776 C8.44745917,11.9740776 10.6472999,11.0680652 10.6472999,10.3110592 Z M10.6472999,10.3110592 L11.3125073,10.3110592 C11.3125073,11.596905 8.78072806,12.639285 5.6582447,12.639285 C2.53576134,12.639285 0.00398211327,11.596905 0.00398211327,10.3110592 L0.669189476,10.3110592 C0.669189476,11.0680652 2.86903023,11.9740776 5.6582447,11.9740776 C8.44745917,11.9740776 10.6472999,11.0680652 10.6472999,10.3110592 Z M10.6472999,7.65022974 L11.3125073,7.65022974 C11.3125073,8.93607557 8.78072806,9.9784555 5.6582447,9.9784555 C2.53576134,9.9784555 0.00398211327,8.93607557 0.00398211327,7.65022974 L0.669189476,7.65022974 C0.669189476,8.40723571 2.86903023,9.31324814 5.6582447,9.31324814 C8.44745917,9.31324814 10.6472999,8.40723571 10.6472999,7.65022974 Z M10.6472999,7.65022974 L11.3125073,7.65022974 C11.3125073,8.93607557 8.78072806,9.9784555 5.6582447,9.9784555 C2.53576134,9.9784555 0.00398211327,8.93607557 0.00398211327,7.65022974 L0.669189476,7.65022974 C0.669189476,8.40723571 2.86903023,9.31324814 5.6582447,9.31324814 C8.44745917,9.31324814 10.6472999,8.40723571 10.6472999,7.65022974 Z M10.6472999,4.98940028 L11.3125073,4.98940028 C11.3125073,6.27524612 8.78072806,7.31762605 5.6582447,7.31762605 C2.53576134,7.31762605 0.00398211327,6.27524612 0.00398211327,4.98940028 L0.669189476,4.98940028 C0.669189476,5.74640626 2.86903023,6.65241869 5.6582447,6.65241869 C8.44745917,6.65241869 10.6472999,5.74640626 10.6472999,4.98940028 L10.6472999,4.98940028 Z M10.6472999,4.98940028 L11.3125073,4.98940028 C11.3125073,6.27524612 8.78072806,7.31762605 5.6582447,7.31762605 C2.53576134,7.31762605 0.00398211327,6.27524612 0.00398211327,4.98940028 L0.669189476,4.98940028 C0.669189476,5.74640626 2.86903023,6.65241869 5.6582447,6.65241869 C8.44745917,6.65241869 10.6472999,5.74640626 10.6472999,4.98940028 L10.6472999,4.98940028 Z M5.6582447,3.99158924 C8.44745917,3.99158924 10.6472999,3.08557681 10.6472999,2.32857083 C10.6472999,1.57156485 8.44745917,0.665552426 5.6582447,0.665552426 C2.86903022,0.665552426 0.669189476,1.57156485 0.669189476,2.32857083 C0.669189476,3.08557681 2.86903023,3.99158924 5.6582447,3.99158924 L5.6582447,3.99158924 Z M5.6582447,4.6567966 C2.53576134,4.6567966 0.00398211327,3.61441667 0.00398211327,2.32857083 C0.00398211327,1.042725 2.53576134,0.000345063332 5.6582447,0.000345063332 C8.78072806,0.000345063332 11.3125073,1.042725 11.3125073,2.32857083 C11.3125073,3.61441667 8.78072806,4.6567966 5.6582447,4.6567966 L5.6582447,4.6567966 Z M9.15058335,4.6567966 C9.42612126,4.6567966 9.64948887,4.88016421 9.64948887,5.15570212 C9.64948887,5.43124004 9.42612126,5.65460765 9.15058335,5.65460765 C8.87504544,5.65460765 8.65167783,5.43124004 8.65167783,5.15570212 C8.65167783,4.88016421 8.87504544,4.6567966 9.15058335,4.6567966 Z M9.15058335,7.31762605 C9.42612126,7.31762605 9.64948887,7.54099366 9.64948887,7.81653158 C9.64948887,8.09206949 9.42612126,8.3154371 9.15058335,8.3154371 C8.87504544,8.3154371 8.65167783,8.09206949 8.65167783,7.81653158 C8.65167783,7.54099366 8.87504544,7.31762605 9.15058335,7.31762605 L9.15058335,7.31762605 Z M9.15058335,9.9784555 C9.42612126,9.9784555 9.64948887,10.2018231 9.64948887,10.477361 C9.64948887,10.7528989 9.42612126,10.9762665 9.15058335,10.9762665 C8.87504544,10.9762665 8.65167783,10.7528989 8.65167783,10.477361 C8.65167783,10.2018231 8.87504544,9.9784555 9.15058335,9.9784555 L9.15058335,9.9784555 Z" id="形状"></path>
</g>
<text id="数据集备份-15" font-family="PingFangSC-Regular, PingFang SC" font-size="12" font-weight="normal" fill="#99A1A9">
<text id="数据集备份-15" font-family="PingFangSC-Regular, 微软雅黑" font-size="12" font-weight="normal" fill="#99A1A9">
<tspan x="28" y="148">データセット</tspan>
</text>
<g id="编组-10备份" transform="translate(217.000000, 0.000000)">
......@@ -77,7 +77,7 @@
<g id="形状-2备份-9" transform="translate(12.000000, 34.000000)" fill="#ACACAC" fill-rule="nonzero">
<path d="M0.666666666,3.33333333 L0.666666666,2.66666667 L11.3333333,2.66666667 L11.3333333,0.666666667 L0.666666666,0.666666667 L0.666666666,10 L11.3333333,10 L11.3333333,3.33333333 L0.666666666,3.33333333 Z M0.666666666,1.51212376e-13 L11.3333333,1.51212376e-13 C11.5101443,1.51212376e-13 11.6797136,0.0702378937 11.8047379,0.195262146 C11.9297621,0.320286398 12,0.489855674 12,0.666666667 L12,10 C12,10.176811 11.9297621,10.3463803 11.8047379,10.4714045 C11.6797136,10.5964288 11.5101443,10.6666667 11.3333333,10.6666667 L0.666666666,10.6666667 C0.489855673,10.6666667 0.320286398,10.5964288 0.195262146,10.4714045 C0.0702378933,10.3463803 0,10.176811 0,10 L0,0.666666667 C0,0.489855674 0.0702378933,0.320286398 0.195262146,0.195262146 C0.320286398,0.0702378937 0.489855673,1.51212376e-13 0.666666666,1.51212376e-13 Z M4.236,7.512 C4.3661551,7.6423392 4.36600585,7.85351156 4.23566666,7.98366666 C4.10532746,8.11382176 3.89415511,8.11367253 3.764,7.98333333 L2.35066667,6.56933333 C2.2879722,6.50679716 2.25273748,6.42188484 2.25273748,6.33333333 C2.25273748,6.24478183 2.2879722,6.15986951 2.35066667,6.09733333 L3.764,4.684 C3.84757067,4.59723764 3.97145193,4.56231662 4.08803308,4.59265798 C4.20461424,4.62299934 4.29575399,4.71388163 4.32642501,4.83037649 C4.35709604,4.94687135 4.32252561,5.0708509 4.236,5.15466667 L3.05733333,6.33333333 L4.236,7.512 Z M7.764,5.15466667 C7.63384489,5.02432747 7.63399413,4.81315511 7.76433333,4.683 C7.89467253,4.55284489 8.10584489,4.55299413 8.236,4.68333333 L9.64933333,6.09733333 C9.7120278,6.15986951 9.74726252,6.24478183 9.74726252,6.33333333 C9.74726252,6.42188484 9.7120278,6.50679716 9.64933333,6.56933333 L8.236,7.98266667 C8.15242933,8.06942903 8.02854807,8.10435004 7.91196692,8.07400868 C7.79538577,8.04366732 7.70424602,7.95278503 7.67357499,7.83629018 C7.64290396,7.71979532 7.67747439,7.59581577 7.764,7.512 L8.94266667,6.33333333 L7.764,5.15466667 Z M6.95533333,5.34533333 L5.622,7.65466667 C5.52933142,7.81273789 5.32645098,7.86637624 5.16776855,7.77475821 C5.00908612,7.68314017 4.95410321,7.48061999 5.04466667,7.32133333 L6.378,5.012 C6.47005013,4.85257728 6.67390656,4.79795689 6.83333333,4.89 C6.99275605,4.98205013 7.04737645,5.18590656 6.95533333,5.34533333 Z" id="形状"></path>
</g>
<text id="算法" font-family="PingFangSC-Regular, PingFang SC" font-size="12" font-weight="normal" fill="#99A1A9">
<text id="算法" font-family="PingFangSC-Regular, 微软雅黑" font-size="12" font-weight="normal" fill="#99A1A9">
<tspan x="28" y="44">アルゴリズム</tspan>
</text>
</g>
......@@ -101,7 +101,7 @@
<g id="形状-2备份-11" transform="translate(466.000000, 137.000000)" fill="#ACACAC" fill-rule="nonzero">
<path d="M0.666666666,3.33333333 L0.666666666,2.66666667 L11.3333333,2.66666667 L11.3333333,0.666666667 L0.666666666,0.666666667 L0.666666666,10 L11.3333333,10 L11.3333333,3.33333333 L0.666666666,3.33333333 Z M0.666666666,1.51212376e-13 L11.3333333,1.51212376e-13 C11.5101443,1.51212376e-13 11.6797136,0.0702378937 11.8047379,0.195262146 C11.9297621,0.320286398 12,0.489855674 12,0.666666667 L12,10 C12,10.176811 11.9297621,10.3463803 11.8047379,10.4714045 C11.6797136,10.5964288 11.5101443,10.6666667 11.3333333,10.6666667 L0.666666666,10.6666667 C0.489855673,10.6666667 0.320286398,10.5964288 0.195262146,10.4714045 C0.0702378933,10.3463803 0,10.176811 0,10 L0,0.666666667 C0,0.489855674 0.0702378933,0.320286398 0.195262146,0.195262146 C0.320286398,0.0702378937 0.489855673,1.51212376e-13 0.666666666,1.51212376e-13 Z M4.236,7.512 C4.3661551,7.6423392 4.36600585,7.85351156 4.23566666,7.98366666 C4.10532746,8.11382176 3.89415511,8.11367253 3.764,7.98333333 L2.35066667,6.56933333 C2.2879722,6.50679716 2.25273748,6.42188484 2.25273748,6.33333333 C2.25273748,6.24478183 2.2879722,6.15986951 2.35066667,6.09733333 L3.764,4.684 C3.84757067,4.59723764 3.97145193,4.56231662 4.08803308,4.59265798 C4.20461424,4.62299934 4.29575399,4.71388163 4.32642501,4.83037649 C4.35709604,4.94687135 4.32252561,5.0708509 4.236,5.15466667 L3.05733333,6.33333333 L4.236,7.512 Z M7.764,5.15466667 C7.63384489,5.02432747 7.63399413,4.81315511 7.76433333,4.683 C7.89467253,4.55284489 8.10584489,4.55299413 8.236,4.68333333 L9.64933333,6.09733333 C9.7120278,6.15986951 9.74726252,6.24478183 9.74726252,6.33333333 C9.74726252,6.42188484 9.7120278,6.50679716 9.64933333,6.56933333 L8.236,7.98266667 C8.15242933,8.06942903 8.02854807,8.10435004 7.91196692,8.07400868 C7.79538577,8.04366732 7.70424602,7.95278503 7.67357499,7.83629018 C7.64290396,7.71979532 7.67747439,7.59581577 7.764,7.512 L8.94266667,6.33333333 L7.764,5.15466667 Z M6.95533333,5.34533333 L5.622,7.65466667 C5.52933142,7.81273789 5.32645098,7.86637624 5.16776855,7.77475821 C5.00908612,7.68314017 4.95410321,7.48061999 5.04466667,7.32133333 L6.378,5.012 C6.47005013,4.85257728 6.67390656,4.79795689 6.83333333,4.89 C6.99275605,4.98205013 7.04737645,5.18590656 6.95533333,5.34533333 Z" id="形状"></path>
</g>
<text id="算法" font-family="PingFangSC-Regular, PingFang SC" font-size="12" font-weight="normal" fill="#99A1A9">
<text id="算法" font-family="PingFangSC-Regular, 微软雅黑" font-size="12" font-weight="normal" fill="#99A1A9">
<tspan x="482" y="147">アルゴリズム</tspan>
</text>
<circle id="Oval-Copy-2复制备份-14" stroke="#C5CCD2" fill="#FFFFFF" cx="454" cy="132" r="5"></circle>
......@@ -113,7 +113,7 @@
<text id="处理器名称" font-family="PingFang-SC-Bold, PingFang SC" font-size="13" font-weight="bold" fill="#99A1A9">
<tspan x="12" y="22">プロセッサ名</tspan>
</text>
<text id="处理器" font-family="PingFangSC-Regular, PingFang SC" font-size="12" font-weight="normal" fill="#99A1A9">
<text id="处理器" font-family="PingFangSC-Regular, 微软雅黑" font-size="12" font-weight="normal" fill="#99A1A9">
<tspan x="28" y="44">プロセッサ</tspan>
</text>
<g id="model备份-3" transform="translate(12.000000, 34.000000)" fill="#ACACAC" fill-rule="nonzero">
......
src/components/index.js
......@@ -14,6 +14,7 @@ import formTable from './form/index.vue'
// import ajaxButton from './form/ajax-button.vue'
import seetaInput from './seeta-ui/seeta-input.vue'
import seetaButton from './seeta-ui/seeta-button.vue'
// import seetaCheckBox from './seeta-ui/seeta-checkbox.vue'
// import seetaCollapse from './seeta-ui/seeta-collapse.vue'
import seetaForm from './seeta-ui/seeta-form/form.vue'
import seetaFormItem from './seeta-ui/seeta-form/form-item.vue'
......@@ -29,6 +30,7 @@ import seetaCrumb from './seeta-ui/seeta-crumb.vue'
// import name from './list-filter/name.vue'
// import time from './list-filter/time.vue'
import puzzlevalidator from './PuzzleValidator'
// import nameFilter from './list-filter/name.vue'
import Vue from 'vue'
import datePicker from './calendar/index.vue'
......@@ -41,6 +43,8 @@ import datePicker from './calendar/index.vue'
// Vue.component('v-select', select)
Vue.component('v-textarea', textarea)
Vue.component('dropdown', dropdown)
// Vue.component('st-checkbox', seetaCheckBox)
// Vue.component('nameFilter', nameFilter)
// Vue.component('code-editor', codeEditor)
// Vue.component('tabs', tabs)
// Vue.component('data-empty', dataEmpty)
......
src/components/list-filter/name.vue
......@@ -7,7 +7,8 @@
:placeholder="placeholder",
@keyup.enter="search"
)
.iconfont.icon-search(@click="search")
i.el-input__icon.el-icon-search.icon-search(@click="search")
//- .iconfont.icon-search(@click="search")
</template>
<script lang="ts">
import { Vue, Prop, Component, Watch } from 'vue-property-decorator'
......@@ -25,7 +26,7 @@ export default class nameFilter extends Vue {
search() {
const routeQuery = this.$route.query
// 避免重复搜索
if (this.name === routeQuery.name) return
if (this.name === routeQuery.name || this.name === '') return
const query = {
...routeQuery,
name: this.name,
......@@ -37,12 +38,21 @@ export default class nameFilter extends Vue {
</script>
<style lang="sass" scoped>
.search
height: 32px
width: 240px
position: relative
display: inline-block
.search-input
width: 100%
padding-right: 35px
padding: 5.5px 35px 5.5px 12px
font-size: 14px
font-family: PingFangSC-Regular
color: #333333
letter-spacing: 0
&::-webkit-input-placeholder
font-family: PingFangSC-Regular
font-size: 14px
color: #999999
.icon-search
position: absolute
right: 0
......
src/components/popup.vue
......@@ -361,13 +361,13 @@ export default {
padding: 13px 20px
font-size: 16px
border-bottom: 1px solid $--dialog-header-border
font-family: PingFangSC-Regular, PingFang SC
font-family: PingFangSC-Regular, 微软雅黑
font-weight: 400
color: #3C3D40
line-height: 22px
.popup-body
font-size: 14px
font-family: PingFangSC-Regular, PingFang SC
font-family: PingFangSC-Regular, 微软雅黑
font-weight: 400
color: #666666
line-height: 20px
......
src/components/seeta-ui/seeta-form/form-item.vue
......@@ -53,7 +53,7 @@ export default {
::v-deep .el-form-item__label
padding: 0 20px 0 0
font-size: 14px
font-family: PingFangSC-Regular, PingFang SC
font-family: PingFangSC-Regular, 微软雅黑
font-weight: 400
color: #666666
</style>
src/components/seeta-ui/seeta-input.vue
......@@ -23,11 +23,12 @@ export default {
::v-deep input[type=text], ::v-deep input[type=password], ::v-deep input[type=number], ::v-deep textarea
font-size: 14px
color: #333
font-family: PingFangSC-Regular, PingFang SC
font-weight: 400
font-family: PingFangSC-Regular, 微软雅黑
letter-spacing: 0
&::placeholder
color: #999999
font-size: 14px
letter-spacing: 0
.el-textarea.el-input--small
::v-deep .el-textarea__inner
border-radius: 2px
......
src/components/seeta-ui/seeta-select.vue
......@@ -40,13 +40,13 @@ export default class seetaSelect extends Vue {
.el-select-dropdown
.el-select-dropdown__item
font-size: 14px
font-family: PingFangSC-Regular, PingFang SC
font-family: PingFangSC-Regular, 微软雅黑
font-weight: 400
color: #333333
.el-select-dropdown__item.selected
font-weight: normal
font-size: 14px
font-family: PingFangSC-Regular, PingFang SC
font-family: PingFangSC-Regular, 微软雅黑
color: #409EFF
.el-select__tags
.el-icon-close
......@@ -57,13 +57,13 @@ export default class seetaSelect extends Vue {
color: #999999 !important
.el-select__tags-text
font-size: 12px !important
font-family: PingFangSC-Regular, PingFang SC !important
font-family: PingFangSC-Regular, 微软雅黑 !important
font-weight: 400 !important
color: #666666 !important
line-height: 17px !important
.el-select
.el-input__inner
font-size: 14px !important
font-family: PingFangSC-Regular, PingFang SC !important
font-family: PingFangSC-Regular, 微软雅黑 !important
font-weight: 400 !important
</style>
src/components/seeta-ui/seeta-table/index.vue
......@@ -12,6 +12,74 @@
@filter-change="filterChange"
@sort-change="sortChange"
>
<el-table-column type="expand" v-if="doubleTable" class="expend-column">
<!-- eslint-disable-next-line -->
<template slot-scope="props">
<el-table
stripe
:data="childTableData">
<template
v-for="col in childOptions">
<!-- 插槽 -->
<el-table-column
header-align="left"
align="left"
v-if="col.type === 'slot'"
:key="col.label"
:label="col.label"
:min-width="col.width? col.width : ''"
:column-key="col.filterKey"
:filters="handleFilters(col.filterList)"
:filter-multiple="false"
filter-placement="bottom"
:sortable="!!col.sortable">
<template slot-scope="scope">
<div
v-if="(col.slotName === 'status' || col.slotName === 'state' || col.slotName === 'api_status')&& col.animation &&col.animation(scope.row)"
class="status-icon-animation"
:style="{
background: col.statusColor && col.statusColor(scope.row)
}">
</div>
<div
v-else-if="col.slotName === 'status' || col.slotName === 'state' ||col.slotName === 'api_status'"
class="status-icon"
:style="{
background: col.statusColor && col.statusColor(scope.row)
}">
</div>
<div class="any-slot">
<slot :name="col.slotName" v-bind="scope.row"></slot>
</div>
</template>
</el-table-column>
<el-table-column
v-else-if="col.type === 'check' || col.type === 'selection'"
:key="col.label"
type="selection"
width="37"
:reserve-selection="true"
:selectable="selectable(col)">
</el-table-column>
<!-- 普通列 -->
<el-table-column
header-align="left"
align="left"
v-else-if="!(typeof col.render === 'function')"
:key="col.label"
:label="col.label"
:prop="col.render"
:min-width="col.width? col.width : ''"
:column-key="col.filterKey"
:filters="handleFilters(col.filterList)"
:filter-multiple="false"
filter-placement="bottom"
:sortable="!!col.sortable">
</el-table-column>
</template>
</el-table>
</template>
</el-table-column>
<template
v-for="col in options">
<!-- 多选框 -->
......@@ -131,11 +199,15 @@ export default class seetaTableIndex extends Vue {
}
// 传入遮罩控制
@Prop({ type: Boolean, default: false }) outerLoading
// 是否开启嵌套表格
@Prop({ type: Boolean, default: false }) doubleTable
// 列表参数
@Prop({ type: Array, default: () => [] }) options
// 子表格列表参数
@Prop({ type: Array, default: () => [] }) childOptions
// 数据加载函数
@Prop({ type: Function, default: () => { return {} } }) loadFunction
@Prop({ type: Number, default: 10 }) pageSize
@Prop({ type: Number, default: 30 }) pageSize
@Prop({ type: Number, default: 1 }) pageIndex
// 手动传入数据
@Prop({ type: Object, default: () => {} }) data
......@@ -155,6 +227,7 @@ export default class seetaTableIndex extends Vue {
@Prop({ type: String, default: 'total, prev, pager, next, sizes, jumper' }) pageLayout
isLoading: boolean = false
tableData: {}[] = []
childTableData: {}[] = []
total: number = 0
// currentPage: number = 1
// currentSize: number = 10
......@@ -224,6 +297,9 @@ export default class seetaTableIndex extends Vue {
this.currentFilters = {}
}, 100)
}
clickCollapse() {
this.getTableHeight()
}
// 计算列表高度
getTableHeight() {
this.$nextTick(() => {
......@@ -254,6 +330,7 @@ export default class seetaTableIndex extends Vue {
dataChange(val) {
if (!val) return
this.tableData = val.list
this.childTableData = val.list.map(item => item.child)
if (val.total || val.total === 0) {
this.total = val.total
}
......@@ -327,12 +404,14 @@ export default class seetaTableIndex extends Vue {
@import "@/styles/theme.sass"
.table-box
height: 100%
overflow: auto
overflow: hidden
background: #fff
position: relative
.el-table
color: $--color-text-primary
font-size: 14px
::v-deep.el-table__expanded-cell
padding: 0 0
::v-deep .el-table__header
font-size: 14px
font-family: PingFang-SC-Bold, PingFang-SC
......@@ -411,7 +490,7 @@ export default class seetaTableIndex extends Vue {
text-align: left
padding-left: 30px
font-size: 14px
font-family: PingFangSC-Regular, PingFang SC
font-family: PingFangSC-Regular, 微软雅黑
font-weight: 400
color: #333333
line-height: 20px
......@@ -442,7 +521,7 @@ export default class seetaTableIndex extends Vue {
padding: 2px 5px
color: #333
font-size: 14px
font-family: PingFangSC-Regular, PingFang SC
font-family: PingFangSC-Regular, 微软雅黑
::v-deep .el-pagination__total
font-size: 14px
color: $--color-text-primary
......@@ -464,7 +543,7 @@ export default class seetaTableIndex extends Vue {
background-color: #F5F7FA !important
.el-select-dropdown__item
font-size: 14px
font-family: PingFangSC-Regular, PingFang SC
font-family: PingFangSC-Regular, 微软雅黑
font-weight: 400
.el-select-dropdown__item, .selected
font-weight: normal !important
......
src/components/seeta-ui/seeta-tabs.vue
......@@ -32,7 +32,7 @@ export default class seetaTabs extends Vue {
margin: 0 0 14px
::v-deep .el-tabs__item
font-size: 14px
font-family: PingFangSC-Regular, PingFang SC
font-family: PingFangSC-Regular, 微软雅黑
font-weight: 400
&.is-active
color: #409EFF
......
src/router/routes.js
......@@ -23,6 +23,16 @@ export default [
name: 'device',
meta: { title: '设备列表' },
component: () => import('@views/DeviceList')
}, {
path: '/device-detail',
name: 'device-detail',
meta: { title: '设备详情' },
component: () => import('@views/DeviceList/detail.vue')
}, {
path: '/device-service',
name: 'device-service',
meta: { title: '设备服务' },
component: () => import('@views/DeviceList/deviceService/deviceServiceIndex')
}]
},
{
......
src/styles/base.sass
......@@ -85,5 +85,5 @@ body, html
#raw-input::-webkit-input-placeholder
font-size: 14px
color: #999
font-family: PingFangSC-Regular, PingFang SC
font-family: PingFangSC-Regular, 微软雅黑
font-weight: 400
src/styles/layout.sass
......@@ -33,7 +33,7 @@
background-color: #FFF
margin-top: 14px
display: flex
font-family: PingFangSC-Regular, PingFang SC
font-family: PingFangSC-Regular, 微软雅黑
font-weight: 400
// align-items: center
align-items: flex-start
......@@ -47,7 +47,7 @@
vertical-align: middle
.el-input__inner::placeholder
font-size: 14px
font-family: PingFangSC-Regular, PingFang SC
font-family: PingFangSC-Regular, 微软雅黑
font-weight: 400
line-height: 14px
color:#999999
......@@ -56,7 +56,7 @@
display: inline-block
height: 20px
font-size: 14px
font-family: PingFangSC-Regular, PingFang SC
font-family: PingFangSC-Regular, 微软雅黑
font-weight: 400
color: #666666
line-height: 20px
......@@ -88,7 +88,7 @@
width: 56px
height: 18px
font-size: 14px
font-family: PingFangSC-Regular, PingFang SC
font-family: PingFangSC-Regular, 微软雅黑
font-weight: 400
color: #FFFFFF
i.iconfont::before
......@@ -103,10 +103,15 @@
height: 100%
.el-range-input
font-size: 14px
font-family: PingFangSC-Regular, PingFang SC
font-family: PingFangSC-Regular, 微软雅黑
font-weight: 400
.el-date-editor .el-range__close-icon
line-height: 24px
.el-select__input
border: none
padding: 0
appearance: none
background-color: transparent
// 新建页公共样式
.common-create
display: flex
......@@ -181,7 +186,7 @@
color: #409EFF
.operate
font-size: 14px
font-family: PingFangSC-Regular, PingFang SC
font-family: PingFangSC-Regular, 微软雅黑
font-weight: 400
color: #409EFF
line-height: 20px
......@@ -192,3 +197,9 @@
// 搜索栏禁止输入校验规则之外的字符
.error-border .el-input__inner
border: 1px solid red !important
.mySuccess
width: 122px !important
min-width: 122px
height: 40px
background: #FFFFFF
box-shadow: 0 0 8px 0 rgba(37,38,94,0.20)
src/styles/module/label.sass
......@@ -10,7 +10,7 @@
font-size: 12px
white-space: nowrap
text-align: center
font-family: PingFangSC-Regular, PingFang SC
font-family: PingFangSC-Regular, 微软雅黑
font-weight: 400
line-height: 17px
height: 28px
......
src/utils/system.js
......@@ -6,7 +6,7 @@ export function rTime(date) {
}
// 转换时间格式 精确到分钟
export function rTimeMin(item) {
const json_date = moment(new Date(item)).format('YYYY-MM-DD kk:mm')
const json_date = moment(new Date(item)).format('YYYY-MM-DD HH:mm:ss')
return json_date
// const y = date.getFullYear()
// let m = date.getMonth() + 1
......@@ -62,3 +62,24 @@ export function isArrayEqual(value1 = [], value2 = []) {
}
return false
}
// 复制内容到粘贴板的实现
export function copyText(item) {
if (!item) {
return
}
const transfer = document.createElement('input')
document.body.appendChild(transfer)
transfer.value = item // 这里表示想要复制的内容
transfer.focus()
transfer.select()
if (document.execCommand('copy')) {
document.execCommand('copy')
}
transfer.blur()
this.$message({
message: '复制成功',
type: 'success',
customClass: 'mySuccess',
})
document.body.removeChild(transfer)
}
src/views/DeviceList/detail.vue 0 → 100644
<template>
<div class="data-list-common flex column main-content flex-1">
<div class="header">
<span class="title">{{'设备列表'}}</span>
</div>
<div class="page-content">
<div class="table-list">
<div class="list-content">
<st-table
ref="vTable"
:options="definitions"
:data="{
list: tokenList,
total: total,
}"
:outerLoading="loadingStatus"
:pagination="false"
>
<div slot='codeSlot' slot-scope="row">
<span>{{ simplify(row.code, 3) }}</span>
<i class="iconfont icon-fuzhi icon-fuzhi-text" @click="copyText(row.code)"></i>
</div>
<div slot='status' slot-scope="row">
<span class="circleStatus" :style="{color: getStatusColor(row.status)}">{{ getStatusText(row.status) }}</span>
</div>
<div slot='structureSlot' slot-scope="row">
<span>{{ simplify(row.structure, 6) }}</span>
</div>
<div slot='registerTimeSlot' slot-scope="row">
<span>{{ rTimeMin(row.registerTime) }}</span>
</div>
<div slot='tagsSlot' slot-scope="row">
<div class="tagsItem">
<el-tooltip class="item" effect="dark" :content="row.tags.join(',')" placement="top" style="display: inline-block">
<div>
<template v-for="(item, index) in row.tags">
<el-tag class="label label-primary table-label" :key="index" :disable-transitions="false" closable @close="handleClose(row, item)">{{simplify(item, 4)}}</el-tag>
</template>
<span v-if="row.tags.length > 10">共: {{row.tags.length}} 条</span>
<el-input
class="input-new-tag"
v-if="inputVisible"
v-model="inputValue"
ref="saveTagInput"
size="small"
@keyup.enter.native="handleInputConfirm(row)"
@blur="handleInputConfirm(row)"
>
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加标签</el-button>
</div>
</el-tooltip>
<!-- <el-tag v-for="(item, index) in row.tags" :key="index" :disable-transitions="false" @close="handleClose(row, item)" closable class="label label-primary table-label">{{ simplify(item, 7) }}</el-tag> -->
</div>
</div>
<div slot='servicesSlot' slot-scope="row">
<el-tooltip class="item" effect="dark" :content="row.services ? row.services.join('、') : ''" placement="top">
<!-- 必须要套一层 -->
<div>
<template v-for="(item, index) in row.services">
<span v-if="[0, 2].indexOf(index) !== -1" :key="index" class="service-item">{{ simplify(item, 4) }}</span>
</template>
<span v-if="(row.services && row.services.length) > 10">共: {{(row.services && row.services.length) ? row.services.length : 0}} 条</span>
</div>
</el-tooltip>
</div>
<div slot='systemSlot' slot-scope="row">
<span>{{ simplify(row.system, 7) }}</span>
</div>
<div slot='operate' slot-scope="row">
<span class="operate-text operate-delete" @click="delete(row.id)">{{ '删除 '}}</span>
</div>
</st-table>
<p class="table-title">{{'包含服务'}}</p>
<st-table
ref="serviceTable"
:options="serviceDefinitions"
:data="{
list: serviceTokenList,
total: servicTtotal,
}"
:outerLoading="serviceLoadingStatus"
:pagination="false"
>
<div slot='codeSlot' slot-scope="row">
<span>{{ simplify(row.code, 3) }}</span>
<i class="iconfont icon-fuzhi icon-fuzhi-text" @click="copyText(row.code)"></i>
</div>
<div slot='descSlot' slot-scope="row">
<span>{{ simplify(row.desc, 10) }}</span>
</div>
<div slot='operate' slot-scope="row">
<span class="operate-text" @click="seeServiceParams(row.id)">{{ '查看参数' }}</span>
<span class="operate-text" @click="sendReq(row.id)">{{ '发送请求' }}</span>
<span class="operate-text" @click="sendOrder(row.id)">{{ '发送指令' }}</span>
</div>
</st-table>
</div>
</div>
</div>
</div>
</template>
<script>
import browserStorage from '@/services/local-storage'
import Dialog from '@/helpers/dialog'
import validate from '@/components/seeta-ui/seeta-form/validator'
import { rTimeMin, copyText } from '@/utils/system.js'
export default {
data() {
return {
// 当前页
pi: 0,
// 当前页size
ps: 10,
// 控制遮罩
loadingStatus: false,
serviceLoadingStatus: false,
// 搜索栏折叠
isCollapse: true,
time2: '',
// 表格数据
tokenList: [
{ tags: ['标签1', '标签2'], name: '小1', code: '110123124325', child: { service: '11', code: '123', port: '1234', desc: '这是服务1' } },
],
inputVisible: false,
inputValue: '',
serviceTokenList: [
{ service: '11', code: '123', port: '1234', desc: '这是服务1' },
{ service: '12', code: '123', port: '1234', desc: '这是服务2' },
{ service: '13', code: '123', port: '1234', desc: '这是服务3' },
],
total: 1,
servicTtotal: 3,
// 编辑和添加表单
form: {
},
serviceDefinitions: [
{
label: '服务',
type: 'slot',
slotName: 'childServiceSlot',
}, {
label: '编号',
type: 'slot',
slotName: 'childCodeSlot'
}, {
label: '端口',
type: 'slot',
slotName: 'portSlot'
}, {
label: '描述',
type: 'slot',
slotName: 'descSlot'
}, {
label: '操作',
type: 'slot',
slotName: 'childOperate',
},
],
definitions: [
{
label: '编号',
type: 'slot',
slotName: 'codeSlot',
}, {
label: '状态',
type: 'slot',
slotName: 'status',
statusColor: item => {
switch (item.status) {
case 'online':
return '#67C23A'
case 'offline':
return '#999999'
default:
return '#F56C6C'
}
}
}, {
label: '架构',
type: 'slot',
slotName: 'structureSlot'
}, {
label: '系统',
type: 'slot',
slotName: 'systemSlot'
}, {
label: 'IP',
render: 'IP'
}, {
label: '注册时间',
type: 'slot',
slotName: 'registerTimeSlot'
}, {
label: '标签',
type: 'slot',
slotName: 'tagsSlot',
width: 190
}, {
label: '服务',
type: 'slot',
slotName: 'servicesSlot'
}, {
label: '操作',
type: 'slot',
slotName: 'operate',
},
],
/* 搜索栏条件 */
search: {
checkList: []
},
tagList: [{ label: '标签一', value: 0 }, { label: '标签二', value: 1 }, { label: '标签三', value: 2 }, { label: '标签四', value: 3 }],
serviceList: [{ label: '标签一', value: 0 }, { label: '标签二', value: 1 }, { label: '标签三', value: 2 }, { label: '标签四', value: 3 }],
}
},
computed: {
// 获取设备状态颜色
getStatusColor() {
return item => {
switch (item) {
case 'online':
return '#67C23A'
case 'offline':
return '#999999'
default:
return '#F56C6C'
}
}
},
// 获取设备状态文字
getStatusText() {
return item => {
switch (item) {
case 'online':
return '在线'
case 'offline':
return '离线'
default:
return '异常'
}
}
},
// 精简文字
simplify() {
return (item, length) => {
if (item && item.length > length) {
return item.substring(0, length) + '...'
}
return item
}
}
},
methods: {
rTimeMin,
copyText,
seeServiceParams(id) {
},
sendReq(id) {
},
sendOrder(id) {
},
handleClose(row, tag) {
row.tags.splice(row.tags.indexOf(tag), 1)
},
showInput() {
this.inputVisible = true
this.$nextTick(_ => {
this.$refs.saveTagInput.$refs.input.focus()
})
},
handleInputConfirm(row) {
const inputValue = this.inputValue
if (inputValue) {
row.tags.push(inputValue)
}
this.inputVisible = false
this.inputValue = ''
},
collapseSearch() {
this.isCollapse = !this.isCollapse
this.$refs.vTable.clickCollapse()
this.$nextTick(() => {
const icon = [...document.getElementsByClassName('el-date-editor')]
icon.forEach(item => {
const img = document.createElement('img')
img.style.width = '14px'
img.style.height = '14px'
img.src = require('@assets/images/icon-rili.png')
item.appendChild(img)
})
})
},
reset() {
this.search = {
checkList: []
}
},
// 跳转到设备详情页面
detail(id) {
},
delete(id) {
}
},
watch: {
// 监听route的改变进行pi ,ps的改变
'$route.query': {
handler(newName, oldName) {
},
deep: true,
}
},
mounted() {
},
destroyed() {
},
components: {
}
}
</script>
<style lang="sass" scoped>
.page-nav
font-family: PingFangSC-Regular
font-size: 14px
color: #666666
letter-spacing: 0
padding: 26px 20px 20px
.search-title
margin-right: 10px
.clickable
cursor: pointer
.no-wrap
white-space: nowrap
.inline-div
display: inline-block
.circleStatus
margin-left: 6px
.icon-fuzhi-text
margin-left: 6px
color: #409EFF
cursor: pointer
.search-item
text-align: left
.search-item-margin
margin-right: 20px
.search-item:not(.search-item:nth-child(1))
margin-top: 14px
.collapse-btn
font-family: PingFangSC-Regular
font-size: 14px
color: #409EFF
.collapse-text
margin-right: 5px
.search-fields
height: 164px
width: 100%
display: flex !important
flex-direction: row
justify-content: space-between
.search-fields-collapse
max-height: 23px
.flex-left
display: flex
flex-direction: column
justify-content: space-between
.flex-right-nav
margin-left: -88px
display: flex
justify-content: space-between
flex-direction: column
.flex-right-content
display: flex
justify-content: flex-end
.check-title
font-family: PingFangSC-Regular
font-size: 14px
color: #333333
letter-spacing: 0
.operate-text
font-family: PingFangSC-Regular
font-size: 14px
color: #409EFF
margin-right: 20px
cursor: pointer
.operate-delete
color: rgb(245, 108, 108)
::v-deep .el-checkbox
margin-right: 15px
.el-checkbox__input
width: 14px
height: 14px
top: -1px
margin-right: 10px
.el-checkbox__label
padding-left: 0px
::v-deep .el-range-separator
font-family: PingFangSC-Regular
font-size: 14px
color: #333333
letter-spacing: 0
::v-deep .el-range-input
font-family: PingFangSC-Regular
font-size: 14px
color: #333333
letter-spacing: 0
&::placeholder
font-family: PingFangSC-Regular
font-size: 14px
color: #999999
letter-spacing: 0
::v-deep
& .el-table__expand-column .cell
padding: 0 20px !important
& .table-box .el-table th .cell, .table-box .el-table .el-table__body tr .cell
padding-left: 40px
& .el-table__expanded-cell .cell
padding-left: 48px !important
.input-new-tag, .button-new-tag
width: 90px
height: 28px
vertical-align: bottom
margin-top: 5px
.tagsItem
display: inline-block
white-space: normal
.table-label
width: 78px
height: 28px
margin: 5px 5px 0 0
.table-box
height: auto
::v-deep .el-table
max-height: fit-content !important
.el-table__body-wrapper.is-scrolling-none
max-height: fit-content !important
.table-title
text-align: left
font-family: PingFang-SC-Bold
font-size: 14px
color: #333333
margin: 14px 0
font-weight: bold
</style>
src/views/DeviceList/deviceService/components/GetParams.vue 0 → 100644
<template>
<div class="box">
<div class="wrapper">
<div class="content">
<div class="content-top-info">
<div class="list-item">
<span class="list-item-title">{{'服务编号：'}}</span>
<div class="list-item-content">
<span>{{'wefhweifhew'}}</span>
</div>
</div>
<div class="list-item">
<span class="list-item-title ak-sk">{{'AK/SK：'}}</span>
<div class="list-item-content">
<div>
<span>{{'AppKey：'}}</span>
<st-input width="240px" class="list-item-input"></st-input>
</div>
<div>
<span>{{'Secret：'}}</span>
<st-input width="240px" class="list-item-input"></st-input>
</div>
<div class="list-item-icon">
<i class="el-icon-view blue-text"></i>
</div>
</div>
</div>
<div class="list-item">
<span class="list-item-title param-template-text">{{'参数模板：'}}</span>
<div class="list-item-content">
<div class="tags">
<el-tooltip class="item" effect="dark" :content="dynamicTags.join(',')" placement="top" style="display: inline-block">
<div>
<template v-for="(item, index) in dynamicTags">
<el-tag :key="index" >{{item.length > 4 ? item.slice(0, 3) + '...' : item}}</el-tag>
</template>
<span v-if="dynamicTags.length > 10">共: {{dynamicTags.length}} 条</span>
</div>
</el-tooltip>
<el-input
class="input-new-tag"
v-if="inputVisible"
v-model="inputValue"
ref="saveTagInput"
size="small"
@keyup.enter.native="handleInputConfirm"
@blur="handleInputConfirm"
>
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加标签</el-button>
</div>
</div>
</div>
</div>
<div class="content-table">
<st-table
ref="vTable"
:options="definitions"
:data="{
list: tokenList,
total: total,
}"
:key="num"
:outerLoading="loadingStatus"
:pagination="false"
>
<div slot='fieldSlot' slot-scope="scope">
<template>
<div v-if="!(scope.p1 && scope.p1.ifEdit)" @click="changeStatus(scope, scope.index, 'p1', true)" class="pointer">{{scope.p1 ? scope.p1.value : ''}}</div>
<st-input ref="myInput" @change="updateScope(scope, scope.index)" @blur="changeStatus(scope, scope.index, 'p1', false)" @keyup.enter.native="changeStatus(scope, scope.index, 'p1', false)" v-model="currentInput" v-else class="field-input"></st-input>
</template>
</div>
<div slot='typeSlot' slot-scope="scope">
<template>
<div v-if="!(scope.p2 && scope.p2.ifEdit)" @click="changeStatus(scope, scope.index, 'p2', true)" class="pointer">{{scope.p2 ? scope.p2.value : ''}}</div>
<st-input ref="myInput" @change="updateScope(scope, scope.index)" @blur="changeStatus(scope, scope.index, 'p2', false)" @keyup.enter.native="changeStatus(scope, scope.index, 'p2', false)" v-model="currentInput" v-else class="field-input"></st-input>
</template>
</div>
<div slot='valueSlot' slot-scope="row">
<template v-if="row.p3 && !row.p3.ifEdit && row.p3.valueType === 'text'">
<span @click="changeStatus(row, row.index, 'p3', true)" class="pointer">{{row.p3.value}}</span>
</template>
<template v-else-if="row.p3 && !row.p3.ifEdit && row.p3.valueType === 'a'">
<a href="javascript:;" class="link-text" @click="linkToTable">{{row.p3.value}}</a>
</template>
<template v-else-if="row.p3 && !row.p3.ifEdit && row.p3.valueType === 'img'">
<span class="preview-text">{{getBlobSize(row.p3.value)}}</span>
<span v-if='!ifBlobPreview(row.p3.value)'>{{'(不可预览)'}}</span>
<el-image
class="preview-img"
v-else
style="width: 42px; height: 28px"
:src="getBlobimgUrl(row.p3.value)"
:preview-src-list="getBlobimgUrlList(row.p3.value)">
</el-image>
</template>
<template v-else>
<st-input ref="myInput" @change="updateScope(row, row.index)" @blur="changeStatus(row, row.index, 'p3', false)" @keyup.enter.native="changeStatus(row, row.index, 'p3', false)" v-model="currentInput" class="field-input"></st-input>
</template>
</div>
<div slot='operate' slot-scope="row">
<span v-if="row.configurable === 'edit' && row.editing" class="operate-text" @click="backRow(row.index)">{{ '撤销覆盖' }}</span>
<span v-else-if="row.configurable === 'add'" class="operate-text operate-text-delete" @click="deketeRow(row.index)">{{ '删除' }}</span>
<span v-else class="operate-text operate-text-none">{{'-'}}</span>
</div>
</st-table>
<div class="add" @click="addRow">
+ 添加
</div>
</div>
</div>
</div>
<div class="operate-area">
<el-divider></el-divider>
<div class="operate-bottom">
<st-button @click="cancleAll">取消</st-button>
<st-button @click="saveAll" class="operate-bottom-btn" type="primary">保存</st-button>
</div>
</div>
</div>
</template>
<script>
import { rTimeMin, copyText } from '@/utils/system.js'
import Dialog from '@/helpers/dialog'
export default {
computed: {
// 计算blob大小
getBlobSize() {
return item => {
return '24字节'
}
},
// 是否可预览
ifBlobPreview() {
return item => {
return true
}
},
// 获取图片封面
getBlobimgUrl() {
return item => {
return 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
}
},
// 获取图片列表
getBlobimgUrlList() {
return item => {
return [
'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
]
}
},
// 获取设备状态颜色
getStatusColor() {
return item => {
switch (item) {
case 'online':
return '#67C23A'
case 'offline':
return '#999999'
default:
return '#F56C6C'
}
}
},
// 获取设备状态文字
getStatusText() {
return item => {
switch (item) {
case 'online':
return '在线'
case 'offline':
return '离线'
default:
return '异常'
}
}
},
// 精简文字
simplify() {
return (item, length) => {
if (item && item.length > length) {
return item.substring(0, length) + '...'
}
return item
}
}
},
data() {
return {
dynamicTags: ['标签一', '标签二', '标签三'],
inputVisible: false,
inputValue: '',
tokenList: [
{ p1: { value: '小2', ifEdit: false }, p2: { value: '小2', ifEdit: false }, p3: { value: 'xxx', valueType: 'img', ifEdit: false }, index: 0, configurable: 'edit', editing: false },
{ p1: { value: '小3', ifEdit: false }, p2: { value: '小3', ifEdit: false }, p3: { value: 'fein_fe', valueType: 'a', ifEdit: false }, index: 1, configurable: 'edit', editing: false },
{ p1: { value: '小4', ifEdit: false }, p2: { value: '小4', ifEdit: false }, p3: { value: '122', valueType: 'text', ifEdit: false }, index: 2, configurable: 'edit', editing: false },
],
tokenListCopy: [],
total: 0,
loadingStatus: false,
currentInput: '',
activeTab: 'getParams',
num: 0,
tabs: [
{
label: '查看参数',
name: 'getParams',
},
{
label: '发送请求',
name: 'sendRequest',
},
{
label: '发送指令',
name: 'sendOrder',
},
],
// definitions: [
// {
// label: '字段',
// type: 'slot',
// slotName: 'paramsSlot',
// }, {
// label: '类型',
// type: 'slot',
// slotName: 'typeSlot',
// }, {
// label: '值',
// type: 'slot',
// slotName: 'valueSlot'
// }, {
// label: '操作',
// type: 'slot',
// slotName: 'operate',
// },
// ],
imgUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
imgSrcList: [
'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
],
definitions: [
{
label: '字段',
type: 'slot',
slotName: 'fieldSlot',
}, {
label: '类型',
type: 'slot',
slotName: 'typeSlot',
}, {
label: '值',
type: 'slot',
slotName: 'valueSlot',
}, {
label: '操作',
type: 'slot',
slotName: 'operate',
},
],
}
},
methods: {
rTimeMin,
handleClose(tag) {
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
},
// 切换表格项内容
changeStatus(row, index, item, status) {
if (status) {
this.$set(this, 'currentInput', row[item].value)
} else {
row[item].value = this.currentInput
}
row[item].ifEdit = status
this.$set(this.tokenList, index, row)
this.$nextTick(() => {
this.$refs.myInput && this.$refs.myInput.$children[0].focus()
})
},
linkToTable() {
// this.$router.push({name: ''})
},
updateScope(row, index) {
row.editing = true
this.$set(this.tokenList, index, row)
},
showInput() {
this.inputVisible = true
this.$nextTick(() => {
this.$refs.saveTagInput.$refs.input.focus()
})
},
handleInputConfirm() {
const inputValue = this.inputValue
if (inputValue) {
this.dynamicTags.push(inputValue)
}
this.inputVisible = false
this.inputValue = ''
},
backRow(index) {
const row = this.tokenListCopy[index]
this.$set(this.tokenList, index, JSON.parse(JSON.stringify(row)))
},
async deketeRow(index) {
const confirmDelete = await Dialog.confirm('提示', { message: '确认删除？' })
if (!confirmDelete) return
this.tokenList.splice(index, 1)
this.tokenList.forEach((item, index) => {
item.index = index
})
console.log(this.tokenList, 'new')
},
addRow() {
const newRow = { p1: { value: 'newone', ifEdit: false }, p2: { value: 'newone', ifEdit: false }, p3: { value: 'newone', valueType: 'text', ifEdit: false }, index: this.tokenList.length, configurable: 'add', editing: false }
this.tokenList.push(newRow)
},
cancleAll() {
},
async saveAll() {
this.tokenList.forEach(item => {
item.p1.ifEdit = false
item.p2.ifEdit = false
item.p3.ifEdit = false
item.configurable = 'edit'
item.editing = false
})
this.tokenListCopy = JSON.parse(JSON.stringify(this.tokenList))
}
},
mounted() {
this.tokenListCopy = JSON.parse(JSON.stringify(this.tokenList))
}
}
</script>
<style lang="sass" scoped>
::v-deep .el-table__body-wrapper.is-scrolling-none
max-height: 224px !important
min-height: 100px
.table-box
::v-deep .el-table
max-height: none !important
.list-item:nth-child(1)
margin-top: 10px
.list-item:nth-child(2) .list-item-content
display: flex
.list-item
display: flex
margin-bottom: 10px
.el-tag
margin: 0 5px 5px 0
.tags .el-tag + .el-tag
margin-left: 0
.list-item-title
margin-right: 20px
min-width: 70px
font-family: PingFangSC-Regular
font-size: 14px
color: #666666
letter-spacing: 0
.list-item-content
max-height: 74px
overflow: auto
font-family: PingFangSC-Regular
font-size: 14px
color: #333333
letter-spacing: 0
.tags
display: flex
flex-wrap: wrap
.list-item-input
margin-right: 20px
.list-item-icon
display: flex
align-items: center
& > i
cursor: pointer
.operate-area
margin-top: 5px
flex: 1 0 0
overflow: visible
height: 60px
.operate-bottom
height: calc(100% - 1px)
display: flex
justify-content: flex-end
align-items: center
.el-divider
margin: 0 0
width: calc( 100% + 40px )
position: relative
left: -20px
.add
cursor: pointer
margin-top: 16px
width: 100%
height: 32px
line-height: 32px
border: 1px dashed #D7DAE0
border-radius: 2px
&:hover
background-color: #ecf5ff
color: #409EFF
.box
height: 100%
display: flex
flex-direction: column
justify-content: space-between
min-height: 563px
.wrapper
height: calc(100% - 60px)
display: flex
flex-direction: column
.tags
.el-tag + .el-tag
margin-left: 10px
.button-new-tag
margin-left: 10px
height: 32px
line-height: 30px
padding-top: 0
padding-bottom: 0
.input-new-tag
width: 90px
margin-left: 10px
vertical-align: bottom
.blue-text
color: #409EFF
.link-text, .operate-text
font-family: PingFangSC-Regular
font-size: 14px
color: #409EFF
.operate-text
cursor: pointer
.operate-text-none
color: #333333
.operate-text-delete
color: #F56C6C
.preview-text
line-height: 28px
.preview-img
vertical-align: bottom
margin-left: 10px
::v-deep .any-slot
width: 100%
height: 100%
div
min-height: 20px
.pointer
cursor: pointer
.field-input
width: 200px !important
height: 28px
::v-deep .el-input__inner
height: 28px
.ak-sk
line-height: 32px
.param-template-text
line-height: 32px
</style>
src/views/DeviceList/deviceService/components/SendOrder.vue 0 → 100644
<template>
<div class="box">
<div class="wrapper">
<div class="content">
<div class="content-item">
<span class="content-item-title">{{'服务参数：'}}</span>
<div class="content-table">
<st-table
ref="vTable"
:options="definitions"
:data="{
list: tokenList,
total: total,
}"
:outerLoading="loadingStatus"
:pagination="false"
>
<div slot='fieldSlot' slot-scope="row">
<template v-if="!row.ifEdit">
<span>{{row.type}}</span>
</template>
<template v-else>
<st-inpt v-model="row.type"></st-inpt>
</template>
</div>
<div slot='valueSlot' slot-scope="row">
<template v-if="!row.ifEdit && row.valueType === 'text'">
<span>{{row.value}}</span>
</template>
<template v-else-if="!row.ifEdit && row.valueType === 'a'">
<a href="#">{{row.value}}</a>
</template>
<template v-else-if="!row.ifEdit && row.valueType === 'img'">
<span></span>
<el-image></el-image>
</template>
<template v-else>
<st-inpt v-model="row.value"></st-inpt>
</template>
</div>
<div slot='childOperate' slot-scope="row">
<span class="operate-text" @click="seeServiceParams(row.id)">{{ '撤销覆盖' }}</span>
<span class="operate-text" @click="sendReq(row.id)">{{ '删除' }}</span>
<span class="operate-text">{{'-'}}</span>
</div>
</st-table>
</div>
</div>
<div class="content-item">
<span class="content-item-title">{{'指令：'}}</span>
<st-input type="textarea" placeholder="请输入Json" class="content-item-one"></st-input>
</div>
</div>
<st-button type="primary" width="80px" class="sendBtn">{{'发送'}}</st-button>
</div>
</div>
</template>
<script>
import { rTimeMin, copyText } from '@/utils/system.js'
export default {
computed: {
// 获取设备状态颜色
getStatusColor() {
return item => {
switch (item) {
case 'online':
return '#67C23A'
case 'offline':
return '#999999'
default:
return '#F56C6C'
}
}
},
// 获取设备状态文字
getStatusText() {
return item => {
switch (item) {
case 'online':
return '在线'
case 'offline':
return '离线'
default:
return '异常'
}
}
},
// 精简文字
simplify() {
return (item, length) => {
if (item && item.length > length) {
return item.substring(0, length) + '...'
}
return item
}
}
},
data() {
return {
dynamicTags: ['标签一', '标签二', '标签三'],
inputVisible: false,
inputValue: '',
tokenList: [
{ p1: '小1' },
],
total: 0,
loadingStatus: false,
activeTab: 'getParams',
tabs: [
{
label: '查看参数',
name: 'getParams',
},
{
label: '发送请求',
name: 'sendRequest',
},
{
label: '发送指令',
name: 'sendOrder',
},
],
// definitions: [
// {
// label: '字段',
// type: 'slot',
// slotName: 'paramsSlot',
// }, {
// label: '类型',
// type: 'slot',
// slotName: 'typeSlot',
// }, {
// label: '值',
// type: 'slot',
// slotName: 'valueSlot'
// }, {
// label: '操作',
// type: 'slot',
// slotName: 'operate',
// },
// ],
definitions: [
{
label: '服务',
render: 'p1'
}, {
label: '编号',
render: 'p2'
}, {
label: '端口',
render: 'p3'
}, {
label: '描述',
render: 'p3'
}, {
label: '操作',
type: 'slot',
slotName: 'operate',
},
],
}
},
methods: {
rTimeMin,
handleClose(tag) {
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
},
showInput() {
this.inputVisible = true
this.$nextTick(_ => {
this.$refs.saveTagInput.$refs.input.focus()
})
},
handleInputConfirm() {
const inputValue = this.inputValue
if (inputValue) {
this.dynamicTags.push(inputValue)
}
this.inputVisible = false
this.inputValue = ''
}
}
}
</script>
<style lang="sass" scoped>
::v-deep .el-table__body-wrapper.is-scrolling-none
max-height: 224px !important
.table-box
::v-deep .el-table
max-height: none !important
.box
height: 100%
display: flex
flex-direction: column
justify-content: space-between
min-height: 563px
.wrapper
height: calc(100% - 60px)
display: flex
flex-direction: column
.content-item
margin-bottom: 24px
display: flex
.content-item-one
width: 609px !important
height: 100px
.content-item-title
margin: auto 0
width: 108px
.content-table
width: calc(100% - 108px)
.blue-text
color: #409EFF
.sendBtn
margin-left: 108px
</style>
src/views/DeviceList/deviceService/components/SendRequest.vue 0 → 100644
<template>
<div class="box">
<div class="wrapper">
<div class="content">
<div class="content-item">
<span class="content-item-title">{{'服务参数：'}}</span>
<div class="content-table">
<st-table
ref="vTable"
:options="definitions"
:data="{
list: tokenList,
total: total,
}"
:outerLoading="loadingStatus"
:pagination="false"
>
<div slot='fieldSlot' slot-scope="row">
<template v-if="!row.ifEdit">
<span>{{row.type}}</span>
</template>
<template v-else>
<st-inpt v-model="row.type"></st-inpt>
</template>
</div>
<div slot='valueSlot' slot-scope="row">
<template v-if="!row.ifEdit && row.valueType === 'text'">
<span>{{row.value}}</span>
</template>
<template v-else-if="!row.ifEdit && row.valueType === 'a'">
<a href="#">{{row.value}}</a>
</template>
<template v-else-if="!row.ifEdit && row.valueType === 'img'">
<span></span>
<el-image></el-image>
</template>
<template v-else>
<st-inpt v-model="row.value"></st-inpt>
</template>
</div>
<div slot='childOperate' slot-scope="row">
<span class="operate-text" @click="seeServiceParams(row.id)">{{ '撤销覆盖' }}</span>
<span class="operate-text" @click="sendReq(row.id)">{{ '删除' }}</span>
<span class="operate-text">{{'-'}}</span>
</div>
</st-table>
</div>
</div>
<div class="content-item">
<span class="content-item-title">{{'请求：'}}</span>
<st-select
size="small"
width="200px"
class="content-select"
>
</st-select>
<st-input width="400px" placeholder="输入URL" class="content-item-url"></st-input>
<st-button type="primary" width="80px">{{'发送'}}</st-button>
</div>
<div class="content-item">
<span class="content-item-title">{{'Header：'}}</span>
<div class="content-table-header">
<st-table
class="headerTable"
ref="headerTable"
:options="headDefinitions"
:data="{
list: headTokenList,
}"
:pagination="false"
>
<div slot='keySlot' slot-scope="scope">
<template>
<div v-if="!(scope.key && scope.key.ifEdit)" @click="changeStatus(scope, scope.index, 'key', true)" class="pointer">{{scope.key ? scope.key.value : ''}}</div>
<st-input ref="myInput" @change="updateScope(scope, scope.index)" @blur="changeStatus(scope, scope.index, 'key', false)" @keyup.enter.native="changeStatus(scope, scope.index, 'key', false)" v-model="currentInput" v-else class="field-input"></st-input>
</template>
</div>
<div slot='valueSlot' slot-scope="scope">
<template>
<div v-if="!(scope.value && scope.value.ifEdit)" @click="changeStatus(scope, scope.index, 'value', true)" class="pointer">{{scope.value ? scope.value.value : ''}}</div>
<st-input ref="myInput" @change="updateScope(scope, scope.index)" @blur="changeStatus(scope, scope.index, 'value', false)" @valueup.enter.native="changeStatus(scope, scope.index, 'value', false)" v-model="currentInput" v-else class="field-input"></st-input>
</template>
</div>
</st-table>
<div class="add" @click="addRow">
+ 添加
</div>
</div>
</div>
<div class="content-item">
<span class="content-item-title">{{'Body：'}}</span>
<st-input v-model="bodyValue" type="textarea" placeholder="请输入" class="content-item-body"></st-input>
</div>
<div class="content-item">
<span class="content-item-title">{{'Response：'}}</span>
<st-input v-model="resValue" type="textarea" placeholder="请输入" class="content-item-body"></st-input>
</div>
</div>
</div>
</div>
</template>
<script>
import { rTimeMin, copyText } from '@/utils/system.js'
export default {
computed: {
// 获取设备状态颜色
getStatusColor() {
return item => {
switch (item) {
case 'online':
return '#67C23A'
case 'offline':
return '#999999'
default:
return '#F56C6C'
}
}
},
// 获取设备状态文字
getStatusText() {
return item => {
switch (item) {
case 'online':
return '在线'
case 'offline':
return '离线'
default:
return '异常'
}
}
},
// 精简文字
simplify() {
return (item, length) => {
if (item && item.length > length) {
return item.substring(0, length) + '...'
}
return item
}
}
},
data() {
return {
bodyValue: '',
resValue: '',
currentInput: '',
dynamicTags: ['标签一', '标签二', '标签三'],
inputVisible: false,
inputValue: '',
tokenList: [
{ key: { value: 'A', ifEdit: false }, value: { value: 'B', ifEdit: false } },
{ key: { value: 'C', ifEdit: false }, value: { value: 'D', ifEdit: false } },
{ key: { value: 'E', ifEdit: false }, value: { value: 'F', ifEdit: false } },
{ key: { value: 'E', ifEdit: false }, value: { value: 'F', ifEdit: false } },
{ key: { value: 'E', ifEdit: false }, value: { value: 'F', ifEdit: false } },
{ key: { value: 'E', ifEdit: false }, value: { value: 'F', ifEdit: false } },
{ key: { value: 'E', ifEdit: false }, value: { value: 'F', ifEdit: false } },
{ key: { value: 'E', ifEdit: false }, value: { value: 'F', ifEdit: false } },
{ key: { value: 'E', ifEdit: false }, value: { value: 'F', ifEdit: false } },
{ key: { value: 'E', ifEdit: false }, value: { value: 'F', ifEdit: false } },
{ key: { value: 'E', ifEdit: false }, value: { value: 'F', ifEdit: false } },
{ key: { value: 'E', ifEdit: false }, value: { value: 'F', ifEdit: false } },
],
headDefinitions: [
{
label: '键',
type: 'slot',
slotName: 'keySlot'
},
{
label: '值',
type: 'slot',
slotName: 'valueSlot'
}
],
headTokenList: [
{ key: { value: 'A', ifEdit: false }, value: { value: 'B', ifEdit: false } },
{ key: { value: 'C', ifEdit: false }, value: { value: 'D', ifEdit: false } },
{ key: { value: 'E', ifEdit: false }, value: { value: 'F', ifEdit: false } },
{ key: { value: 'E', ifEdit: false }, value: { value: 'F', ifEdit: false } },
{ key: { value: 'E', ifEdit: false }, value: { value: 'F', ifEdit: false } },
{ key: { value: 'E', ifEdit: false }, value: { value: 'F', ifEdit: false } },
{ key: { value: 'E', ifEdit: false }, value: { value: 'F', ifEdit: false } },
{ key: { value: 'E', ifEdit: false }, value: { value: 'F', ifEdit: false } },
],
total: 0,
loadingStatus: false,
activeTab: 'getParams',
tabs: [
{
label: '查看参数',
name: 'getParams',
},
{
label: '发送请求',
name: 'sendRequest',
},
{
label: '发送指令',
name: 'sendOrder',
},
],
// definitions: [
// {
// label: '字段',
// type: 'slot',
// slotName: 'paramsSlot',
// }, {
// label: '类型',
// type: 'slot',
// slotName: 'typeSlot',
// }, {
// label: '值',
// type: 'slot',
// slotName: 'valueSlot'
// }, {
// label: '操作',
// type: 'slot',
// slotName: 'operate',
// },
// ],
definitions: [
{
label: '服务',
render: 'p1'
}, {
label: '编号',
render: 'p2'
}, {
label: '端口',
render: 'p3'
}, {
label: '描述',
render: 'p3'
}, {
label: '操作',
type: 'slot',
slotName: 'operate',
},
],
}
},
methods: {
rTimeMin,
handleClose(tag) {
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
},
showInput() {
this.inputVisible = true
this.$nextTick(_ => {
this.$refs.saveTagInput.$refs.input.focus()
})
},
handleInputConfirm() {
const inputValue = this.inputValue
if (inputValue) {
this.dynamicTags.push(inputValue)
}
this.inputVisible = false
this.inputValue = ''
},
// 切换表格项内容
changeStatus(row, index, item, status) {
if (status) {
this.$set(this, 'currentInput', row[item].value)
} else {
row[item].value = this.currentInput
}
row[item].ifEdit = status
this.$set(this.tokenList, index, row)
this.$nextTick(() => {
this.$refs.myInput && this.$refs.myInput.$children[0].focus()
})
},
updateScope(row, index) {
row.editing = true
this.$set(this.tokenList, index, row)
},
addRow() {
const newRow = { key: { value: 'newone', ifEdit: false }, value: { value: 'newone', ifEdit: false } }
this.headTokenList.push(newRow)
},
}
}
</script>
<style lang="sass" scoped>
::v-deep .el-table__body-wrapper.is-scrolling-none
max-height: 224px !important
.table-box
height: auto
::v-deep .el-table
max-height: none !important
.box
height: 100%
display: flex
flex-direction: column
justify-content: space-between
min-height: 563px
.wrapper
height: calc(100% - 60px)
display: flex
flex-direction: column
.content-item
margin-bottom: 24px
display: flex
.content-table-header
width: 610px
.content-select
margin-right: 10px
.content-item-url
margin-right: 10px
width: 400px !important
height: 32px
.content-item-body
width: 609px !important
height: 100px
.content-item-title
margin: 0 0
width: 108px
.content-table
width: calc(100% - 108px)
.blue-text
color: #409EFF
.sendBtn
margin-left: 108px
.field-input
width: 200px !important
height: 28px
::v-deep .el-input__inner
height: 28px
.headerTable
::v-deep.el-table__row
height: 48px
.add
cursor: pointer
margin-top: 16px
width: 100%
height: 32px
line-height: 32px
border: 1px dashed #D7DAE0
border-radius: 2px
&:hover
background-color: #ecf5ff
color: #409EFF
</style>
src/views/DeviceList/deviceService/deviceServiceIndex.vue 0 → 100644
<template>
<div class="data-list-common flex column main-content flex-1">
<div class="header">
<span class="title">{{'设备列表'}}</span>
</div>
<div class="page-nav">
<div class="page-nav-title">
<span>{{'AIPS'}}</span>
</div>
<st-table
ref="vTable"
:options="definitions"
:data="{
list: tokenList,
total: total,
}"
:outerLoading="loadingStatus"
:pagination="false"
>
<div slot='codeSlot' slot-scope="row">
<span>{{ simplify(row.code, 3) }}</span>
<i class="iconfont icon-fuzhi icon-fuzhi-text" @click="copyText(row.code)"></i>
</div>
<div slot='status' slot-scope="row">
<span class="circleStatus" :style="{color: getStatusColor(row.status)}">{{ getStatusText(row.status) }}</span>
</div>
<div slot='structureSlot' slot-scope="row">
<span>{{ simplify(row.structure, 6) }}</span>
</div>
<div slot='registerTimeSlot' slot-scope="row">
<span>{{ rTimeMin(row.registerTime) }}</span>
</div>
<div slot='tagsSlot' slot-scope="row">
<el-tooltip class="item" effect="dark" :content="row.tags ? row.tags.join('、') : ''" placement="top">
<!-- 必须要套一层 -->
<div>
<template v-for="(item, index) in row.tags">
<el-tag v-if="[0, 1].indexOf(index) !== -1" :key="index" class="label label-primary table-label">{{ simplify(item, 7) }}</el-tag>
</template>
<span v-if="(row.tags && row.tags.length) > 10">共: {{(row.tags && row.tags.length) ? row.tags.length : 0}} 条</span>
</div>
</el-tooltip>
</div>
<div slot='servicesSlot' slot-scope="row">
<el-tooltip class="item" effect="dark" :content="row.services ? row.services.join('、') : ''" placement="top">
<!-- 必须要套一层 -->
<div>
<template v-for="(item, index) in row.services">
<span v-if="[0, 2].indexOf(index) !== -1" :key="index" class="service-item">{{ simplify(item, 4) }}</span>
</template>
<span v-if="(row.services && row.services.length) > 10">共: {{(row.services && row.services.length) ? row.services.length : 0}} 条</span>
</div>
</el-tooltip>
</div>
<div slot='systemSlot' slot-scope="row">
<span>{{ simplify(row.system, 7) }}</span>
</div>
<div slot='operate' slot-scope="row">
<span class="operate-text" @click="delete(row.id)">{{'详情'}}</span>
</div>
</st-table>
</div>
<div class="page-content">
<div class="table-list">
<st-tabs :tabs="tabs" v-model="activeTab">
<template v-slot:[activeTab]>
<components :is="activeTab" ref="dataTable"></components>
</template>
</st-tabs>
</div>
</div>
</div>
</template>
<script>
import getParams from './components/GetParams.vue'
import sendRequest from './components/SendRequest.vue'
import sendOrder from './components/SendOrder.vue'
import { rTimeMin, copyText } from '@/utils/system.js'
export default {
components: {
getParams,
sendRequest,
sendOrder
},
computed: {
// 获取设备状态颜色
getStatusColor() {
return item => {
switch (item) {
case 'online':
return '#67C23A'
case 'offline':
return '#999999'
default:
return '#F56C6C'
}
}
},
// 获取设备状态文字
getStatusText() {
return item => {
switch (item) {
case 'online':
return '在线'
case 'offline':
return '离线'
default:
return '异常'
}
}
},
// 精简文字
simplify() {
return (item, length) => {
if (item && item.length > length) {
return item.substring(0, length) + '...'
}
return item
}
}
},
data() {
return {
tokenList: [
{ name: '小1', code: '110123124325' },
],
total: 0,
loadingStatus: false,
activeTab: 'getParams',
tabs: [
{
label: '查看参数',
name: 'getParams',
},
{
label: '发送请求',
name: 'sendRequest',
},
{
label: '发送指令',
name: 'sendOrder',
},
],
definitions: [
{
label: '编号',
type: 'slot',
slotName: 'codeSlot',
}, {
label: '状态',
type: 'slot',
slotName: 'status',
statusColor: item => {
switch (item.status) {
case 'online':
return '#67C23A'
case 'offline':
return '#999999'
default:
return '#F56C6C'
}
}
}, {
label: '架构',
type: 'slot',
slotName: 'structureSlot'
}, {
label: '系统',
type: 'slot',
slotName: 'systemSlot'
}, {
label: 'IP',
render: 'IP'
}, {
label: '注册时间',
type: 'slot',
slotName: 'registerTimeSlot'
}, {
label: '标签',
type: 'slot',
slotName: 'tagsSlot'
}, {
label: '服务',
type: 'slot',
slotName: 'servicesSlot'
}, {
label: '操作',
type: 'slot',
slotName: 'operate',
},
],
}
},
methods: {
rTimeMin
}
}
</script>
<style lang="sass" scoped>
.icon-fuzhi-text
margin-left: 6px
color: #409EFF
cursor: pointer
.operate-text
font-family: PingFangSC-Regular
font-size: 14px
color: #409EFF
margin-right: 20px
cursor: pointer
.page-nav
flex-direction: column
.table-box
width: 100%
::v-deep .el-table
max-height: fit-content !important
.page-nav-title
text-align: left
margin-bottom: 10px
font-family: PingFangSC-Regular, 微软雅黑
font-size: 14px
color: #333
font-weight: bold
.page-content
padding-bottom: 0px
margin-top: 22px
flex: 1 0 0
overflow-y: visible
overflow-x: hidden
.table-list
flex: 1 0 0 !important
overflow: visible !important
.el-tabs
height: 100%
display: -webkit-box
display: -ms-flexbox
display: flex
-webkit-box-orient: vertical
-webkit-box-direction: normal
-ms-flex-direction: column
flex-direction: column
::v-deep.el-tabs__content
flex: 1 0 0
overflow: visible
.el-tab-pane
height: 100%
overflow: visible
</style>
src/views/DeviceList/index.vue
<template>
<div class="data-list-common flex column main-content flex-1">
<div class="header">
<span class="title">{{'设备列表'}}</span>
</div>
<div class="page-nav">
<div class="search-fields" :class="{'search-fields-collapse': isCollapse}">
<div class="flex-left">
<div class="search-item">
<span class="search-title">状态:</span>
<el-checkbox-group v-model="search.checkList" class="inline-div">
<el-checkbox label="1" class="check-title">在线</el-checkbox>
<el-checkbox label="2" class="check-title">离线</el-checkbox>
<el-checkbox label="3" class="check-title">异常</el-checkbox>
</el-checkbox-group>
</div>
<div v-if="!isCollapse">
<div class="search-item">
<span class="search-title">架构:</span>
<st-input :width="'240px'" class="search-item-margin" v-model="search.structure"></st-input>
<span class="search-title">系统:</span>
<st-input :width="'240px'" v-model="search.system"></st-input>
</div>
<div class="search-item no-wrap">
<span class="search-title">注册时间:</span>
<el-date-picker
class="date-picker search-item-margin"
unlink-panels
:default-time="['00:00:00', '23:59:59']"
type="datetimerange"
format="yyyy-MM-dd HH:mm"
value-format="timestamp"
size="small"
style="padding-top:2px"
prefix-icon=' '
range-separator="至"
start-placeholder="选择时间"
v-model="search.registerTime"
end-placeholder="选择时间"
suffix-icon="el-icon-date">
</el-date-picker>
<span class="search-title">上线时间:</span>
<el-date-picker
v-model="search.onlineTime"
class="date-picker search-item-margin"
unlink-panels
:default-time="['00:00:00', '23:59:59']"
type="datetimerange"
format="yyyy-MM-dd HH:mm"
value-format="timestamp"
size="small"
style="padding-top:2px"
prefix-icon=' '
range-separator="至"
start-placeholder="选择时间"
end-placeholder="选择时间">
</el-date-picker>
</div>
<div class="search-item">
<span class="search-title">标签:</span>
<st-select
size="small"
width="240px"
class="contents"
multiple
filterable
:options="tagList"
v-model="search.tags"
>
</st-select>
<span class="search-title">服务:</span>
<st-select
size="small"
width="240px"
class="contents"
multiple
filterable
:options="serviceList"
v-model="search.services"
>
</st-select>
</div>
</div>
</div>
<div class="flex-right-nav">
<span class="collapse-btn" :class="{'middle-collapse-btn': isCollapse}">
<span class="collapse-text">{{isCollapse ? '展开' : '收起筛选'}}</span>
<i :class="isCollapse ? 'el-icon-arrow-right' : 'el-icon-arrow-up'" class="clickable" @click="collapseSearch"></i>
</span>
<st-button v-if="!isCollapse" @click="reset">重置</st-button>
</div>
</div>
</div>
<div class="page-content">
<div class="content-header flex-right-content">
<nameFilter
placeholder="请输入搜索内容">
</nameFilter>
</div>
<div class="table-list">
<div class="list-content">
<st-table
ref="vTable"
:options="definitions"
:data="{
list: tokenList,
total: total,
}"
:outerLoading="loadingStatus"
:doubleTable="true"
:childOptions="childDefinitions"
>
<div slot='codeSlot' slot-scope="row">
<span>{{ simplify(row.code, 3) }}</span>
<i class="iconfont icon-fuzhi icon-fuzhi-text" @click="copyText(row.code)"></i>
</div>
<div slot='status' slot-scope="row">
<span class="circleStatus" :style="{color: getStatusColor(row.status)}">{{ getStatusText(row.status) }}</span>
</div>
<div slot='structureSlot' slot-scope="row">
<span>{{ simplify(row.structure, 6) }}</span>
</div>
<div slot='registerTimeSlot' slot-scope="row">
<span>{{ rTimeMin(row.registerTime) }}</span>
</div>
<div slot='tagsSlot' slot-scope="row">
<el-tooltip class="item" effect="dark" :content="row.tags ? row.tags.join('、') : ''" placement="top">
<!-- 必须要套一层 -->
<div>
<template v-for="(item, index) in row.tags">
<el-tag v-if="[0, 1].indexOf(index) !== -1" :key="index" class="label label-primary table-label">{{ simplify(item, 7) }}</el-tag>
</template>
<span v-if="(row.tags && row.tags.length) > 10">共: {{(row.tags && row.tags.length) ? row.tags.length : 0}} 条</span>
</div>
</el-tooltip>
</div>
<div slot='servicesSlot' slot-scope="row">
<el-tooltip class="item" effect="dark" :content="row.services ? row.services.join('、') : ''" placement="top">
<!-- 必须要套一层 -->
<div>
<template v-for="(item, index) in row.services">
<span v-if="[0, 2].indexOf(index) !== -1" :key="index" class="service-item">{{ simplify(item, 4) }}</span>
</template>
<span v-if="(row.services && row.services.length) > 10">共: {{(row.services && row.services.length) ? row.services.length : 0}} 条</span>
</div>
</el-tooltip>
</div>
<div slot='systemSlot' slot-scope="row">
<span>{{ simplify(row.system, 7) }}</span>
</div>
<div slot='operate' slot-scope="row">
<span class="operate-text" @click="detail(row.id)">{{ '详情 '}}</span>
</div>
<!-- eslint-disable-next-line -->
<div slot='childServiceSlot' slot-scope="row">
<span>{{ row.service }}</span>
</div>
<div slot='childCodeSlot' slot-scope="row">
<span>{{ row.code }}</span>
</div>
<div slot='portSlot' slot-scope="row">
<span>{{ row.port }}</span>
</div>
<div slot='descSlot' slot-scope="row">
<span>{{ simplify(row.desc, 10) }}</span>
</div>
<div slot='childOperate' slot-scope="row">
<span class="operate-text" @click="seeServiceParams(row.id)">{{ '查看参数' }}</span>
<span class="operate-text" @click="sendReq(row.id)">{{ '发送请求' }}</span>
<span class="operate-text" @click="sendOrder(row.id)">{{ '发送指令' }}</span>
</div>
</st-table>
</div>
</div>
</div>
</div>
</template>
<script>
import browserStorage from '@/services/local-storage'
import Dialog from '@/helpers/dialog'
import validate from '@/components/seeta-ui/seeta-form/validator'
import { rTimeMin, copyText } from '@/utils/system.js'
export default {
data() {
return {
// 当前页
pi: 0,
// 当前页size
ps: 10,
// 控制遮罩
loadingStatus: false,
// 搜索栏折叠
isCollapse: true,
time2: '',
// 表格数据
tokenList: [
{ name: '小1', code: '110123124325', child: { service: '11', code: '123', port: '1234', desc: '这是服务1' } },
],
total: 1,
// 编辑和添加表单
form: {
},
childDefinitions: [
{
label: '服务',
type: 'slot',
slotName: 'childServiceSlot'
}, {
label: '编号',
type: 'slot',
slotName: 'childCodeSlot'
}, {
label: '端口',
type: 'slot',
slotName: 'portSlot'
}, {
label: '描述',
type: 'slot',
slotName: 'descSlot'
}, {
label: '操作',
type: 'slot',
slotName: 'childOperate',
width: 120
},
],
definitions: [
{
label: '序号',
render: 'orderNumber',
}, {
label: '编号',
type: 'slot',
slotName: 'codeSlot'
}, {
label: '状态',
type: 'slot',
slotName: 'status',
statusColor: item => {
switch (item.status) {
case 'online':
return '#67C23A'
case 'offline':
return '#999999'
default:
return '#F56C6C'
}
}
}, {
label: '架构',
type: 'slot',
slotName: 'structureSlot'
}, {
label: '系统',
type: 'slot',
slotName: 'systemSlot'
}, {
label: 'IP',
render: 'IP'
}, {
label: '注册时间',
type: 'slot',
slotName: 'registerTimeSlot'
}, {
label: '标签',
type: 'slot',
slotName: 'tagsSlot'
}, {
label: '服务',
type: 'slot',
slotName: 'servicesSlot'
}, {
label: '操作',
type: 'slot',
slotName: 'operate',
},
],
/* 搜索栏条件 */
search: {
checkList: []
},
tagList: [{ label: '标签一', value: 0 }, { label: '标签二', value: 1 }, { label: '标签三', value: 2 }, { label: '标签四', value: 3 }],
serviceList: [{ label: '标签一', value: 0 }, { label: '标签二', value: 1 }, { label: '标签三', value: 2 }, { label: '标签四', value: 3 }],
}
},
computed: {
// 获取设备状态颜色
getStatusColor() {
return item => {
switch (item) {
case 'online':
return '#67C23A'
case 'offline':
return '#999999'
default:
return '#F56C6C'
}
}
},
// 获取设备状态文字
getStatusText() {
return item => {
switch (item) {
case 'online':
return '在线'
case 'offline':
return '离线'
default:
return '异常'
}
}
},
// 精简文字
simplify() {
return (item, length) => {
if (item && item.length > length) {
return item.substring(0, length) + '...'
}
return item
}
}
},
methods: {
rTimeMin,
copyText,
seeServiceParams(id) {
this.$router.push({ name: 'device-service' })
},
sendReq(id) {
},
sendOrder(id) {
},
collapseSearch() {
this.isCollapse = !this.isCollapse
this.$refs.vTable.clickCollapse()
this.$nextTick(() => {
const icon = [...document.getElementsByClassName('el-date-editor')]
icon.forEach(item => {
const img = document.createElement('img')
img.style.width = '14px'
img.style.height = '14px'
img.src = require('@assets/images/icon-rili.png')
item.appendChild(img)
})
})
},
reset() {
this.search = {
checkList: []
}
},
// 跳转到设备详情页面
detail(id) {
this.$router.push({ name: 'device-detail' })
}
},
watch: {
// 监听route的改变进行pi ,ps的改变
'$route.query': {
handler(newName, oldName) {
},
deep: true,
}
},
mounted() {
},
destroyed() {
},
components: {
nameFilter: () => import(/* webpackChunkName: "container" */ '@/components/list-filter/name.vue'),
}
}
</script>
<style lang="sass" scoped>
.page-nav
font-family: PingFangSC-Regular
font-size: 14px
color: #666666
letter-spacing: 0
padding: 26px 20px 20px
.search-title
margin-right: 10px
.clickable
cursor: pointer
.no-wrap
white-space: nowrap
.inline-div
display: inline-block
.circleStatus
margin-left: 6px
.icon-fuzhi-text
margin-left: 6px
color: #409EFF
cursor: pointer
.search-item
text-align: left
.search-item-margin
margin-right: 20px
.search-item:not(.search-item:nth-child(1))
margin-top: 14px
.collapse-btn
font-family: PingFangSC-Regular
font-size: 14px
color: #409EFF
.collapse-text
margin-right: 5px
.search-fields
height: 164px
width: 100%
display: flex !important
flex-direction: row
justify-content: space-between
.search-fields-collapse
max-height: 23px
.flex-left
display: flex
flex-direction: column
justify-content: space-between
.flex-right-nav
margin-left: -88px
display: flex
justify-content: space-between
flex-direction: column
.flex-right-content
display: flex
justify-content: flex-end
.check-title
font-family: PingFangSC-Regular
font-size: 14px
color: #333333
letter-spacing: 0
.operate-text
font-family: PingFangSC-Regular
font-size: 14px
color: #409EFF
margin-right: 20px
cursor: pointer
::v-deep .el-checkbox
margin-right: 15px
.el-checkbox__input
width: 14px
height: 14px
top: -1px
margin-right: 10px
.el-checkbox__label
padding-left: 0px
::v-deep .el-range-separator
font-family: PingFangSC-Regular
font-size: 14px
color: #333333
letter-spacing: 0
::v-deep .el-range-input
font-family: PingFangSC-Regular
font-size: 14px
color: #333333
letter-spacing: 0
&::placeholder
font-family: PingFangSC-Regular
font-size: 14px
color: #999999
letter-spacing: 0
::v-deep
& .el-table__expand-column .cell
padding: 0 20px !important
& .table-box .el-table th .cell, .table-box .el-table .el-table__body tr .cell
padding-left: 0
& .el-table__expanded-cell .cell
padding-left: 48px !important
.table-box
height: 100%
::v-deep .el-table
.cell
text-overflow: initial
</style>
src/views/ServiceList/index.vue
<template>
<div class="data-list-common flex column main-content flex-1">
<div class="header">
<span class="title">{{'设备列表'}}</span>
</div>
<div class="page-nav">
<div class="search-fields" :class="{'search-fields-collapse': isCollapse}">
<div class="flex-left">
<div class="search-item">
<span class="search-title">状态:</span>
<el-checkbox-group v-model="search.checkList" class="inline-div">
<el-checkbox label="1" class="check-title">在线</el-checkbox>
<el-checkbox label="2" class="check-title">离线</el-checkbox>
<el-checkbox label="3" class="check-title">异常</el-checkbox>
</el-checkbox-group>
</div>
<div v-if="!isCollapse">
<div class="search-item">
<span class="search-title">架构:</span>
<st-input :width="'240px'" class="search-item-margin" v-model="search.structure"></st-input>
<span class="search-title">系统:</span>
<st-input :width="'240px'" v-model="search.system"></st-input>
</div>
<div class="search-item no-wrap">
<span class="search-title">注册时间:</span>
<el-date-picker
class="date-picker search-item-margin"
unlink-panels
:default-time="['00:00:00', '23:59:59']"
type="datetimerange"
format="yyyy-MM-dd HH:mm"
value-format="timestamp"
size="small"
style="padding-top:2px"
prefix-icon=' '
range-separator="至"
start-placeholder="选择时间"
v-model="search.registerTime"
end-placeholder="选择时间"
suffix-icon="el-icon-date">
</el-date-picker>
<span class="search-title">上线时间:</span>
<el-date-picker
v-model="search.onlineTime"
class="date-picker search-item-margin"
unlink-panels
:default-time="['00:00:00', '23:59:59']"
type="datetimerange"
format="yyyy-MM-dd HH:mm"
value-format="timestamp"
size="small"
style="padding-top:2px"
prefix-icon=' '
range-separator="至"
start-placeholder="选择时间"
end-placeholder="选择时间">
</el-date-picker>
</div>
<div class="search-item">
<span class="search-title">标签:</span>
<st-select
size="small"
width="240px"
class="contents"
multiple
filterable
:options="tagList"
v-model="search.tags"
>
</st-select>
<span class="search-title">服务:</span>
<st-select
size="small"
width="240px"
class="contents"
multiple
filterable
:options="serviceList"
v-model="search.services"
>
</st-select>
</div>
</div>
</div>
<div class="flex-right-nav">
<span class="collapse-btn" :class="{'middle-collapse-btn': isCollapse}">
<span class="collapse-text">{{isCollapse ? '展开' : '收起筛选'}}</span>
<i :class="isCollapse ? 'el-icon-arrow-right' : 'el-icon-arrow-up'" class="clickable" @click="collapseSearch"></i>
</span>
<st-button v-if="!isCollapse" @click="reset">重置</st-button>
</div>
</div>
</div>
<div class="page-content">
<div class="content-header flex-right-content">
<nameFilter
placeholder="请输入搜索内容">
</nameFilter>
</div>
<div class="table-list">
<div class="list-content">
<st-table
ref="vTable"
:options="definitions"
:data="{
list: tokenList,
total: total,
}"
:outerLoading="loadingStatus"
>
<div slot='codeSlot' slot-scope="row">
<span>{{ simplify(row.code, 3) }}</span>
<i class="iconfont icon-fuzhi icon-fuzhi-text" @click="copyText(row.code)"></i>
</div>
<div slot='status' slot-scope="row">
<span class="circleStatus" :style="{color: getStatusColor(row.status)}">{{ getStatusText(row.status) }}</span>
</div>
<div slot='structureSlot' slot-scope="row">
<span>{{ simplify(row.structure, 6) }}</span>
</div>
<div slot='registerTimeSlot' slot-scope="row">
<span>{{ rTimeMin(row.registerTime) }}</span>
</div>
<div slot='tagsSlot' slot-scope="row">
<el-tooltip class="item" effect="dark" :content="row.tags ? row.tags.join('、') : ''" placement="top">
<!-- 必须要套一层 -->
<div>
<template v-for="(item, index) in row.tags">
<el-tag v-if="[0, 1].indexOf(index) !== -1" :key="index" class="label label-primary table-label">{{ simplify(item, 7) }}</el-tag>
</template>
<span v-if="(row.tags && row.tags.length) > 10">共: {{(row.tags && row.tags.length) ? row.tags.length : 0}} 条</span>
</div>
</el-tooltip>
</div>
<div slot='servicesSlot' slot-scope="row">
<el-tooltip class="item" effect="dark" :content="row.services ? row.services.join('、') : ''" placement="top">
<!-- 必须要套一层 -->
<div>
<template v-for="(item, index) in row.services">
<span v-if="[0, 2].indexOf(index) !== -1" :key="index" class="service-item">{{ simplify(item, 4) }}</span>
</template>
<span v-if="(row.services && row.services.length) > 10">共: {{(row.services && row.services.length) ? row.services.length : 0}} 条</span>
</div>
</el-tooltip>
</div>
<div slot='systemSlot' slot-scope="row">
<span>{{ simplify(row.system, 7) }}</span>
</div>
<div slot='operate' slot-scope="row">
<span class="operate-text" @click="detail(row.id)">{{ '详情 '}}</span>
<span class="operate-text" @click="seeServiceParams(row.id)">{{ '查看参数' }}</span>
<span class="operate-text" @click="sendReq(row.id)">{{ '发送请求' }}</span>
<span class="operate-text" @click="sendOrder(row.id)">{{ '发送指令' }}</span>
</div>
</st-table>
</div>
</div>
</div>
</div>
</template>
<script>
import browserStorage from '@/services/local-storage'
import Dialog from '@/helpers/dialog'
import validate from '@/components/seeta-ui/seeta-form/validator'
import { rTimeMin, copyText } from '@/utils/system.js'
export default {
data() {
return {
// 当前页
pi: 0,
// 当前页size
ps: 10,
// 控制遮罩
loadingStatus: false,
// 搜索栏折叠
isCollapse: true,
time2: '',
// 表格数据
tokenList: [
{ name: '小1', code: '110123124325', child: { service: '11', code: '123', port: '1234', desc: '这是服务1' } },
],
total: 1,
// 编辑和添加表单
form: {
},
childDefinitions: [
{
label: '服务',
type: 'slot',
slotName: 'childServiceSlot'
}, {
label: '编号',
type: 'slot',
slotName: 'childCodeSlot'
}, {
label: '端口',
type: 'slot',
slotName: 'portSlot'
}, {
label: '描述',
type: 'slot',
slotName: 'descSlot'
}, {
label: '操作',
type: 'slot',
slotName: 'childOperate',
width: 120
},
],
definitions: [
{
label: '序号',
render: 'orderNumber',
}, {
label: '编号',
type: 'slot',
slotName: 'codeSlot'
}, {
label: '状态',
type: 'slot',
slotName: 'status',
statusColor: item => {
switch (item.status) {
case 'online':
return '#67C23A'
case 'offline':
return '#999999'
default:
return '#F56C6C'
}
}
}, {
label: '架构',
type: 'slot',
slotName: 'structureSlot'
}, {
label: '系统',
type: 'slot',
slotName: 'systemSlot'
}, {
label: 'IP',
render: 'IP'
}, {
label: '注册时间',
type: 'slot',
slotName: 'registerTimeSlot'
}, {
label: '标签',
type: 'slot',
slotName: 'tagsSlot'
}, {
label: '服务',
type: 'slot',
slotName: 'servicesSlot'
}, {
label: '操作',
type: 'slot',
slotName: 'operate',
width: 300
},
],
/* 搜索栏条件 */
search: {
checkList: []
},
tagList: [{ label: '标签一', value: 0 }, { label: '标签二', value: 1 }, { label: '标签三', value: 2 }, { label: '标签四', value: 3 }],
serviceList: [{ label: '标签一', value: 0 }, { label: '标签二', value: 1 }, { label: '标签三', value: 2 }, { label: '标签四', value: 3 }],
}
},
computed: {
// 获取设备状态颜色
getStatusColor() {
return item => {
switch (item) {
case 'online':
return '#67C23A'
case 'offline':
return '#999999'
default:
return '#F56C6C'
}
}
},
// 获取设备状态文字
getStatusText() {
return item => {
switch (item) {
case 'online':
return '在线'
case 'offline':
return '离线'
default:
return '异常'
}
}
},
// 精简文字
simplify() {
return (item, length) => {
if (item && item.length > length) {
return item.substring(0, length) + '...'
}
return item
}
}
},
methods: {
rTimeMin,
copyText,
seeServiceParams(id) {
this.$router.push({ name: 'device-service' })
},
sendReq(id) {
},
sendOrder(id) {
},
collapseSearch() {
this.isCollapse = !this.isCollapse
this.$refs.vTable.clickCollapse()
this.$nextTick(() => {
const icon = [...document.getElementsByClassName('el-date-editor')]
icon.forEach(item => {
const img = document.createElement('img')
img.style.width = '14px'
img.style.height = '14px'
img.src = require('@assets/images/icon-rili.png')
item.appendChild(img)
})
})
},
reset() {
this.search = {
checkList: []
}
},
// 跳转到设备详情页面
detail(id) {
this.$router.push({ name: 'device-detail' })
}
},
watch: {
// 监听route的改变进行pi ,ps的改变
'$route.query': {
handler(newName, oldName) {
},
deep: true,
}
},
mounted() {
},
destroyed() {
},
components: {
nameFilter: () => import(/* webpackChunkName: "container" */ '@/components/list-filter/name.vue'),
}
}
</script>
<style lang="sass" scoped>
.page-nav
font-family: PingFangSC-Regular
font-size: 14px
color: #666666
letter-spacing: 0
padding: 26px 20px 20px
.search-title
margin-right: 10px
.clickable
cursor: pointer
.no-wrap
white-space: nowrap
.inline-div
display: inline-block
.circleStatus
margin-left: 6px
.icon-fuzhi-text
margin-left: 6px
color: #409EFF
cursor: pointer
.search-item
text-align: left
.search-item-margin
margin-right: 20px
.search-item:not(.search-item:nth-child(1))
margin-top: 14px
.collapse-btn
font-family: PingFangSC-Regular
font-size: 14px
color: #409EFF
.collapse-text
margin-right: 5px
.search-fields
height: 164px
width: 100%
display: flex !important
flex-direction: row
justify-content: space-between
.search-fields-collapse
max-height: 23px
.flex-left
display: flex
flex-direction: column
justify-content: space-between
.flex-right-nav
margin-left: -88px
display: flex
justify-content: space-between
flex-direction: column
.flex-right-content
display: flex
justify-content: flex-end
.check-title
font-family: PingFangSC-Regular
font-size: 14px
color: #333333
letter-spacing: 0
.operate-text
font-family: PingFangSC-Regular
font-size: 14px
color: #409EFF
margin-right: 20px
cursor: pointer
::v-deep .el-checkbox
margin-right: 15px
.el-checkbox__input
width: 14px
height: 14px
top: -1px
margin-right: 10px
.el-checkbox__label
padding-left: 0px
::v-deep .el-range-separator
font-family: PingFangSC-Regular
font-size: 14px
color: #333333
letter-spacing: 0
::v-deep .el-range-input
font-family: PingFangSC-Regular
font-size: 14px
color: #333333
letter-spacing: 0
&::placeholder
font-family: PingFangSC-Regular
font-size: 14px
color: #999999
letter-spacing: 0
::v-deep
& .el-table__expand-column .cell
padding: 0 20px !important
& .table-box .el-table th .cell, .table-box .el-table .el-table__body tr .cell
padding-left: 40px
& .el-table__expanded-cell .cell
padding-left: 48px !important
.table-box
height: 100%
::v-deep .el-table
.cell
text-overflow: initial
</style>
src/views/register.vue
......@@ -78,7 +78,6 @@
</template>
<script>
import { usersApi, codeApi } from '@/http'
export default {
data() {
const validatePassword = (rule, value, callback) => {
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!