mm

.eslintrc.js

@@ -142,10 +142,10 @@ module.exports = {
     }],
     'no-unreachable': 2,
     'no-unsafe-finally': 2,
-    'no-unused-vars': [2, {
-      'vars': 'all',
-      'args': 'none'
-    }],
+    // 'no-unused-vars': [2, {
+    //   'vars': 'all',
+    //   'args': 'none'
+    // }],
     'no-useless-call': 2,
     'no-useless-computed-key': 2,
     'no-useless-constructor': 2,
@@ -194,6 +194,7 @@ module.exports = {
       objectsInObjects: false
     }],
     'array-bracket-spacing': [2, 'never'],
-    'vue/no-unused-components': 'off'
+    'vue/no-unused-components': 'off',
+    'no-unused-vars': 'off'
   }
 }

src/router/index.js

@@ -91,7 +91,7 @@ export const constantRoutes = [
     children: [
       {
         path: '',
-        component: () => import('@/views/dashboard-screen/index'), // Parent router-view
+        component: () => import('@/views/dashboard-screen/syjhdxqk/index'), // Parent router-view
         name: 'fault',
         meta: { title: '大屏', pages: ['pc:catenary:jlgz'] }
       }

src/views/dashboard-screen/dlydtssx/index.vue

@@ -0,0 +1,256 @@
+<template>
+  <div class="chart-wrap">
+    <v-chart autoresize :option="option"/>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'SyjhdxqkChart',
+  data() {
+    return {
+      option: {}
+    }
+  },
+  created() {
+    this.getOption()
+  },
+
+  methods: {
+    getOption() {
+
+      const data = [{
+        name: '第一季度',
+        value: 40
+      }, {
+        name: '第二季度',
+        value: 30
+      }, {
+        name: '第三季度',
+        value: 20
+      }, {
+        name: '第四季度',
+        value: 10
+      }]
+      const name = data.map((item) => item.name)
+      const value = data.map((item) => item.value)
+      const sum = value.reduce((a, b) => {
+        return a + b
+      })
+      const colors = [
+        [
+          new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: 'rgb(82, 113, 195)' }, {
+            offset: 1,
+            color: 'rgb(120, 142, 237)'
+          }], false),
+          new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: 'rgb(81, 129, 192)' }, {
+            offset: 1,
+            color: 'rgb(123, 148, 234)'
+          }], false),
+          new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: 'rgb(89, 137, 188)' }, {
+            offset: 1,
+            color: 'rgb(113, 173, 229)'
+          }], false),
+          new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: 'rgb(88, 166, 191)' }, {
+            offset: 1,
+            color: 'rgb(128, 230, 226)'
+          }], false)
+
+        ],
+        ['rgb(41, 73, 110)',
+          'rgb(41, 73, 110)',
+          'rgb(41, 73, 110)',
+          'rgb(41, 73, 110)'
+        ]
+      ]
+      const series = []
+      const yAxis = []
+      for (let i = 0; i < data.length; i++) {
+        series.push({
+          name: '',
+          type: 'pie',
+          clockWise: false, // 顺时加载
+          hoverAnimation: false, // 鼠标移入变大
+          radius: [90 - i * 10 + '%', 86 - i * 10 + '%'],
+          center: ['50%', '50%'],
+          label: {
+            show: false
+          },
+          itemStyle: {
+            label: {
+              show: false
+            },
+            labelLine: {
+              show: false
+            },
+            borderRadius: 60 // 设置每一段子项目的圆角
+
+          },
+          data: [{
+            value: data[i].value,
+            name: data[i].name
+          },
+            {
+              value: sum - data[i].value,
+              name: '',
+              itemStyle: {
+                color: 'transparent',
+                borderRadius: 60 // 设置每一段子项目的圆角
+
+              },
+              tooltip: {
+                show: false
+              },
+              hoverAnimation: false
+            }
+          ]
+        })
+        series.push({
+          name: '',
+          type: 'pie',
+          silent: true,
+          z: 1,
+          clockWise: false, // 顺时加载
+          hoverAnimation: false, // 鼠标移入变大
+          radius: [90 - i * 10 + '%', 86 - i * 10 + '%'],
+          center: ['50%', '50%'],
+          label: {
+            show: false
+          },
+          itemStyle: {
+            label: {
+              show: false
+            },
+            labelLine: {
+              show: false
+            },
+            borderRadius: 60 // 设置每一段子项目的圆角
+
+          },
+          data: [{
+            value: 7.5,
+            itemStyle: {
+              color: colors[1][i]
+            },
+            tooltip: {
+              show: false
+            },
+            hoverAnimation: false
+          },
+            {
+              value: 2.5,
+              itemStyle: {
+                color: 'rgba(0,0,0,0)',
+                borderWidth: 0,
+                borderRadius: 60 // 设置每一段子项目的圆角
+              },
+              tooltip: {
+                show: false
+              },
+              hoverAnimation: false
+            }
+          ]
+        })
+        yAxis.push(((data[i].value / sum) * 100).toFixed(2) + '%')
+      }
+      this.option = {
+        backgroundColor: '#012248',
+        color: colors[0],
+        legend: {
+          show: true,
+          icon: 'circle',
+          top: '15%',
+          left: '60%',
+          width: '40%',
+          height: '60%',
+          data: name,
+          orient: 'vertical',
+          formatter: (name) => {
+            return (
+              '{title|' + name + '}   {value|' + data.find((item) => {
+                return item.name === name
+              }).value + '}'
+            )
+          },
+          textStyle: {
+            rich: {
+              title: {
+                fontSize: 14,
+                lineHeight: 30,
+                color: 'rgb(0, 178, 246)'
+              },
+              value: {
+                fontSize: 14,
+                lineHeight: 30,
+                color: '#fff'
+              }
+            }
+          }
+        },
+        tooltip: {
+          show: true,
+          trigger: 'item',
+          formatter: '{a}<br>{b}:{c}({d}%)'
+        },
+        grid: {
+          top: '3%',
+          left: '50%',
+          width: '40%',
+          height: '21%',
+          containLabel: false
+        },
+        yAxis: [{
+          type: 'category',
+          inverse: true,
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            interval: 0,
+            inside: true,
+            textStyle: {
+              color: '#fff',
+              fontSize: 14
+            },
+            show: true
+          },
+          data: yAxis
+        }],
+        xAxis: [{
+          show: false
+        }],
+        series: series
+      }
+
+    }
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+
+$xHeight: 120px;
+.chart-wrap {
+  width: 100%;
+  height: 100%;
+
+  .left-bar {
+    width: 35px;
+    display: inline-block;
+  }
+
+  .right-conent {
+    width: calc(100% - 35px);
+    height: 100%;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-rows: auto $xHeight;
+  }
+
+}
+</style>

src/views/dashboard-screen/syjhdxqk/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="chart-wrap">
-    <v-chart autoresize :option="option" />
+    <v-chart autoresize :option="option"/>
   </div>
 </template>
 
@@ -19,78 +19,32 @@ export default {
 
   methods: {
     getOption() {
+      const baseWidth = 20
       this.option = {
-        backgroundColor: '#03124500',
-        color: [
-          '#63caff',
-          '#49beff',
-          '#03387a',
-          '#03387a',
-          '#03387a',
-          '#6c93ee',
-          '#a9abff',
-          '#f7a23f',
-          '#27bae7',
-          '#ff6d9d',
-          '#cb79ff',
-          '#f95b5a',
-          '#ccaf27',
-          '#38b99c',
-          '#93d0ff',
-          '#bd74e0',
-          '#fd77da',
-          '#dea700'
-        ],
+        backgroundColor: 'rgb(2, 10, 33)',
+        color: [],
         grid: {
           containLabel: true,
           left: 20,
           right: 20,
-          bottom: 10,
+          bottom: 60,
           top: 40
         },
-        xAxis: [
-          {
-            type: 'category',
-            axisTick: {
-              show: false
-            },
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: '#fff'
-              }
-            },
-            data: ['第一季度', '第二季度', '第三季度', '第四季度']
-          }, {
-            type: 'category',
-            axisLine: {
-              show: false
-            },
-            axisTick: {
-              show: false
-            },
-            axisLabel: {
-              show: false
-            },
-            splitArea: {
-              show: false
-            },
-            splitLine: {
-              show: false
-            },
-            data: ['第一季度', '第二季度', '第三季度', '第四季度']
-          }
-        ],
+        xAxis: {
 
+          data: ['第一季度', '第二季度', '第三季度', '第四季度'],
+          position: 'bottom',
+          type: 'category'
+        },
         yAxis: {
           axisLabel: {
-            color: '#c0c3cd',
+            color: '#ffffff',
             fontSize: 14
           },
           axisTick: {
             lineStyle: {
               color: '#384267',
-              width: 1
+              width: 0
             },
             show: true
           },
@@ -103,8 +57,8 @@ export default {
           },
           axisLine: {
             lineStyle: {
-              color: '#384267',
-              width: 1,
+              color: '#ffffff',
+              width: 0,
               type: 'dashed'
             },
             show: true
@@ -113,290 +67,262 @@ export default {
         },
         series: [
           {
-            name: '开关分合',
-            type: 'bar',
-            xAxisIndex: 1,
-            data: [100, 100, 100, 100]
-          }, {
-            name: '单体',
-            type: 'bar',
-            xAxisIndex: 1,
-            data: [150, 150, 150, 150]
+            data: [200, 85, 112, 275],
+
+            type: 'pictorialBar',
+            symbol: 'rect',
+
+            symbolSize: ['100%', '100%'],
+            symbolOffset: [-baseWidth, 0],
+            barMaxWidth: 'auto',
+            barWidth: baseWidth,
+
+            itemStyle: {
+              color: {
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                type: 'linear',
+                global: false,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: 'rgb(106, 169, 216)'
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgb(54, 125, 181)'
+                  }
+                ]
+              }
+            },
+
+            zlevel: 1
+          },
+          {
+            data: [1, 1, 1, 1],
+            type: 'pictorialBar',
+            symbol: 'triangle',
+            symbolRotate: 180,
+            symbolOffset: [-baseWidth, '96%'],
+            symbolSize: ['100%', 12],
+            barMaxWidth: 'auto',
+            barWidth: baseWidth,
+            itemStyle: {
+              color: 'rgb(54, 125, 181)'
+            },
+            zlevel: 1
           },
           {
-            name: '开关分合(完成)',
-            type: 'bar',
-            data: [30, 30, 30, 30]
+            data: [200, 85, 112, 275],
+            type: 'pictorialBar',
+            symbolPosition: 'end',
+            symbol: 'triangle',
+            symbolRotate: 180,
+            symbolSize: [baseWidth, 12],
+            symbolOffset: [-baseWidth, '-0%'],
+            barMaxWidth: 'auto',
+            barWidth: baseWidth,
+            itemStyle: {
+              color: 'rgb(159, 214, 253)'
+            },
+            zlevel: 2
           },
           {
-            name: '单体(完成)',
-            type: 'bar',
-            barWidth: '20%',
-            data: [10, 10, 10, 10]
-          }
+            data: [600, 541, 741, 741],
+            type: 'pictorialBar',
+            symbol: 'rect',
+
+            symbolSize: [baseWidth, '100%'],
+            symbolOffset: [-baseWidth, 0],
+            barMaxWidth: 'auto',
+            barWidth: baseWidth,
+            itemStyle: {
+              color: {
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                type: 'linear',
+                global: false,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: 'rgb(35, 55, 81)'
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgb(30, 52, 75)'
+                  }
+                ]
+              }
+            },
+            label: {
+              show: true,
+              distance: 10,
+              color: '#fff',
+              position: [-25, -20]
+            },
+            zlevel: -1
+
+          },
+
+          {
+            data: [600, 541, 741, 741],
+            type: 'pictorialBar',
 
+            symbolPosition: 'end',
+            symbol: 'triangle',
+            symbolRotate: 180,
+
+            symbolSize: [baseWidth, 12],
+            symbolOffset: [-baseWidth, '0%'],
+            barMaxWidth: 'auto',
+            barWidth: baseWidth,
+
+            itemStyle: {
+              color: 'rgb(49, 70, 97)'
+            },
+
+            zlevel: 1
+          },
+
+          // 2
+          {
+            data: [160, 410, 112, 275],
+
+            type: 'pictorialBar',
+            symbol: 'rect',
+
+            symbolSize: [baseWidth, '100%'],
+            symbolOffset: [baseWidth, '0%'],
+            barMaxWidth: 'auto',
+            barWidth: baseWidth,
+
+            itemStyle: {
+              color: {
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                type: 'linear',
+                global: false,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: 'rgb(107, 204, 220)'
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgb(57, 154, 178)'
+                  }
+                ]
+              }
+            },
+
+            zlevel: 1
+          },
+          {
+            data: [1, 1, 1, 1],
+            type: 'pictorialBar',
+
+            symbol: 'triangle',
+            symbolRotate: 180,
+
+            symbolSize: [baseWidth, 12],
+            symbolOffset: [baseWidth, '96%'],
+            barMaxWidth: 'auto',
+            barWidth: baseWidth,
+
+            itemStyle: {
+              color: 'rgb(57, 154, 178)'
+            },
+            zlevel: 1
+          },
+          {
+            data: [160, 410, 112, 275],
+            type: 'pictorialBar',
+
+            symbolPosition: 'end',
+            symbol: 'triangle',
+            symbolRotate: 180,
+
+            symbolSize: [baseWidth, 12],
+            symbolOffset: [baseWidth, '0%'],
+            barMaxWidth: 'auto',
+            barWidth: baseWidth,
+
+            itemStyle: {
+              color: 'rgb(159, 214, 253)'
+            },
+            zlevel: 2
+          },
+          {
+            data: [580, 541, 741, 420],
+            type: 'pictorialBar',
+            symbol: 'rect',
+
+            symbolSize: [baseWidth, '100%'],
+            symbolOffset: [baseWidth, '0%'],
+            barMaxWidth: 'auto',
+            barWidth: baseWidth,
+
+            itemStyle: {
+              color: {
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                type: 'linear',
+                global: false,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: 'rgb(33, 59, 72)'
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgb(30, 64, 78)'
+                  }
+                ]
+              }
+            },
+            label: {
+              show: true,
+              distance: 10,
+              color: '#fff',
+              position: [35, -20]
+            },
+            zlevel: -1
+
+          },
+          {
+            data: [580, 541, 741, 420],
+            type: 'pictorialBar',
+
+            symbolPosition: 'end',
+            symbol: 'triangle',
+            symbolRotate: 180,
+
+            symbolSize: [baseWidth, 12],
+            symbolOffset: [baseWidth, '0%'],
+            barMaxWidth: 'auto',
+            barWidth: baseWidth,
+
+            itemStyle: {
+              color: 'rgb(49, 70, 97)'
+
+            },
+
+            zlevel: 1
+          }
         ],
         tooltip: {
           trigger: 'axis',
-          show: true
+          show: false
         }
       }
-
-      // const CubeLeft = echarts.graphic.extendShape({
-      //   shape: {
-      //     x: 0,
-      //     y: 0
-      //   },
-      //   buildPath: (ctx, shape) => {
-      //     const xAxisPoint = shape.xAxisPoint
-      //     const c0 = [shape.x, shape.y]
-      //     const c1 = [shape.x - 9, shape.y - 9]
-      //     const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9]
-      //     const c3 = [xAxisPoint[0], xAxisPoint[1]]
-      //     ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
-      //   }
-      // })
-      // const CubeRight = echarts.graphic.extendShape({
-      //   shape: {
-      //     x: 0,
-      //     y: 0
-      //   },
-      //   buildPath: (ctx, shape) => {
-      //     const xAxisPoint = shape.xAxisPoint
-      //     const c1 = [shape.x, shape.y]
-      //     const c2 = [xAxisPoint[0], xAxisPoint[1]]
-      //     const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9]
-      //     const c4 = [shape.x + 18, shape.y - 9]
-      //     ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
-      //   }
-      // })
-      // const CubeTop = echarts.graphic.extendShape({
-      //   shape: {
-      //     x: 0,
-      //     y: 0
-      //   },
-      //   buildPath: (ctx, shape) => {
-      //     const c1 = [shape.x, shape.y]
-      //     const c2 = [shape.x + 18, shape.y - 9]
-      //     const c3 = [shape.x + 9, shape.y - 18]
-      //     const c4 = [shape.x - 9, shape.y - 9]
-      //     ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
-      //   }
-      // })
-      // echarts.graphic.registerShape('CubeLeft', CubeLeft)
-      // echarts.graphic.registerShape('CubeRight', CubeRight)
-      // echarts.graphic.registerShape('CubeTop', CubeTop)
-      // const MAX = [100, 200, 300, 400]
-      // const VALUE = [2012, 1230, 3790, 2349]
-      // this.option = {
-      //   backgroundColor: '#012366',
-      //   title: {
-      //     text: '',
-      //     top: 32,
-      //     left: 18,
-      //     textStyle: {
-      //       color: '#00F6FF',
-      //       fontSize: 24
-      //     }
-      //   },
-      //   grid: {
-      //     left: 10,
-      //     right: 40,
-      //     bottom: '5%',
-      //     top: 20,
-      //     containLabel: true
-      //   },
-      //   xAxis: {
-      //     type: 'category',
-      //     data: ['第一季度', '第二季度', '第三季度', '第四季度'],
-      //     axisLine: {
-      //       show: true,
-      //       lineStyle: {
-      //         color: 'white'
-      //       }
-      //     },
-      //     offset: 0,
-      //     axisTick: {
-      //       show: false,
-      //       length: 9,
-      //       alignWithLabel: true,
-      //       lineStyle: {
-      //         color: '#7DFFFD'
-      //       }
-      //     },
-      //     axisLabel: {
-      //       fontSize: 12
-      //     }
-      //   },
-      //   yAxis: {
-      //     type: 'value',
-      //     axisLine: {
-      //       show: true,
-      //       lineStyle: {
-      //         color: 'white'
-      //       }
-      //     },
-      //     splitLine: {
-      //       show: false
-      //     },
-      //     axisTick: {
-      //       show: false
-      //     },
-      //     axisLabel: {
-      //       fontSize: 16
-      //     },
-      //     boundaryGap: ['20%', '20%']
-      //   },
-      //   series: [{
-      //     type: 'custom',
-      //     renderItem: (params, api) => {
-      //       const location = api.coord([api.value(0), api.value(1)])
-      //       return {
-      //         type: 'group',
-      //         children: [{
-      //           type: 'CubeLeft',
-      //           shape: {
-      //             api,
-      //             xValue: api.value(0),
-      //             yValue: api.value(1),
-      //             x: location[0],
-      //             y: location[1],
-      //             xAxisPoint: api.coord([api.value(0), 0])
-      //           },
-      //           style: {
-      //             fill: 'rgba(47,102,192,.27)'
-      //           }
-      //         }, {
-      //           type: 'CubeRight',
-      //           shape: {
-      //             api,
-      //             xValue: api.value(0),
-      //             yValue: api.value(1),
-      //             x: location[0],
-      //             y: location[1],
-      //             xAxisPoint: api.coord([api.value(0), 0])
-      //           },
-      //           style: {
-      //             fill: 'rgba(59,128,226,.27)'
-      //           }
-      //         }, {
-      //           type: 'CubeTop',
-      //           shape: {
-      //             api,
-      //             xValue: api.value(0),
-      //             yValue: api.value(1),
-      //             x: location[0],
-      //             y: location[1],
-      //             xAxisPoint: api.coord([api.value(0), 0])
-      //           },
-      //           style: {
-      //             fill: 'rgba(72,156,221,.27)'
-      //           }
-      //         }]
-      //       }
-      //     },
-      //     data: MAX
-      //   }, {
-      //     type: 'custom',
-      //     renderItem: (params, api) => {
-      //       const location = api.coord([api.value(0), api.value(1)])
-      //       return {
-      //         type: 'group',
-      //         children: [{
-      //           type: 'CubeLeft',
-      //           shape: {
-      //             api,
-      //             xValue: api.value(0),
-      //             yValue: api.value(1),
-      //             x: location[0],
-      //             y: location[1],
-      //             xAxisPoint: api.coord([api.value(0), 0])
-      //           },
-      //           style: {
-      //             fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-      //               offset: 0,
-      //               color: '#3B80E2'
-      //             },
-      //             {
-      //               offset: 1,
-      //               color: '#49BEE5'
-      //             }
-      //             ])
-      //           }
-      //         }, {
-      //           type: 'CubeRight',
-      //           shape: {
-      //             api,
-      //             xValue: api.value(0),
-      //             yValue: api.value(1),
-      //             x: location[0],
-      //             y: location[1],
-      //             xAxisPoint: api.coord([api.value(0), 0])
-      //           },
-      //           style: {
-      //             fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-      //               offset: 0,
-      //               color: '#3B80E2'
-      //             },
-      //             {
-      //               offset: 1,
-      //               color: '#49BEE5'
-      //             }
-      //             ])
-      //           }
-      //         }, {
-      //           type: 'CubeTop',
-      //           shape: {
-      //             api,
-      //             xValue: api.value(0),
-      //             yValue: api.value(1),
-      //             x: location[0],
-      //             y: location[1],
-      //             xAxisPoint: api.coord([api.value(0), 0])
-      //           },
-      //           style: {
-      //             fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-      //               offset: 0,
-      //               color: '#3B80E2'
-      //             },
-      //             {
-      //               offset: 1,
-      //               color: '#49BEE5'
-      //             }
-      //             ])
-      //           }
-      //         }]
-      //       }
-      //     },
-      //     data: VALUE
-      //   }, {
-      //     type: 'bar',
-      //     label: {
-      //       normal: {
-      //         show: true,
-      //         position: 'top',
-      //         formatter: (e) => {
-      //           switch (e.name) {
-      //             case '10kV线路':
-      //               return VALUE[0]
-      //             case '公用配变':
-      //               return VALUE[1]
-      //             case '35kV主变':
-      //               return VALUE[2]
-      //             case '水':
-      //           }
-      //         },
-      //         fontSize: 16,
-      //         color: '#fff',
-      //         offset: [4, -25]
-      //       }
-      //     },
-      //     itemStyle: {
-      //       color: 'transparent'
-      //     },
-      //     data: MAX
-      //   }]
-      // }
     }
   }
 

src/views/sys/app/index.vue

@@ -38,7 +38,8 @@
     <div>
       <div class="ant-alert ant-alert-info" style="margin: 16px 0;">
         <i class="anticon anticon-info-circle ant-alert-icon" /> 已选择&nbsp;<a style="font-weight: 600">{{
-          selectedRowKeys.length }}</a>项&nbsp;&nbsp;
+          selectedRowKeys.length
+        }}</a>项&nbsp;&nbsp;
         <a style="margin-left: 24px" @click="onClearSelected">清空</a>
       </div>
 
@@ -83,7 +84,7 @@ import CheckAndEditModel from './CheckAndEditModel'
 
 export default {
   components: {
-    CheckAndEditModel,
+    CheckAndEditModel
   },
   mixins: [listMixin],
   data() {
@@ -100,10 +101,9 @@ export default {
   },
   created() {
   },
-  methods: {
-  }
+  methods: {}
 }
 </script>
 <style scoped>
-  @import '~@/assets/less/common.less'
+@import '~@/assets/less/common.less'
 </style>

src/views/sys/role/index.vue

@@ -38,7 +38,8 @@
     <div>
       <div class="ant-alert ant-alert-info" style="margin: 16px 0;">
         <i class="anticon anticon-info-circle ant-alert-icon" /> 已选择&nbsp;<a style="font-weight: 600">{{
-          selectedRowKeys.length }}</a>项&nbsp;&nbsp;
+          selectedRowKeys.length
+        }}</a>项&nbsp;&nbsp;
         <a style="margin-left: 24px" @click="onClearSelected">清空</a>
       </div>
 
@@ -62,14 +63,14 @@
             un-checked-children="停用"
             @change="changeStatus({$event,record})"
           />
-          <span v-else>{{ record.status==='1'?'停用':'启用' }}</span>
+          <span v-else>{{ record.status === '1' ? '停用' : '启用' }}</span>
         </template>
         <span slot="action" slot-scope="text, record">
           <a-button v-permission="['pc:system:role:edit']" size="small" type="primary" @click="handleEdit(record)">
             编辑
           </a-button>
           <a-divider type="vertical" />
-          <a-button  v-permission="['pc:system:role:permission']" size="small" type="primary" @click="prem(record)">
+          <a-button v-permission="['pc:system:role:permission']" size="small" type="primary" @click="prem(record)">
             操作权限
           </a-button>
           <a-divider type="vertical" />
@@ -96,7 +97,7 @@ import { listMixin } from '@/mixin/listMixin'
 import columns from './indexColumns'
 import CheckAndEditModel from './CheckAndEditModel'
 import rightModel from '@/components/RightModel'
-import {httpAction, putAction} from '@/api/request'
+import { httpAction, putAction } from '@/api/request'
 import JSPermission from '@/utils/JSPermission'
 
 export default {
@@ -156,5 +157,5 @@ export default {
 }
 </script>
 <style scoped>
-  @import '~@/assets/less/common.less'
+@import '~@/assets/less/common.less'
 </style>

src/views/sys/user/CheckAndEditModel.vue

@@ -63,7 +63,7 @@
   </j-modal>
 </template>
 <script>
-import { getAction, httpAction, putAction } from '@/api/request'
+import { getAction, httpAction } from '@/api/request'
 import JModal from '@/components/JModal'
 
 export default {