资金往来不规范预警分析

src/components/charts/bar-sign/index.html

@@ -0,0 +1 @@
+<div :id="id" class="chart"></div>

src/components/charts/bar-sign/index.js

@@ -0,0 +1,249 @@
+import * as echarts from 'echarts';
+import elementResizeDetectorMaker from 'element-resize-detector';
+export default {
+  props: {
+    id: {
+      type: String,
+      default: 'bar'
+    },
+    data: {
+      type: Array,
+      default: function () {
+        return [
+          {
+            name: '1月',
+            value: '10'
+          },
+          {
+            name: '2月',
+            value: '19'
+          }
+        ];
+      }
+    },
+
+    unit: {
+      type: String,
+      default: '单位：万元'
+    },
+    color: {
+      type: Array,
+      default: function () {
+        return ['rgba(15, 252, 252, 1)', 'rgba(15, 252, 252, 0.04)']
+      }
+    }
+  },
+  data () {
+    return {
+      icon: require('./icon.png'),
+      chart: null
+    };
+  },
+  mounted () {
+    this.initChart();
+  },
+  computed: {
+  },
+  methods: {
+    // 设置监听器 页面尺寸变化重新绘制图表
+    initResizeCallBack () {
+      const erd = elementResizeDetectorMaker();
+      erd.listenTo(document.getElementById(this.id), () => {
+        this.$nextTick(() => {
+          this.chart.resize();
+        });
+      });
+    },
+    initChart () {
+      this.chart = echarts.init(document.getElementById(this.id));
+      this.chartSetOption();
+    },
+    chartSetOption () {
+      let xAxisData = [];
+      let data = [];
+      this.data.forEach(item => {
+        xAxisData.push(item.name)
+        data.push(item.value)
+      });
+      const option = {
+        color: ["#3398DB"],
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "line",
+            lineStyle: {
+              opacity: 0,
+            },
+          }
+        },
+        legend: {
+          data: ["直接访问", "背景"],
+          show: false,
+        },
+        grid: {
+          left: "0%",
+          right: "0%",
+          bottom: "5%",
+          top: "15%",
+          containLabel: true,
+          z: 22,
+        },
+        xAxis: [
+          {
+            splitArea: {
+              show: false,
+              areaStyle: {
+                color: ['RGBA(13, 31, 64, 1)']
+              }
+            },
+            splitLine: {
+              show: false,
+              lineStyle: {
+                color: ['rgba(18, 40, 83, 1)'],
+                width: 100
+              }
+            },
+            type: "category",
+            gridIndex: 0,
+            data: xAxisData,
+            axisTick: {
+              alignWithLabel: true,
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#0c3b71",
+              },
+            },
+            axisLabel: {
+              show: true,
+              color: 'rgba(185, 211, 235, 1)'
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: this.unit,
+            nameTextStyle: {
+              color: 'rgba(185, 211, 235, 1)'
+            },
+            axisLabel: {
+              formatter: "{value}",
+              textStyle: {
+                color: "rgba(185, 211, 235, 1)",
+              },
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#27b4c2",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: "#11366e",
+              },
+            },
+          },
+          {
+            type: "value",
+            gridIndex: 0,
+            max: 100,
+            splitNumber: 12,
+            splitLine: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+            }
+          },
+        ],
+        series: [
+          {
+            name: "合格率",
+            type: "bar",
+            barWidth: 2,
+            xAxisIndex: 0,
+            yAxisIndex: 0,
+            showBackground: false,
+            backgroundStyle: {
+              shadowBlur: 10,
+              color: 'rgba(18, 40, 83, 1)'
+            },
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: this.color[0],
+                  },
+                  {
+                    offset: 1,
+                    color: this.color[1],
+                  },
+                ]),
+              },
+            },
+            data: data,
+            zlevel: 11,
+          },
+          {
+            name: "合格率2",
+            type: "pictorialBar",
+            symbol: 'image://data:' + this.icon,
+            symbolSize: [20, 20],
+            symbolOffset: [0, -10],
+            barWidth: 20,
+            symbolPosition: 'end',
+            xAxisIndex: 0,
+            yAxisIndex: 0,
+            showBackground: false,
+            backgroundStyle: {
+              shadowBlur: 10,
+              color: 'rgba(18, 40, 83, 1)'
+            },
+            data: data,
+            zlevel: 11,
+          },
+          {
+            type: 'custom',
+            itemStyle: {
+              color: 'rgba(18, 40, 83, 0.4)'
+            },
+            renderItem: function (params, api) {
+              //获取对应类目的axisTick中心点坐标
+              var start = api.coord([api.value(0)]);
+              //通过坐标系的宽度和类目数，计算单个类目的背景
+              var width = (params.coordSys.width / 7) * 0.6;
+              return {
+                type: 'rect',
+                shape: {
+                  // 相对左上角坐标
+                  x: start[0] - width / 2,
+                  y: params.coordSys.y,
+                  width: width,
+                  height: params.coordSys.height,
+                },
+                style: api.style()
+              };
+            },
+            data: [100, 100, 100, 100, 100, 100, 100]
+          },
+
+        ],
+      };;
+      this.chart.setOption(option);
+      this.initResizeCallBack();
+
+    }
+  }
+};

src/components/charts/bar-sign/index.scss

@@ -0,0 +1,6 @@
+.chart {
+  overflow: visible;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+}

src/components/charts/bar-sign/index.vue

@@ -0,0 +1,3 @@
+<template src='./index.html'/>
+<script lang='js' src='./index.js'></script>
+<style lang='scss' src='./index.scss' scoped></style>

src/views/capital/comps/left/bottom/2/index.html

@@ -1,4 +1,11 @@
 
-<Pannel>
-  
+<Pannel title="资金往来不规范预警分析" height="340">
+  <div class="full">
+    <div class="top">
+      <PannelTabs @change="tabChange" :data="pannelTabsData"></PannelTabs>
+    </div>
+    <div class="buttom">
+      <BarSign id="bar3"></BarSign>
+    </div>
+  </div>
 </Pannel>

src/views/capital/comps/left/bottom/2/index.js

@@ -1,11 +1,24 @@
 import Pannel from '@/components/pannel/index.vue';
-
+import BarSign from '@/components/charts/bar-sign/index.vue';
+import PannelTabs from '@/components/pannel-tabs/index.vue';
 export default {
   components: {
+    BarSign,
+    PannelTabs,
     Pannel
   },
   data () {
     return {
+      pannelTabsData: [
+        {
+          id: '1',
+          name: '支出'
+        },
+        {
+          id: '2',
+          name: '收入'
+        }
+      ]
     };
   },
   created () {
@@ -13,5 +26,8 @@ export default {
   mounted () {
   },
   methods: {
+    tabChange () {
+
+    }
   }
 };

src/views/capital/comps/left/bottom/2/index.scss

@@ -0,0 +1,17 @@
+.full {
+  display: flex;
+  flex-direction: column;
+
+  .top {
+    height: 50px !important;
+    width: 100%;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: flex-end;
+  }
+
+  .buttom {
+    flex: 1;
+    width: 100%;
+  }
+}

src/views/capital/comps/left/middle/2/index.html

@@ -1,9 +1,8 @@
 
 <Pannel title="资金往来敏感词预警分析" height="305">
-
   <div class="full">
     <div class="top">
-      <PannelTabs @change="tabChange"></PannelTabs>
+      <PannelTabs @change="tabChange" :data="pannelTabsData"></PannelTabs>
     </div>
     <div class="buttom">
       <Bar id="bar2" :color="['rgba(134, 91, 252, 1)', 'rgba(49, 129, 246, 1)']"></Bar>

src/views/capital/comps/left/middle/2/index.js

@@ -9,6 +9,16 @@ export default {
   },
   data () {
     return {
+      pannelTabsData: [
+        {
+          id: '1',
+          name: '支出'
+        },
+        {
+          id: '2',
+          name: '收入'
+        }
+      ]
     };
   },
   created () {

src/views/capital/data.js

@@ -15,7 +15,7 @@ export const comps = {
     'left': [
       'Left12',
       'Left22',
-      ''
+      'Left32'
     ],
     'right': [
       'Right12',

src/views/capital/index.html

@@ -6,7 +6,6 @@
   </Header>
   <!-- 项目初始化 -->
   <div class="left_side col space_between">
-    <!-- <Left11></Left11> -->
     <component :is="item" v-for="(item, index) in currentComp.left" :key="index"></component>
   </div>
   <div class="right_side col space_between">

src/views/capital/index.js

@@ -10,6 +10,7 @@ import Right31 from './comps/right/bottom/1/index.vue';
 
 import Left12 from './comps/left/top/2/index.vue';
 import Left22 from './comps/left/middle/2/index.vue';
+import Left32 from './comps/left/bottom/2/index.vue';
 import Right12 from './comps/right/top/2/index.vue';
 import Right22 from './comps/right/middle/2/index.vue';
 import Right32 from './comps/right/bottom/2/index.vue';
@@ -33,6 +34,7 @@ export default {
     Right31,
     Left12,
     Left22,
+    Left32,
     Right12,
     Right22,
     Right32