引入特殊字体，引入适配文件， 看板图表和视频监控排版，首页适配调整等

package.json

@@ -16,7 +16,7 @@
     "dependencies": {
         "axios": "0.18.1",
         "core-js": "3.6.5",
-        "echarts": "^5.0.1",
+        "echarts": "^4.8.0",
         "element-ui": "2.13.2",
         "file-saver": "^2.0.5",
         "js-cookie": "2.2.0",
@@ -24,6 +24,7 @@
         "nprogress": "0.2.0",
         "path-to-regexp": "2.4.0",
         "vue": "2.6.10",
+        "vue-count-to": "^1.0.13",
         "vue-router": "3.0.6",
         "vuex": "3.1.0",
         "xlsx": "^0.16.9"

src/assets/common/fonts/font.css

@@ -0,0 +1,11 @@
+@font-face {
+    font-family: "impact";
+    src: url('impact.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: electronicFont;
+    src: url('DS-DIGIT.TTF')
+}

src/assets/common/js/flexible.js

@@ -0,0 +1,43 @@
+(function flexible(window, document) {
+    var docEl = document.documentElement;
+    var dpr = window.devicePixelRatio || 1;
+
+    // adjust body font size
+    function setBodyFontSize() {
+        if (document.body) {
+            document.body.style.fontSize = 12 * dpr + "px";
+        } else {
+            document.addEventListener("DOMContentLoaded", setBodyFontSize);
+        }
+    }
+    setBodyFontSize();
+
+    // set 1rem = viewWidth / 10
+    function setRemUnit() {
+        var rem = docEl.clientWidth / 192;
+        docEl.style.fontSize = rem + "px";
+    }
+
+    setRemUnit();
+
+    // reset rem unit on page resize
+    window.addEventListener("resize", setRemUnit);
+    window.addEventListener("pageshow", function(e) {
+        if (e.persisted) {
+            setRemUnit();
+        }
+    });
+
+    // detect 0.5px supports
+    if (dpr >= 2) {
+        var fakeBody = document.createElement("body");
+        var testElement = document.createElement("div");
+        testElement.style.border = ".5px solid transparent";
+        fakeBody.appendChild(testElement);
+        docEl.appendChild(fakeBody);
+        if (testElement.offsetHeight === 1) {
+            docEl.classList.add("hairlines");
+        }
+        docEl.removeChild(fakeBody);
+    }
+})(window, document);

src/main.js

@@ -12,19 +12,17 @@ import App from './App'
 import store from './store'
 import router from './router'
 
+
+// 引入字体样式
+import '@/assets/common/fonts/font.css';
+import '@/assets/common/js/flexible.js';
+
+
+
 import '@/icons' // icon
 import '@/permission' // permission control
 
-// 按需引入 引入 ECharts 主模块
-var echarts = require('echarts/lib/echarts')
-    // 引入柱状图
-require('echarts/lib/chart/bar')
-    // 引入提示框和标题组件
-require('echarts/lib/component/tooltip')
-require('echarts/lib/component/title')
 
-//全部引入
-var echarts = require('echarts')
 
 /**
  * If you don't want to use mock-server

src/styles/index.scss

@@ -338,184 +338,4 @@ div:focus {
 
 .el-dialog__headerbtn .el-dialog__close {
     color: #303133
-}
-
-
-/**
-      首页
-**/
-
-.main-container-box {
-    min-width: 1280px;
-    min-height: 100%;
-    width: 100%;
-    height: 100vh;
-    background-color: #021132;
-    overflow: hidden;
-    color: #fff
-}
-
-// 头部导航样式
-.nav-header {
-    min-width: 1280px;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    color: #fff;
-    text-align: center;
-    font-size: 2rem;
-    line-height: 80px;
-    background: url(../assets/nav-header-bg.png);
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-}
-
-@media (max-width: 1440px) {
-    .nav-header {
-        font-size: 30px;
-        line-height: 60px;
-    }
-}
-
-.panel-box {
-    margin-top: 80px;
-    position: relative;
-    height: 100vh
-}
-
-.panel {
-    width: 410px;
-    border: 1px solid #3486DA;
-    .panel-tit {
-        background: linear-gradient(to right, #021132 0%, #3053AF 50%, #021132 100%);
-        padding: 12px;
-        color: #fff;
-        text-align: center;
-        font-size: 16px;
-    }
-    .pie-item {
-        margin-top: 40px;
-        width: 50%;
-        height: 300px;
-        display: inline-block;
-        border: 1px solid pink
-    }
-}
-
-.panel::before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    content: "";
-    width: 10px;
-    height: 10px;
-    border-top: 2px solid #02a6b5;
-    border-left: 2px solid #02a6b5;
-}
-
-.panel::after {
-    position: absolute;
-    top: 0;
-    right: 0;
-    content: "";
-    width: 10px;
-    height: 10px;
-    border-top: 2px solid #02a6b5;
-    border-right: 2px solid #02a6b5;
-}
-
-.panel .panel-footer {
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-}
-
-.panel .panel-footer::before {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    content: "";
-    width: 10px;
-    height: 10px;
-    border-bottom: 2px solid #02a6b5;
-    border-left: 2px solid #02a6b5;
-}
-
-.panel .panel-footer::after {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    content: "";
-    width: 10px;
-    height: 10px;
-    border-bottom: 2px solid #02a6b5;
-    border-right: 2px solid #02a6b5;
-}
-
-.panel.sbgk {
-    position: absolute;
-    left: 20px;
-    top: 20px;
-    z-index: 2
-}
-
-.panel.monitor {
-    position: absolute;
-    left: 20px;
-    bottom: 20px;
-    z-index: 3
-}
-
-.num-analysis {
-    margin: 10px
-}
-
-.num-analysis>div {
-    width: 48.7%;
-    border: 1px solid #3486DA;
-    display: inline-block;
-    background: #074198
-}
-
-.num-analysis>div:first-child {
-    margin-right: 10px;
-}
-
-ul {
-    padding: 0;
-    margin: 0;
-    list-style: none;
-}
-
-li,
-p {
-    padding: 0;
-    margin: 0;
-    list-style: none;
-}
-
-.num-analysis ul li {
-    padding: 0 10px;
-    margin: 10px 0;
-    float: left;
-    width: 50%;
-    text-align: center;
-    position: relative;
-}
-
-.num-analysis ul li:first-child {
-    border-right: 1px dashed #42A4FF
-}
-
-.num-tit {
-    font-size: 14px;
-    margin-bottom: 10px;
-}
-
-.num-no {
-    font-size: 18px;
-    color: #04F9AB;
-    font-weight: 500
 }

src/utils/index.js

@@ -9,46 +9,46 @@
  * @returns {string | null}
  */
 export function parseTime(time, cFormat) {
-  if (arguments.length === 0 || !time) {
-    return null
-  }
-  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
-  let date
-  if (typeof time === 'object') {
-    date = time
-  } else {
-    if ((typeof time === 'string')) {
-      if ((/^[0-9]+$/.test(time))) {
-        // support "1548221490638"
-        time = parseInt(time)
-      } else {
-        // support safari
-        // https://stackoverflow.com/questions/4310953/invalid-date-in-safari
-        time = time.replace(new RegExp(/-/gm), '/')
-      }
+    if (arguments.length === 0 || !time) {
+        return null
     }
+    const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
+    let date
+    if (typeof time === 'object') {
+        date = time
+    } else {
+        if ((typeof time === 'string')) {
+            if ((/^[0-9]+$/.test(time))) {
+                // support "1548221490638"
+                time = parseInt(time)
+            } else {
+                // support safari
+                // https://stackoverflow.com/questions/4310953/invalid-date-in-safari
+                time = time.replace(new RegExp(/-/gm), '/')
+            }
+        }
 
-    if ((typeof time === 'number') && (time.toString().length === 10)) {
-      time = time * 1000
+        if ((typeof time === 'number') && (time.toString().length === 10)) {
+            time = time * 1000
+        }
+        date = new Date(time)
     }
-    date = new Date(time)
-  }
-  const formatObj = {
-    y: date.getFullYear(),
-    m: date.getMonth() + 1,
-    d: date.getDate(),
-    h: date.getHours(),
-    i: date.getMinutes(),
-    s: date.getSeconds(),
-    a: date.getDay()
-  }
-  const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
-    const value = formatObj[key]
-    // Note: getDay() returns 0 on Sunday
-    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
-    return value.toString().padStart(2, '0')
-  })
-  return time_str
+    const formatObj = {
+        y: date.getFullYear(),
+        m: date.getMonth() + 1,
+        d: date.getDate(),
+        h: date.getHours(),
+        i: date.getMinutes(),
+        s: date.getSeconds(),
+        a: date.getDay()
+    }
+    const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
+        const value = formatObj[key]
+            // Note: getDay() returns 0 on Sunday
+        if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
+        return value.toString().padStart(2, '0')
+    })
+    return time_str
 }
 
 /**
@@ -57,41 +57,41 @@ export function parseTime(time, cFormat) {
  * @returns {string}
  */
 export function formatTime(time, option) {
-  if (('' + time).length === 10) {
-    time = parseInt(time) * 1000
-  } else {
-    time = +time
-  }
-  const d = new Date(time)
-  const now = Date.now()
+    if (('' + time).length === 10) {
+        time = parseInt(time) * 1000
+    } else {
+        time = +time
+    }
+    const d = new Date(time)
+    const now = Date.now()
 
-  const diff = (now - d) / 1000
+    const diff = (now - d) / 1000
 
-  if (diff < 30) {
-    return '刚刚'
-  } else if (diff < 3600) {
-    // less 1 hour
-    return Math.ceil(diff / 60) + '分钟前'
-  } else if (diff < 3600 * 24) {
-    return Math.ceil(diff / 3600) + '小时前'
-  } else if (diff < 3600 * 24 * 2) {
-    return '1天前'
-  }
-  if (option) {
-    return parseTime(time, option)
-  } else {
-    return (
-      d.getMonth() +
-      1 +
-      '月' +
-      d.getDate() +
-      '日' +
-      d.getHours() +
-      '时' +
-      d.getMinutes() +
-      '分'
-    )
-  }
+    if (diff < 30) {
+        return '刚刚'
+    } else if (diff < 3600) {
+        // less 1 hour
+        return Math.ceil(diff / 60) + '分钟前'
+    } else if (diff < 3600 * 24) {
+        return Math.ceil(diff / 3600) + '小时前'
+    } else if (diff < 3600 * 24 * 2) {
+        return '1天前'
+    }
+    if (option) {
+        return parseTime(time, option)
+    } else {
+        return (
+            d.getMonth() +
+            1 +
+            '月' +
+            d.getDate() +
+            '日' +
+            d.getHours() +
+            '时' +
+            d.getMinutes() +
+            '分'
+        )
+    }
 }
 
 /**
@@ -99,19 +99,65 @@ export function formatTime(time, option) {
  * @returns {Object}
  */
 export function param2Obj(url) {
-  const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ')
-  if (!search) {
-    return {}
-  }
-  const obj = {}
-  const searchArr = search.split('&')
-  searchArr.forEach(v => {
-    const index = v.indexOf('=')
-    if (index !== -1) {
-      const name = v.substring(0, index)
-      const val = v.substring(index + 1, v.length)
-      obj[name] = val
+    const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ')
+    if (!search) {
+        return {}
     }
-  })
-  return obj
+    const obj = {}
+    const searchArr = search.split('&')
+    searchArr.forEach(v => {
+        const index = v.indexOf('=')
+        if (index !== -1) {
+            const name = v.substring(0, index)
+            const val = v.substring(index + 1, v.length)
+            obj[name] = val
+        }
+    })
+    return obj
 }
+
+
+// 缩放引入
+export function flexible(window, document) {
+    var docEl = document.documentElement;
+    var dpr = window.devicePixelRatio || 1;
+
+    // adjust body font size
+    function setBodyFontSize() {
+        if (document.body) {
+            document.body.style.fontSize = 12 * dpr + "px";
+        } else {
+            document.addEventListener("DOMContentLoaded", setBodyFontSize);
+        }
+    }
+    setBodyFontSize();
+
+    // set 1rem = viewWidth / 10
+    function setRemUnit() {
+        var rem = docEl.clientWidth / 24;
+        docEl.style.fontSize = rem + "px";
+    }
+
+    setRemUnit();
+
+    // reset rem unit on page resize
+    window.addEventListener("resize", setRemUnit);
+    window.addEventListener("pageshow", function(e) {
+        if (e.persisted) {
+            setRemUnit();
+        }
+    });
+
+    // detect 0.5px supports
+    if (dpr >= 2) {
+        var fakeBody = document.createElement("body");
+        var testElement = document.createElement("div");
+        testElement.style.border = ".5px solid transparent";
+        fakeBody.appendChild(testElement);
+        docEl.appendChild(fakeBody);
+        if (testElement.offsetHeight === 1) {
+            docEl.classList.add("hairlines");
+        }
+        docEl.removeChild(fakeBody);
+    }
+}

src/views/index/components/lineChart.vue

@@ -1,135 +0,0 @@
-<template>
-  <div :class="className" :style="{height:height,width:width}" />
-</template>
-
-<script>
-import echarts from 'echarts'
-// require('echarts/theme/macarons') // echarts theme
-// import resize from './mixins/resize'
-
-export default {
-  mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '350px'
-    },
-    autoResize: {
-      type: Boolean,
-      default: true
-    },
-    chartData: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {
-      chart: null
-    }
-  },
-  watch: {
-    chartData: {
-      deep: true,
-      handler(val) {
-        this.setOptions(val)
-      }
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-      this.setOptions(this.chartData)
-    },
-    setOptions({ expectedData, actualData } = {}) {
-      this.chart.setOption({
-        xAxis: {
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-          boundaryGap: false,
-          axisTick: {
-            show: false
-          }
-        },
-        grid: {
-          left: 10,
-          right: 10,
-          bottom: 20,
-          top: 30,
-          containLabel: true
-        },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'cross'
-          },
-          padding: [5, 10]
-        },
-        yAxis: {
-          axisTick: {
-            show: false
-          }
-        },
-        legend: {
-          data: ['expected', 'actual']
-        },
-        series: [{
-          name: 'expected', itemStyle: {
-            normal: {
-              color: '#FF005A',
-              lineStyle: {
-                color: '#FF005A',
-                width: 2
-              }
-            }
-          },
-          smooth: true,
-          type: 'line',
-          data: expectedData,
-          animationDuration: 2800,
-          animationEasing: 'cubicInOut'
-        },
-        {
-          name: 'actual',
-          smooth: true,
-          type: 'line',
-          itemStyle: {
-            normal: {
-              color: '#3888fa',
-              lineStyle: {
-                color: '#3888fa',
-                width: 2
-              },
-              areaStyle: {
-                color: '#f3f8ff'
-              }
-            }
-          },
-          data: actualData,
-          animationDuration: 2800,
-          animationEasing: 'quadraticOut'
-        }]
-      })
-    }
-  }
-}
-</script>

src/views/index/components/pieCamera.vue

@@ -0,0 +1,222 @@
+<template>
+  <div id="main2" style="width: 100%; height: 100%"></div>
+</template>
+<script>
+import echarts from "echarts";
+export default {
+  name: "pieCamera",
+  mounted() {
+    this.showMain();
+  },
+  methods: {
+    showMain() {
+      // 基于准备好的dom，初始化echarts实例
+      var myChart = echarts.init(document.getElementById("main2"));
+
+      var data = {
+        name: "摄像头",
+        value: [39],
+        // nAmount: 566557.14,
+      };
+
+      var color = ["#C8E4FF", "#0483FF", "#0483FF"];
+
+      var title=data.value[0];
+      var per="%"
+
+      // 指定图表的配置项和数据
+      var option = {
+
+
+        title: {
+          text: '{a|'+ title +'}{b|'+ per +'}',
+          textStyle: {
+            rich:{
+                a: {
+                    fontSize: 30,
+                    color: color[2],
+                    fontFamily: "impact",
+                },
+                b: {
+                    fontSize: 16,
+                    fontFamily: "impact",
+                     color: color[2],
+                },
+            }
+          },
+          subtext: '异常率',
+          subtextStyle: {
+              color: '#fff',
+              fontSize:'12',
+          },
+          left: "center",
+          top: "37%",    //aa圈内标题的位置
+        },
+      
+        
+        graphic: [
+          {
+            type: "text",
+            z: 100,
+            left: "center",
+            top: "90%",   // aa 底下标题w在容器里的位置
+            style: {
+              fill: "#fff",
+              text: data.name,
+              // text: [
+              //     '横轴表示温度，单位是°C',
+              //     '纵轴表示高度，单位是km',
+              //     '右上角有一个图片做的水印',
+              //     '这个文本块可以放在图中各',
+              //     '种位置'
+              // ].join('\n'),
+              font: "1.6rem Microsoft YaHei",     // aa 底下标题字体大小
+            },
+          },
+        ],
+        tooltip: {    //aa 手指移入
+          formatter: function (params) {
+            return (
+              '<span style="color: #fff;">占比：' + params.value + "%</span>"
+            );
+          },
+        },
+
+        angleAxis: {
+          max: 100,
+          clockwise: false, // 逆时针
+          // 隐藏刻度线
+          show: false,
+          startAngle: 90,
+        },
+
+
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+
+
+        
+        polar: [
+          {
+            center: ["50%", "50%"], //中心点位置    aa填充圈的中心位置
+            radius: "100%", //图形大小    aa填充圈的图形大小
+          },
+        ],
+        series: [
+          {
+            name: "小环",
+            type: "gauge",
+            splitNumber: 15,
+            radius: "75%",   //aa发散圈的大小
+            center: ["50%", "50%"],
+            startAngle: 0,
+            endAngle: 359.9999,
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: true,
+              lineStyle: {
+                color: color[1],
+                width: 1,    // aa发散圈的粗细
+                shadowBlur: 1,
+                shadowColor: color[1],
+              },
+              length: 8,  // aa发散圈的长度
+              splitNumber: 5,  //aa发散圈每一条间隔
+            },
+            splitLine: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+            },
+            detail: {
+              show: false,
+            },
+          },
+          {
+            type: "bar",
+            z: 10,
+            data: data.value,
+            showBackground: false,
+            backgroundStyle: {
+              color: color[1],
+              borderWidth: 10,
+              width: 10,
+            },
+            coordinateSystem: "polar",
+            // roundCap: true,   //aa填充圈圆角
+            barWidth: 7,    //aa填充圈宽度
+            itemStyle: {
+              normal: {
+                opacity: 1,
+                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
+                  {
+                    offset: 0,
+                    color: color[0],
+                  },
+                  {
+                    offset: 1,
+                    color: color[1],
+                  },
+                ]),
+                shadowBlur: 5,
+                shadowColor: "#2A95F9",
+              },
+            },
+          },
+          {
+            type: "pie",
+            name: "内层细圆环",
+            radius: ["50%", "52%"],   //aa内层细圆环
+             center: ["50%", "50%"],
+            startAngle: 120,
+            hoverAnimation: false,
+            clockWise: true,
+            barWidth: 1,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
+                  {
+                    offset: 0,
+                    color: color[0],
+                  },
+                  {
+                    offset: 1,
+                    color: color[1],
+                  },
+                ]),
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+            data: [100],
+          },
+        ],
+      };
+
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option);
+      window.addEventListener("resize", function() {
+    myChart.resize();
+  });
+    },
+  },
+};
+</script>

src/views/index/components/pieSounder.vue

@@ -0,0 +1,218 @@
+<template>
+  <div id="main" style="width: 100%; height: 100%"></div>
+</template>
+<script>
+import echarts from "echarts";
+export default {
+  name: "pieSounder",
+  mounted() {
+    this.showMain();
+  },
+  methods: {
+    showMain() {
+      // 基于准备好的dom，初始化echarts实例
+      var myChart = echarts.init(document.getElementById("main"));
+
+      var data = {
+        name: "红外探测器",
+        value: [50],
+        // nAmount: 566557.14,
+      };
+
+      var color = ["#9AFFDE", "#00F9AA", "#00F9AA"];
+
+      var title = data.value[0];
+      var per = "%";
+
+      // 指定图表的配置项和数据
+      var option = {
+        title: {
+          // text: data.value[0] + "%",
+          text: "{a|" + title + "}{b|" + per + "}",
+          textStyle: {
+            rich: {
+              a: {
+                fontSize: 30,
+                color: color[2],
+                fontFamily: "impact",
+              },
+              b: {
+                fontSize: 16,
+                fontFamily: "impact",
+                color: color[2],
+              },
+            },
+          },
+          subtext: "异常率",
+          subtextStyle: {
+            color: "#fff",
+            fontSize: "12",
+          },
+          left: "center",
+          top: "37%", //aa圈内标题的位置
+        },
+
+        graphic: [
+          {
+            type: "text",
+            z: 100,
+            left: "center",
+            top: "90%", // aa 底下标题w在容器里的位置
+            style: {
+              fill: "#fff",
+              text: data.name,
+              // text: [
+              //     '横轴表示温度，单位是°C',
+              //     '纵轴表示高度，单位是km',
+              //     '右上角有一个图片做的水印',
+              //     '这个文本块可以放在图中各',
+              //     '种位置'
+              // ].join('\n'),
+              font: "1.6rem Microsoft YaHei", // aa 底下标题字体大小
+            },
+          },
+        ],
+        tooltip: {
+          //aa 手指移入
+          formatter: function (params) {
+            return (
+              '<span style="color: #fff;">占比：' + params.value + "%</span>"
+            );
+          },
+        },
+
+        angleAxis: {
+          max: 100,
+          clockwise: false, // 逆时针
+          // 隐藏刻度线
+          show: false,
+          startAngle: 90,
+        },
+
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+
+        polar: [
+          {
+            center: ["50%", "50%"], //中心点位置    aa填充圈的中心位置
+            radius: "100%", //图形大小    aa填充圈的图形大小
+          },
+        ],
+        series: [
+          {
+            name: "小环",
+            type: "gauge",
+            splitNumber: 15,
+            radius: "75%", //aa发散圈的大小
+            center: ["50%", "50%"],
+            startAngle: 0,
+            endAngle: 359.9999,
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: true,
+              lineStyle: {
+                color: color[1],
+                width: 1, // aa发散圈的粗细
+                shadowBlur: 1,
+                shadowColor: color[1],
+              },
+              length: 8, // aa发散圈的长度
+              splitNumber: 5, //aa发散圈每一条间隔
+            },
+            splitLine: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+            },
+            detail: {
+              show: false,
+            },
+          },
+          {
+            type: "bar",
+            z: 10,
+            data: data.value,
+            showBackground: false,
+            backgroundStyle: {
+              color: color[1],
+              borderWidth: 10,
+              width: 10,
+            },
+            coordinateSystem: "polar",
+            // roundCap: true,   //aa填充圈圆角
+            barWidth: 7, //aa填充圈宽度
+            itemStyle: {
+              normal: {
+                opacity: 1,
+                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
+                  {
+                    offset: 0,
+                    color: color[0],
+                  },
+                  {
+                    offset: 1,
+                    color: color[1],
+                  },
+                ]),
+                shadowBlur: 5,
+                shadowColor: "#2A95F9",
+              },
+            },
+          },
+          {
+            type: "pie",
+            name: "内层细圆环",
+            radius: ["50%", "52%"], //aa内层细圆环
+            center: ["50%", "50%"],
+            startAngle: 120,
+            hoverAnimation: false,
+            clockWise: true,
+            barWidth: 1,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
+                  {
+                    offset: 0,
+                    color: color[0],
+                  },
+                  {
+                    offset: 1,
+                    color: color[1],
+                  },
+                ]),
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+            data: [100],
+          },
+        ],
+      };
+
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+  },
+};
+</script>

src/views/index/index.vue

@@ -1,98 +1,335 @@
 <template>
-  <div class="app-container" style="background:black;margin:0 padding:0">
-    <div class="main-container-box">
-      <div class="nav-header">安防综合管理平台</div>
-      <div class="panel-box">
-        <div class="panel sbgk">
-          <div class="panel-tit">设备工况</div>
-          <div class="pie-box">
-            <div class="pie-item">饼状图1</div>
-
-            <div class="pie-item">饼状图2</div>
+  <div class="main-container-box">
+    <div class="nav-header">安防综合管理平台</div>
+    <div class="panel-box">
+      <div class="panel sbgk">
+        <div class="panel-tit">设备工况</div>
+        <div class="pie-box">
+          <div class="pie-item">
+            <pie-sounder></pie-sounder>
           </div>
 
-          <div class="num-analysis">
-            <div>
-              <ul>
-                <li>
-                  <p class="num-tit">设备总数</p>
-                  <p class="num-no">260</p>
-                </li>
-                <li>
-                  <p class="num-tit">异常数量</p>
-                  <p class="num-no" style="color: #f84803">260</p>
-                </li>
-              </ul>
-            </div>
-            <div>
-              <ul>
-                <li>
-                  <p class="num-tit">设备总数</p>
-                  <p class="num-no" style="color: #00acff">260</p>
-                </li>
-                <li>
-                  <p class="num-tit">异常数量</p>
-                  <p class="num-no" style="color: #fec400">260</p>
-                </li>
-              </ul>
-            </div>
+          <div class="pie-item">
+            <pie-camera></pie-camera>
           </div>
+        </div>
 
-          <div class="panel-footer"></div>
+        <div class="num-analysis">
+          <div>
+            <ul>
+              <li>
+                <p class="num-tit">设备总数</p>
+                <p class="num-no">260</p>
+              </li>
+              <li>
+                <p class="num-tit">异常数量</p>
+                <p class="num-no" style="color: #f84803">15</p>
+              </li>
+            </ul>
+          </div>
+          <div>
+            <ul>
+              <li>
+                <p class="num-tit">设备总数</p>
+                <p class="num-no" style="color: #00acff">500</p>
+              </li>
+              <li>
+                <p class="num-tit">异常数量</p>
+                <p class="num-no" style="color: #fec400">100</p>
+              </li>
+            </ul>
+          </div>
         </div>
-        <!-- <div class="panel monitor"></div> -->
+
+        <div class="panel-footer"></div>
+      </div>
+      <div class="panel monitor">
+        <div class="panel-tit">视频监控</div>
+        <ul class="monitor-list">
+          <li>
+            <img src="@/assets/monitor.png" alt="" />
+            <p class="monitor-tit">摄像头1</p>
+          </li>
+          <li>
+            <img src="@/assets/monitor.png" alt="" />
+            <p class="monitor-tit">摄像头2</p>
+          </li>
+          <li>
+            <img src="@/assets/monitor.png" alt="" />
+            <p class="monitor-tit">摄像头3</p>
+          </li>
+          <li>
+            <img src="@/assets/monitor.png" alt="" />
+            <p class="monitor-tit">摄像头4</p>
+          </li>
+          <li>
+            <img src="@/assets/monitor.png" alt="" />
+            <p class="monitor-tit">摄像头5</p>
+          </li>
+          <li>
+            <img src="@/assets/monitor.png" alt="" />
+            <p class="monitor-tit">摄像头6</p>
+          </li>
+        </ul>
+        <div class="panel-footer"></div>
       </div>
     </div>
   </div>
 </template>
 
-
 <script>
+import pieSounder from "./components/pieSounder";
+import PieCamera from "./components/pieCamera";
+// import { flexible } from "@/utils";
+
 export default {
+  components: { pieSounder, PieCamera },
   data() {
     return {};
   },
-  mounted() {
-  this.initCharts();
-},
-methods: {
-  initCharts() {
-    this.chart = echarts.init(this.$el);
-    this.setOptions();
-  },
-  setOptions() {
-    this.chart.setOption({
-      title: {
-        text: 'ECharts 入门示例'
-      },
-      tooltip: {},
-      xAxis: {
-        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
-      },
-      yAxis: {},
-      series: [{
-        name: '销量',
-        type: 'bar',
-        data: [5, 20, 36, 10, 10, 20]
-      }]
-    })
-  }
-},
-
-watch: {
-  options: {
-    handler(options) {
-      this.chart.setOption(this.options)
-    },
-    deep: true
-  },
-}
 };
 </script>
-<style scoped>
-.app-container {
+
+<style lang="scss">
+/* 修复input 背景不协调 和光标变色 */
+/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
+
+$bg: #283443;
+$light_gray: #fff;
+$cursor: #fff;
+
+@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
+  .main-container-box .el-input input {
+    color: $cursor;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+// @import "../../styles/mixin.scss";
+
+.main-container-box {
+  min-width: 1280px;
+  min-height: 100%;
+  width: 100%;
+  height: 100vh;
+  background-color: #000;
+  overflow: hidden;
+  color: #fff;
+}
+
+// 头部导航样式
+.nav-header {
+   min-width: 1280px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  color: #fff;
+  text-align: center;
+  font-size: 4rem;
+  line-height: 8rem;
+  background: url(../../assets/nav-header-bg.png);
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+
+// @media (max-width: 1440px) {
+//   .nav-header {
+//     font-size: 30px;
+//     line-height: 60px;
+//   }
+// }
+
+.panel-box {
+  margin-top: 8rem;
+  position: relative;
+  height: calc(100vh - 8rem);
+  min-width: 1280px;
+}
+
+.panel {
+  width: 41rem;
+
+  min-width: 260px;
+  position: relative;
+  background: #021132;
+  border: 1px solid #3486da;
+
+  .panel-tit {
+    background: linear-gradient(
+      to right,
+      #021132 0%,
+      #3053af 50%,
+      #021132 100%
+    );
+    padding: 1.2rem;
+    color: #fff;
+    text-align: center;
+    font-size: 1.6rem;
+    font-family: "impact";
+  }
+  .pie-item {
+    width: 50%;
+    height: 24rem;
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+.panel::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  content: "";
+  width: 10px;
+  height: 10px;
+  border-top: 2px solid #02a6b5;
+  border-left: 2px solid #02a6b5;
+}
+.panel::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  content: "";
+  width: 10px;
+  height: 10px;
+  border-top: 2px solid #02a6b5;
+  border-right: 2px solid #02a6b5;
+}
+.panel .panel-footer {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+}
+.panel .panel-footer::before {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  content: "";
+  width: 10px;
+  height: 10px;
+  border-bottom: 2px solid #02a6b5;
+  border-left: 2px solid #02a6b5;
+}
+.panel .panel-footer::after {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  content: "";
+  width: 10px;
+  height: 10px;
+  border-bottom: 2px solid #02a6b5;
+  border-right: 2px solid #02a6b5;
+}
+
+.panel.sbgk {
+  position: absolute;
+  left: 2rem;
+  top: 2rem;
+  z-index: 2;
+}
+
+
+.num-analysis {
+  margin: 1rem;
+}
+.num-analysis > div {
+  width: 48.7%;
+  border: 1px solid #3486da;
+  display: inline-block;
+  background: #074198;
+}
+.num-analysis > div:first-child {
+  margin-right: 1rem;
+}
+ul {
+  padding: 0;
   margin: 0;
+  list-style: none;
+}
+
+li,
+p {
   padding: 0;
-  height: 100vh;
+  margin: 0;
+  list-style: none;
+}
+img {
+  display: block;
+}
+.num-analysis ul li {
+  padding: 0 1rem;
+  margin: 10px 0;
+  float: left;
+  width: 50%;
+
+  text-align: center;
+  position: relative;
+}
+
+.num-analysis ul li:first-child {
+  border-right: 1px dashed #42a4ff;
+}
+.num-tit {
+  font-size: 1.4rem;
+  margin-bottom: 1rem;
+}
+.num-no {
+  font-size: 1.8rem;
+  color: #04f9ab;
+  font-family: "impact";
+}
+
+/* 约束屏幕尺寸 */
+@media screen and (max-width: 1024px) {
+  html {
+    font-size: 80px !important;
+  }
+}
+@media screen and (min-width: 1920px) {
+  html {
+    font-size: 192px !important;
+  }
+}
+
+
+
+
+
+.panel.monitor {
+  height: auto;
+  position: absolute;
+  bottom: 3rem;
+  right: 1rem;
+
+  z-index: 3;
+}
+
+.monitor-list {
+  padding: 1.2rem;
+  overflow: hidden;
+}
+.monitor-list li {
+  width: 50%;
+  position: relative;
+  display: block;
+  float: left;
+}
+.monitor-list li img {
+  width: 100%;
+}
+.monitor-tit {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  left: 0;
+  font-size: 1.2rem;
+  line-height: 3rem;
+  text-indent: 1rem;
+  // display:none;
+
+  background: rgba(0, 0, 0, 0.7);
 }
-</style>
+</style>

src/views/index/index2.vue

@@ -1,246 +0,0 @@
-<template>
-  <div class="main-container-box">
-    <div class="nav-header">安防综合管理平台</div>
-    <div class="panel-box">
-      <div class="panel sbgk">
-        <div class="panel-tit">
-          设备工况
-        </div>
-        <div class="pie-box">
-          <div class="pie-item">
-            饼状图1
-          </div>
-
-          <div class="pie-item">
-            饼状图2
-          </div>
-        </div>
-
-        <div class="num-analysis">
-          <div>
-            <ul>
-              <li>
-                <p class="num-tit">设备总数</p>
-                <p class="num-no">260</p>
-              </li>
-              <li>
-                <p class="num-tit">异常数量</p>
-                <p class="num-no" style="color:#F84803">260</p>
-              </li>
-            </ul>
-          </div>
-          <div>
-            <ul>
-               <li>
-                <p class="num-tit">设备总数</p>
-                <p class="num-no" style="color:#00ACFF">260</p>
-              </li>
-              <li>
-                <p class="num-tit">异常数量</p>
-                <p class="num-no" style="color:#FEC400">260</p>
-              </li>
-            </ul>
-          </div>
-        </div>
-
-     
-        <div class="panel-footer"></div>
-      </div>
-      <!-- <div class="panel monitor"></div> -->
-    </div>
-  </div>
-</template>
-
-<script>
-</script>
-
-<style lang="scss">
-/* 修复input 背景不协调 和光标变色 */
-/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
-
-$bg: #283443;
-$light_gray: #fff;
-$cursor: #fff;
-
-@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
-  .main-container-box .el-input input {
-    color: $cursor;
-  }
-}
-</style>
-
-<style lang="scss" scoped>
-// @import "../../styles/mixin.scss";
-
-
-.main-container-box {
-  min-width: 1280px;
-  min-height: 100%;
-  width: 100%;
-  height:100vh;
-  background-color: #021132;
-  overflow: hidden;
-  color:#fff
-}
-
-// 头部导航样式
-.nav-header {
-  min-width: 1280px;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  color: #fff;
-  text-align: center;
-  font-size: 2rem;
-  line-height: 80px;
-  background: url(../../assets/nav-header-bg.png);
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-}
-
-@media (max-width: 1440px) {
-  .nav-header {
-    font-size: 30px;
-    line-height: 60px;
-  }
-}
-
-.panel-box {
-  margin-top: 80px;
-  position:relative;
-  height:100vh
-}
-
-.panel {
-  width: 410px;
-
-  border:1px solid #3486DA;
-
-  .panel-tit{
-    background: linear-gradient(to right, #021132 0%, #3053AF 50%, #021132 100%);
-    padding:12px;
-    color:#fff;
-    text-align:center;
-    font-size:16px;
-  }
-  .pie-item{
-    margin-top:40px;
-    width:50%;
-    height:300px;
-    display:inline-block;
-    border:1px solid pink
-  }
-}
-
-.panel::before {
-  position: absolute;
-  top: 0;
-  left: 0;
-  content: "";
-  width: 10px;
-  height: 10px;
-  border-top: 2px solid #02a6b5;
-  border-left: 2px solid #02a6b5;
-}
-.panel::after {
-  position: absolute;
-  top: 0;
-  right: 0;
-  content: "";
-  width: 10px;
-  height: 10px;
-  border-top: 2px solid #02a6b5;
-  border-right: 2px solid #02a6b5;
-}
-.panel .panel-footer {
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-}
-.panel .panel-footer::before {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  content: "";
-  width: 10px;
-  height: 10px;
-  border-bottom: 2px solid #02a6b5;
-  border-left: 2px solid #02a6b5;
-}
-.panel .panel-footer::after {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  content: "";
-  width: 10px;
-  height: 10px;
-  border-bottom: 2px solid #02a6b5;
-  border-right: 2px solid #02a6b5;
-}
-
-
-.panel.sbgk{
-  position:absolute;
-  left:20px;
-  top:20px;
-  z-index:2
-  
-}
-.panel.monitor{
-   position:absolute;
-  left:20px;
-  bottom:20px;
-  
-  z-index:3
-
-}
-
-
-.num-analysis{
-  margin:10px
-}
-.num-analysis>div{
-  width:48.7%;
-  border:1px solid #3486DA;
-  display:inline-block;
-  background:#074198
-}
-.num-analysis>div:first-child{
-  margin-right:10px;
-}
-ul{
-  padding:0;margin:0;list-style:none;
-
-}
-li,p{
-  padding:0;margin:0;list-style:none;
-
-}
-.num-analysis ul li{
-  padding:0 10px;
-  margin:10px 0;
-  float:left;
-  width:50%;
- 
-  text-align:center;
-  position:relative;
- 
-
-}
-
-.num-analysis ul li:first-child {
-   border-right:1px dashed #42A4FF
-}
-.num-tit{
- font-size:14px;
- margin-bottom:10px;
-}
-.num-no{
-  font-size:18px;
-  color:#04F9AB;
-  font-weight:500
-
-}
-</style>

src/views/system/auth-manage/index-copy.vue

@@ -0,0 +1,1232 @@
+<template>
+  <div>
+    <div class="menu-tab">
+      <el-tabs type="border-card" v-model="activeName">
+        <!-- 菜单表 start -->
+        <el-tab-pane label="菜单表" name="first">
+          <div class="app-container">
+            <div class="filter-container">
+              <div class="filter-left">
+                <div class="filter-item">
+                  菜单级别:
+                  <el-select
+                    v-model="value"
+                    placeholder=""
+                    style="width: 120px"
+                  >
+                    <el-option
+                      v-for="item in options"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    >
+                    </el-option>
+                  </el-select>
+                </div>
+
+                <el-button
+                  type="primary"
+                  icon="el-icon-search"
+                  class="search-button"
+                  >搜索</el-button
+                >
+              </div>
+
+              <div class="handle-button-right">
+                <el-button
+                  icon="el-icon-plus"
+                  type="success"
+                  @click="dialogFormVisible = true"
+                  >新增</el-button
+                >
+                <el-button
+                  icon="el-icon-delete"
+                  type="danger"
+                  @click="batchDelete"
+                  >删除</el-button
+                >
+                <el-button type="warning">
+                  <svg-icon icon-class="export" />
+                  导出
+                </el-button>
+              </div>
+            </div>
+
+            <el-divider></el-divider>
+            <el-table
+              :data="tableData"
+              stripe
+              border
+              :header-cell-style="{ background: '#EBF1FF', color: '#606266' }"
+              style="width: 100%"
+              @selection-change="handleSelectionChange"
+            >
+              <el-table-column type="selection" width="40"> </el-table-column>
+
+              <el-table-column prop="menuName" label="菜单名称">
+              </el-table-column>
+              <el-table-column prop="menuLevel" label="菜单级别">
+              </el-table-column>
+              <el-table-column prop="parentMenu" label="父级菜单" width="100">
+              </el-table-column>
+              <el-table-column prop="menuSort" label="菜单排序">
+              </el-table-column>
+              <el-table-column
+                prop="url"
+                label="请求地址"
+                width="180"
+              ></el-table-column>
+              <el-table-column label="图标">
+                <!-- <template slot-scope="{}">
+                  <img src="@/assets/img.png" alt="" style="height: 30px" />
+                </template> -->
+
+                <template slot-scope="scope">
+                  <img :src="scope.row.imageUrl" style="width: 25px" />
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="createTime"
+                label="创建时间"
+                width="180"
+              ></el-table-column>
+              <el-table-column
+                prop="createMan"
+                label="创建人"
+              ></el-table-column>
+              <el-table-column
+                prop="editTime"
+                label="修改时间"
+                width="180"
+              ></el-table-column>
+              <el-table-column prop="editMan" label="修改人"></el-table-column>
+
+              <el-table-column label="操作" width="150" fixed="right">
+                <template slot-scope="scope">
+                  <el-button
+                    icon="el-icon-edit"
+                    style="color: #406ce5"
+                    @click="handleEdit(scope.$index, scope.row)"
+                    >编辑</el-button
+                  >
+                  <el-button
+                    icon="el-icon-delete"
+                    style="color: #f27979"
+                    @click="handleDelete(scope.$index, scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+
+            <el-dialog title="新增" :visible.sync="dialogFormVisible">
+              <el-form :model="form">
+                <el-form-item label="菜单名称:" :label-width="formLabelWidth">
+                  <el-input v-model="form.name4" autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="菜单级别:" :label-width="formLabelWidth">
+                  <el-select
+                    v-model="form.region2"
+                    style="width: 100%"
+                    placeholder=""
+                  >
+                    <el-option label="级别一" value="3"></el-option>
+                    <el-option label="级别二" value="4"></el-option>
+                  </el-select>
+                </el-form-item>
+
+                <el-form-item label="父级菜单:" :label-width="formLabelWidth">
+                  <el-select
+                    v-model="form.region3"
+                    style="width: 100%"
+                    placeholder=""
+                  >
+                    <el-option label="父级一" value="5"></el-option>
+                    <el-option label="父级二" value="6"></el-option>
+                  </el-select>
+                </el-form-item>
+
+                <el-form-item label="菜单排序:" :label-width="formLabelWidth">
+                  <el-input v-model="form.name6" autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="请求地址:" :label-width="formLabelWidth">
+                  <el-input v-model="form.name6" autocomplete="off"></el-input>
+                </el-form-item>
+
+                <el-form-item label="图标:" :label-width="formLabelWidth">
+                  <el-upload
+                    class="upload-demo"
+                    action="https://jsonplaceholder.typicode.com/posts/"
+                    multiple
+                    :limit="3"
+                  >
+                    <el-button size="small" type="primary">选择文件</el-button>
+                    <!-- <div slot="tip" class="el-upload__tip">
+              只能上传jpg/png文件，且不超过500kb
+            </div> -->
+                  </el-upload>
+                </el-form-item>
+              </el-form>
+              <div slot="footer" class="dialog-footer">
+                <el-button
+                  @click="dialogFormVisible = false"
+                  style="background: #f6f6f6"
+                  >取 消</el-button
+                >
+                <el-button type="primary" @click="dialogFormVisible = false"
+                  >提 交</el-button
+                >
+              </div>
+            </el-dialog>
+          </div>
+        </el-tab-pane>
+        <!-- 菜单表 end-->
+
+        <!-- 角色表 start-->
+        <el-tab-pane label="角色表" name="second">
+          <div class="app-container">
+            <div class="filter-container">
+              <div class="filter-left">
+                <div class="filter-item">
+                  角色名称:
+                  <el-input
+                    v-model="input"
+                    placeholder=""
+                    style="width: 120px"
+                  ></el-input>
+                </div>
+
+                <el-button
+                  type="primary"
+                  icon="el-icon-search"
+                  class="search-button"
+                  >搜索</el-button
+                >
+              </div>
+
+              <div class="handle-button-right">
+                <el-button
+                  icon="el-icon-plus"
+                  type="success"
+                  @click="dialogFormVisible2 = true"
+                  >新增</el-button
+                >
+                <el-button
+                  icon="el-icon-delete"
+                  type="danger"
+                  @click="batchDelete2"
+                  >删除</el-button
+                >
+                <el-button type="warning">
+                  <svg-icon icon-class="export" />
+                  导出
+                </el-button>
+              </div>
+            </div>
+
+            <el-divider></el-divider>
+            <el-table
+              :data="tableData2"
+              stripe
+              border
+              :header-cell-style="{ background: '#EBF1FF', color: '#606266' }"
+              style="width: 100%"
+              @selection-change="handleSelectionChange2"
+            >
+              <el-table-column type="selection" width="40"> </el-table-column>
+
+              <el-table-column prop="roleName" label="角色名称">
+              </el-table-column>
+              <el-table-column label="可操作菜单">
+                <template slot-scope="tableData2">
+                  <a target="_blank" class="check"
+                    >{{ tableData2.row.opeMenu }}
+                  </a>
+                </template>
+              </el-table-column>
+              <el-table-column prop="roleAuth" label="角色权限" width="100">
+                <template slot-scope="tableData2">
+                  <a target="_blank" class="check"
+                    >{{ tableData2.row.roleAuth }}
+                  </a>
+                </template>
+              </el-table-column>
+
+              <el-table-column
+                prop="createTime"
+                label="创建时间"
+                width="180"
+              ></el-table-column>
+              <el-table-column
+                prop="createMan"
+                label="创建人"
+              ></el-table-column>
+              <el-table-column
+                prop="editTime"
+                label="修改时间"
+                width="180"
+              ></el-table-column>
+              <el-table-column prop="editMan" label="修改人"></el-table-column>
+
+              <el-table-column label="操作" width="150" fixed="right">
+                <template slot-scope="scope">
+                  <el-button
+                    icon="el-icon-edit"
+                    style="color: #406ce5"
+                    @click="handleEdit2(scope.$index, scope.row)"
+                    >编辑</el-button
+                  >
+                  <el-button
+                    icon="el-icon-delete"
+                    style="color: #f27979"
+                    @click="handleDelete2(scope.$index, scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+
+            <el-dialog
+              title="新增"
+              class="roleDialog"
+              :visible.sync="dialogFormVisible2"
+              width="60%"
+            >
+              <el-form :model="form">
+                <el-form-item label="角色名称:" :label-width="formLabelWidth2">
+                  <el-input v-model="form.name4" autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="角色ID:" :label-width="formLabelWidth2">
+                  <el-input v-model="form.name4" autocomplete="off"></el-input>
+                </el-form-item>
+
+                <el-form-item
+                  label="可操作菜单及权限:"
+                  :label-width="formLabelWidth2"
+                  class="table-item"
+                >
+                  <div class="role-details inside-base">
+                    <div class="inside-base-main clearfix">
+                      <!-- 中间内容 -->
+                      <div class="inside-base-cont">
+                        <div class="role-cont clearfix">
+                          <div>
+                            <el-checkbox
+                              class="check-page-all"
+                              v-model="checkPageAll"
+                              @change="checkPageAllEv($event)"
+                            ></el-checkbox>
+                            <!--  -->
+                            <el-table
+                              ref="table"
+                              :data="tableData3"
+                              :cell-class-name="goodsInfo"
+                              :row-class-name="warning"
+                              style="width: 100%; margin-bottom: 20px"
+                              row-key="id"
+                              :expand-row-keys="['3', '4']"
+                              border
+                              :indent="10"
+                              :select-on-indeterminate="true"
+                              :tree-props="{
+                                children: 'childList',
+                                hasChildren: 'hasChildren',
+                              }"
+                            >
+                              <el-table-column type="selection" width="55">
+                                <template slot-scope="scope">
+                                  <el-checkbox
+                                    v-model="scope.row.pageCheck"
+                                    @change="pageCheckEv(scope)"
+                                  ></el-checkbox>
+                                </template>
+                              </el-table-column>
+
+                              <el-table-column
+                                prop="page"
+                                label="菜单名称"
+                                width="130px"
+                              >
+                              </el-table-column>
+                              <el-table-column class="operation" label="">
+                                <template slot-scope="scope">
+                                  <el-checkbox
+                                    label="查询"
+                                    v-model="scope.row.fnCheck.check"
+                                    @change="fnCheckEv(scope, 'check')"
+                                    v-if="scope.row.fnList.includes('查询')"
+                                  ></el-checkbox>
+
+                                  <el-checkbox
+                                    label="新增"
+                                    v-model="scope.row.fnCheck.add"
+                                    @change="fnCheckEv(scope, 'add')"
+                                    v-if="scope.row.fnList.includes('新增')"
+                                  ></el-checkbox>
+                                  <el-checkbox
+                                    label="修改"
+                                    v-model="scope.row.fnCheck.mod"
+                                    @change="fnCheckEv(scope, 'mod')"
+                                    v-if="scope.row.fnList.includes('修改')"
+                                  ></el-checkbox>
+
+                                  <el-checkbox
+                                    label="删除"
+                                    v-model="scope.row.fnCheck.del"
+                                    @change="fnCheckEv(scope, 'del')"
+                                    v-if="scope.row.fnList.includes('删除')"
+                                  ></el-checkbox>
+
+                                  <el-checkbox
+                                    label="导出"
+                                    v-model="scope.row.fnCheck.export"
+                                    @change="fnCheckEv(scope, 'export')"
+                                    v-if="scope.row.fnList.includes('导出')"
+                                  ></el-checkbox>
+
+                                  <el-checkbox
+                                    label="安防管理视图"
+                                    v-model="scope.row.fnCheck.viewport"
+                                    @change="fnCheckEv(scope, 'viewport')"
+                                    v-if="
+                                      scope.row.fnList.includes('安防管理视图')
+                                    "
+                                  ></el-checkbox>
+
+                                  <el-checkbox
+                                    label="实时告警"
+                                    v-model="scope.row.fnCheck.alarm"
+                                    @change="fnCheckEv(scope, 'alarm')"
+                                    v-if="scope.row.fnList.includes('实时告警')"
+                                  ></el-checkbox>
+
+                                  <el-checkbox
+                                    label="任务管理"
+                                    v-model="scope.row.fnCheck.task"
+                                    @change="fnCheckEv(scope, 'task')"
+                                    v-if="scope.row.fnList.includes('任务管理')"
+                                  ></el-checkbox>
+                                </template>
+                              </el-table-column>
+                            </el-table>
+                            <!--  -->
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </el-form-item>
+              </el-form>
+              <div slot="footer" class="dialog-footer">
+                <el-button
+                  @click="dialogFormVisible2 = false"
+                  style="background: #f6f6f6"
+                  >取 消</el-button
+                >
+                <el-button type="primary" @click="dialogFormVisible2 = false"
+                  >提 交</el-button
+                >
+              </div>
+            </el-dialog>
+          </div>
+        </el-tab-pane>
+        <!-- 角色表 end-->
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+
+<script>
+export default {
+  name: "RoleDetails",
+
+  data() {
+    return {
+      activeName: "second",
+
+      tableData: [
+        {
+          menuName: "系统管理",
+          menuLevel: "1",
+          parentMenu: "已是最顶级",
+          menuSort: "2",
+          url: "http://www.chinausky.com",
+          imageUrl: require("@/assets/img.png"),
+          createTime: "2020-09-15 12:20:12",
+          createMan: "张三",
+          editTime: "2020-09-15 12:20:12",
+          editMan: "李四",
+        },
+        {
+          menuName: "权限管理",
+          menuLevel: "2",
+          parentMenu: "系统信息",
+          menuSort: "1",
+          url: "http://www.chinausky.com",
+          imageUrl: require("@/assets/img.png"),
+          createTime: "2020-09-15 12:20:12",
+          createMan: "张三",
+          editTime: "2020-09-15 12:20:12",
+          editMan: "李四",
+        },
+        {
+          menuName: "安全机制",
+          menuLevel: "3",
+          parentMenu: "系统信息",
+          menuSort: "2",
+          url: "http://www.chinausky.com",
+          imageUrl: require("@/assets/img.png"),
+          // imageUrl:"https://avatar.csdnimg.cn/F/1/C/3_weixin_43962877.jpg",
+          createTime: "2020-09-15 12:20:12",
+          createMan: "张三",
+          editTime: "2020-09-15 12:20:12",
+          editMan: "李四",
+        },
+        {
+          menuName: "人员管理",
+          menuLevel: "4",
+          parentMenu: "系统信息",
+          menuSort: "3",
+          url: "http://www.chinausky.com",
+          imageUrl: require("@/assets/img.png"),
+          // imageUrl:"https://avatar.csdnimg.cn/F/1/C/3_weixin_43962877.jpg",
+          createTime: "2020-09-15 12:20:12",
+          createMan: "张三",
+          editTime: "2020-09-15 12:20:12",
+          editMan: "李四",
+        },
+        {
+          menuName: "单位信息",
+          menuLevel: "5",
+          parentMenu: "系统信息",
+          menuSort: "4",
+          url: "http://www.chinausky.com",
+          imageUrl: require("@/assets/img.png"),
+          // imageUrl:"https://avatar.csdnimg.cn/F/1/C/3_weixin_43962877.jpg",
+          createTime: "2020-09-15 12:20:12",
+          createMan: "张三",
+          editTime: "2020-09-15 12:20:12",
+          editMan: "李四",
+        },
+      ],
+
+      tableData2: [
+        {
+          roleName: "超级管理员",
+          opeMenu: "查看",
+          roleAuth: "查看",
+          createTime: "2020-09-15 12:20:12",
+          createMan: "张三",
+          editTime: "2020-09-15 12:20:12",
+          editMan: "李四",
+        },
+        {
+          roleName: "管理员",
+          opeMenu: "查看",
+          roleAuth: "查看",
+          createTime: "2020-09-15 12:20:12",
+          createMan: "张三",
+          editTime: "2020-09-15 12:20:12",
+          editMan: "李四",
+        },
+        {
+          roleName: "普通用户",
+          opeMenu: "查看",
+          roleAuth: "查看",
+          createTime: "2020-09-15 12:20:12",
+          createMan: "张三",
+          editTime: "2020-09-15 12:20:12",
+          editMan: "李四",
+        },
+      ],
+      multipleSelection: [],
+      multipleSelection2: [],
+
+      options: [
+        {
+          value: "1",
+          label: "级别1",
+        },
+        {
+          value: "2",
+          label: "级别2",
+        },
+        {
+          value: "3",
+          label: "级别3",
+        },
+      ],
+      value: "",
+
+      input: "",
+
+      dialogFormVisible: false,
+      dialogFormVisible2: false,
+      form: {
+        name: "",
+        region: "",
+        region2: "",
+        date1: "",
+        date2: "",
+        delivery: false,
+        type: [],
+        resource: "",
+        desc: "",
+      },
+      formLabelWidth: "100px",
+      formLabelWidth2: "150px",
+
+      // 角色新增表格
+
+      msg: "",
+      checkPageAll: false,
+      tableData3: [
+        {
+          id: 1, // id
+          page: "系统管理", // 页面分类
+          pageCheck: false, // 是否可查看页面
+          fnList: [], // 功能权限有哪些
+          fnCheck: {
+            check: false,
+            add: false,
+            mod: false,
+            del: false,
+            export: false,
+          },
+
+          childList: [
+            {
+              p_id: 12,
+              id: 8,
+              page: "人员管理",
+              pageCheck: false,
+              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
+              fnCheck: {
+                add: false,
+                del: false,
+                mod: false,
+                check: false,
+              },
+            },
+            {
+              p_id: 13,
+              id: 9,
+              page: "权限管理",
+              pageCheck: false,
+              fnList: [], // 功能权限有哪些
+              fnCheck: {
+                add: false,
+                del: false,
+                mod: false,
+                check: false,
+              },
+              childList: [
+                {
+                  p_id: 2,
+                  id: 10,
+                  page: "菜单表",
+                  pageCheck: false,
+                  fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
+                  fnCheck: {
+                    add: false,
+                    del: false,
+                    mod: false,
+                    check: false,
+                  },
+                },
+                {
+                  p_id: 2,
+                  id: 11,
+                  page: "角色表",
+                  pageCheck: false,
+                  fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
+                  fnCheck: {
+                    add: false,
+                    del: false,
+                    mod: false,
+                    check: false,
+                  },
+                },
+              ],
+            },
+            {
+              p_id: 14,
+              id: 30,
+              page: "组织机构",
+              pageCheck: false,
+              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
+              fnCheck: {
+                add: false,
+                del: false,
+                mod: false,
+                check: false,
+              },
+            },
+            {
+              p_id: 15,
+              id: 33,
+              page: "安全机制",
+              pageCheck: false,
+              fnList: [], // 功能权限有哪些
+              fnCheck: {
+                add: false,
+                del: false,
+                mod: false,
+                check: false,
+              },
+            },
+            {
+              p_id: 16,
+              id: 93,
+              page: "单位信息",
+              pageCheck: false,
+              fnList: [], // 功能权限有哪些
+              fnCheck: {
+                add: false,
+                del: false,
+                mod: false,
+                check: false,
+              },
+            },
+          ],
+        },
+        {
+          id: 2,
+          page: "用户管理",
+          pageCheck: false,
+          fnList: [], // 功能权限有哪些
+          fnCheck: {
+            add: false,
+            del: false,
+            mod: false,
+            check: false,
+          },
+          childList: [
+            {
+              p_id: 2,
+              id: 39,
+              page: "账号管理",
+              pageCheck: false,
+              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
+              fnCheck: {
+                add: false,
+                del: false,
+                mod: false,
+                check: false,
+              },
+            },
+            {
+              p_id: 2,
+              id: 32,
+              page: "日志管理",
+              pageCheck: false,
+              fnList: ["查询"], // 功能权限有哪些
+              fnCheck: {
+                add: false,
+                del: false,
+                mod: false,
+                check: false,
+              },
+            },
+          ],
+        },
+
+        {
+          id: 3,
+          page: "设备管理",
+          pageCheck: false,
+          fnList: [], // 功能权限有哪些
+          fnCheck: {
+            add: false,
+            del: false,
+            mod: false,
+            check: false,
+          },
+          childList: [
+            {
+              p_id: 2,
+              id: 31,
+              page: "摄像头",
+              pageCheck: false,
+              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
+              fnCheck: {
+                add: false,
+                del: false,
+                mod: false,
+                check: false,
+              },
+            },
+            {
+              p_id: 2,
+              id: 22,
+              page: "周边防界",
+              pageCheck: false,
+              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
+              fnCheck: {
+                add: false,
+                del: false,
+                mod: false,
+                check: false,
+              },
+            },
+          ],
+        },
+
+        {
+          id: 4,
+          page: "巡检管理",
+          pageCheck: false,
+          fnList: [], // 功能权限有哪些
+          fnCheck: {
+            add: false,
+            del: false,
+            mod: false,
+            check: false,
+          },
+          childList: [
+            {
+              p_id: 1,
+              id: 41,
+              page: "巡检点",
+              pageCheck: false,
+              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
+              fnCheck: {
+                add: false,
+                del: false,
+                mod: false,
+                check: false,
+              },
+            },
+            {
+              p_id: 2,
+              id: 42,
+              page: "巡检路线",
+              pageCheck: false,
+              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
+              fnCheck: {
+                add: false,
+                del: false,
+                mod: false,
+                check: false,
+              },
+            },
+            {
+              p_id: 3,
+              id: 43,
+              page: "电子巡更",
+              pageCheck: false,
+              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
+              fnCheck: {
+                add: false,
+                del: false,
+                mod: false,
+                check: false,
+              },
+            },
+            {
+              p_id: 4,
+              id: 44,
+              page: "巡检计划",
+              pageCheck: false,
+              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
+              fnCheck: {
+                add: false,
+                del: false,
+                mod: false,
+                check: false,
+              },
+            },
+          ],
+        },
+
+        {
+          id: 5,
+          page: "告警中心",
+          pageCheck: false,
+          fnList: [], // 功能权限有哪些
+          fnCheck: {
+            add: false,
+            del: false,
+            mod: false,
+            check: false,
+          },
+          childList: [
+            {
+              p_id: 1,
+              id: 51,
+              page: "告警记录",
+              pageCheck: false,
+              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
+              fnCheck: {
+                add: false,
+                del: false,
+                mod: false,
+                check: false,
+              },
+            },
+            {
+              p_id: 2,
+              id: 52,
+              page: "任务中心",
+              pageCheck: false,
+              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
+              fnCheck: {
+                add: false,
+                del: false,
+                mod: false,
+                check: false,
+              },
+            },
+          ],
+        },
+        {
+          id: 6,
+          page: "综合查询",
+          pageCheck: false,
+          fnList: ["安防管理视图", "实时告警", "任务管理"], // 功能权限有哪些
+          fnCheck: {
+            viewport: false,
+            alarm: false,
+            task: false,
+          },
+        },
+      ],
+    };
+  },
+  methods: {
+    goodsInfo(row) {
+      if (row.columnIndex == 2) {
+        return "goodsInfo"; //给第2个td里面添加goodsInfo的类名
+      }
+
+      if (row.row.fnList.length == 0) {
+        return "warning";
+      }
+    },
+
+    warning(row) {
+      if (row.row.fnList.length == 0) {
+        return "warning";
+      }
+    },
+
+    // 查找父级函数
+    getParent(data2, nodeId2) {
+      var arrRes = [];
+      if (data2.length === 0) {
+        if (nodeId2) {
+          arrRes.push(data2);
+        }
+        return arrRes;
+      }
+      let rev = (data, nodeId) => {
+        for (var i = 0, length = data.length; i < length; i++) {
+          let node = data[i];
+          if (node.id === nodeId) {
+            arrRes.push(node);
+            rev(data2, node.p_id);
+            break;
+          } else {
+            if (node.childList) {
+              rev(node.childList, nodeId);
+            }
+          }
+        }
+        return arrRes;
+      };
+      arrRes = rev(data2, nodeId2);
+      return arrRes;
+    },
+    /**
+     * 页面选择
+     */
+    // 总选框事件
+    checkPageAllEv(item) {
+   
+      let checkAll = (data, checked) => {
+        for (let x of data) {
+          console.log(x)
+          
+          x.pageCheck = checked;
+          if (x.childList) {
+            checkAll(x.childList, checked);
+          }
+        }
+      };
+      if (item === true) {
+        checkAll(this.tableData, true);
+      } else {
+        checkAll(this.tableData, false);
+      }
+    },
+    // 遍历json数据
+    isCheckAllEv(data) {
+      let isCheckAll = true;
+      let fn = (data) => {
+        for (let x of data) {
+          if (x.pageCheck === false) {
+            isCheckAll = false;
+            return isCheckAll;
+          }
+          if (x.childList) {
+            fn(x.childList);
+          }
+        }
+      };
+      fn(data);
+      console.log(isCheckAll);
+      return isCheckAll;
+    },
+    // 子选框事件
+    pageCheckEv(scope) {
+      // 如果有子项，则子项的选框选择跟当前一致
+      if (scope.row.childList) {
+        this.handleCheckAll(scope.row, scope.row.pageCheck);
+      }
+      // 查找父级选框
+      this.getParent(this.tableData, scope.row.id).forEach((item, i) => {
+        if (!item.childList) {
+          item.pageCheck = scope.row.pageCheck;
+        } else {
+          var num = 0;
+          item.childList.forEach((item, i) => {
+            if (item.pageCheck === true) {
+              num += 1;
+            }
+          });
+          if (num === item.childList.length) {
+            item.pageCheck = true;
+          } else {
+            item.pageCheck = false;
+          }
+        }
+      });
+
+      // 是否所有子项都已经勾选
+      if (this.isCheckAllEv(this.tableData) === true) {
+        this.checkPageAll = true;
+      } else {
+        this.checkPageAll = false;
+      }
+    },
+    handleCheckAll(row, checked) {
+      row.pageCheck = checked;
+      if (row.childList) {
+        let that = this;
+        row.childList.forEach((element, i) => {
+          that.handleCheckAll(row.childList[i], checked);
+        });
+      }
+    },
+    /**
+     * 功能选择
+     */
+    // 子选框事件
+    fnCheckEv(scope, type) {
+      // 如果有子项，则子项的选框选择跟当前一致
+      if (scope.row.childList) {
+        this.handleFnAll(scope.row, scope.row.fnCheck[type], type);
+      }
+      // 查找父级选框
+      this.getParent(this.tableData, scope.row.id).forEach((item, i) => {
+        if (!item.childList) {
+          item.fnCheck[type] = scope.row.fnCheck[type];
+        } else {
+          var num = 0;
+          item.childList.forEach((item, i) => {
+            if (item.fnCheck[type] === true) {
+              num += 1;
+            }
+          });
+          if (num === item.childList.length) {
+            item.fnCheck[type] = true;
+          } else {
+            item.fnCheck[type] = false;
+          }
+        }
+      });
+    },
+    handleFnAll(row, fnCheck, type) {
+      row.fnCheck[type] = fnCheck;
+      if (row.childList) {
+        let that = this;
+        row.childList.forEach((element, i) => {
+          that.handleFnAll(row.childList[i], fnCheck, type);
+        });
+      }
+    },
+
+    handleDataAll(row, dataCheck, type) {
+      for (let x in row.dataCheck) {
+        row.dataCheck[x] = false;
+      }
+      row.dataCheck[type] = dataCheck;
+      if (row.childList) {
+        let that = this;
+        row.childList.forEach((element, i) => {
+          that.handleDataAll(row.childList[i], dataCheck, type);
+        });
+      }
+    },
+
+    handleEdit(index, row) {
+      alert(index, row);
+    },
+    handleDelete(index, row) {
+      this.$confirm("确定删除该数据吗?", "删除", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.$message({
+            type: "success",
+            message: "删除成功!",
+          });
+          this.tableData.splice(index, 1);
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+
+    batchDelete() {
+      let multData = this.multipleSelection;
+      let tableData = this.tableData;
+      let multDataLen = multData.length;
+      let tableDataLen = tableData.length;
+
+      for (let i = 0; i < multDataLen; i++) {
+        for (let y = 0; y < tableDataLen; y++) {
+          if (JSON.stringify(tableData[y]) == JSON.stringify(multData[i])) {
+            //判断是否相等，相等就删除
+            this.tableData.splice(y, 1);
+            console.log("aa");
+          }
+        }
+      }
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+
+    handleEdit2(index, row) {
+      alert(index + "我是角色", row);
+    },
+    handleDelete2(index, row) {
+      this.$confirm("确定删除该数据吗?", "删除", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.$message({
+            type: "success",
+            message: "删除成功!",
+          });
+          this.tableData2.splice(index, 1);
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+
+    batchDelete2() {
+      let multData2 = this.multipleSelection2;
+      let tableData2 = this.tableData2;
+      let multDataLen2 = multData2.length;
+      let tableDataLen2 = tableData2.length;
+
+      for (let i = 0; i < multDataLen2; i++) {
+        for (let y = 0; y < tableDataLen2; y++) {
+          if (JSON.stringify(tableData2[y]) == JSON.stringify(multData2[i])) {
+            //判断是否相等，相等就删除
+            this.tableData2.splice(y, 1);
+            console.log("aa");
+          }
+        }
+      }
+    },
+    handleSelectionChange2(val) {
+      this.multipleSelection2 = val;
+    },
+  },
+};
+</script>
+<style scoped>
+.app-container {
+  min-height: calc(100vh - 115px) !important;
+}
+</style>
+<style >
+.el-tabs--border-card {
+  background: rgba(0, 0, 0, 0);
+  border: 1px solidrgba(0, 0, 0, 0);
+  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0), 0 0 6px 0 rgba(0, 0, 0, 0);
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0), 0 0 6px 0 rgba(0, 0, 0, 0);
+}
+.el-tabs--border-card > .el-tabs__header {
+  background-color: rgba(0, 0, 0, 0);
+  position: relative;
+  top: 12px;
+  left: 14px;
+  border-bottom: 0;
+}
+.el-tabs--border-card > .el-tabs__content {
+  padding: 0;
+}
+
+.el-tabs--border-card > .el-tabs__header .el-tabs__item + .el-tabs__item,
+.el-tabs--border-card > .el-tabs__header .el-tabs__item:first-child {
+  background: #e4e3e3;
+
+  -webkit-border-top-left-radius: 10px;
+  -webkit-border-top-right-radius: 10px;
+  color: #444;
+}
+.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
+  color: #fff;
+  background-color: #5c88fa;
+  border: 1px solid rgba(0, 0, 0, 0);
+  border-right-color: rgba(0, 0, 0, 0);
+
+  border-left-color: 0;
+}
+.el-tabs--border-card
+  > .el-tabs__header
+  .el-tabs__item:not(.is-disabled):hover {
+  color: #fff;
+  background-color: #5c88fa;
+}
+.el-tabs__item {
+  height: 35px;
+  line-height: 35px;
+}
+
+.roleDialog .el-dialog .el-form-item {
+  margin: 20px 20px 0;
+}
+.roleDialog .el-dialog .el-form-item:first-child,
+.roleDialog .el-dialog .el-form-item:nth-child(2) {
+  display: inline-block;
+}
+.el-dialog .el-form-item.table-item {
+  width: 96%;
+}
+
+/* 权限第二行居左样式 */
+
+
+
+
+</style>
+<style >
+
+</style>

src/views/system/auth-manage/index.vue

@@ -305,116 +305,7 @@
                   :label-width="formLabelWidth2"
                   class="table-item"
                 >
-                  <div class="role-details inside-base">
-                    <div class="inside-base-main clearfix">
-                      <!-- 中间内容 -->
-                      <div class="inside-base-cont">
-                        <div class="role-cont clearfix">
-                          <div>
-                            <el-checkbox
-                              class="check-page-all"
-                              v-model="checkPageAll"
-                              @change="checkPageAllEv($event)"
-                            ></el-checkbox>
-                            <!--  -->
-                            <el-table
-                              ref="table"
-                              :data="tableData3"
-                              :cell-class-name="goodsInfo"
-                              :row-class-name="warning"
-                              style="width: 100%; margin-bottom: 20px"
-                              row-key="id"
-                              :expand-row-keys="['3', '4']"
-                              border
-                              :indent="10"
-                              :select-on-indeterminate="true"
-                              :tree-props="{
-                                children: 'childList',
-                                hasChildren: 'hasChildren',
-                              }"
-                            >
-                              <el-table-column type="selection" width="55">
-                                <template slot-scope="scope">
-                                  <el-checkbox
-                                    v-model="scope.row.pageCheck"
-                                    @change="pageCheckEv(scope)"
-                                  ></el-checkbox>
-                                </template>
-                              </el-table-column>
-
-                              <el-table-column
-                                prop="page"
-                                label="菜单名称"
-                                width="130px"
-                              >
-                              </el-table-column>
-                              <el-table-column class="operation" label="">
-                                <template slot-scope="scope">
-                                  <el-checkbox
-                                    label="查询"
-                                    v-model="scope.row.fnCheck.check"
-                                    @change="fnCheckEv(scope, 'check')"
-                                    v-if="scope.row.fnList.includes('查询')"
-                                  ></el-checkbox>
-
-                                  <el-checkbox
-                                    label="新增"
-                                    v-model="scope.row.fnCheck.add"
-                                    @change="fnCheckEv(scope, 'add')"
-                                    v-if="scope.row.fnList.includes('新增')"
-                                  ></el-checkbox>
-                                  <el-checkbox
-                                    label="修改"
-                                    v-model="scope.row.fnCheck.mod"
-                                    @change="fnCheckEv(scope, 'mod')"
-                                    v-if="scope.row.fnList.includes('修改')"
-                                  ></el-checkbox>
-
-                                  <el-checkbox
-                                    label="删除"
-                                    v-model="scope.row.fnCheck.del"
-                                    @change="fnCheckEv(scope, 'del')"
-                                    v-if="scope.row.fnList.includes('删除')"
-                                  ></el-checkbox>
-
-                                  <el-checkbox
-                                    label="导出"
-                                    v-model="scope.row.fnCheck.export"
-                                    @change="fnCheckEv(scope, 'export')"
-                                    v-if="scope.row.fnList.includes('导出')"
-                                  ></el-checkbox>
-
-                                  <el-checkbox
-                                    label="安防管理视图"
-                                    v-model="scope.row.fnCheck.viewport"
-                                    @change="fnCheckEv(scope, 'viewport')"
-                                    v-if="
-                                      scope.row.fnList.includes('安防管理视图')
-                                    "
-                                  ></el-checkbox>
-
-                                  <el-checkbox
-                                    label="实时告警"
-                                    v-model="scope.row.fnCheck.alarm"
-                                    @change="fnCheckEv(scope, 'alarm')"
-                                    v-if="scope.row.fnList.includes('实时告警')"
-                                  ></el-checkbox>
-
-                                  <el-checkbox
-                                    label="任务管理"
-                                    v-model="scope.row.fnCheck.task"
-                                    @change="fnCheckEv(scope, 'task')"
-                                    v-if="scope.row.fnList.includes('任务管理')"
-                                  ></el-checkbox>
-                                </template>
-                              </el-table-column>
-                            </el-table>
-                            <!--  -->
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
+                  <role-details></role-details>
                 </el-form-item>
               </el-form>
               <div slot="footer" class="dialog-footer">
@@ -438,9 +329,10 @@
 
 
 <script>
-export default {
-  name: "RoleDetails",
+import RoleDetails from '../components/RoleDetails'
 
+export default {
+  components: { RoleDetails },
   data() {
     return {
       activeName: "second",
@@ -577,496 +469,11 @@ export default {
       formLabelWidth: "100px",
       formLabelWidth2: "150px",
 
-      // 角色新增表格
-
-      msg: "",
-      checkPageAll: false,
-      tableData3: [
-        {
-          id: 1, // id
-          page: "系统管理", // 页面分类
-          pageCheck: false, // 是否可查看页面
-          fnList: [], // 功能权限有哪些
-          fnCheck: {
-            check: false,
-            add: false,
-            mod: false,
-            del: false,
-            export: false,
-          },
-
-          childList: [
-            {
-              p_id: 12,
-              id: 8,
-              page: "人员管理",
-              pageCheck: false,
-              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
-              fnCheck: {
-                add: false,
-                del: false,
-                mod: false,
-                check: false,
-              },
-            },
-            {
-              p_id: 13,
-              id: 9,
-              page: "权限管理",
-              pageCheck: false,
-              fnList: [], // 功能权限有哪些
-              fnCheck: {
-                add: false,
-                del: false,
-                mod: false,
-                check: false,
-              },
-              childList: [
-                {
-                  p_id: 2,
-                  id: 10,
-                  page: "菜单表",
-                  pageCheck: false,
-                  fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
-                  fnCheck: {
-                    add: false,
-                    del: false,
-                    mod: false,
-                    check: false,
-                  },
-                },
-                {
-                  p_id: 2,
-                  id: 11,
-                  page: "角色表",
-                  pageCheck: false,
-                  fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
-                  fnCheck: {
-                    add: false,
-                    del: false,
-                    mod: false,
-                    check: false,
-                  },
-                },
-              ],
-            },
-            {
-              p_id: 14,
-              id: 30,
-              page: "组织机构",
-              pageCheck: false,
-              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
-              fnCheck: {
-                add: false,
-                del: false,
-                mod: false,
-                check: false,
-              },
-            },
-            {
-              p_id: 15,
-              id: 33,
-              page: "安全机制",
-              pageCheck: false,
-              fnList: [], // 功能权限有哪些
-              fnCheck: {
-                add: false,
-                del: false,
-                mod: false,
-                check: false,
-              },
-            },
-            {
-              p_id: 16,
-              id: 93,
-              page: "单位信息",
-              pageCheck: false,
-              fnList: [], // 功能权限有哪些
-              fnCheck: {
-                add: false,
-                del: false,
-                mod: false,
-                check: false,
-              },
-            },
-          ],
-        },
-        {
-          id: 2,
-          page: "用户管理",
-          pageCheck: false,
-          fnList: [], // 功能权限有哪些
-          fnCheck: {
-            add: false,
-            del: false,
-            mod: false,
-            check: false,
-          },
-          childList: [
-            {
-              p_id: 2,
-              id: 39,
-              page: "账号管理",
-              pageCheck: false,
-              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
-              fnCheck: {
-                add: false,
-                del: false,
-                mod: false,
-                check: false,
-              },
-            },
-            {
-              p_id: 2,
-              id: 32,
-              page: "日志管理",
-              pageCheck: false,
-              fnList: ["查询"], // 功能权限有哪些
-              fnCheck: {
-                add: false,
-                del: false,
-                mod: false,
-                check: false,
-              },
-            },
-          ],
-        },
-
-        {
-          id: 3,
-          page: "设备管理",
-          pageCheck: false,
-          fnList: [], // 功能权限有哪些
-          fnCheck: {
-            add: false,
-            del: false,
-            mod: false,
-            check: false,
-          },
-          childList: [
-            {
-              p_id: 2,
-              id: 31,
-              page: "摄像头",
-              pageCheck: false,
-              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
-              fnCheck: {
-                add: false,
-                del: false,
-                mod: false,
-                check: false,
-              },
-            },
-            {
-              p_id: 2,
-              id: 22,
-              page: "周边防界",
-              pageCheck: false,
-              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
-              fnCheck: {
-                add: false,
-                del: false,
-                mod: false,
-                check: false,
-              },
-            },
-          ],
-        },
-
-        {
-          id: 4,
-          page: "巡检管理",
-          pageCheck: false,
-          fnList: [], // 功能权限有哪些
-          fnCheck: {
-            add: false,
-            del: false,
-            mod: false,
-            check: false,
-          },
-          childList: [
-            {
-              p_id: 1,
-              id: 41,
-              page: "巡检点",
-              pageCheck: false,
-              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
-              fnCheck: {
-                add: false,
-                del: false,
-                mod: false,
-                check: false,
-              },
-            },
-            {
-              p_id: 2,
-              id: 42,
-              page: "巡检路线",
-              pageCheck: false,
-              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
-              fnCheck: {
-                add: false,
-                del: false,
-                mod: false,
-                check: false,
-              },
-            },
-            {
-              p_id: 3,
-              id: 43,
-              page: "电子巡更",
-              pageCheck: false,
-              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
-              fnCheck: {
-                add: false,
-                del: false,
-                mod: false,
-                check: false,
-              },
-            },
-            {
-              p_id: 4,
-              id: 44,
-              page: "巡检计划",
-              pageCheck: false,
-              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
-              fnCheck: {
-                add: false,
-                del: false,
-                mod: false,
-                check: false,
-              },
-            },
-          ],
-        },
-
-        {
-          id: 5,
-          page: "告警中心",
-          pageCheck: false,
-          fnList: [], // 功能权限有哪些
-          fnCheck: {
-            add: false,
-            del: false,
-            mod: false,
-            check: false,
-          },
-          childList: [
-            {
-              p_id: 1,
-              id: 51,
-              page: "告警记录",
-              pageCheck: false,
-              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
-              fnCheck: {
-                add: false,
-                del: false,
-                mod: false,
-                check: false,
-              },
-            },
-            {
-              p_id: 2,
-              id: 52,
-              page: "任务中心",
-              pageCheck: false,
-              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
-              fnCheck: {
-                add: false,
-                del: false,
-                mod: false,
-                check: false,
-              },
-            },
-          ],
-        },
-        {
-          id: 6,
-          page: "综合查询",
-          pageCheck: false,
-          fnList: ["安防管理视图", "实时告警", "任务管理"], // 功能权限有哪些
-          fnCheck: {
-            viewport: false,
-            alarm: false,
-            task: false,
-          },
-        },
-      ],
+    
     };
   },
   methods: {
-    goodsInfo(row) {
-      if (row.columnIndex == 2) {
-        return "goodsInfo"; //给第2个td里面添加goodsInfo的类名
-      }
-
-      if (row.row.fnList.length == 0) {
-        return "warning";
-      }
-    },
-
-    warning(row) {
-      if (row.row.fnList.length == 0) {
-        return "warning";
-      }
-    },
-
-    // 查找父级函数
-    getParent(data2, nodeId2) {
-      var arrRes = [];
-      if (data2.length === 0) {
-        if (nodeId2) {
-          arrRes.push(data2);
-        }
-        return arrRes;
-      }
-      let rev = (data, nodeId) => {
-        for (var i = 0, length = data.length; i < length; i++) {
-          let node = data[i];
-          if (node.id === nodeId) {
-            arrRes.push(node);
-            rev(data2, node.p_id);
-            break;
-          } else {
-            if (node.childList) {
-              rev(node.childList, nodeId);
-            }
-          }
-        }
-        return arrRes;
-      };
-      arrRes = rev(data2, nodeId2);
-      return arrRes;
-    },
-    /**
-     * 页面选择
-     */
-    // 总选框事件
-    checkPageAllEv(item) {
-   
-      let checkAll = (data, checked) => {
-        for (let x of data) {
-          x.pageCheck = checked;
-          if (x.childList) {
-            checkAll(x.childList, checked);
-          }
-        }
-      };
-      if (item === true) {
-        checkAll(this.tableData, true);
-      } else {
-        checkAll(this.tableData, false);
-      }
-    },
-    // 遍历json数据
-    isCheckAllEv(data) {
-      let isCheckAll = true;
-      let fn = (data) => {
-        for (let x of data) {
-          if (x.pageCheck === false) {
-            isCheckAll = false;
-            return isCheckAll;
-          }
-          if (x.childList) {
-            fn(x.childList);
-          }
-        }
-      };
-      fn(data);
-      console.log(isCheckAll);
-      return isCheckAll;
-    },
-    // 子选框事件
-    pageCheckEv(scope) {
-      // 如果有子项，则子项的选框选择跟当前一致
-      if (scope.row.childList) {
-        this.handleCheckAll(scope.row, scope.row.pageCheck);
-      }
-      // 查找父级选框
-      this.getParent(this.tableData, scope.row.id).forEach((item, i) => {
-        if (!item.childList) {
-          item.pageCheck = scope.row.pageCheck;
-        } else {
-          var num = 0;
-          item.childList.forEach((item, i) => {
-            if (item.pageCheck === true) {
-              num += 1;
-            }
-          });
-          if (num === item.childList.length) {
-            item.pageCheck = true;
-          } else {
-            item.pageCheck = false;
-          }
-        }
-      });
-
-      // 是否所有子项都已经勾选
-      if (this.isCheckAllEv(this.tableData) === true) {
-        this.checkPageAll = true;
-      } else {
-        this.checkPageAll = false;
-      }
-    },
-    handleCheckAll(row, checked) {
-      row.pageCheck = checked;
-      if (row.childList) {
-        let that = this;
-        row.childList.forEach((element, i) => {
-          that.handleCheckAll(row.childList[i], checked);
-        });
-      }
-    },
-    /**
-     * 功能选择
-     */
-    // 子选框事件
-    fnCheckEv(scope, type) {
-      // 如果有子项，则子项的选框选择跟当前一致
-      if (scope.row.childList) {
-        this.handleFnAll(scope.row, scope.row.fnCheck[type], type);
-      }
-      // 查找父级选框
-      this.getParent(this.tableData, scope.row.id).forEach((item, i) => {
-        if (!item.childList) {
-          item.fnCheck[type] = scope.row.fnCheck[type];
-        } else {
-          var num = 0;
-          item.childList.forEach((item, i) => {
-            if (item.fnCheck[type] === true) {
-              num += 1;
-            }
-          });
-          if (num === item.childList.length) {
-            item.fnCheck[type] = true;
-          } else {
-            item.fnCheck[type] = false;
-          }
-        }
-      });
-    },
-    handleFnAll(row, fnCheck, type) {
-      row.fnCheck[type] = fnCheck;
-      if (row.childList) {
-        let that = this;
-        row.childList.forEach((element, i) => {
-          that.handleFnAll(row.childList[i], fnCheck, type);
-        });
-      }
-    },
-
-    handleDataAll(row, dataCheck, type) {
-      for (let x in row.dataCheck) {
-        row.dataCheck[x] = false;
-      }
-      row.dataCheck[type] = dataCheck;
-      if (row.childList) {
-        let that = this;
-        row.childList.forEach((element, i) => {
-          that.handleDataAll(row.childList[i], dataCheck, type);
-        });
-      }
-    },
+  
 
     handleEdit(index, row) {
       alert(index, row);
@@ -1163,6 +570,8 @@ export default {
   min-height: calc(100vh - 115px) !important;
 }
 </style>
+
+
 <style >
 .el-tabs--border-card {
   background: rgba(0, 0, 0, 0);
@@ -1219,20 +628,5 @@ export default {
   width: 96%;
 }
 
-/* 权限第二行居左样式 */
 
-.goodsInfo .cell {
-  text-align: left;
-  padding: 0 10px 0 10px;
-}
-
-.table-item td {
-  line-height: 30px;
-  height: 30px;
-}
 </style>
-<style >
-.warning td {
-  background: #f5f5f5;
-}
-</style>

src/views/system/components/RoleDetails.vue

@@ -0,0 +1,711 @@
+<template>
+  <div class="role-details inside-base">
+    <div class="inside-base-main clearfix">
+      <!-- 中间内容 -->
+      <div class="inside-base-cont">
+        <div class="role-cont clearfix">
+          <div>
+            <el-checkbox
+              class="check-page-all"
+              v-model="checkPageAll"
+              @change="checkPageAllEv($event)"
+            ></el-checkbox>
+            <!--  -->
+            <el-table
+              ref="table"
+              :data="tableData"
+              style="width: 100%; margin-bottom: 20px"
+              :header-cell-style="{ background: '#f5f5f5' }"
+              row-key="id"
+              :expand-row-keys="['3', '4']"
+              border
+              :indent="10"
+              :cell-class-name="goodsInfo"
+              :row-class-name="warning"
+              :select-on-indeterminate="true"
+              :tree-props="{
+                children: 'childList',
+                hasChildren: 'hasChildren',
+              }"
+            >
+              <el-table-column type="selection" width="55">
+                <template slot-scope="scope">
+                  <el-checkbox
+                    v-model="scope.row.pageCheck"
+                    @change="pageCheckEv(scope)"
+                  ></el-checkbox>
+                </template>
+              </el-table-column>
+              <el-table-column prop="page" label="菜单名称" width="130">
+              </el-table-column>
+              <el-table-column label="">
+                <template slot-scope="scope">
+                  <el-checkbox
+                    label="查询"
+                    v-model="scope.row.fnCheck.check"
+                    @change="fnCheckEv(scope, 'check')"
+                    v-if="scope.row.fnList.includes('查询')"
+                  ></el-checkbox>
+
+                  <el-checkbox
+                    label="新增"
+                    v-model="scope.row.fnCheck.add"
+                    @change="fnCheckEv(scope, 'add')"
+                    v-if="scope.row.fnList.includes('新增')"
+                  ></el-checkbox>
+                  <el-checkbox
+                    label="修改"
+                    v-model="scope.row.fnCheck.mod"
+                    @change="fnCheckEv(scope, 'mod')"
+                    v-if="scope.row.fnList.includes('修改')"
+                  ></el-checkbox>
+
+                  <el-checkbox
+                    label="删除"
+                    v-model="scope.row.fnCheck.del"
+                    @change="fnCheckEv(scope, 'del')"
+                    v-if="scope.row.fnList.includes('删除')"
+                  ></el-checkbox>
+
+                  <el-checkbox
+                    label="导出"
+                    v-model="scope.row.fnCheck.export"
+                    @change="fnCheckEv(scope, 'export')"
+                    v-if="scope.row.fnList.includes('导出')"
+                  ></el-checkbox>
+
+                  <el-checkbox
+                    label="安防管理视图"
+                    v-model="scope.row.fnCheck.viewport"
+                    @change="fnCheckEv(scope, 'viewport')"
+                    v-if="scope.row.fnList.includes('安防管理视图')"
+                  ></el-checkbox>
+
+                  <el-checkbox
+                    label="实时告警"
+                    v-model="scope.row.fnCheck.alarm"
+                    @change="fnCheckEv(scope, 'alarm')"
+                    v-if="scope.row.fnList.includes('实时告警')"
+                  ></el-checkbox>
+
+                  <el-checkbox
+                    label="任务管理"
+                    v-model="scope.row.fnCheck.task"
+                    @change="fnCheckEv(scope, 'task')"
+                    v-if="scope.row.fnList.includes('任务管理')"
+                  ></el-checkbox>
+                </template>
+              </el-table-column>
+            </el-table>
+            <!--  -->
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "RoleDetails",
+  data() {
+    return {
+      msg: "",
+      checkPageAll: false,
+      tableData: [
+        {
+          id: 1, // id
+          page: "系统管理", // 页面分类
+          pageCheck: false, // 是否可查看页面
+          fnList: [], // 功能权限有哪些
+          fnCheck: {
+            check: false,
+            add: false,
+            mod: false,
+            del: false,
+            export: false,
+          },
+
+          childList: [
+            {
+              p_id: 12,
+              id: 8,
+              page: "人员管理",
+              pageCheck: false,
+              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
+              fnCheck: {
+                add: false,
+                del: false,
+                mod: false,
+                check: false,
+              },
+            },
+            {
+              p_id: 13,
+              id: 9,
+              page: "权限管理",
+              pageCheck: false,
+              fnList: [], // 功能权限有哪些
+              fnCheck: {
+                add: false,
+                del: false,
+                mod: false,
+                check: false,
+              },
+              childList: [
+                {
+                  p_id: 2,
+                  id: 10,
+                  page: "菜单表",
+                  pageCheck: false,
+                  fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
+                  fnCheck: {
+                    add: false,
+                    del: false,
+                    mod: false,
+                    check: false,
+                  },
+                },
+                {
+                  p_id: 2,
+                  id: 11,
+                  page: "角色表",
+                  pageCheck: false,
+                  fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
+                  fnCheck: {
+                    add: false,
+                    del: false,
+                    mod: false,
+                    check: false,
+                  },
+                },
+              ],
+            },
+            {
+              p_id: 14,
+              id: 30,
+              page: "组织机构",
+              pageCheck: false,
+              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
+              fnCheck: {
+                add: false,
+                del: false,
+                mod: false,
+                check: false,
+              },
+            },
+            {
+              p_id: 15,
+              id: 33,
+              page: "安全机制",
+              pageCheck: false,
+              fnList: [], // 功能权限有哪些
+              fnCheck: {
+                add: false,
+                del: false,
+                mod: false,
+                check: false,
+              },
+            },
+            {
+              p_id: 16,
+              id: 93,
+              page: "单位信息",
+              pageCheck: false,
+              fnList: [], // 功能权限有哪些
+              fnCheck: {
+                add: false,
+                del: false,
+                mod: false,
+                check: false,
+              },
+            },
+          ],
+        },
+        {
+          id: 2,
+          page: "用户管理",
+          pageCheck: false,
+          fnList: [], // 功能权限有哪些
+          fnCheck: {
+            add: false,
+            del: false,
+            mod: false,
+            check: false,
+          },
+          childList: [
+            {
+              p_id: 2,
+              id: 39,
+              page: "账号管理",
+              pageCheck: false,
+              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
+              fnCheck: {
+                add: false,
+                del: false,
+                mod: false,
+                check: false,
+              },
+            },
+            {
+              p_id: 2,
+              id: 32,
+              page: "日志管理",
+              pageCheck: false,
+              fnList: ["查询"], // 功能权限有哪些
+              fnCheck: {
+                add: false,
+                del: false,
+                mod: false,
+                check: false,
+              },
+            },
+          ],
+        },
+
+        {
+          id: 3,
+          page: "设备管理",
+          pageCheck: false,
+          fnList: [], // 功能权限有哪些
+          fnCheck: {
+            add: false,
+            del: false,
+            mod: false,
+            check: false,
+          },
+          childList: [
+            {
+              p_id: 2,
+              id: 31,
+              page: "摄像头",
+              pageCheck: false,
+              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
+              fnCheck: {
+                add: false,
+                del: false,
+                mod: false,
+                check: false,
+              },
+            },
+            {
+              p_id: 2,
+              id: 22,
+              page: "周边防界",
+              pageCheck: false,
+              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
+              fnCheck: {
+                add: false,
+                del: false,
+                mod: false,
+                check: false,
+              },
+            },
+          ],
+        },
+
+        {
+          id: 4,
+          page: "巡检管理",
+          pageCheck: false,
+          fnList: [], // 功能权限有哪些
+          fnCheck: {
+            add: false,
+            del: false,
+            mod: false,
+            check: false,
+          },
+          childList: [
+            {
+              p_id: 1,
+              id: 41,
+              page: "巡检点",
+              pageCheck: false,
+              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
+              fnCheck: {
+                add: false,
+                del: false,
+                mod: false,
+                check: false,
+              },
+            },
+            {
+              p_id: 2,
+              id: 42,
+              page: "巡检路线",
+              pageCheck: false,
+              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
+              fnCheck: {
+                add: false,
+                del: false,
+                mod: false,
+                check: false,
+              },
+            },
+            {
+              p_id: 3,
+              id: 43,
+              page: "电子巡更",
+              pageCheck: false,
+              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
+              fnCheck: {
+                add: false,
+                del: false,
+                mod: false,
+                check: false,
+              },
+            },
+            {
+              p_id: 4,
+              id: 44,
+              page: "巡检计划",
+              pageCheck: false,
+              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
+              fnCheck: {
+                add: false,
+                del: false,
+                mod: false,
+                check: false,
+              },
+            },
+          ],
+        },
+
+        {
+          id: 5,
+          page: "告警中心",
+          pageCheck: false,
+          fnList: [], // 功能权限有哪些
+          fnCheck: {
+            add: false,
+            del: false,
+            mod: false,
+            check: false,
+          },
+          childList: [
+            {
+              p_id: 1,
+              id: 51,
+              page: "告警记录",
+              pageCheck: false,
+              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
+              fnCheck: {
+                add: false,
+                del: false,
+                mod: false,
+                check: false,
+              },
+            },
+            {
+              p_id: 2,
+              id: 52,
+              page: "任务中心",
+              pageCheck: false,
+              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
+              fnCheck: {
+                add: false,
+                del: false,
+                mod: false,
+                check: false,
+              },
+            },
+          ],
+        },
+        {
+          id: 6,
+          page: "综合查询",
+          pageCheck: false,
+          fnList: ["安防管理视图", "实时告警", "任务管理"], // 功能权限有哪些
+          fnCheck: {
+            viewport: false,
+            alarm: false,
+            task: false,
+          },
+        },
+      ],
+    };
+  },
+  methods: {
+    goodsInfo(row) {
+      if (row.columnIndex == 2) {
+        return "goodsInfo"; //给第2个td里面添加goodsInfo的类名
+      }
+
+      if (row.row.fnList.length == 0) {
+        return "warning";
+      }
+    },
+
+    warning(row) {
+      if (row.row.fnList.length == 0) {
+        return "warning";
+      }
+    },
+
+    // 查找父级函数
+    getParent(data2, nodeId2) {
+      var arrRes = [];
+      if (data2.length === 0) {
+        if (nodeId2) {
+          arrRes.push(data2);
+        }
+        return arrRes;
+      }
+      let rev = (data, nodeId) => {
+        for (var i = 0, length = data.length; i < length; i++) {
+          let node = data[i];
+          if (node.id === nodeId) {
+            arrRes.push(node);
+            rev(data2, node.p_id);
+            break;
+          } else {
+            if (node.childList) {
+              rev(node.childList, nodeId);
+            }
+          }
+        }
+        return arrRes;
+      };
+      arrRes = rev(data2, nodeId2);
+      return arrRes;
+    },
+    /**
+     * 页面选择
+     */
+    // 总选框事件
+    checkPageAllEv(item) {
+      let checkAll = (data, checked) => {
+        for (let x of data) {
+          x.pageCheck = checked;
+          if (x.childList) {
+            checkAll(x.childList, checked);
+          }
+        }
+      };
+      if (item === true) {
+        checkAll(this.tableData, true);
+      } else {
+        checkAll(this.tableData, false);
+      }
+    },
+    // 遍历json数据
+    isCheckAllEv(data) {
+      let isCheckAll = true;
+      let fn = (data) => {
+        for (let x of data) {
+          if (x.pageCheck === false) {
+            isCheckAll = false;
+            return isCheckAll;
+          }
+          if (x.childList) {
+            fn(x.childList);
+          }
+        }
+      };
+      fn(data);
+      console.log(isCheckAll);
+      return isCheckAll;
+    },
+    // 子选框事件
+    pageCheckEv(scope) {
+      // 如果有子项，则子项的选框选择跟当前一致
+      if (scope.row.childList) {
+        this.handleCheckAll(scope.row, scope.row.pageCheck);
+      }
+      // 查找父级选框
+      this.getParent(this.tableData, scope.row.id).forEach((item, i) => {
+        if (!item.childList) {
+          item.pageCheck = scope.row.pageCheck;
+        } else {
+          var num = 0;
+          item.childList.forEach((item, i) => {
+            if (item.pageCheck === true) {
+              num += 1;
+            }
+          });
+          if (num === item.childList.length) {
+            item.pageCheck = true;
+          } else {
+            item.pageCheck = false;
+          }
+        }
+      });
+
+      // 是否所有子项都已经勾选
+      if (this.isCheckAllEv(this.tableData) === true) {
+        this.checkPageAll = true;
+      } else {
+        this.checkPageAll = false;
+      }
+    },
+    handleCheckAll(row, checked) {
+      row.pageCheck = checked;
+      if (row.childList) {
+        let that = this;
+        row.childList.forEach((element, i) => {
+          that.handleCheckAll(row.childList[i], checked);
+        });
+      }
+    },
+    /**
+     * 功能选择
+     */
+    // 子选框事件
+    fnCheckEv(scope, type) {
+      // 如果有子项，则子项的选框选择跟当前一致
+      if (scope.row.childList) {
+        this.handleFnAll(scope.row, scope.row.fnCheck[type], type);
+      }
+      // 查找父级选框
+      this.getParent(this.tableData, scope.row.id).forEach((item, i) => {
+        if (!item.childList) {
+          item.fnCheck[type] = scope.row.fnCheck[type];
+        } else {
+          var num = 0;
+          item.childList.forEach((item, i) => {
+            if (item.fnCheck[type] === true) {
+              num += 1;
+            }
+          });
+          if (num === item.childList.length) {
+            item.fnCheck[type] = true;
+          } else {
+            item.fnCheck[type] = false;
+          }
+        }
+      });
+    },
+    handleFnAll(row, fnCheck, type) {
+      row.fnCheck[type] = fnCheck;
+      if (row.childList) {
+        let that = this;
+        row.childList.forEach((element, i) => {
+          that.handleFnAll(row.childList[i], fnCheck, type);
+        });
+      }
+    },
+    /**
+     * 权限选择
+     */
+    // 权限：全部、自己
+    // 子选框事件
+    dataCheckEv(scope, type) {
+      let temp = scope.row.dataCheck[type];
+      for (let x in scope.row.dataCheck) {
+        scope.row.dataCheck[x] = false;
+      }
+      scope.row.dataCheck[type] = temp;
+      // 如果有子项，则子项的选框选择跟当前一致
+      if (scope.row.childList) {
+        this.handleDataAll(scope.row, scope.row.dataCheck[type], type);
+      }
+      // 查找父级选框
+      this.getParent(this.tableData, scope.row.id).forEach((item, i) => {
+        for (let x in item.dataCheck) {
+          item.dataCheck[x] = false;
+        }
+        if (!item.childList) {
+          item.dataCheck[type] = temp;
+        } else {
+          var num = 0;
+          item.childList.forEach((item, i) => {
+            if (item.dataCheck[type] === true) {
+              num += 1;
+            }
+          });
+          if (num === item.childList.length) {
+            item.dataCheck[type] = true;
+          } else {
+            item.dataCheck[type] = false;
+          }
+        }
+      });
+    },
+    handleDataAll(row, dataCheck, type) {
+      for (let x in row.dataCheck) {
+        row.dataCheck[x] = false;
+      }
+      row.dataCheck[type] = dataCheck;
+      if (row.childList) {
+        let that = this;
+        row.childList.forEach((element, i) => {
+          that.handleDataAll(row.childList[i], dataCheck, type);
+        });
+      }
+    },
+  },
+  mounted() {},
+};
+</script>
+
+<style lang="scss" scoped>
+.inside-base {
+  position: relative;
+}
+
+// .inside-base-main {
+//   width: 100%;
+//   background: #ffffff;
+//   box-shadow: 0px 0px 10px 0px rgba(231,232,238,1);
+//   border-radius: 4px;
+//   margin-bottom: 30px;
+// }
+
+// 中间内容
+// .inside-base-cont {
+//   margin: 0 20px;
+// }
+
+.role-cont {
+  position: relative;
+  font-size: 16px;
+  color: #333333;
+  line-height: 40px;
+  > span {
+    width: 90px;
+    height: 40px;
+    text-align: right;
+    float: left;
+    margin-right: 10px;
+    margin-bottom: 20px;
+  }
+  > div {
+    position: relative;
+    width: 100%;
+    float: left;
+    margin-bottom: 20px;
+    >>> .el-input__inner {
+      width: 320px;
+    }
+  }
+}
+.check-page-all {
+  position: absolute;
+  top: 3px;
+  left: 21px;
+  z-index: 99;
+}
+
+/* element-ui css */
+.inside-base {
+  >>> .el-input__inner {
+    font-size: 16px;
+    color: #333333;
+  }
+}
+
+.warning td {
+  background: #f5f5f5;
+}
+
+.goodsInfo .cell {
+  text-align: left;
+  padding: 0 10px 0 10px;
+}
+
+.table-item td {
+  line-height: 30px;
+  height: 30px;
+}
+</style>
+