monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Commit 1809c94af5ae66d9cfca13fe30732dba26edeabf 2 parents eb930e18 033d2da1

Merge branch 'master' of http://192.168.1.136:82/monitor_v3/hg-monitor-web into … 

…master-v32-lushangqing
Inline Side-by-side
Showing 19 changed files with 1405 additions and 51 deletions
@@ -3486,7 +3486,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele @@ -3486,7 +3486,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
3486 }); 3486 });
3487 }); 3487 });
3488 $("#kpi_press_times_id").find('textarea.layui-layer-input').val(num); 3488 $("#kpi_press_times_id").find('textarea.layui-layer-input').val(num);
3489 - $("#kpi_press_times_id").find('textarea.layui-layer-input').css({height:"25px"}).attr("placeholder", "压制次数（必填）") 3489 + $("#kpi_press_times_id").find('textarea.layui-layer-input').css({height:"25px"}).attr("placeholder", "压制次数（必填，建议100以内）")
3490 .attr("onkeyup","value=value.replace(/^(0+)|[^\\d]+/g,'')"); 3490 .attr("onkeyup","value=value.replace(/^(0+)|[^\\d]+/g,'')");
3491 } 3491 }
3492 }); 3492 });
@@ -11,7 +11,7 @@ layui.define(['sessions', 'form', 'common'],function (exports) { @@ -11,7 +11,7 @@ layui.define(['sessions', 'form', 'common'],function (exports) {
11 , sessions = layui.sessions; 11 , sessions = layui.sessions;
12 12
13 var uuid = Math.uuid(); 13 var uuid = Math.uuid();
14 - var lockNum = 10;//默认十次登录冻结 14 + var lockNum = 5;//默认5次登录冻结，兼容天津
15 //获取默认配置 15 //获取默认配置
16 $.ajax({ 16 $.ajax({
17 url: '/config/getConfig', 17 url: '/config/getConfig',
@@ -20,13 +20,15 @@ layui.define(['sessions', 'form', 'common'],function (exports) { @@ -20,13 +20,15 @@ layui.define(['sessions', 'form', 'common'],function (exports) {
20 }, 20 },
21 async: false, 21 async: false,
22 success(response) { 22 success(response) {
  23 + if (response && response.lockNum){ //如果配置了锁定次数，则更新
23 lockNum = response.lockNum; 24 lockNum = response.lockNum;
24 } 25 }
  26 + }
25 }); 27 });
26 28
27 //如果密码输入错误三次，第四次开启验证码 29 //如果密码输入错误三次，第四次开启验证码
28 if (sessionStorage.getItem("lockNum") && sessionStorage.getItem("lockNum") >= 3) { 30 if (sessionStorage.getItem("lockNum") && sessionStorage.getItem("lockNum") >= 3) {
29 - if (sessionStorage.getItem("lockNum") && sessionStorage.getItem("lockNum") > 5) { 31 + if (sessionStorage.getItem("lockNum") && sessionStorage.getItem("lockNum") > lockNum) {
30 layer.alert('账号已被锁定，请联系管理员！'); 32 layer.alert('账号已被锁定，请联系管理员！');
31 } 33 }
32 //图形验证码 34 //图形验证码
@@ -119,6 +121,14 @@ layui.define(['sessions', 'form', 'common'],function (exports) { @@ -119,6 +121,14 @@ layui.define(['sessions', 'form', 'common'],function (exports) {
119 121
120 var loginErrorNum = sessionStorage.getItem("lockNum") && sessionStorage.getItem("lockNum") != null ? parseInt(sessionStorage.getItem("lockNum")) : 0; 122 var loginErrorNum = sessionStorage.getItem("lockNum") && sessionStorage.getItem("lockNum") != null ? parseInt(sessionStorage.getItem("lockNum")) : 0;
121 123
  124 + //增加4-20位密码验证 joke add 20211214
  125 + form.verify({
  126 + password: function (d) {
  127 + if (d.trim() <= 4) {
  128 + return "密码最少4位"
  129 + }
  130 + }
  131 + });
122 form.on('submit(LAY-user-login-submit)', function (obj) { 132 form.on('submit(LAY-user-login-submit)', function (obj) {
123 login(obj); 133 login(obj);
124 return false; 134 return false;
@@ -19,7 +19,7 @@ @@ -19,7 +19,7 @@
19 </div> 19 </div>
20 <div class="layui-form-item"> 20 <div class="layui-form-item">
21 <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="loginPswd"></label> 21 <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="loginPswd"></label>
22 - <input type="password" name="password" id="loginPswd" lay-verify="required" placeholder="密码" 22 + <input type="password" name="password" id="loginPswd" lay-verify="required|password" minlength="4" placeholder="密码"
23 class="layui-input"> 23 class="layui-input">
24 </div> 24 </div>
25 <!--验证码--> 25 <!--验证码-->
  1 +<div :id="id" :style="{'width':width,'height':height}">
  2 +</div>
  1 +/**
  2 + * https://echarts.apache.org/examples/zh/editor.html?c=pie-simple
  3 + * <p>
  4 + * 作者： Wang
  5 + * 时间：2021/12/3 14:30
  6 + */
  7 +export default {
  8 + name: 'echarts-line',
  9 + template: '',
  10 + components: {},
  11 + props: {
  12 + // 单位px
  13 + width: {
  14 + type: String,
  15 + default: '100%'
  16 + },
  17 + height: {
  18 + type: String,
  19 + default: '100%'
  20 + },
  21 + title: {
  22 + type: Object,
  23 + default: {
  24 + show: false,
  25 + text: '标题',
  26 + subtext: '辅助标题',
  27 + left: 'center'
  28 + }
  29 + },
  30 + sourceData: {
  31 + type: Array,
  32 + default: [
  33 + ['product', '2015', '2016', '2017'],
  34 + ['示例1', 43.3, 85.8, 93.7],
  35 + ['示例2', 83.1, 73.4, 55.1],
  36 + ['示例3', 86.4, 65.2, 82.5],
  37 + ['示例4', 72.4, 53.9, 39.1]
  38 + ]
  39 + }
  40 + },
  41 + data() {
  42 + return {}
  43 + },
  44 + setup(props, {attrs, slots, emit}) {
  45 + const {proxy} = Vue.getCurrentInstance();
  46 +
  47 + let id = "line" + (new Date()).getTime();
  48 +
  49 +
  50 +
  51 + let getOption = () => {
  52 +
  53 + let sourceData = props.sourceData;
  54 + let arr = [];
  55 + for (let i = 0; i < sourceData[0].length; i++) {
  56 + arr.push({type: 'bar'})
  57 + }
  58 + let option = {
  59 + legend: {
  60 + right:'20px',
  61 + itemWidth:25,
  62 + itemHeight:5,
  63 + textStyle: {
  64 + color: '#fff',
  65 + fontSize: 7
  66 + }
  67 + },
  68 + tooltip: {
  69 + trigger: 'axis',
  70 + axisPointer: {
  71 + type: 'shadow'
  72 + },
  73 + backgroundColor: 'rgba(50,50,50,0.7)',
  74 + borderColor: '#333',
  75 + textStyle: {
  76 + color: '#fff',
  77 + align: 'left'
  78 + }
  79 + },
  80 + dataset: {
  81 + source: props.sourceData
  82 + },
  83 + grid: {
  84 + top: '30px',
  85 + left: '10px',
  86 + right: '10px',
  87 + bottom: '10px',
  88 + containLabel: true
  89 + },
  90 +
  91 + xAxis: {type: 'category'},
  92 + yAxis: {
  93 + axisLabel: {
  94 + formatter: '{value}',//以百分比显示
  95 + color:'#ffffff',
  96 + },
  97 + splitLine:{
  98 + lineStyle: {
  99 + type: 'dashed',
  100 + color:'#313c5e'
  101 + }
  102 + },
  103 + axisLine:{
  104 + type:'do',
  105 + show:true,//是否显示坐标线
  106 + lineStyle: {
  107 + color:'#21bad6'
  108 + }
  109 + },
  110 + },
  111 + series: arr
  112 + };
  113 +
  114 + let line = echarts.init(document.getElementById(id));
  115 + setTimeout(function () {
  116 + line.clear();
  117 + line.setOption(option);
  118 + }, 200);
  119 + }
  120 +
  121 + // 挂载完
  122 + Vue.onMounted(() => {
  123 + getOption();
  124 + })
  125 +
  126 + return {
  127 + id
  128 + }
  129 + }
  130 +}
  1 +<div :id="id" :style="{'width':width,'height':height}">
  2 +</div>
  1 +/**
  2 + * https://echarts.apache.org/examples/zh/editor.html?c=pie-simple
  3 + * <p>
  4 + * 作者： Wang
  5 + * 时间：2021/12/3 14:30
  6 + */
  7 +export default {
  8 + name: 'barStack',
  9 + template: '',
  10 + components: {},
  11 + props: {
  12 + // 单位px
  13 + width: {
  14 + type: String,
  15 + default: '100%'
  16 + },
  17 + height: {
  18 + type: String,
  19 + default: '100%'
  20 + },
  21 + title: {
  22 + type: Object,
  23 + default: {
  24 + show: false,
  25 + text: '标题',
  26 + subtext: '辅助标题',
  27 + left: 'center'
  28 + }
  29 + },
  30 + sourceData: {
  31 + type: Array,
  32 + default: [
  33 + ['product', '2015', '2016', '2017'],
  34 + ['示例1', 43.3, 85.8, 93.7],
  35 + ['示例2', 83.1, 73.4, 55.1],
  36 + ['示例3', 86.4, 65.2, 82.5],
  37 + ['示例4', 72.4, 53.9, 39.1]
  38 + ]
  39 + }
  40 + },
  41 + data() {
  42 + return {}
  43 + },
  44 + setup(props, {attrs, slots, emit}) {
  45 + const {proxy} = Vue.getCurrentInstance();
  46 +
  47 + let id = "line" + (new Date()).getTime();
  48 +
  49 +
  50 + let getOption = () => {
  51 +
  52 + let sourceData = props.sourceData;
  53 + let arr = [];
  54 + for (let i = 1; i < sourceData[0].length; i++) {
  55 + let nameItem = sourceData[0][i];
  56 + let name = nameItem;
  57 + if(nameItem && nameItem.name){
  58 + name = nameItem.name;
  59 + }
  60 + arr.push({
  61 + name: name,
  62 + type: 'bar',
  63 + stack: 'total',
  64 + label: {
  65 + show: false
  66 + },
  67 + emphasis: {
  68 + focus: 'series'
  69 + },
  70 + itemStyle: {
  71 + normal: {
  72 + color: nameItem.color,
  73 + lineStyle: {
  74 + color: nameItem.color,
  75 + width: 1
  76 + }
  77 + }
  78 + },
  79 + })
  80 + }
  81 + let option = {
  82 + legend: {
  83 + itemWidth: 25,
  84 + itemHeight: 2,
  85 + textStyle: {
  86 + color: '#fff',
  87 + fontSize: "12px"
  88 + }
  89 + },
  90 + tooltip: {
  91 + trigger: 'axis',
  92 + axisPointer: {
  93 + type: 'shadow'
  94 + },
  95 + backgroundColor: 'rgba(50,50,50,0.7)',
  96 + borderColor: '#333',
  97 + textStyle: {
  98 + color: '#fff',
  99 + align: 'left'
  100 + }
  101 + },
  102 + dataset: {
  103 + source: props.sourceData
  104 + },
  105 + grid: {
  106 + top: '30px',
  107 + left: '10px',
  108 + right: '10px',
  109 + bottom: '10px',
  110 + containLabel: true
  111 + },
  112 +
  113 + xAxis: {
  114 + type: 'category',
  115 + splitLine: {
  116 + lineStyle: {
  117 + type: 'dashed',
  118 + color: '#313c5e'
  119 + }
  120 + },
  121 + axisLine: {
  122 + type: 'do',
  123 + show: true,//是否显示坐标线
  124 + lineStyle: {
  125 + color: '#21bad6'
  126 + }
  127 + },
  128 + axisLabel: {
  129 + color: '#ffffff',
  130 + fontSize: 10,
  131 + formatter: function (params) {
  132 + var newParamsName = '';
  133 + let paramsNameNumber = params.length;
  134 + let provideNumber = 3;
  135 + let rowNumber = Math.ceil(paramsNameNumber / provideNumber);
  136 + if (paramsNameNumber > provideNumber) {
  137 + for (let i = 0; i < rowNumber; i++) {
  138 + let tempStr = '';
  139 + let start = i * provideNumber;
  140 + let end = start + provideNumber;
  141 + if (i == rowNumber - 1) {
  142 + tempStr = params.substring(start, paramsNameNumber);
  143 + } else {
  144 + tempStr = params.substring(start, end) + "\n";
  145 + }
  146 + newParamsName += tempStr;
  147 + }
  148 + } else {
  149 + newParamsName = params;
  150 + }
  151 + return newParamsName;
  152 + },
  153 + textStyle: {
  154 + rich: {
  155 + white: {
  156 + padding: [1, 0, 0, 0]
  157 + }
  158 + }
  159 + }
  160 + },
  161 + },
  162 + yAxis: {
  163 + axisLabel: {
  164 + formatter: '{value}',//以百分比显示
  165 + color: '#ffffff',
  166 + },
  167 + splitLine: {
  168 + lineStyle: {
  169 + type: 'dashed',
  170 + color: '#313c5e'
  171 + }
  172 + },
  173 + axisLine: {
  174 + type: 'do',
  175 + show: true,//是否显示坐标线
  176 + lineStyle: {
  177 + color: '#21bad6'
  178 + }
  179 + },
  180 + },
  181 + series: arr
  182 + };
  183 +
  184 + let line = echarts.init(document.getElementById(id));
  185 + setTimeout(function () {
  186 + line.clear();
  187 + line.setOption(option);
  188 + }, 200);
  189 + }
  190 +
  191 + // 挂载完
  192 + Vue.onMounted(() => {
  193 + getOption();
  194 + })
  195 +
  196 + return {
  197 + id
  198 + }
  199 + }
  200 +}
  1 +<div :id="id" :style="{'width':width,'height':height}">
  2 +</div>
  1 +/**
  2 + * https://echarts.apache.org/examples/zh/editor.html?c=pie-simple
  3 + * <p>
  4 + * 作者： Wang
  5 + * 时间：2021/12/3 14:30
  6 + */
  7 +export default {
  8 + name: 'echarts-line',
  9 + template: '',
  10 + components: {},
  11 + props: {
  12 + // 单位px
  13 + width: {
  14 + type: String,
  15 + default: '100%'
  16 + },
  17 + height: {
  18 + type: String,
  19 + default: '100%'
  20 + },
  21 + title: {
  22 + type: Object,
  23 + default: {
  24 + show: false,
  25 + text: '标题',
  26 + subtext: '辅助标题',
  27 + left: 'center'
  28 + }
  29 + },
  30 + sourceData: {
  31 + type: Array,
  32 + default: ['年报', '月报', '周报', '日报']
  33 + }
  34 + },
  35 + data() {
  36 + return {}
  37 + },
  38 + setup(props, {attrs, slots, emit}) {
  39 + const {proxy} = Vue.getCurrentInstance();
  40 +
  41 + let id = "line" + (new Date()).getTime();
  42 +
  43 +
  44 + let getOption = () => {
  45 +
  46 + let size = 100 / props.sourceData.length;
  47 +
  48 + let seriesData = props.sourceData.map(function (v, i) {
  49 + return {value: (i + 1) * size, name: v};
  50 + })
  51 + let option = {
  52 + title: {
  53 + text: 'Funnel Compare',
  54 + subtext: 'Fake Data',
  55 + left: 'left',
  56 + top: 'bottom',
  57 + show: false
  58 + },
  59 + tooltip: {
  60 + trigger: 'item',
  61 + formatter: '{b} : {c}%'
  62 + },
  63 + toolbox: {},
  64 + legend: {
  65 + show: false,
  66 + orient: 'vertical',
  67 + left: 'left',
  68 + data: props.sourceData
  69 + },
  70 + series: [
  71 + {
  72 + name: '',
  73 + type: 'funnel',
  74 + left: '10',
  75 + top: 20,
  76 + bottom: 20,
  77 + width: '80%',
  78 + min: 100,
  79 + max: 0,
  80 + minSize: '0%',
  81 + maxSize: '100%',
  82 + sort: 'descending',
  83 + gap: 2,
  84 + label: {
  85 + show: true,
  86 + width: 100,
  87 + position: ''
  88 + },
  89 + labelLine: {
  90 + length: 10,
  91 + lineStyle: {
  92 + width: 1,
  93 + type: 'solid'
  94 + }
  95 + },
  96 + itemStyle: {
  97 + borderColor: '#fff',
  98 + borderWidth: 1
  99 + },
  100 + emphasis: {
  101 + label: {
  102 + fontSize: 20
  103 + }
  104 + },
  105 + data: seriesData
  106 + }
  107 + ]
  108 + };
  109 +
  110 + let line = echarts.init(document.getElementById(id));
  111 + setTimeout(function () {
  112 + line.clear();
  113 + line.setOption(option);
  114 + }, 200);
  115 + }
  116 +
  117 + // 挂载完
  118 + Vue.onMounted(() => {
  119 + getOption();
  120 + })
  121 +
  122 + return {
  123 + id
  124 + }
  125 + }
  126 +}
  1 +<div :id="id" :style="{'width':width,'height':height}">
  2 +</div>
  1 +/**
  2 + * https://echarts.apache.org/examples/zh/editor.html?c=pie-simple
  3 + * <p>
  4 + * 作者： Wang
  5 + * 时间：2021/12/3 14:30
  6 + */
  7 +export default {
  8 + name: 'echarts-line',
  9 + template: '',
  10 + components: {},
  11 + props: {
  12 + // 单位px
  13 + width: {
  14 + type: String,
  15 + default: '100%'
  16 + },
  17 + height: {
  18 + type: String,
  19 + default: '100%'
  20 + },
  21 + title: {
  22 + type: Object,
  23 + default: {
  24 + show: false,
  25 + text: '标题',
  26 + subtext: '辅助标题',
  27 + left: 'center'
  28 + }
  29 + },
  30 + sourceData: {
  31 + type: Array,
  32 + default: [
  33 + ['product', '2015', '2016', '2017'],
  34 + ['示例1', 43.3, 85.8, 93.7],
  35 + ['示例2', 83.1, 73.4, 55.1],
  36 + ['示例3', 86.4, 65.2, 82.5],
  37 + ['示例4', 72.4, 53.9, 39.1]
  38 + ]
  39 + }
  40 + },
  41 + data() {
  42 + return {}
  43 + },
  44 + setup(props, {attrs, slots, emit}) {
  45 + const {proxy} = Vue.getCurrentInstance();
  46 +
  47 + let id = "line" + (new Date()).getTime();
  48 +
  49 +
  50 + let getOption = () => {
  51 +
  52 + let sourceData = props.sourceData;
  53 + let arr = [];
  54 + for (let i = 0; i < sourceData[0].length; i++) {
  55 + arr.push({type: 'line'})
  56 + }
  57 + let option = {
  58 + legend: {
  59 + right: '20px',
  60 + itemWidth: 25,
  61 + itemHeight: 5,
  62 + textStyle: {
  63 + fontSize: 10
  64 + }
  65 + },
  66 + tooltip: {
  67 + trigger: 'axis',
  68 + axisPointer: {
  69 + type: 'shadow'
  70 + },
  71 + backgroundColor: 'rgba(50,50,50,0.7)',
  72 + borderColor: '#333',
  73 + textStyle: {
  74 + color: '#fff',
  75 + align: 'left'
  76 + }
  77 + },
  78 + dataset: {
  79 + source: props.sourceData
  80 + },
  81 + grid: {
  82 + top: '30px',
  83 + left: '10px',
  84 + right: '10px',
  85 + bottom: '10px',
  86 + containLabel: true
  87 + },
  88 +
  89 + xAxis: {
  90 + type: 'category',
  91 + axisLabel: {
  92 + formatter: '{value}',//以百分比显示
  93 + color: '#313c5e',
  94 + },
  95 + splitLine: {
  96 + lineStyle: {
  97 + type: 'dashed',
  98 + color: '#313c5e'
  99 + }
  100 + },
  101 + axisLine: {
  102 + type: 'do',
  103 + show: true,//是否显示坐标线
  104 + lineStyle: {
  105 + color: '#313c5e'
  106 + }
  107 + },
  108 + },
  109 + yAxis: {
  110 + axisLabel: {
  111 + formatter: '{value}',//以百分比显示
  112 + color: '#313c5e',
  113 + },
  114 + splitLine: {
  115 + lineStyle: {
  116 + type: 'dashed',
  117 + color: '#313c5e'
  118 + }
  119 + },
  120 + axisLine: {
  121 + type: 'do',
  122 + show: true,//是否显示坐标线
  123 + lineStyle: {
  124 + color: '#313c5e'
  125 + }
  126 + },
  127 + },
  128 + series: arr
  129 + };
  130 +
  131 + let line = echarts.init(document.getElementById(id));
  132 + setTimeout(function () {
  133 + line.clear();
  134 + line.setOption(option);
  135 + }, 200);
  136 + }
  137 +
  138 + // 挂载完
  139 + Vue.onMounted(() => {
  140 + getOption();
  141 + })
  142 +
  143 + return {
  144 + id
  145 + }
  146 + }
  147 +}
  1 +<div :id="id" :style="{'width':width,'height':height}">
  2 +</div>
  1 +/**
  2 + * https://echarts.apache.org/examples/zh/editor.html?c=pie-simple
  3 + * <p>
  4 + * 作者： Wang
  5 + * 时间：2021/12/3 14:30
  6 + */
  7 +export default {
  8 + name: 'echarts-pie',
  9 + template: '',
  10 + components: {},
  11 + props: {
  12 + // 单位px
  13 + width: {
  14 + type: String,
  15 + default: '100%'
  16 + },
  17 + height: {
  18 + type: String,
  19 + default: '100%'
  20 + },
  21 + title: {
  22 + type: Object,
  23 + default: {
  24 + show: false,
  25 + text: '标题',
  26 + subtext: '辅助标题',
  27 + left: 'center'
  28 + }
  29 + },
  30 + // 列表
  31 + pieType: {
  32 + type: String,
  33 + default: ''
  34 + },
  35 + seriesData: {
  36 + type: Array,
  37 + default: [{
  38 + name: '',
  39 + data: [
  40 + {value: 1048, name: '示例1'},
  41 + {value: 735, name: '示例2'},
  42 + {value: 580, name: '示例3'},
  43 + {value: 484, name: '示例4'},
  44 + {value: 300, name: '示例5'}
  45 + ]
  46 + }
  47 + ]
  48 + }
  49 + },
  50 + data() {
  51 + return {}
  52 + },
  53 + setup(props, {attrs, slots, emit}) {
  54 + const {proxy} = Vue.getCurrentInstance();
  55 +
  56 + let id = "pie" + (new Date()).getTime();
  57 +
  58 + let pieClick = (param) => {
  59 + emit('pieClick', param, props.pieType);
  60 + }
  61 +
  62 + let getOption = () => {
  63 + let series = props.seriesData.map(function (v) {
  64 + return {
  65 + name: v.name,
  66 + type: 'pie',
  67 + radius: '80%',
  68 + data: v.data,
  69 + center: ['30%', '50%'],
  70 + label: {
  71 + show: false,
  72 + position: 'center'
  73 + },
  74 + labelLine: {
  75 + show: false
  76 + },
  77 + emphasis: {
  78 + itemStyle: {
  79 + shadowBlur: 10,
  80 + shadowOffsetX: 0,
  81 + shadowColor: 'rgba(0, 0, 0, 0.5)'
  82 + }
  83 + }
  84 + }
  85 + })
  86 +
  87 + let option = {
  88 + title: props.title,
  89 + tooltip: {
  90 + trigger: 'item',
  91 + axisPointer: {
  92 + type: 'shadow'
  93 + },
  94 + backgroundColor: 'rgba(50,50,50,0.7)',
  95 + borderColor: '#333',
  96 + textStyle: {
  97 + color: '#fff',
  98 + align: 'left'
  99 + }
  100 + },
  101 + legend: {
  102 + orient: 'vertical',
  103 + left: 'right',
  104 + y: 'bottom',
  105 + itemWidth: 25,
  106 + itemHeight: 5,
  107 + textStyle: {
  108 + color: '#fff',
  109 + fontSize: 10
  110 + }
  111 + },
  112 + series: series
  113 + };
  114 +
  115 +
  116 + let pie = echarts.init(document.getElementById(id));
  117 + setTimeout(function () {
  118 + pie.clear();
  119 + pie.setOption(option);
  120 +
  121 + pie.on("click", pieClick);
  122 + }, 200);
  123 +
  124 + }
  125 +
  126 + // 挂载完
  127 + Vue.onMounted(() => {
  128 + getOption();
  129 + })
  130 +
  131 + return {
  132 + id
  133 + }
  134 + }
  135 +}
  1 +<div>
  2 + <div>
  3 + <el-progress :percentage="90" />
  4 + </div>
  5 + <div>
  6 + <cm-table-page v-if="list.columns.length > 0" :columns="list.columns"
  7 + :dataList="list.dataList"
  8 + @loaddata="getPageInfo"
  9 + :showIndex="true"
  10 + :showBorder="true"
  11 + :showPage="false"
  12 + :showTools="false"
  13 + :maxWidth="width"
  14 + :height="200">
  15 + </cm-table-page>
  16 + </div>
  17 +
  18 + <!-- 弹框区域 -->
  19 + <cm-dialog top="3vh" title="曲线图" width="900px" :showDialogVisible="showLineDialog"
  20 + @hidedialog="closeLineDialog" :showFooter="false">
  21 + <template v-slot>
  22 + <div style="height: 300px">
  23 + <echarts-line height="300px" width="880px" />
  24 + </div>
  25 + </template>
  26 + </cm-dialog>
  27 +</div>
  1 +const lineDetail = () => {
  2 + let showLineDialog = Vue.ref(false);
  3 +
  4 + let closeLineDialog = (flg) =>{
  5 + showLineDialog.value = flg;
  6 + }
  7 + return {
  8 + showLineDialog,
  9 + closeLineDialog
  10 + }
  11 +}
  12 +export default {
  13 + name: 'resultItemIndex',
  14 + template: '',
  15 + components: {
  16 + 'echarts-line': Vue.defineAsyncComponent(
  17 + () => myImport('components/common/echarts/line/index')
  18 + )
  19 + },
  20 + data() {
  21 + return {}
  22 + },
  23 + props: {
  24 + faultType:{
  25 + type: String,
  26 + default:'NPM'
  27 + },
  28 + faultNo:{
  29 + type: String,
  30 + default:''
  31 + }
  32 + },
  33 + setup(props, {attrs, slots, emit}) {
  34 + let width = Vue.ref(window.innerWidth*0.8 - 190);
  35 + const {proxy} = Vue.getCurrentInstance();
  36 + let list = Vue.ref({
  37 + columns: [],
  38 + dataList: [],
  39 + total: 0
  40 + });
  41 +
  42 +
  43 + let getPage = () =>{
  44 + let data = {
  45 + "5e991f126b8ee03541976384": [
  46 + {
  47 + "id": "da57056823be410c848a4a4ab821de41",
  48 + "faultId": "e011b982f0d2405a9d4d43df57199d05",
  49 + "faultNo": "GZ202112130014",
  50 + "targetId": "11cdc282437a91174d808e114954463d",
  51 + "targetType": "NPM",
  52 + "itemId": "ccb5404e731ff9b7c2344c2806b41442",
  53 + "timestap": "2021-12-13T12:31:08.988+0800",
  54 + "bizId": "53bebbd79f384f619513b50666ea1d48",
  55 + "bizName": "电子税务局",
  56 + "resId": "5e991f126b8ee03541976384",
  57 + "resName": "各地市-网上申报Weblogic",
  58 + "resType": "NPM_STREAM",
  59 + "kpiId": "count",
  60 + "kpiName": "业务量",
  61 + "flag": "base",
  62 + "kpiValue": "26299",
  63 + "collTime": "2021-12-04 10:50:00",
  64 + "dataType": "last",
  65 + "createTimeToMonth": "2021-12"
  66 + },
  67 + {
  68 + "id": "bd8c7d4fdf1247d195652251c95acca0",
  69 + "faultId": "e011b982f0d2405a9d4d43df57199d05",
  70 + "faultNo": "GZ202112130014",
  71 + "targetId": "11cdc282437a91174d808e114954463d",
  72 + "targetType": "NPM",
  73 + "itemId": "ccb5404e731ff9b7c2344c2806b41442",
  74 + "timestap": "2021-12-13T12:31:08.988+0800",
  75 + "bizId": "53bebbd79f384f619513b50666ea1d48",
  76 + "bizName": "电子税务局",
  77 + "resId": "5e991f126b8ee03541976384",
  78 + "resName": "各地市-网上申报Weblogic",
  79 + "resType": "NPM_STREAM",
  80 + "kpiId": "response_rate",
  81 + "kpiName": "响应率",
  82 + "flag": "base",
  83 + "kpiValue": "47.25",
  84 + "collTime": "2021-12-04 10:50:00",
  85 + "dataType": "last",
  86 + "createTimeToMonth": "2021-12"
  87 + },
  88 + {
  89 + "id": "a9e00473c9964300bde164c1183ebe1d",
  90 + "faultId": "e011b982f0d2405a9d4d43df57199d05",
  91 + "faultNo": "GZ202112130014",
  92 + "targetId": "11cdc282437a91174d808e114954463d",
  93 + "targetType": "NPM",
  94 + "itemId": "ccb5404e731ff9b7c2344c2806b41442",
  95 + "timestap": "2021-12-13T12:31:08.988+0800",
  96 + "bizId": "53bebbd79f384f619513b50666ea1d48",
  97 + "bizName": "电子税务局",
  98 + "resId": "5e991f126b8ee03541976384",
  99 + "resName": "各地市-网上申报Weblogic",
  100 + "resType": "NPM_STREAM",
  101 + "kpiId": "success_rate",
  102 + "kpiName": "成功率",
  103 + "flag": "base",
  104 + "kpiValue": "100",
  105 + "collTime": "2021-12-04 10:50:00",
  106 + "dataType": "last",
  107 + "createTimeToMonth": "2021-12"
  108 + }
  109 + ],
  110 + "5e966cec6b8e8d2938be120a": [
  111 + {
  112 + "id": "1f12837a6faf4193a3867759ee3d0bb8",
  113 + "faultId": "e011b982f0d2405a9d4d43df57199d05",
  114 + "faultNo": "GZ202112130014",
  115 + "targetId": "11cdc282437a91174d808e114954463d",
  116 + "targetType": "NPM",
  117 + "itemId": "2ba02341a1c5dc28f6a2bd362be58ca9",
  118 + "timestap": "2021-12-13T12:29:14.907+0800",
  119 + "bizId": "53bebbd79f384f619513b50666ea1d48",
  120 + "bizName": "电子税务局",
  121 + "resId": "5e966cec6b8e8d2938be120a",
  122 + "resName": "nginx-Nginx代理 ",
  123 + "resType": "NPM_STREAM",
  124 + "kpiId": "count",
  125 + "kpiName": "业务量",
  126 + "flag": "base",
  127 + "kpiValue": "26299",
  128 + "collTime": "2021-12-04 10:50:00",
  129 + "dataType": "last",
  130 + "createTimeToMonth": "2021-12"
  131 + },
  132 + {
  133 + "id": "11c19383b95c4ec8b30ea07f5c9e3f42",
  134 + "faultId": "e011b982f0d2405a9d4d43df57199d05",
  135 + "faultNo": "GZ202112130014",
  136 + "targetId": "11cdc282437a91174d808e114954463d",
  137 + "targetType": "NPM",
  138 + "itemId": "2ba02341a1c5dc28f6a2bd362be58ca9",
  139 + "timestap": "2021-12-13T12:29:14.907+0800",
  140 + "bizId": "53bebbd79f384f619513b50666ea1d48",
  141 + "bizName": "电子税务局",
  142 + "resId": "5e966cec6b8e8d2938be120a",
  143 + "resName": "nginx-Nginx代理 ",
  144 + "resType": "NPM_STREAM",
  145 + "kpiId": "response_rate",
  146 + "kpiName": "响应率",
  147 + "flag": "base",
  148 + "kpiValue": "47.25",
  149 + "collTime": "2021-12-04 10:50:00",
  150 + "dataType": "last",
  151 + "createTimeToMonth": "2021-12"
  152 + },
  153 + {
  154 + "id": "426fe02a1ebd4949a68167612933c880",
  155 + "faultId": "e011b982f0d2405a9d4d43df57199d05",
  156 + "faultNo": "GZ202112130014",
  157 + "targetId": "11cdc282437a91174d808e114954463d",
  158 + "targetType": "NPM",
  159 + "itemId": "2ba02341a1c5dc28f6a2bd362be58ca9",
  160 + "timestap": "2021-12-13T12:29:14.907+0800",
  161 + "bizId": "53bebbd79f384f619513b50666ea1d48",
  162 + "bizName": "电子税务局",
  163 + "resId": "5e966cec6b8e8d2938be120a",
  164 + "resName": "nginx-Nginx代理 ",
  165 + "resType": "NPM_STREAM",
  166 + "kpiId": "success_rate",
  167 + "kpiName": "成功率",
  168 + "flag": "base",
  169 + "kpiValue": "100",
  170 + "collTime": "2021-12-04 10:50:00",
  171 + "dataType": "last",
  172 + "createTimeToMonth": "2021-12"
  173 + }
  174 + ],
  175 + "5e9594b66b8e8d293845bd70": [
  176 + {
  177 + "id": "84e0ad1f09e049fd97efe18c5eb9a40b",
  178 + "faultId": "e011b982f0d2405a9d4d43df57199d05",
  179 + "faultNo": "GZ202112130014",
  180 + "targetId": "11cdc282437a91174d808e114954463d",
  181 + "targetType": "NPM",
  182 + "itemId": "953ff1ab4a718866a2b91ae5da50627e",
  183 + "timestap": "2021-12-13T12:30:15.355+0800",
  184 + "bizId": "53bebbd79f384f619513b50666ea1d48",
  185 + "bizName": "电子税务局",
  186 + "resId": "5e9594b66b8e8d293845bd70",
  187 + "resName": "MQ-EDAS",
  188 + "resType": "NPM_STREAM",
  189 + "kpiId": "count",
  190 + "kpiName": "业务量",
  191 + "flag": "base",
  192 + "kpiValue": "26299",
  193 + "collTime": "2021-12-04 10:50:00",
  194 + "dataType": "last",
  195 + "createTimeToMonth": "2021-12"
  196 + },
  197 + {
  198 + "id": "e0e71be7a26f469b932f3b197c2ea7e8",
  199 + "faultId": "e011b982f0d2405a9d4d43df57199d05",
  200 + "faultNo": "GZ202112130014",
  201 + "targetId": "11cdc282437a91174d808e114954463d",
  202 + "targetType": "NPM",
  203 + "itemId": "953ff1ab4a718866a2b91ae5da50627e",
  204 + "timestap": "2021-12-13T12:30:15.355+0800",
  205 + "bizId": "53bebbd79f384f619513b50666ea1d48",
  206 + "bizName": "电子税务局",
  207 + "resId": "5e9594b66b8e8d293845bd70",
  208 + "resName": "MQ-EDAS",
  209 + "resType": "NPM_STREAM",
  210 + "kpiId": "response_rate",
  211 + "kpiName": "响应率",
  212 + "flag": "base",
  213 + "kpiValue": "47.25",
  214 + "collTime": "2021-12-04 10:50:00",
  215 + "dataType": "last",
  216 + "createTimeToMonth": "2021-12"
  217 + },
  218 + {
  219 + "id": "bd21a27f24cd459792c562a1a9067d98",
  220 + "faultId": "e011b982f0d2405a9d4d43df57199d05",
  221 + "faultNo": "GZ202112130014",
  222 + "targetId": "11cdc282437a91174d808e114954463d",
  223 + "targetType": "NPM",
  224 + "itemId": "953ff1ab4a718866a2b91ae5da50627e",
  225 + "timestap": "2021-12-13T12:30:15.355+0800",
  226 + "bizId": "53bebbd79f384f619513b50666ea1d48",
  227 + "bizName": "电子税务局",
  228 + "resId": "5e9594b66b8e8d293845bd70",
  229 + "resName": "MQ-EDAS",
  230 + "resType": "NPM_STREAM",
  231 + "kpiId": "success_rate",
  232 + "kpiName": "成功率",
  233 + "flag": "base",
  234 + "kpiValue": "100",
  235 + "collTime": "2021-12-04 10:50:00",
  236 + "dataType": "last",
  237 + "createTimeToMonth": "2021-12"
  238 + }
  239 + ],
  240 + "5e991f126b8ee03541976383": [
  241 + {
  242 + "id": "f2a46c0548d74659bcf84b149029b4ea",
  243 + "faultId": "e011b982f0d2405a9d4d43df57199d05",
  244 + "faultNo": "GZ202112130014",
  245 + "targetId": "11cdc282437a91174d808e114954463d",
  246 + "targetType": "NPM",
  247 + "itemId": "d6fab6451da3d14dada155670c15ae5e",
  248 + "timestap": "2021-12-13T12:31:28.472+0800",
  249 + "bizId": "53bebbd79f384f619513b50666ea1d48",
  250 + "bizName": "电子税务局",
  251 + "resId": "5e991f126b8ee03541976383",
  252 + "resName": "各地市-涉税文书Weblogic",
  253 + "resType": "NPM_STREAM",
  254 + "kpiId": "count",
  255 + "kpiName": "业务量",
  256 + "flag": "base",
  257 + "kpiValue": "26299",
  258 + "collTime": "2021-12-04 10:50:00",
  259 + "dataType": "last",
  260 + "createTimeToMonth": "2021-12"
  261 + },
  262 + {
  263 + "id": "0b2d9d77ea6c4c0e8bc280802c48721c",
  264 + "faultId": "e011b982f0d2405a9d4d43df57199d05",
  265 + "faultNo": "GZ202112130014",
  266 + "targetId": "11cdc282437a91174d808e114954463d",
  267 + "targetType": "NPM",
  268 + "itemId": "d6fab6451da3d14dada155670c15ae5e",
  269 + "timestap": "2021-12-13T12:31:28.472+0800",
  270 + "bizId": "53bebbd79f384f619513b50666ea1d48",
  271 + "bizName": "电子税务局",
  272 + "resId": "5e991f126b8ee03541976383",
  273 + "resName": "各地市-涉税文书Weblogic",
  274 + "resType": "NPM_STREAM",
  275 + "kpiId": "response_rate",
  276 + "kpiName": "响应率",
  277 + "flag": "base",
  278 + "kpiValue": "47.25",
  279 + "collTime": "2021-12-04 10:50:00",
  280 + "dataType": "last",
  281 + "createTimeToMonth": "2021-12"
  282 + },
  283 + {
  284 + "id": "0ca1b9a73c5b4a34a49361a121eea219",
  285 + "faultId": "e011b982f0d2405a9d4d43df57199d05",
  286 + "faultNo": "GZ202112130014",
  287 + "targetId": "11cdc282437a91174d808e114954463d",
  288 + "targetType": "NPM",
  289 + "itemId": "d6fab6451da3d14dada155670c15ae5e",
  290 + "timestap": "2021-12-13T12:31:28.472+0800",
  291 + "bizId": "53bebbd79f384f619513b50666ea1d48",
  292 + "bizName": "电子税务局",
  293 + "resId": "5e991f126b8ee03541976383",
  294 + "resName": "各地市-涉税文书Weblogic",
  295 + "resType": "NPM_STREAM",
  296 + "kpiId": "success_rate",
  297 + "kpiName": "成功率",
  298 + "flag": "base",
  299 + "kpiValue": "100",
  300 + "collTime": "2021-12-04 10:50:00",
  301 + "dataType": "last",
  302 + "createTimeToMonth": "2021-12"
  303 + }
  304 + ]
  305 + };
  306 +
  307 + let dataList = [];
  308 + let col = [{
  309 + prop: 'resName',
  310 + label: '检测指标',
  311 + width: 100,
  312 + click: function (row) {
  313 + closeLineDialog(true);
  314 + }
  315 + }];
  316 +
  317 +
  318 + let index = 0;
  319 + for (let resId in data) {
  320 + let list = data[resId];
  321 +
  322 + let item = {};
  323 + item.resId = list[0].resId;
  324 + item.resName = list[0].resName;
  325 + item.bizId = list[0].bizId;
  326 + item.bizName = list[0].bizName;
  327 +
  328 + list.forEach(function (v){
  329 + item[v.kpiId] = v.kpiValue;
  330 + if(index == 0){
  331 + col.push({
  332 + prop: v.kpiId,
  333 + label: v.kpiName,
  334 + width: 80
  335 + })
  336 + }
  337 + });
  338 +
  339 + dataList.push(item);
  340 + index ++;
  341 + }
  342 + // 设置数据
  343 + list.value.dataList = dataList;
  344 + list.value.columns = col;
  345 + }
  346 +
  347 + const {
  348 + showLineDialog,
  349 + closeLineDialog
  350 + } = lineDetail();
  351 +
  352 + // 监听编辑状态
  353 + Vue.watch(() => props.faultNo, (newValue, oldVlaue) => {
  354 + getPage();
  355 + });
  356 +
  357 + // 挂载完
  358 + Vue.onMounted(() => {
  359 + getPage();
  360 + })
  361 +
  362 + return {
  363 + width,
  364 + list,
  365 +
  366 + showLineDialog,
  367 + closeLineDialog
  368 + }
  369 + }
  370 +}
@@ -43,24 +43,12 @@ @@ -43,24 +43,12 @@
43 <cm-dialog :title="faultDetailDialogTitle" width="80%" :showDialogVisible="showFaultDetailDialog" 43 <cm-dialog :title="faultDetailDialogTitle" width="80%" :showDialogVisible="showFaultDetailDialog"
44 @hidedialog="closeFaultDetailDialog" :showFooter="false"> 44 @hidedialog="closeFaultDetailDialog" :showFooter="false">
45 <template v-slot> 45 <template v-slot>
46 - <div> 46 + <div style="text-align: left;height:720px;max-height:720px;overflow-y: auto">
47 <el-timeline> 47 <el-timeline>
48 - <el-timeline-item timestamp="2018/4/12" placement="top"> 48 + <el-timeline-item v-for="item in faultDetailDetailInfo.items" center :timestamp="item.faultTypeName" placement="top" :color="item.color" :hollow="true">
49 <el-card> 49 <el-card>
50 - <h4>Update Github template</h4>  
51 - <p>Tom committed 2018/4/12 20:46</p>  
52 - </el-card>  
53 - </el-timeline-item>  
54 - <el-timeline-item timestamp="2018/4/3" placement="top">  
55 - <el-card>  
56 - <h4>Update Github template</h4>  
57 - <p>Tom committed 2018/4/3 20:46</p>  
58 - </el-card>  
59 - </el-timeline-item>  
60 - <el-timeline-item timestamp="2018/4/2" placement="top">  
61 - <el-card>  
62 - <h4>Update Github template</h4>  
63 - <p>Tom committed 2018/4/2 20:46</p> 50 + <!-- <result-item :faultType="item.faultType" :faultNo="faultDetailDetailInfo.faultNo"></result-item>-->
  51 + <component v-bind:is="item.components" :faultType="item.faultType" :faultNo="faultDetailDetailInfo.faultNo" />
64 </el-card> 52 </el-card>
65 </el-timeline-item> 53 </el-timeline-item>
66 </el-timeline> 54 </el-timeline>
1 const faultDetail = () => { 1 const faultDetail = () => {
2 - const {proxy} = Vue.getCurrentInstance(); 2 + const { proxy } = Vue.getCurrentInstance();
3 let showFaultDetailDialog = Vue.ref(false); 3 let showFaultDetailDialog = Vue.ref(false);
4 let faultDetailDialogTitle = Vue.ref(''); 4 let faultDetailDialogTitle = Vue.ref('');
  5 + let faultDetailDetailInfo = Vue.ref({
  6 + faultNo:'',
  7 + items:[{
  8 + faultType:'BASE',
  9 + faultTypeName:'基础',
  10 + components:'result-item',
  11 + color:'#67C23A'
  12 + },{
  13 + faultType:'NETLINK',
  14 + faultTypeName:'网络链路',
  15 + components:'result-item',
  16 + color:'#409EFF'
  17 + },{
  18 + faultType:'NPM',
  19 + faultTypeName:'NPM',
  20 + components:'result-item',
  21 + color:'#E6A23C'
  22 + },{
  23 + faultType:'APM',
  24 + faultTypeName:'APM',
  25 + components:'result-item',
  26 + color:'#F56C6C'
  27 + }]
  28 + });
5 29
6 -  
7 - let closeFaultDetailDialog = (flg) =>{ 30 + /**
  31 + * 关闭弹框
  32 + * <p>
  33 + * 作者： Wang
  34 + * 时间：2021/12/13 20:14
  35 + */
  36 + let closeFaultDetailDialog = (flg) => {
8 showFaultDetailDialog.value = flg; 37 showFaultDetailDialog.value = flg;
9 } 38 }
10 39
  40 + /**
  41 + * 设置弹框信息
  42 + * @param row
  43 + */
  44 + let settingDetail = (row) =>{
  45 + // 设置标题
  46 + faultDetailDialogTitle.value = `${row.faultBody}诊断报告`;
  47 +
  48 + faultDetailDetailInfo.value.faultNo = row.faultNo;
  49 +
  50 + }
  51 +
11 return { 52 return {
  53 + settingDetail,
12 showFaultDetailDialog, 54 showFaultDetailDialog,
13 faultDetailDialogTitle, 55 faultDetailDialogTitle,
14 - closeFaultDetailDialog 56 + closeFaultDetailDialog,
  57 + faultDetailDetailInfo
15 } 58 }
16 } 59 }
17 export default { 60 export default {
18 name: 'resIndex', 61 name: 'resIndex',
19 template: '', 62 template: '',
20 - components: {}, 63 + components: {
  64 + 'result-item':Vue.defineAsyncComponent(
  65 + () => myImport('components/page/faultDiagnosis/result/item/index')
  66 + )
  67 + },
21 data() { 68 data() {
22 return { 69 return {
23 props: { 70 props: {
@@ -29,6 +76,7 @@ export default { @@ -29,6 +76,7 @@ export default {
29 setup() { 76 setup() {
30 const {proxy} = Vue.getCurrentInstance(); 77 const {proxy} = Vue.getCurrentInstance();
31 let height = Vue.ref(window.innerHeight - 20); 78 let height = Vue.ref(window.innerHeight - 20);
  79 +
32 // 搜索表单内容 80 // 搜索表单内容
33 let searchForm = Vue.ref({ 81 let searchForm = Vue.ref({
34 keyword: '', 82 keyword: '',
@@ -43,6 +91,9 @@ export default { @@ -43,6 +91,9 @@ export default {
43 label: '故障主体', 91 label: '故障主体',
44 click: function (row) { 92 click: function (row) {
45 // 展示弹框 93 // 展示弹框
  94 + closeFaultDetailDialog(true);
  95 + // 设置相信信息
  96 + settingDetail(row);
46 } 97 }
47 }, { 98 }, {
48 prop: 'createTime', 99 prop: 'createTime',
@@ -50,6 +101,27 @@ export default { @@ -50,6 +101,27 @@ export default {
50 }, { 101 }, {
51 prop: 'faultState', 102 prop: 'faultState',
52 label: '故障状态' 103 label: '故障状态'
  104 + }, {
  105 + prop: 'solveway',
  106 + label: '处理方式'
  107 + }, {
  108 + prop: 'solvetime',
  109 + label: '处理时间'
  110 + }, {
  111 + prop: 'solveby',
  112 + label: '处理人'
  113 + }, {
  114 + prop: 'duration',
  115 + label: '持续时长'
  116 + }, {
  117 + prop: 'reason',
  118 + label: '原因分析'
  119 + }, {
  120 + prop: 'solution',
  121 + label: '处理方案'
  122 + }, {
  123 + prop: 'influencescope',
  124 + label: '影响范围'
53 }], 125 }],
54 dataList: [], 126 dataList: [],
55 total: 0 127 total: 0
@@ -82,14 +154,15 @@ export default { @@ -82,14 +154,15 @@ export default {
82 let getPageInfo = ({page, limit}) => { 154 let getPageInfo = ({page, limit}) => {
83 searchForm.value.page = page; 155 searchForm.value.page = page;
84 searchForm.value.pageSize = limit; 156 searchForm.value.pageSize = limit;
85 -  
86 // 下一页搜索 157 // 下一页搜索
87 getPage(); 158 getPage();
88 } 159 }
89 160
90 const { 161 const {
  162 + settingDetail,
91 showFaultDetailDialog, 163 showFaultDetailDialog,
92 faultDetailDialogTitle, 164 faultDetailDialogTitle,
  165 + faultDetailDetailInfo,
93 closeFaultDetailDialog 166 closeFaultDetailDialog
94 } = faultDetail(); 167 } = faultDetail();
95 168
@@ -105,7 +178,14 @@ export default { @@ -105,7 +178,14 @@ export default {
105 list, 178 list,
106 getPage, 179 getPage,
107 getPageInfo, 180 getPageInfo,
108 - handleClick 181 + handleClick,
  182 +
  183 + // 告警需求弹框
  184 + settingDetail,
  185 + showFaultDetailDialog,
  186 + faultDetailDialogTitle,
  187 + faultDetailDetailInfo,
  188 + closeFaultDetailDialog
109 } 189 }
110 } 190 }
111 } 191 }
@@ -3,30 +3,68 @@ @@ -3,30 +3,68 @@
3 <div class="search"> 3 <div class="search">
4 <div class="condition"> 4 <div class="condition">
5 <el-form-item> 5 <el-form-item>
6 - <el-input v-model="formInline.user" placeholder="输入关键字"></el-input> 6 + <el-input v-model="searchForm.keyword" placeholder="输入关键字"
  7 + @keydown.enter.native="getPage"></el-input>
7 </el-form-item> 8 </el-form-item>
8 - <el-form-item>  
9 - <el-select v-model="formInline.region" placeholder="故障分类"> 9 + <!--<el-form-item>
  10 + <el-select v-model="searchForm.category" placeholder="故障分类">
10 <el-option label="Zone one" value="shanghai"></el-option> 11 <el-option label="Zone one" value="shanghai"></el-option>
11 <el-option label="Zone two" value="beijing"></el-option> 12 <el-option label="Zone two" value="beijing"></el-option>
12 </el-select> 13 </el-select>
13 - </el-form-item> 14 + </el-form-item>-->
14 </div> 15 </div>
15 <div class="btns"> 16 <div class="btns">
16 <el-form-item> 17 <el-form-item>
17 - <el-button type="primary" @click="onSubmit">搜索</el-button> 18 + <el-button type="primary" @click="getPage">搜索</el-button>
18 </el-form-item> 19 </el-form-item>
19 </div> 20 </div>
20 </div> 21 </div>
21 22
22 - <cm-table-page :columns="[]" :dataList="[]"  
23 - @loaddata="getPage" :showIndex="true" 23 + <div class="search-table">
  24 + <cm-table-page :columns="list.columns"
  25 + :dataList="list.dataList"
  26 + :total="list.total"
  27 + @loaddata="getPageInfo"
24 :showIndex="true" 28 :showIndex="true"
25 - :showSelection="true"  
26 - :pageSizes="[10,50,90, 200, 300, 400]" :pageSize="limit"  
27 - :showBorder="true" :currentPage="currentPage" :total="total" :loading="false"  
28 - :showPage="true" :height="(height - 105)"  
29 - :maxWidth="max"> 29 + :showBorder="true"
  30 + :showPage="true"
  31 + :showTools="true"
  32 + :height="(height - 105)">
  33 + <template #tools="{scope}">
  34 + <el-button type="text" size="small" @click.prevent="handleClick(scope.row,scope.$index)">
  35 + 处理
  36 + </el-button>
  37 + </template>
30 </cm-table-page> 38 </cm-table-page>
31 </div> 39 </div>
  40 + </div>
  41 +
  42 + <!-- 弹框区域 -->
  43 + <cm-dialog :title="faultDetailDialogTitle" width="80%" :showDialogVisible="showFaultDetailDialog"
  44 + @hidedialog="closeFaultDetailDialog" :showFooter="false">
  45 + <template v-slot>
  46 + <div>
  47 + <el-timeline>
  48 + <el-timeline-item timestamp="2018/4/12" placement="top">
  49 + <el-card>
  50 + <h4>Update Github template</h4>
  51 + <p>Tom committed 2018/4/12 20:46</p>
  52 + </el-card>
  53 + </el-timeline-item>
  54 + <el-timeline-item timestamp="2018/4/3" placement="top">
  55 + <el-card>
  56 + <h4>Update Github template</h4>
  57 + <p>Tom committed 2018/4/3 20:46</p>
  58 + </el-card>
  59 + </el-timeline-item>
  60 + <el-timeline-item timestamp="2018/4/2" placement="top">
  61 + <el-card>
  62 + <h4>Update Github template</h4>
  63 + <p>Tom committed 2018/4/2 20:46</p>
  64 + </el-card>
  65 + </el-timeline-item>
  66 + </el-timeline>
  67 + </div>
  68 + </template>
  69 + </cm-dialog>
32 </div> 70 </div>
  1 +const faultDetail = () => {
  2 + const {proxy} = Vue.getCurrentInstance();
  3 + let showFaultDetailDialog = Vue.ref(false);
  4 + let faultDetailDialogTitle = Vue.ref('');
  5 +
  6 + /**
  7 + * 关闭弹框
  8 + * <p>
  9 + * 作者： Wang
  10 + * 时间：2021/12/13 20:14
  11 + */
  12 + let closeFaultDetailDialog = (flg) => {
  13 + showFaultDetailDialog.value = flg;
  14 + }
  15 +
  16 + return {
  17 + showFaultDetailDialog,
  18 + faultDetailDialogTitle,
  19 + closeFaultDetailDialog
  20 + }
  21 +}
1 export default { 22 export default {
2 name: 'resIndex', 23 name: 'resIndex',
3 template: '', 24 template: '',
4 - components: {  
5 - }, 25 + components: {},
6 data() { 26 data() {
7 return { 27 return {
8 - props : {  
9 - label:'label',  
10 - children:'children' 28 + props: {
  29 + label: 'label',
  30 + children: 'children'
11 } 31 }
12 } 32 }
13 }, 33 },
14 setup() { 34 setup() {
15 const {proxy} = Vue.getCurrentInstance(); 35 const {proxy} = Vue.getCurrentInstance();
16 - let height = Vue.ref(window.innerHeight -20); 36 + let height = Vue.ref(window.innerHeight - 20);
17 37
18 - let formInline = Vue.ref({  
19 - user: '',  
20 - region: '', 38 + // 搜索表单内容
  39 + let searchForm = Vue.ref({
  40 + keyword: '',
  41 + page: 1,
  42 + pageSize: 10
21 }); 43 });
  44 +
  45 + // 列表展示结果
  46 + let list = Vue.ref({
  47 + columns: [{
  48 + prop: 'faultBody',
  49 + label: '故障主体',
  50 + click: function (row) {
  51 + // 展示弹框
  52 + closeFaultDetailDialog(true);
  53 +
  54 + // 设置标题
  55 + faultDetailDialogTitle.value = `${row.faultBody}诊断报告`;
  56 + }
  57 + }, {
  58 + prop: 'createTime',
  59 + label: '发生时间'
  60 + }, {
  61 + prop: 'faultState',
  62 + label: '故障状态'
  63 + }],
  64 + dataList: [],
  65 + total: 0
  66 + });
  67 +
  68 + /**
  69 + * 分页查询
  70 + * <p>
  71 + * 作者： Wang
  72 + * 时间：2021/12/13 16:51
  73 + */
  74 + let getPage = () => {
  75 + proxy.$http.get(`/api-web/fault/page`, searchForm.value, function (res) {
  76 + if (res && res.data) {
  77 + list.value.dataList = res.data;
  78 + }
  79 + });
  80 + }
  81 +
  82 + let handleClick = (row, index) => {
  83 +
  84 + }
  85 +
  86 + /**
  87 + * 分页切换
  88 + * <p>
  89 + * 作者： Wang
  90 + * 时间：2021/12/13 17:06
  91 + */
  92 + let getPageInfo = ({page, limit}) => {
  93 + searchForm.value.page = page;
  94 + searchForm.value.pageSize = limit;
  95 +
  96 + // 下一页搜索
  97 + getPage();
  98 + }
  99 +
  100 + const {
  101 + showFaultDetailDialog,
  102 + faultDetailDialogTitle,
  103 + closeFaultDetailDialog
  104 + } = faultDetail();
  105 +
22 // 挂载完 106 // 挂载完
23 Vue.onMounted(() => { 107 Vue.onMounted(() => {
24 - 108 + // 初始化加载页面
  109 + getPage();
25 }) 110 })
26 111
27 -  
28 return { 112 return {
29 height, 113 height,
30 - formInline 114 + searchForm,
  115 + list,
  116 + getPage,
  117 + getPageInfo,
  118 + handleClick,
  119 +
  120 + // 告警需求弹框
  121 + showFaultDetailDialog,
  122 + faultDetailDialogTitle,
  123 + closeFaultDetailDialog
31 } 124 }
32 } 125 }
33 } 126 }