视频监控

videoSurveillance/package-lock.json

@@ -4777,6 +4777,15 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "echarts": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.3.3.tgz",
+      "integrity": "sha512-BRw2serInRwO5SIwRviZ6Xgm5Lb7irgz+sLiFMmy/HOaf4SQ+7oYqxKzRHAKp4xHQ05AuHw1xvoQWJjDQq/FGw==",
+      "requires": {
+        "tslib": "2.3.0",
+        "zrender": "5.3.2"
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
@@ -12335,6 +12344,11 @@
       "integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==",
       "dev": true
     },
+    "tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    },
     "tsml": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/tsml/-/tsml-1.0.1.tgz",
@@ -13952,6 +13966,14 @@
           "dev": true
         }
       }
+    },
+    "zrender": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.3.2.tgz",
+      "integrity": "sha512-8IiYdfwHj2rx0UeIGZGGU4WEVSDEdeVCaIg/fomejg1Xu6OifAL1GVzIPHg2D+MyUkbNgPWji90t0a8IDk+39w==",
+      "requires": {
+        "tslib": "2.3.0"
+      }
     }
   }
 }

videoSurveillance/package.json

@@ -18,6 +18,7 @@
     "bpmn-js": "^3.5.0",
     "bpmn-moddle": "5.1.6",
     "core-js": "^2.6.5",
+    "echarts": "^5.3.3",
     "element-ui": "^2.11.0",
     "eslint": "^8.12.0",
     "html2canvas": "^1.4.1",

videoSurveillance/src/assets/css/public-style.scss

@@ -59,4 +59,7 @@ $base_fontSize: 100;
 }
 .mgB20{
   margin-bottom: rem(20);
+}
+input{
+  background-color: transparent !important;
 }

videoSurveillance/src/components/common/echart.vue

@@ -0,0 +1,67 @@
+<template>
+    <div :id="'echarts-' + _uid"></div>
+</template>
+<script>
+import * as echarts from 'echarts';
+export default {
+    name: 'zz-echart',
+    props: ['option'],
+    data() {
+        return {
+            echart: ''
+        };
+    },
+    mounted() {
+        this.initEchart();
+    },
+
+    computed: {
+        resize() {
+            // 通过scale值来判断窗口是变化
+            return this.$store.getters['getScale'];
+        },
+        collapse() {
+            return this.$store.getters['getCollapse'];
+        }
+    },
+    methods: {
+        initEchart() {
+            this.echart = echarts.init(document.getElementById('echarts-' + this._uid));
+            if (this.option) {
+                this.echart.setOption(this.option);
+                this.echart.on('rendered', () => {
+                    this.$emit('finish', this.echart);
+                });
+                this.echart.on('mouseover', (p) => {
+                    this.$emit('mouseover', this.echart, p);
+                });
+            }
+        }
+    },
+    watch: {
+        resize() {
+            this.echart.resize();
+        },
+        collapse() {
+            this.echart.resize();
+        },
+        option: {
+            deep: true,
+            handler(n) {
+                this.echart.dispose();
+                // this.echart.setOption(n);
+                this.initEchart();
+            }
+        }
+    },
+    destroyed() {
+        this.echart.dispose();
+    }
+};
+</script>
+<style lang="scss" scoped>
+[id^='echarts-'] {
+    width: 100%;
+    height: calc(100% - 2px);
+}
+</style>

videoSurveillance/src/components/common/index.js

@@ -18,6 +18,7 @@ import alramform from './alramform';
 import xkUpload from './XKUpload';
 import select from './select';
 import treeHouse from './treeHouse.vue';
+import echart from "./echart";
 // 注册全局组件
 export default {
     install() {
@@ -33,7 +34,8 @@ export default {
             organTree,
             xkUpload,
             select,
-            treeHouse
+            treeHouse,
+            echart
         ];
         _.each(components, (v) => {
             Vue.component(v.name, v);

videoSurveillance/src/main.js

@@ -21,7 +21,9 @@ import store from './store/store.js';
 import '@utils/utils.js';
 import 'babel-polyfill';
 
-
+window.onresize = (e) => {
+  store.commit('setScale', e.timeStamp);
+};
 
 var _ = require('lodash')
 

videoSurveillance/src/store/store.js

@@ -38,7 +38,8 @@ const store = new Vuex.Store({
         //公司部门
         companyArray: [],
         departmentArray: [],
-        communityArray: []
+        communityArray: [],
+        scale: ""
     },
     getters: {
         getTheme(state) {
@@ -98,6 +99,9 @@ const store = new Vuex.Store({
         },
         getCommunityArray(state) {
             return state.communityArray;
+        },
+        getScale(state) {
+            return state.scale;
         }
     },
     mutations: {
@@ -160,6 +164,9 @@ const store = new Vuex.Store({
         },
         setCommunityArray(state, data) {
             state.communityArray = data;
+        },
+        setScale(state, data) {
+            state.scale = data;
         }
     },
     actions: {

videoSurveillance/src/views/passengerFlow/EachartOptions.js

@@ -0,0 +1,1594 @@
+import * as echarts from 'echarts';
+//从左往右颜色渐变
+export const GradualChange = (color1, color2) => {
+  return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+    { offset: 1, color: color1 + '' },
+    { offset: 0, color: color2 + '' || color1 + '' }
+  ]);
+};
+export const getColor = ([color1, color2]) => {
+  // 右 下 左 上
+  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    { offset: 0, color: color1 + '' },
+    { offset: 1, color: color2 + '' || color1 + '' }
+  ]);
+};
+
+export const dateType = (date) => {
+  let val = '';
+  if (date) {
+    val = `${date.slice(0, 4)}年${date.slice(4)}月`;
+  } else {
+    val = date;
+  }
+  return val;
+};
+//折现波浪线颜色渐变
+export const getItemStyle = (c1, c2) => {
+  return {
+    color: {
+      type: 'linear',
+      x: 0,
+      y: 0,
+      x2: 0,
+      y2: 1,
+      colorStops: [
+        {
+          offset: 0,
+          color: c1 // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: c2 // 100% 处的颜色
+        }
+      ],
+      global: false // 缺省为 false
+    }
+  };
+};
+export const defaultMonth = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
+export const defaultName = ['name1', 'name2', 'name3'];
+
+const defaultColor = [
+  GradualChange('#22D8FF', '#00B2FF'),
+  GradualChange('#F0646C', '#F4994E'),
+  GradualChange('#5EEDCC ', '#24C3F1'),
+  GradualChange('#7178FF', '#D2A4FF'),
+  GradualChange('#884DD2', '#DF63CC')
+];
+// 饼图
+export const ringType = (color = [], data = [], title = {}, legendFcuntion = {}) => {
+  let legendFcuntionValue = (v) => {
+    let val = '';
+    data.map((item) => {
+      if (item.name == v) {
+        if (legendFcuntion.type == '%') {
+          val = `{a|${v}} · · · · · · {b|${parseInt((item.value / legendFcuntion.total).toFixed(2) * 100) || 0}%}`;
+          // val = `{a|${v}}{b|${parseInt((item.value / legendFcuntion.total).toFixed(2) * 100) || 0}%}`;
+        } else {
+          // val = `{a|${v}}{b|${item.value}}`;
+          // val = `{a|${v}} · · · · · · {b|${item.value}}`;
+          if (v.length > 5 || v.length == 5) {
+            let va = v.substr(0, 3) + '…';
+            val = `{a|${va}} · · · · {b|${item.value}}`;
+          } else if (item.value.length == 4 || item.value.length > 4) {
+            let itval = item.value.substr(0, 4) + '…';
+            val = `{a|${v}} · · · · {b|${itval}}`;
+          } else if ((v.length > 5 || v.length == 5) && (item.value.length == 4 || item.value.length > 4)) {
+            let va = v.substr(0, 3) + '…';
+            let itval = item.value.substr(0, 4) + '…';
+            val = `{a|${va}} · · · · {b|${itval}}`;
+          } else {
+            val = `{a|${v}} · · · · {b|${item.value}}`;
+          }
+        }
+      }
+    });
+    return val;
+  };
+  return {
+    tooltip: {
+      trigger: 'item'
+    },
+    legend: {
+      orient: 'vertical',
+      right: 0,
+      top: 80,
+      itemGap: 10,
+      itemWidth: 12, // 图例图形宽度
+      itemHeight: 8,
+      type: 'scroll',
+      formatter: (v) => {
+        return legendFcuntionValue(v);
+      },
+      textStyle: {
+        rich: {
+          a: {
+            fontSize: 12,
+            color: '#858892',
+            padding: [0, 5, 0, 0]
+          },
+          b: {
+            fontSize: 14,
+            color: '#fff',
+            padding: [0, 0, 0, 5]
+          }
+        }
+      }
+    },
+    title,
+    color: !!color.length ? color : defaultColor,
+    series: [
+      {
+        type: 'pie',
+        radius: ['60%', '75%'],
+        avoidLabelOverlap: false,
+        center: ['25%', '50%'],
+        label: {
+          show: false,
+          position: 'center'
+        },
+        labelLine: {
+          show: false
+        },
+        data: data
+      }
+    ]
+  };
+};
+
+// 饼图  2560
+export const ringTypeEnlarge = (color = [], data = [], title = {}, legendFcuntion = {}) => {
+  let legendFcuntionValue = (v) => {
+    let val = '';
+    data.map((item) => {
+      if (item.name == v) {
+        if (legendFcuntion.type == '%') {
+          val = `{a|${v}} · · · · · · {b|${parseInt((item.value / legendFcuntion.total).toFixed(2) * 100) || 0}%}`;
+        } else {
+          if (v.length > 5 || v.length == 5) {
+            let va = v.substr(0, 3) + '…';
+            val = `{a|${va}} · · · · {b|${item.value}}`;
+          } else if (item.value.length == 4 || item.value.length > 4) {
+            let itval = item.value.substr(0, 4) + '…';
+            val = `{a|${v}} · · · · {b|${itval}}`;
+          } else if ((v.length > 5 || v.length == 5) && (item.value.length == 4 || item.value.length > 4)) {
+            let va = v.substr(0, 3) + '…';
+            let itval = item.value.substr(0, 4) + '…';
+            val = `{a|${va}} · · · · {b|${itval}}`;
+          } else {
+            val = `{a|${v}} · · · · {b|${item.value}}`;
+          }
+        }
+      }
+    });
+    return val;
+  };
+  return {
+    tooltip: {
+      trigger: 'item'
+    },
+    legend: {
+      orient: 'vertical',
+      right: 30,
+      top: 100,
+      itemGap: 10,
+      itemWidth: 12, // 图例图形宽度
+      itemHeight: 8,
+      type: 'scroll',
+      formatter: (v) => {
+        return legendFcuntionValue(v);
+      },
+      textStyle: {
+        rich: {
+          a: {
+            fontSize: 12,
+            color: '#858892',
+            padding: [0, 5, 0, 0]
+          },
+          b: {
+            fontSize: 14,
+            color: '#fff',
+            padding: [0, 0, 0, 5]
+          }
+        }
+      }
+    },
+    title,
+    color: !!color.length ? color : defaultColor,
+    series: [
+      {
+        type: 'pie',
+        radius: ['55%', '70%'],
+        avoidLabelOverlap: false,
+        center: ['25%', '50%'],
+        label: {
+          show: false,
+          position: 'center'
+        },
+        labelLine: {
+          show: false
+        },
+        data: data
+      }
+    ]
+  };
+};
+
+export const ringTypeEnlarges = (color = [], data = [], title = {}, legendFcuntion = {}) => {
+  let legendFcuntionValue = (v) => {
+    let val = '';
+    data.map((item) => {
+      if (item.name == v) {
+        if (legendFcuntion.type == '%') {
+          val = `{a|${v}} · · · · · · {b|${parseInt((item.value / legendFcuntion.total).toFixed(2) * 100) || 0}%}`;
+        } else {
+          if (v.length > 5 || v.length == 5) {
+            let va = v.substr(0, 3) + '…';
+            val = `{a|${va}} · · · · {b|${item.value}}`;
+          } else if (item.value.length == 4 || item.value.length > 4) {
+            let itval = item.value.substr(0, 4) + '…';
+            val = `{a|${v}} · · · · {b|${itval}}`;
+          } else if ((v.length > 5 || v.length == 5) && (item.value.length == 4 || item.value.length > 4)) {
+            let va = v.substr(0, 3) + '…';
+            let itval = item.value.substr(0, 4) + '…';
+            val = `{a|${va}} · · · · {b|${itval}}`;
+          } else {
+            val = `{a|${v}} · · · · {b|${item.value}}`;
+          }
+        }
+      }
+    });
+    return val;
+  };
+  return {
+    tooltip: {
+      trigger: 'item'
+    },
+    legend: {
+      orient: 'vertical',
+      right: 0,
+      top: 100,
+      itemGap: 10,
+      itemWidth: 12, // 图例图形宽度
+      itemHeight: 8,
+      type: 'scroll',
+      formatter: (v) => {
+        return legendFcuntionValue(v);
+      },
+      textStyle: {
+        rich: {
+          a: {
+            fontSize: 12,
+            color: '#858892',
+            padding: [0, 5, 0, 0]
+          },
+          b: {
+            fontSize: 14,
+            color: '#fff',
+            padding: [0, 0, 0, 5]
+          }
+        }
+      }
+    },
+    title,
+    color: !!color.length ? color : defaultColor,
+    series: [
+      {
+        type: 'pie',
+        radius: ['55%', '70%'],
+        avoidLabelOverlap: false,
+        center: ['25%', '50%'],
+        label: {
+          show: false,
+          position: 'center'
+        },
+        labelLine: {
+          show: false
+        },
+        data: data
+      }
+    ]
+  };
+};
+
+// 折现波浪
+export const discountedWave = (name = '', xAxis = [], series = [], legendShow = false, color = []) => {
+  let option = {
+    tooltip: {
+      trigger: 'axis',
+      textStyle: {
+        fontSize: 12,
+        color: '#fff'
+      },
+      extraCssText:
+        "background:rgba(0,0,0,0.5);border-radius:4px;padding:6px 10px;border:none;",
+      // formatter(param) {
+      //   let el = `<div class="dmp-echart-tooltip"><h4>${dateType(param[0].axisValue)}</h4>`;
+      //   param.forEach(item => {
+      //     el += `<p>
+      //                   <span class="marker" style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-image: linear-gradient(to left,
+      //                     ${item.color.colorStops[0].color}, ${item.color.colorStops[1].color});"></span>
+      //                   <span>${item.seriesName}：${item.value}</span>
+      //                 </p>`;
+      //   });
+      //   el += `</div>`;
+      //   return el;
+      // }
+    },
+    grid: {
+      top: 30,
+      left: 10,
+      bottom: 0,
+      right: 5,
+      containLabel: true
+    },
+
+    legend: {
+      show: legendShow,
+      icon: 'circle',
+      x: 'right', // 可设定图例在左、右、居中
+      itemWidth: 8, // 图例图形宽度
+      itemHeight: 8,
+      itemGap: 20
+    },
+    xAxis: {
+      type: 'category',
+      axisLine: {
+        show: false // 不显示坐标轴
+      },
+      axisTick: {
+        show: false // 不显示坐标轴刻度
+      },
+      axisLabel: {
+        formatter: function (params, index) {
+          return params;
+        },
+        color: '#9B9DA5',
+        margin: 16
+      },
+      data: xAxis,
+      axisPointer: {
+        type: 'shadow',
+        shadowStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: 'rgba(31,207,245,0)' // 0% 处的颜色
+              },
+              {
+                offset: 0.8,
+                color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
+              },
+              {
+                offset: 0.2,
+                color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
+              },
+              {
+                offset: 1,
+                color: 'rgba(31,207,245,0.05)'
+              }
+            ],
+            global: false // 缺省为 false
+          }
+        }
+      }
+    },
+    yAxis: {
+      type: 'value',
+      splitNumber: 4,
+      axisLine: {
+        show: false
+      },
+      name: name,
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        color: '#9B9DA5',
+        margin: 15,
+        textStyle: {
+          align: 'right',
+          baseline: 'middle'
+        }
+      },
+      nameLocation: 'end',
+      nameTextStyle: { color: '#9B9DA5', padding: [0, 0, 0, -40] },
+      splitLine: {
+        lineStyle: {
+          type: 'dotted',
+          width: 0.2
+        }
+      }
+    },
+    series: [
+      {
+        // name: "设备告警",
+        type: 'line',
+        smooth: true,
+        symbol: 'circle', // 实心
+        symbolSize: 1, // 设定实心点的大小
+        itemStyle: getItemStyle('#5EEDCC', '#24C3F1'),
+        data: series,
+        areaStyle: {
+          normal: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: 'rgba(36,121,253,0.1)'
+              },
+              {
+                offset: 1,
+                color: 'rgba(19,194,247,0.3)'
+              }
+            ])
+          }
+        },
+        lineStyle: {
+          width: 1
+        }
+      }
+    ]
+  };
+  return option;
+};
+
+//柱状日期
+export const columnOptionsChart = (name = '', xAxis = [], series = [], color = [], barWidth = 6) => {
+  let defaultData = [
+    {
+      name: '',
+      type: 'bar',
+      data: []
+    }
+  ];
+  let defaultColor = [
+    ['#0EAEFF', '#85E9FF'],
+    ['#F0646C', '#F4994E']
+  ];
+  let seriesConfiguration = () => {
+    let seriesData = [];
+    series.map((item, index) => {
+      seriesData.push({
+        name: item.name,
+        type: 'bar',
+        data: item.data,
+        barWidth: barWidth,
+        itemStyle: {
+          normal: {
+            barBorderRadius: [15, 15, 0, 0],
+            color: getColor(color[index] || defaultColor[index])
+          }
+        },
+        barGap: '100%'
+      });
+    });
+    return seriesData;
+  };
+  let option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+        shadowStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: 'rgba(31,207,245,0)' // 0% 处的颜色
+              },
+              {
+                offset: 0.8,
+                color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
+              },
+              {
+                offset: 0.2,
+                color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
+              },
+              {
+                offset: 1,
+                color: 'rgba(31,207,245,0.05)'
+              }
+            ],
+            global: false // 缺省为 false
+          }
+        },
+        crossStyle: {
+          shadowBlur: 30,
+          shadowColor: 'rgba(0, 0, 0, 0.5)'
+        }
+      },
+      extraCssText: 'background:rgba(33,40,56,0.6);border-radius:4px;padding:6px 10px',
+      textStyle: {
+        fontSize: 12,
+        color: '#FFFFFF'
+      },
+      formatter(param) {
+        let el = `<div class="dmp-echart-tooltip" style="text-align: center;"><h4>${dateType(param[0].axisValue)}</h4>`;
+        param.forEach((item) => {
+          el += `<p style="text-align: left;">
+        <span style="display:inline-block;margin-right:5px;border-radius:4px;width:12px;height:8px;background-image: linear-gradient(to left, 
+          ${item.color.colorStops[0].color}, ${item.color.colorStops[1].color})"></span>
+                      <span>${item.seriesName}：${item.value.toFixed(2)}</span>
+                    </p>`;
+        });
+        el += `</div>`;
+        return el;
+      }
+    },
+    grid: {
+      top: 50,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      axisLine: {
+        show: false // 不显示坐标轴
+      },
+      axisTick: {
+        show: false // 不显示坐标轴刻度
+      },
+      axisLabel: {
+        formatter: function (params, index) {
+          if (params.length == 2) {
+            return params + '月';
+          } else {
+            return params.slice(5) + '月';
+          }
+        },
+        color: '#9B9DA5',
+        margin: 15
+      },
+      data: !!xAxis.length ? xAxis : defaultMonth
+    },
+    yAxis: {
+      type: 'value',
+      splitNumber: 4,
+      name: name,
+      axisLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        color: '#9B9DA5',
+        margin: 15,
+        textStyle: {
+          align: 'right',
+          baseline: 'middle'
+        }
+      },
+      nameLocation: 'end',
+      nameTextStyle: { color: '#9B9DA5', padding: [0, 0, 0, -40] },
+      splitLine: {
+        lineStyle: {
+          type: 'dotted',
+          width: 0.5
+        }
+      }
+    },
+    legend: {
+      show: false,
+      x: 'right',
+      icon: 'circle',
+      itemWidth: 8, // 图例图形宽度
+      itemHeight: 8,
+      itemGap: 20
+    },
+    series: seriesConfiguration() || defaultData
+  };
+  return option;
+};
+
+//柱状name  单柱状
+export const columnOptionsChartName = (name = '', xAxis = [], series = [], color = [], barWidth = 6) => {
+  let defaultData = [
+    {
+      name: '',
+      type: 'bar',
+      data: []
+    }
+  ];
+  let defaultColor = [
+    ['#0EAEFF', '#85E9FF'],
+    ['#F0646C', '#F4994E']
+  ];
+  let seriesConfiguration = () => {
+    let seriesData = [
+      {
+        type: 'bar',
+        data: [],
+        barWidth: barWidth,
+        itemStyle: {
+          normal: {
+            barBorderRadius: [15, 15, 0, 0],
+            color: getColor(color[0] || defaultColor[0])
+          }
+        },
+        barGap: '100%'
+      }
+    ];
+    series.map((item, index) => {
+      seriesData[0].data.push(item.data);
+    });
+    return seriesData;
+  };
+  let option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+        shadowStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: 'rgba(31,207,245,0)' // 0% 处的颜色
+              },
+              {
+                offset: 0.8,
+                color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
+              },
+              {
+                offset: 0.2,
+                color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
+              },
+              {
+                offset: 1,
+                color: 'rgba(31,207,245,0.05)'
+              }
+            ],
+            global: false // 缺省为 false
+          }
+        },
+        crossStyle: {
+          shadowBlur: 30,
+          shadowColor: 'rgba(0, 0, 0, 0.5)'
+        }
+      },
+      extraCssText: 'background:rgba(33,40,56,0.6);border-radius:4px;padding:6px 10px',
+      textStyle: {
+        fontSize: 12,
+        color: '#FFFFFF'
+      },
+      formatter(param) {
+        let el = ``;
+        param.forEach((item) => {
+          el += `<p style="text-align: left;">
+        <span style="display:inline-block;margin-right:5px;border-radius:4px;width:12px;height:8px;background-image: linear-gradient(to left, 
+          ${item.color.colorStops[0].color}, ${item.color.colorStops[1].color})"></span>
+                      <span>${item.name}：${item.value}${name}</span>
+                    </p>`;
+        });
+        el += ``;
+        return el;
+      }
+    },
+    grid: {
+      top: 50,
+      left: 10,
+      bottom: 0,
+      right: 0,
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      axisLine: {
+        show: false // 不显示坐标轴
+      },
+      axisTick: {
+        show: false // 不显示坐标轴刻度
+      },
+      axisLabel: {
+        formatter: function (params, index) {
+          return params;
+        },
+        color: '#9B9DA5',
+        margin: 15
+      },
+      data: !!xAxis.length ? xAxis : defaultName
+    },
+    yAxis: {
+      type: 'value',
+      splitNumber: 4,
+      name: name,
+      axisLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        color: '#9B9DA5',
+        margin: 15,
+        textStyle: {
+          align: 'right',
+          baseline: 'middle'
+        }
+      },
+      nameLocation: 'end',
+      nameTextStyle: { color: '#9B9DA5', padding: [0, 0, 0, -40] },
+      splitLine: {
+        lineStyle: {
+          type: 'dotted',
+          width: 0.5
+        }
+      }
+    },
+    legend: {
+      show: false,
+      x: 'right',
+      icon: 'circle',
+      itemWidth: 8, // 图例图形宽度
+      itemHeight: 8,
+      itemGap: 20
+    },
+    series: seriesConfiguration() || defaultData
+  };
+  return option;
+};
+
+// 柱状图堆叠
+export const columnOptionsChartStacking = (name = '', xAxis = [], series = [], color = [], barWidth = 6) => {
+  let defaultData = [
+    {
+      name: '',
+      type: 'bar',
+      data: []
+    }
+  ];
+  let defaultColor = [
+    // ['#0EAEFF', '#85E9FF'],
+    ['#0EAEFF', '#0EAEFF'],
+    ['#85E9FF', '#85E9FF']
+    // ['#F0646C', '#F4994E']
+  ];
+
+  let seriesConfiguration = () => {
+    let seriesData = [
+      {
+        type: 'bar',
+        data: [],
+        name: '',
+        barWidth: barWidth,
+        itemStyle: {
+          normal: {
+            barBorderRadius: [15, 15, 0, 0],
+            color: getColor(color[0] || defaultColor[0])
+          }
+        },
+        barGap: '100%'
+      },
+      {
+        type: 'bar',
+        data: [],
+        name: '',
+        barWidth: barWidth,
+        itemStyle: {
+          normal: {
+            barBorderRadius: [15, 15, 0, 0],
+            color: getColor(color[1] || defaultColor[1])
+          }
+        },
+        barGap: '-100%',
+        z: '1'
+      }
+    ];
+    series.map((item, index) => {
+      seriesData[index].data = item.data;
+      seriesData[index].name = item.name;
+    });
+    return seriesData;
+  };
+  let option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+        shadowStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: 'rgba(31,207,245,0)' // 0% 处的颜色
+              },
+              {
+                offset: 0.8,
+                color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
+              },
+              {
+                offset: 0.2,
+                color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
+              },
+              {
+                offset: 1,
+                color: 'rgba(31,207,245,0.05)'
+              }
+            ],
+            global: false // 缺省为 false
+          }
+        },
+        crossStyle: {
+          shadowBlur: 30,
+          shadowColor: 'rgba(0, 0, 0, 0.5)'
+        }
+      },
+      extraCssText: 'background:rgba(33,40,56,0.6);border-radius:4px;padding:6px 10px',
+      textStyle: {
+        fontSize: 12,
+        color: '#FFFFFF'
+      },
+      formatter(param) {
+        let el = ``;
+        let elitme = ``;
+        param.forEach((item) => {
+          elitme = `<p>${item.name}</p>`;
+          el += `
+                  <p style="text-align: left;">
+        <span style="display:inline-block;margin-right:5px;border-radius:4px;width:12px;height:8px;background-image: linear-gradient(to left, 
+          ${item.color.colorStops[0].color}, ${item.color.colorStops[1].color})"></span>
+                      <span>${item.seriesName}：${item.value}${name}</span>
+                    </p>`;
+        });
+        el += ``;
+
+        return elitme + el;
+      }
+    },
+    grid: {
+      top: 50,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      axisLine: {
+        show: false // 不显示坐标轴
+      },
+      axisTick: {
+        show: false // 不显示坐标轴刻度
+      },
+      axisLabel: {
+        formatter: function (params, index) {
+          return params;
+        },
+        color: '#9B9DA5',
+        margin: 15
+      },
+      data: !!xAxis.length ? xAxis : defaultName
+    },
+    yAxis: {
+      type: 'value',
+      splitNumber: 4,
+      name: name,
+      axisLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        color: '#9B9DA5',
+        margin: 15,
+        textStyle: {
+          align: 'right',
+          baseline: 'middle'
+        }
+      },
+      nameLocation: 'end',
+      nameTextStyle: { color: '#9B9DA5', padding: [0, 0, 0, -40] },
+      splitLine: {
+        lineStyle: {
+          type: 'dotted',
+          width: 0.5
+        }
+      }
+    },
+    legend: {
+      show: false,
+      x: 'right',
+      icon: 'circle',
+      itemWidth: 8, // 图例图形宽度
+      itemHeight: 8,
+      itemGap: 20
+    },
+    series: seriesConfiguration() || defaultData
+  };
+  return option;
+};
+
+// 折线日期  间隔4个
+export const discountedChart = (name = '', xAxis = [], series = [], legendShow = false, color = []) => {
+  let option = {
+    tooltip: {
+      trigger: 'axis',
+      textStyle: {
+        fontSize: 12,
+        color: '#FFFFFF'
+      }
+      // formatter(param) {
+      //   let el = `<div class="dmp-echart-tooltip"><h4>${dateType(param[0].axisValue)}</h4>`;
+      //   param.forEach(item => {
+      //     el += `<p>
+      //                   <span class="marker" style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-image: linear-gradient(to left,
+      //                     ${item.color.colorStops[0].color}, ${item.color.colorStops[1].color});"></span>
+      //                   <span>${item.seriesName}：${item.value}</span>
+      //                 </p>`;
+      //   });
+      //   el += `</div>`;
+      //   return el;
+      // }
+    },
+    grid: {
+      top: 50,
+      left: 5,
+      bottom: 0,
+      right: 5,
+      containLabel: true
+    },
+
+    legend: {
+      show: legendShow,
+      icon: 'circle',
+      x: 'right', // 可设定图例在左、右、居中
+      itemWidth: 8, // 图例图形宽度
+      itemHeight: 8,
+      itemGap: 20
+    },
+    xAxis: {
+      type: 'category',
+      axisLine: {
+        show: false // 不显示坐标轴
+      },
+      axisTick: {
+        show: false // 不显示坐标轴刻度
+      },
+      axisLabel: {
+        interval: 4,
+        // formatter: function (params, index) {
+        //     return params.slice(5);
+        // },
+        color: '#9B9DA5',
+        margin: 16
+      },
+      data: xAxis,
+      axisPointer: {
+        type: 'shadow',
+        shadowStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: 'rgba(31,207,245,0)' // 0% 处的颜色
+              },
+              {
+                offset: 0.8,
+                color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
+              },
+              {
+                offset: 0.2,
+                color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
+              },
+              {
+                offset: 1,
+                color: 'rgba(31,207,245,0.05)'
+              }
+            ],
+            global: false // 缺省为 false
+          }
+        }
+      }
+    },
+    yAxis: {
+      type: 'value',
+      splitNumber: 4,
+      axisLine: {
+        show: false
+      },
+      name: name,
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        color: '#9B9DA5',
+        margin: 15,
+        textStyle: {
+          align: 'right',
+          baseline: 'middle'
+        }
+      },
+      nameLocation: 'end',
+      nameTextStyle: { color: '#9B9DA5', padding: [0, 0, 0, -40] },
+      splitLine: {
+        lineStyle: {
+          type: 'dotted',
+          width: 0.2
+        }
+      }
+    },
+    series: [
+      {
+        // name: "设备告警",
+        type: 'line',
+        smooth: true,
+        symbol: 'circle', // 实心
+        symbolSize: 1, // 设定实心点的大小
+        itemStyle: getItemStyle('#5EEDCC', '#24C3F1'),
+        data: series,
+        areaStyle: {
+          normal: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: 'rgba(36,121,253,0.1)'
+              },
+              {
+                offset: 1,
+                color: 'rgba(19,194,247,0.3)'
+              }
+            ])
+          }
+        },
+        lineStyle: {
+          width: 1
+        }
+      }
+    ]
+  };
+  return option;
+};
+
+// 漏斗图
+export const funnelChart = (dataseries = [], series = []) => {
+  // var colors=[['#22D8FF','#00B2FF']]
+  var colorList = [
+    {
+      colorStops: [
+        {
+          offset: 0,
+          color: '#22D8FF' // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: '#00B2FF' // 100% 处的颜色
+        }
+      ]
+    },
+    {
+      colorStops: [
+        {
+          offset: 0,
+          color: '#5EEDCC' // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: '#24C3F1' // 100% 处的颜色
+        }
+      ]
+    },
+    {
+      colorStops: [
+        {
+          offset: 0,
+          color: '#F0646C' // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: '#F4994E' // 100% 处的颜色
+        }
+      ]
+    },
+    {
+      colorStops: [
+        {
+          offset: 0,
+          color: '#7178FF' // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: '#D2A4FF ' // 100% 处的颜色
+        }
+      ]
+    },
+    {
+      colorStops: [
+        {
+          offset: 0,
+          color: '#884DD2' // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: '#DF63CC' // 100% 处的颜色
+        }
+      ]
+    }
+  ];
+  let option = {
+    title: {
+      text: ''
+    },
+
+    // backgroundColor:'#ffffff',
+    color: colorList,
+    series: [
+      {
+        top: 0,
+        type: 'funnel',
+        left: '15%',
+        top: '15%',
+        width: '50%',
+        height: '85%',
+        gap: 0,
+        minSize: 50,
+        maxSize: 260,
+        label: {
+          show: true,
+          position: 'inside',
+          // formatter: '{d}'
+          formatter: function (data) {
+            return data.percent.toFixed(0) + '%';
+          },
+          textStyle: {
+            shadowOffsetX: 0,
+            fontSize: '14',
+            shadowColor: 'rgba(0, 0, 0, 0)',
+            color: '#FFFFFF'
+          }
+        },
+        data: dataseries
+      },
+
+      {
+        top: 0,
+        type: 'funnel',
+        left: '0',
+        width: '20%',
+        height: '85%',
+        top: '15%',
+        gap: 16,
+        z: 1,
+        // minSize: 50,
+        // maxSize: 50,
+        label: {
+          normal: {
+            // padding :[11,25],
+            formatter: function (params) {
+              let el = `{a|${params.name}}  {b|${params.value}}`;
+              return el;
+            },
+            textStyle: {
+              rich: {
+                a: {
+                  fontSize: 12,
+                  color: '#858892',
+                  padding: [0, 5, 0, 0]
+                },
+                b: {
+                  fontSize: 14,
+                  color: '#fff',
+                  padding: [0, 0, 0, 5]
+                }
+              }
+            }
+          }
+        },
+        //右侧的百分比显示的地方
+        labelLine: {
+          show: true,
+          normal: {
+            show: false,
+            length: 200,
+            position: 'center',
+            lineStyle: {
+              width: 1,
+              color: 'red',
+              type: 'solid'
+            }
+          }
+        },
+        // 主体是透明的
+        itemStyle: {
+          normal: {
+            color: 'transparent',
+            borderWidth: 0,
+            opacity: 1
+          }
+        },
+        data: series
+      }
+    ]
+  };
+  return option;
+};
+
+// 柱状图  双个柱图
+export const columnOptionsChartss = (name = '', xAxis = [], series = [], dataseries = [], dataName = [], color = [], barWidth = 6) => {
+  let defaultData = [
+    {
+      name: '',
+      type: 'bar',
+      data: []
+    }
+  ];
+  let defaultColor = [
+    ['#0EAEFF', '#85E9FF'],
+    ['#F0646C', '#F4994E']
+  ];
+  let seriesConfiguration = () => {
+    let seriesData = [
+      {
+        name: '',
+        type: 'bar',
+        data: [],
+        barWidth: barWidth,
+        itemStyle: {
+          normal: {
+            barBorderRadius: [15, 15, 0, 0],
+            color: getColor(color[0] || defaultColor[0])
+          }
+        },
+        barGap: '100%'
+      },
+      {
+        name: '',
+        type: 'bar',
+        data: [],
+        barWidth: barWidth,
+        itemStyle: {
+          normal: {
+            barBorderRadius: [15, 15, 0, 0],
+            color: getColor(color[1] || defaultColor[1])
+          }
+        },
+        barGap: '100%'
+      }
+    ];
+    series.map((item, index) => {
+      seriesData[0].data.push(item.data);
+      seriesData[0].name = dataName[0];
+    });
+    dataseries.map((items, indexs) => {
+      seriesData[1].data.push(items.data);
+      seriesData[1].name = dataName[1];
+    });
+
+    return seriesData;
+  };
+  let option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+        shadowStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: 'rgba(31,207,245,0)' // 0% 处的颜色
+              },
+              {
+                offset: 0.8,
+                color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
+              },
+              {
+                offset: 0.2,
+                color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
+              },
+              {
+                offset: 1,
+                color: 'rgba(31,207,245,0.05)'
+              }
+            ],
+            global: false // 缺省为 false
+          }
+        },
+        crossStyle: {
+          shadowBlur: 30,
+          shadowColor: 'rgba(0, 0, 0, 0.5)'
+        }
+      },
+      extraCssText: 'background:rgba(33,40,56,0.6);border-radius:4px;padding:6px 10px',
+      textStyle: {
+        fontSize: 12,
+        color: '#FFFFFF'
+      },
+      formatter(param) {
+        let el = ``;
+        param.forEach((item) => {
+          el += `<p style="text-align: left;">
+      <span style="display:inline-block;margin-right:5px;border-radius:4px;width:12px;height:8px;background-image: linear-gradient(to left, 
+        ${item.color.colorStops[0].color}, ${item.color.colorStops[1].color})"></span>
+                    <span>${item.seriesName}：${item.value}${name}</span>
+                  </p>`;
+        });
+        el += ``;
+        return el;
+      }
+    },
+    grid: {
+      top: 50,
+      left: 10,
+      bottom: 0,
+      right: 0,
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      axisLine: {
+        show: false // 不显示坐标轴
+      },
+      axisTick: {
+        show: false // 不显示坐标轴刻度
+      },
+      axisLabel: {
+        formatter: function (params, index) {
+          return params;
+        },
+        color: '#9B9DA5',
+        margin: 15
+      },
+      data: !!xAxis.length ? xAxis : defaultName
+    },
+    yAxis: {
+      type: 'value',
+      splitNumber: 4,
+      name: name,
+      axisLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        color: '#9B9DA5',
+        margin: 15,
+        textStyle: {
+          align: 'right',
+          baseline: 'middle'
+        }
+      },
+      nameLocation: 'end',
+      nameTextStyle: { color: '#9B9DA5', padding: [0, 0, 0, -40] },
+      splitLine: {
+        lineStyle: {
+          type: 'dotted',
+          width: 0.5
+        }
+      }
+    },
+    legend: {
+      show: true,
+      x: 'right',
+      icon: 'circle',
+      itemWidth: 8, // 图例图形宽度
+      itemHeight: 8,
+      itemGap: 20,
+      textStyle: {
+        color: '#FFF'
+      }
+    },
+    series: seriesConfiguration() || defaultData
+  };
+  return option;
+};
+
+// 仪表盘   1920
+export const quantitativeAnalysisDashboard = (name = [], data = [], color = []) => {
+  const percent = data[0]; // 数值
+  let option = {
+    // backgroundColor: 'rgba(8, 17, 67, 0.9)',
+    title: {
+      text: name,
+      left: '33%',
+      top: '30%',
+      textAlign: 'center',
+      textStyle: {
+        color: '#858892',
+        fontSize: 12,
+        fontWeight: 'lighter'
+      },
+      subtext: `${percent} %`,
+      subtextStyle: {
+        color: '#fff',
+        fontSize: 20
+      }
+    },
+    polar: {
+      radius: ['72%', '97%'],
+      center: ['35%', '50%']
+    },
+    // 极坐标角度轴
+    angleAxis: {
+      min: 0,
+      max: 100,
+      // startAngle: 0,
+      // endAngle: -0,
+      clockwise: true,
+      show: false // 隐藏刻度线
+    },
+    // 极坐标径向轴
+    radiusAxis: {
+      type: 'category',
+      // 隐藏极坐标轴线
+      axisLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      }
+    },
+    tooltip: {
+      show: true,
+      formatter: (val) => {
+        return `${val.seriesName}: ${val.data}%`;
+      }
+      // backgroundColor: 'rgba(31, 196, 225, 0.2)',
+      // borderColor: 'rgba(31, 196, 225, 0.6)'
+    },
+    series: [
+      {
+        // 进度条
+        type: 'bar',
+        name: name,
+        coordinateSystem: 'polar',
+        // 设置柱子背景灰色，需开启showBackground才能显示backgroundStyle
+        showBackground: true,
+        backgroundStyle: {
+          // 外圈颜色
+          // color: 'rgba(14, 61, 128,0.3)',
+        },
+        // 两端设置圆角
+        roundCap: true,
+        itemStyle: {
+          color: {
+            x: 0,
+            y: 0,
+            x1: 0,
+            y1: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: 'rgba(94, 237, 204,0.65)'
+              },
+              {
+                offset: 1,
+                color: 'rgba(36,195,241,0.8)'
+              }
+            ]
+          }
+        },
+        data: [percent]
+      }
+    ]
+  };
+  return option;
+};
+
+// 仪表盘  2560
+export const quantitativeAnalysisDashboardEnlarge = (name = [], data = [], color = []) => {
+  const percent = data[0]; // 数值
+  let option = {
+    // backgroundColor: 'rgba(8, 17, 67, 0.9)',
+    title: {
+      text: name,
+      left: '33%',
+      top: '35%',
+      textAlign: 'center',
+      textStyle: {
+        color: '#858892',
+        fontSize: 14,
+        fontWeight: 'lighter'
+      },
+      subtext: `${percent} %`,
+      subtextStyle: {
+        color: '#fff',
+        fontSize: 20
+      }
+    },
+    polar: {
+      radius: ['52%', '72%'],
+      center: ['35%', '45%']
+    },
+    // 极坐标角度轴
+    angleAxis: {
+      min: 0,
+      max: 100,
+      // startAngle: 0,
+      // endAngle: -0,
+      clockwise: true,
+      show: false // 隐藏刻度线
+    },
+    // 极坐标径向轴
+    radiusAxis: {
+      type: 'category',
+      // 隐藏极坐标轴线
+      axisLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      }
+    },
+    tooltip: {
+      show: true,
+      formatter: (val) => {
+        return `${val.seriesName}: ${val.data}%`;
+      }
+      // backgroundColor: 'rgba(31, 196, 225, 0.2)',
+      // borderColor: 'rgba(31, 196, 225, 0.6)'
+    },
+    series: [
+      {
+        // 进度条
+        type: 'bar',
+        name: name,
+        coordinateSystem: 'polar',
+        // 设置柱子背景灰色，需开启showBackground才能显示backgroundStyle
+        showBackground: true,
+        backgroundStyle: {
+          // 外圈颜色
+          // color: 'rgba(14, 61, 128,0.3)',
+        },
+        // 两端设置圆角
+        roundCap: true,
+        itemStyle: {
+          color: {
+            x: 0,
+            y: 0,
+            x1: 0,
+            y1: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: 'rgba(94, 237, 204,0.65)'
+              },
+              {
+                offset: 1,
+                color: 'rgba(36,195,241,0.8)'
+              }
+            ]
+          }
+        },
+        data: [percent]
+      }
+    ]
+  };
+  return option;
+};

videoSurveillance/src/views/passengerFlow/index.vue

@@ -0,0 +1,314 @@
+<template>
+    <div class="view-content">
+        <div class="block-item grid-1">
+            <div class="topsBlock">
+                <div class="left">
+                    <span class="titleNumber">3000</span><img src="../../assets/img/icon_keliuzongliang.png" alt="" />客流总量
+                </div>
+            </div>
+            <div class="item-content">
+                <div class="flexPer">
+                    <div class="itme-inlineBlock">
+                        <div class="width100">今日</div>
+                        <div class="flex width100">
+                            <div class="greText width50">
+                                <div class="numberColor ft20">3000</div>
+                                <div>进入人数</div>
+                            </div>
+
+                            <div class="greText width50">
+                                <div class="numberColor ft20">1000</div>
+                                <div>出去人数</div>
+                            </div>
+                        </div>
+                        <div class="greText width100">
+                            <div class="numberColor ft20">4000</div>
+                            <div>总客流</div>
+                        </div>
+                    </div>
+                    <div class="itme-inlineBlock">
+                        <div class="width100">昨日</div>
+                        <div class="flex width100">
+                            <div class="greText width50">
+                                <div class="numberColor ft20">2000</div>
+                                <div>进入人数</div>
+                            </div>
+
+                            <div class="greText width50">
+                                <div class="numberColor ft20">2000</div>
+                                <div>出去人数</div>
+                            </div>
+                        </div>
+                        <div class="greText width100">
+                            <div class="numberColor ft20">4000</div>
+                            <div>总客流</div>
+                        </div>
+                    </div>
+                    <div class="itme-inlineBlock">
+                        <div class="width100">同比</div>
+                        <div class="flex width100">
+                            <div class="greText width50">
+                                <div class="numberColor ft20">50%</div>
+                                <div>总进入人数</div>
+                            </div>
+
+                            <div class="greText width50">
+                                <div class="numberColor ft20">50%</div>
+                                <div>总出去人口</div>
+                            </div>
+                        </div>
+                        <div class="greText width100">
+                            <div class="numberColor ft20">0%</div>
+                            <div>总客流</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="block-item grid-2">
+            <div class="topsBlock">
+                <div class="left">客流趋势</div>
+                <div class="right">
+                    <el-select class="item.class" v-model="selectValue" placeholder="item.placeholder" clearable>
+                        <el-option v-for="(item, index) in selectTime" :key="index" :label="item.name" :value="item.value"></el-option>
+                    </el-select>
+                </div>
+            </div>
+            <div class="item-content">
+                <zz-echart :option="options"></zz-echart>
+            </div>
+        </div>
+        <div class="block-item grid-3">
+            <div class="topsBlock">
+                <div class="left">平均客流</div>
+                <div class="right">
+                    <el-select class="item.class" v-model="selectValue" placeholder="item.placeholder" clearable>
+                        <el-option v-for="(item, index) in selectTime" :key="index" :label="item.name" :value="item.value"></el-option>
+                    </el-select>
+                </div>
+            </div>
+            <div class="item-content"></div>
+        </div>
+        <div class="block-item grid-4">
+            <div class="topsBlock">
+                <div class="left">
+                    <el-date-picker
+                        v-model="pickerTime"
+                        value-format="yyyy-MM-dd"
+                        type="daterange"
+                        range-separator="至"
+                        start-placeholder="开始日期"
+                        end-placeholder="结束日期"
+                        @change="timeToggle"
+                    ></el-date-picker>
+                    <el-button class="search-btn" type="primary" @click="mixins_search()" icon="el-icon-search">查询</el-button>
+                </div>
+                <div class="right">
+                    <img src="../../assets/img/icon_daochu.png" alt="" />
+                </div>
+            </div>
+            <div class="item-content"></div>
+        </div>
+    </div>
+</template>
+<script>
+import { discountedWave } from './EachartOptions';
+let dataArr = [0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
+let dataDay = [
+    '01-01',
+    '01-02',
+    '01-03',
+    '01-04',
+    '01-05',
+    '01-06',
+    '01-07',
+    '01-08',
+    '01-09',
+    '01-10',
+    '01-11',
+    '01-12',
+    '01-13',
+    '01-14',
+    '01-15',
+    '01-16',
+    '01-17',
+    '01-18',
+    '01-19',
+    '01-20',
+    '01-21',
+    '01-22',
+    '01-23',
+    '01-24',
+    '01-25',
+    '01-26',
+    '01-27',
+    '01-28',
+    '01-29',
+    '01-30',
+    '01-31'
+];
+export default {
+    data() {
+        return {
+            selectTime: [
+                {
+                    name: '全部',
+                    value: ''
+                },
+                {
+                    name: '本周',
+                    value: 1
+                },
+                {
+                    name: '本月',
+                    value: 2
+                },
+                {
+                    name: '本年',
+                    value: 3
+                }
+            ],
+            selectValue: '',
+            pickerTime: [],
+            options: discountedWave('(次)', dataDay, dataArr)
+        };
+    },
+    ceated() {},
+
+    methods: {
+        timeToggle() {}
+    }
+};
+</script>
+  
+<style lang="scss" scoped>
+// @mixin layoutFlexUniformity($direction, $distance: 0, $aliquot: 1, $multiple: 1) {
+//     @if $direction == 'width' {
+//         width: (100% - $distance) / $aliquot * $multiple;
+//     }
+//     @if $direction == 'height' {
+//         height: (100% - $distance) / $aliquot * $multiple;
+//     }
+// }
+
+// 普通调用 @include layoutFlexUniformity()
+
+// @function layoutFlexUniformity($distance: 0px, $aliquot: 1, $multiple: 1) {
+//     @return (100% - $distance) / $aliquot * $multiple;
+// }
+
+// 计算时调用calc(100  - #{layoutFlexUniformity()})
+// 普通调用 xx: layoutFlexUniformity()
+
+.view-content {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-content: space-between;
+    height: calc(100% - 10px);
+}
+.block-item {
+    background: #171f32;
+    border-radius: 4px;
+    overflow: hidden;
+    padding: 0 20px 20px 20px;
+    box-sizing: border-box;
+}
+.topsBlock {
+    height: 60px;
+    box-sizing: border-box;
+    border-bottom: 1px solid rgba(224, 225, 227, 0.2);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: white;
+    /deep/ .el-input__inner {
+        background: transparent;
+        color: white;
+        padding-right: 20px;
+        border-color: rgba(255, 255, 255, 0.2);
+    }
+    .right {
+        max-width: 120px;
+        img {
+            cursor: pointer;
+            vertical-align: middle;
+        }
+    }
+    .titleNumber {
+        color: #0eaeff;
+        font-size: 30px;
+    }
+    .left {
+        display: flex;
+        align-items: center;
+        img {
+            margin: 0 5px 0 20px;
+            vertical-align: middle;
+        }
+    }
+    /deep/ .el-date-editor .el-range-separator {
+        padding-left: 0;
+        color: white;
+    }
+    /deep/ .el-date-editor--daterange.el-input__inner {
+        width: 240px;
+    }
+    .search-btn {
+        margin-left: 20px;
+    }
+}
+.item-content {
+    padding-top: 20px;
+    box-sizing: border-box;
+    height: calc(100% - 60px);
+
+    .flexPer {
+        display: flex;
+        height: 100%;
+        justify-content: space-between;
+    }
+    .itme-inlineBlock {
+        display: flex;
+        width: calc((100% - 20px) / 3);
+        color: white;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        align-content: space-between;
+        height: 100%;
+    }
+}
+.ft20 {
+    font-size: 20px;
+}
+.numberColor {
+    // margin-bottom: 5px;
+}
+.greText {
+    opacity: 0.5;
+    font-size: 12px;
+}
+.flex {
+    display: flex;
+    justify-content: space-between;
+}
+.width50 {
+    width: 50%;
+}
+.grid-1 {
+    width: calc((100% - 20px) / 3);
+    height: calc((100% - 20px) / 7 * 2);
+}
+.grid-2 {
+    width: calc((100% - 20px) / 3 * 2);
+    height: calc((100% - 20px) / 7 * 2);
+}
+.grid-3 {
+    width: calc((100% - 20px) / 3);
+    height: calc((100% - 20px) / 7 * 5);
+}
+.grid-4 {
+    width: calc((100% - 20px) / 3 * 2);
+    height: calc((100% - 20px) / 7 * 5);
+}
+</style>