新增组件及页面

dgtis-ui/src/assets/styles/lunbo.css

@@ -0,0 +1,344 @@
+body,
+div,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+pre,
+code,
+form,
+fieldset,
+legend,
+input,
+button,
+textarea,
+p,
+blockquote,
+th,
+td {
+    margin: 0;
+    padding: 0;
+}
+
+ul,
+ol {
+    list-style: none;
+}
+
+a {
+    text-decoration: none;
+}
+
+img {
+    border: none;
+}
+
+em,
+i {
+    font-style: normal;
+}
+
+html {
+    font: 16px / 1.4 Helvetica;
+}
+
+body {
+    min-width: 1240px;
+    max-width: 2500px;
+    margin: 0 auto;
+    background-image: linear-gradient(120deg, #6fc9b7, #093637);
+}
+
+.scrollbar {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(100, 100, 100, .4) transparent;
+}
+
+.scrollbar::-webkit-scrollbar {
+    width: .6rem;
+}
+
+.scrollbar::-webkit-scrollbar-thumb {
+    border-radius: .6rem;
+    background-color: rgba(100, 100, 100, .4)
+}
+
+
+.site {
+    overflow: hidden;
+}
+
+
+.lunboDiv{
+  width: 50%;
+  height: 82%;
+  background: url("../image/lunboBg.png") 53% 50% no-repeat;
+  background-size: 80% 90%;
+  margin-left: 25%;
+}
+.lineImg{
+  width: 150px;
+  position: absolute;
+  top: 6px;
+  left: 198px;
+}
+.infoLeft{
+  position: absolute;
+  top: 50px;
+  left: 10px;
+}
+.infoRight{
+  position: absolute;
+  top: 36px;
+  right: 10px;
+  width: 190px;
+}
+.infoRight .infoItem{
+  background: url("../image/infoRightBg.png") no-repeat;
+  background-size: 100% 100%;
+  padding: 6px 14px 10px;
+  margin-top: 10px;
+}
+.infoRight .infoItem .infoItemTitle{
+  font-size: 16px;
+  color: #3AD2F7;
+  text-align: right;
+}
+.infoRight .infoItem .infoCon{
+  font-size: 14px;
+  line-height: 24px;
+  color: #333;
+}
+.infoRight .searchBtn{
+  width: 100%;
+  margin-top: 10px;
+}
+.wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    height: 100%;
+    min-height: 180px;
+    max-height: 800px;
+}
+
+
+.wrapper h3 {
+    position: absolute;
+    left: 4rem;
+    top: 4rem;
+    z-index: 1000;
+    padding: 0 1rem;
+    background-color: #fff;
+    font-size: 1.4rem;
+    font-weight: 400;
+    color: #222;
+    border-radius: 1.4rem;
+}
+
+.wrapper .container {
+    position: relative;
+    margin: 0 auto;
+}
+
+.horizontal .container {
+    width: 80px;
+    height: 70%;
+}
+
+.vertical .container {
+    width: 37rem;
+    height: 14rem;
+}
+
+.container .cards-list {
+    position: absolute;
+    left: 0;
+    top: 10px;
+    overflow: hidden;
+    background: rgba(237,252,255,0.6);
+    border: 2px solid #20CBF6;
+    border-radius: 5px;
+    transition: 330ms;
+    text-align: center;
+    cursor: pointer;
+}
+
+.demo4 .cards-list {
+    transition: 440ms cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+
+.horizontal .cards-list {
+    width: 100%;
+}
+
+.horizontal .img {
+    /*height: 40px;*/
+  text-align: center;
+}
+
+
+
+
+.vertical .cards-list {
+    display: flex;
+    height: 100%;
+}
+
+.vertical .img,
+.vertical .main-con {
+    height: 100%;
+}
+
+.vertical .img {
+    /*width: 40px;*/
+}
+
+.vertical .main-con {
+    width: 19rem;
+}
+
+
+.iconImg {
+    width: 30px;
+    margin-top: 20px;
+    line-height: 0;
+    vertical-align: top;
+}
+.shadowImg {
+  width: 50px;
+  margin-top: 10px;
+  vertical-align: top;
+}
+
+.main-con {
+    padding: 0 6px 10px 0;
+    box-sizing: border-box;
+}
+
+.main-con .name {
+    padding-top: 4px;
+    font-size: 14px;
+    color: #333;
+}
+.main-con img {
+  width: 100%;
+}
+
+.main-con .content {
+    padding-top: 1rem;
+    height: 4.5rem;
+    font-size: 0.9rem;
+    color: #777;
+    text-align: justify;
+    line-height: 1.4rem;
+}
+
+.main-con .label {
+    font-size: 0.9rem;
+    color: #555;
+    padding: 1rem 0;
+}
+
+
+
+
+
+.btn-direct {
+    position: absolute;
+    top: 50%;
+    z-index: 100000;
+    width: 4rem;
+    height: 4rem;
+    transform: translateY(-50%);
+    cursor: pointer;
+    transition: .2s;
+}
+
+
+.btn-direct.btn-left {
+    left: 6rem;
+}
+
+.btn-direct.btn-right {
+    right: 6rem;
+}
+
+.btn-direct>span {
+    position: absolute;
+    left: calc(50% - .6rem);
+    top: calc(50% - .6rem);
+    width: 1.2rem;
+    height: 1.2rem;
+    border-top: 0.2rem solid #fff;
+    border-left: 0.2rem solid #fff;
+}
+
+.horizontal .shift-left {
+    transform: translateX(25%) rotate(-45deg);
+}
+
+.horizontal .shift-right {
+    transform: translateX(-25%) rotate(135deg);
+}
+
+.vertical .shift-left {
+    transform: translateY(25%) rotate(45deg);
+}
+
+.vertical .shift-right {
+    transform: translateY(-25%) rotate(-135deg);
+}
+
+
+
+.demo7 .container {
+    width: 18rem;
+    height: 24rem;
+    overflow: hidden;
+}
+
+.navigation {
+    position: absolute;
+    bottom: 5rem;
+    left: 50%;
+    transform: translate(-50%);
+}
+
+.navigation .dot {
+    display: inline-block;
+    width: .5rem;
+    height: .5rem;
+    margin: .5rem;
+    border: .125rem solid #fff;
+    background-color: #fff;
+    border-radius: 100%;
+    cursor: pointer;
+}
+.navigation .dot.active {
+    background-color: transparent;
+}
+
+.demo1-tip {
+    position: absolute;
+    left: 12rem;
+    top: 8rem;
+    color: #fff;
+    line-height: 1;
+}
+.demo1-tip .active-index{
+    color: lightgoldenrodyellow;
+    font-size: 1.5rem;
+    font-weight: 600;
+    vertical-align: middle;
+}

dgtis-ui/src/views/dashboard/BarChart2.vue

@@ -0,0 +1,117 @@
+<template>
+  <div :id="id" :class="className" :style="{ height:height,width:width }" />
+</template>
+<script>
+  import echarts from 'echarts'
+  import resize from './mixins/resize'
+
+  export default {
+    mixins: [resize],
+    props: {
+      className: {
+        type: String,
+        default: "chart"
+      },
+      id: {
+        type: String,
+        default: "chart"
+      },
+      width: {
+        type: String,
+        default: "100%"
+      },
+      height: {
+        type: String,
+        default: "400px"
+      },
+      data: {
+        type: Object,
+        default: {}
+      },
+    },
+    data() {
+      return {
+        chart: null
+      };
+    },
+    mounted() {
+      this.initChart();
+    },
+    beforeDestroy() {
+      if (!this.chart) {
+        return;
+      }
+      this.chart.dispose();
+      this.chart = null;
+    },
+    methods: {
+      initChart() {
+        let that = this;
+        this.chart = echarts.init(document.getElementById(this.id));
+        let seriesData = [], legendData = [];
+        that.data.seriesData.forEach(function(item,index){
+          let series = {
+            name: '',
+            type: 'bar',
+            // barWidth: '50%',
+            data:[]
+          }
+          item.stack ? series.stack = item.stack : '';
+          item.data ? series.data = [].concat(item.data) : '';
+          if(item.name){
+             series.name = item.name;
+             legendData.push(item.name);
+          }
+          seriesData.push(series)
+        })
+        let option = {
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: { // 坐标轴指示器，坐标轴触发有效
+              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+            }
+          },
+          color:that.data.color,
+          legend: {
+            left: "center",
+            top: 10,
+            data: legendData
+          },
+          grid: {
+            top: '25%',
+            left: '2%',
+            bottom: '3%',
+            containLabel: true
+          },
+          xAxis: [{
+            type: 'category',
+            data: that.data.xAxisData,
+            axisTick: {
+              show:false
+            },
+            axisLine: {
+              show: false
+            },
+          }],
+          yAxis: [{
+            type: 'value',
+            name: that.data.yAxisName,
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            },
+            splitLine: {
+              lineStyle:{
+                color:'#EFEFEF',
+              },
+            },
+          }],
+          series: seriesData,
+        };
+        this.chart.setOption(option);
+      }
+    }
+  };
+</script>

dgtis-ui/src/views/dashboard/BarChart3.vue

@@ -0,0 +1,157 @@
+<template>
+  <div :id="id" :class="className" :style="{ height:height,width:width }" />
+</template>
+<script>
+  import echarts from 'echarts'
+  import resize from './mixins/resize'
+
+  export default {
+    mixins: [resize],
+    props: {
+      className: {
+        type: String,
+        default: "chart"
+      },
+      id: {
+        type: String,
+        default: "chart"
+      },
+      width: {
+        type: String,
+        default: "100%"
+      },
+      height: {
+        type: String,
+        default: "400px"
+      },
+      data: {
+        type: Object,
+        default: {}
+      },
+    },
+    data() {
+      return {
+        chart: null
+      };
+    },
+    mounted() {
+      this.initChart();
+    },
+    beforeDestroy() {
+      if (!this.chart) {
+        return;
+      }
+      this.chart.dispose();
+      this.chart = null;
+    },
+    methods: {
+      initChart() {
+        let that = this;
+        this.chart = echarts.init(document.getElementById(this.id));
+        let seriesData = [], legendData = [];
+        that.data.seriesData.forEach(function(item,index){
+          let series = {
+            name: '',
+            type: 'bar',
+            // barWidth: '50%',
+            data:[]
+          }
+          item.stack ? series.stack = item.stack : '';
+          item.data ? series.data = [].concat(item.data) : '';
+          if(item.name){
+             series.name = item.name;
+             legendData.push(item.name);
+          }
+          if(index == 1){
+            series.yAxisIndex = 1;
+          }
+          seriesData.push(series)
+        })
+        let option = {
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: { // 坐标轴指示器，坐标轴触发有效
+              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+            }
+          },
+          color:that.data.color,
+          legend: {
+            left: "center",
+            top: 10,
+            data: legendData
+          },
+          grid: {
+            top: '25%',
+            left: '2%',
+            bottom: '3%',
+            containLabel: true
+          },
+          xAxis: [
+            {
+              type: 'category',
+              data: that.data.xAxisData,
+              axisTick: {
+                show:false
+              },
+              axisLine: {
+                lineStyle:{
+                  color:'#4FAAF6',
+                },
+              },
+              axisLabel:{
+                color:'#333',
+              },
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              name: that.data.yAxisName,
+              nameTextStyle:{
+                color:'#333',
+              },
+              axisTick: {
+                show: false
+              },
+              axisLine: {
+                lineStyle:{
+                  color:'#4FAAF6',
+                },
+              },
+              axisLabel:{
+                color:'#333',
+              },
+              splitLine: {
+                lineStyle:{
+                  color:'#EFEFEF',
+                },
+              },
+            },
+            {
+              type: 'value',
+              name: '',
+              axisTick: {
+                show: false
+              },
+              axisLine: {
+                lineStyle:{
+                  color:'#F39801',
+                },
+              },
+              axisLabel:{
+                color:'#333',
+              },
+              splitLine: {
+                lineStyle:{
+                  color:'#EFEFEF',
+                },
+              },
+            },
+          ],
+          series: seriesData,
+        };
+        this.chart.setOption(option);
+      }
+    }
+  };
+</script>

dgtis-ui/src/views/dashboard/BarTwoWayChart.vue

@@ -0,0 +1,220 @@
+<template>
+  <div :id="id" :class="className" :style="{ height:height,width:width }" />
+</template>
+<script>
+  import echarts from 'echarts'
+  import resize from './mixins/resize'
+
+  export default {
+    mixins: [resize],
+    props: {
+      className: {
+        type: String,
+        default: "chart"
+      },
+      id: {
+        type: String,
+        default: "chart"
+      },
+      width: {
+        type: String,
+        default: "100%"
+      },
+      height: {
+        type: String,
+        default: "400px"
+      },
+      data: {
+        type: Object,
+        default: {}
+      },
+    },
+    data() {
+      return {
+        chart: null
+      };
+    },
+    mounted() {
+      this.initChart();
+    },
+    beforeDestroy() {
+      if (!this.chart) {
+        return;
+      }
+      this.chart.dispose();
+      this.chart = null;
+    },
+    methods: {
+      initChart() {
+        let that = this;
+        this.chart = echarts.init(document.getElementById(this.id));
+        let option = {
+          tooltip: {
+            show: true,
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            }
+          },
+          legend: {
+            left: 20,
+            top: 10,
+            data: that.data.legendData
+          },
+          grid: [{
+            // left: '60%',
+            show: true,
+            containLabel: false,
+            bottom:'45%',
+            top:'20%',
+            backgroundColor:'#FDF0F7',
+            borderColor:'#F5EEF1',
+          }, {
+            // left: '60%',
+            show: true,
+            containLabel: false,
+            bottom:"10%",
+            top:'55%',
+            backgroundColor:'#DDF7FE',
+            borderColor:'#F5EEF1',
+          }, {
+            // left: '50%',
+            height: 0,
+            bottom:'10',
+            top:'90%',
+          }],
+          xAxis: [{
+            type: 'category',
+            // inverse: true,
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            data: that.data.xAxisData
+          }, {
+            gridIndex: 1,
+            type: 'category',
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            data: that.data.xAxisData
+          },
+            {
+            gridIndex: 2,
+            show: true,
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            },
+            data: that.data.xAxisData
+          }
+          ],
+          yAxis: [{
+            // position: 'right',
+            axisLabel: {
+              color: '#333333',
+              // fontSize: '12'
+            },
+            axisLine: {
+              show: true,
+              lineStyle:{
+                color:'#F5EEF1',
+              },
+            },
+            splitLine: {
+              lineStyle:{
+                color:'#F5EEF1',
+              },
+            },
+            type: 'value',
+            inverse: false,
+            axisTick: {
+              show: false
+            },
+          },
+           {
+              gridIndex: 1,
+              // position: 'left',
+              axisLabel: {
+                color: '#333333',
+                // fontSize: '12'
+              },
+              axisLine: {
+                show: true,
+                lineStyle:{
+                  color:'#F5EEF1',
+                },
+              },
+               splitLine: {
+                 lineStyle:{
+                   color:'#F5EEF1',
+                 },
+               },
+              type: 'value',
+              inverse: true,
+              axisTick: {
+                show: false
+              },
+            },
+            {
+              gridIndex: 2,
+              // position: 'center',
+              type: 'value',
+              // inverse: true,
+              axisLabel: {
+                show: false,
+              },
+              axisTick: {
+                show: false,
+              },
+              axisLine: {
+                show: false,
+              },
+            },
+          ],
+          series: [{
+            name: that.data.legendData[0],
+            barWidth: '50%',
+            type: 'bar',
+            itemStyle: {
+              color: '#F29EC2',
+            },
+            data: that.data.seriesData[0]
+          },
+            {
+              type: 'bar',
+              barWidth: '50%',
+              xAxisIndex: 1,
+              yAxisIndex: 1,
+              name: "app",
+              itemStyle: {
+                color: '#048EF3',
+              },
+              data: that.data.seriesData[1]
+            }
+          ]
+        };
+        this.chart.setOption(option);
+      }
+    }
+  };
+</script>

dgtis-ui/src/views/dashboard/PieChart2.vue

@@ -0,0 +1,87 @@
+<template>
+  <div :id="id" :class="className" :style="{ height:height,width:width }" />
+</template>
+<script>
+  import echarts from 'echarts'
+  import resize from './mixins/resize'
+
+  export default {
+    mixins: [resize],
+    props: {
+      className: {
+        type: String,
+        default: "chart"
+      },
+      id: {
+        type: String,
+        default: "chart"
+      },
+      width: {
+        type: String,
+        default: "100%"
+      },
+      height: {
+        type: String,
+        default: "400px"
+      },
+      data: {
+        type: Object,
+        default: {}
+      },
+    },
+    data() {
+      return {
+        chart: null
+      };
+    },
+    mounted() {
+      this.initChart();
+    },
+    beforeDestroy() {
+      if (!this.chart) {
+        return;
+      }
+      this.chart.dispose();
+      this.chart = null;
+    },
+    methods: {
+      initChart() {
+        let that = this;
+        this.chart = echarts.init(document.getElementById(this.id));
+        let legendData = [];
+        that.data.seriesData.forEach(function(item,index){
+          if(item.name){
+             legendData.push(item.name);
+          }
+        })
+        let option = {
+          tooltip: {
+            trigger: 'item',
+            formatter: '{a} <br/>{b} : {c} ({d}%)'
+          },
+          color:that.data.color,
+          legend: {
+            left: 'right',
+            top: 'middle',
+            orient:'vertical',
+            data: legendData
+          },
+          series: [
+            {
+              name: '拥有保单件数分布',
+              type: 'pie',
+              // roseType: 'radius',
+              radius: ['20%', '45%'],
+              center: ['40%', '50%'],
+              label: {
+                formatter: '有{b}个\n保单的\n人数为：\n{c}人'
+              },
+              data: this.data.seriesData,
+            }
+          ]
+        };
+        this.chart.setOption(option);
+      }
+    }
+  };
+</script>