车船情况

package-lock.json

@@ -2486,12 +2486,11 @@
       }
     },
     "echarts": {
-      "version": "5.5.1",
-      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.1.tgz",
-      "integrity": "sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==",
+      "version": "4.9.0",
+      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-4.9.0.tgz",
+      "integrity": "sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==",
       "requires": {
-        "tslib": "2.3.0",
-        "zrender": "5.6.0"
+        "zrender": "4.3.2"
       }
     },
     "editorconfig": {
@@ -7084,11 +7083,6 @@
       "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=="
-    },
     "tty-browserify": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
@@ -8337,12 +8331,9 @@
       }
     },
     "zrender": {
-      "version": "5.6.0",
-      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.6.0.tgz",
-      "integrity": "sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==",
-      "requires": {
-        "tslib": "2.3.0"
-      }
+      "version": "4.3.2",
+      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-4.3.2.tgz",
+      "integrity": "sha512-bIusJLS8c4DkIcdiK+s13HiQ/zjQQVgpNohtd8d94Y2DnJqgM1yjh/jpDb8DoL6hd7r8Awagw8e3qK/oLaWr3g=="
     }
   }
 }

src/module/api/apiList.js

@@ -129,11 +129,11 @@ export const getOrderLoseAddCustomer = (cur_day) => fetch('/api/query/*/action/g
 }, 'POST');
 
 //流失客户 & 新增客户-明细
-export const getOrderAddCustomerDetail = (cur_day, type,cur_page) => fetch('/api/query/*/action/get_order_add_customer_detail', {
+export const getOrderAddCustomerDetail = (cur_day, type, cur_page) => fetch('/api/query/*/action/get_order_add_customer_detail', {
     aux: {
         cur_day: cur_day,
         type: type,
-    cur_page:cur_page
+        cur_page: cur_page
     }
 }, 'POST');
 
@@ -147,16 +147,17 @@ export const getOrderBusinessConditionData = (cur_day, type) => fetch('/api/quer
 export const getDepartmentShipmentWeight = (department_code, cur_day) => fetch('/api/query/*/action/get_shipment_data_by_department', {
     aux: {
         cur_day: cur_day
-    ,department_code: department_code
+        , department_code: department_code
     }
 }, 'POST');
 //折线图目标量
 export const getDepartmentTargetWeight = (department_code, year) => fetch('/api/query/*/action/get_department_target_weight', {
     aux: {
         year: year
-    ,department_code: department_code
+        , department_code: department_code
     }
 }, 'POST');
 
-
+//车船情况
+export const getTruckShipConditionData = (department) => fetch('/api/query/*/action/get_truck_ship_condition_data', {}, 'POST');
 

src/module/databoard/components/map/geo_data.js

+export const geoCoordMap = {
+        "新疆维吾尔自治区": [
+            86.9023,
+            41.148
+        ]
+        ,
+        "西藏自治区": [
+            87.8695,
+            31.6846
+        ]
+        ,
+        "内蒙古自治区": [
+            110.5977,
+            41.3408
+        ]
+        ,
+        "青海省": [
+            95.2402,
+            35.4199
+        ]
+        ,
+        "四川省": [
+            102.9199,
+            30.1904
+        ]
+        ,
+        "黑龙江省": [
+            128.1445,
+            46.7156
+        ]
+        ,
+        "甘肃省": [
+            102.7129,
+            38.166
+        ]
+        ,
+        "云南省": [
+            101.0652,
+            24.6807
+        ]
+        ,
+        "广西壮族自治区": [
+            108.7813,
+            23.6426
+        ]
+        ,
+        "湖南省": [
+            111.5332,
+            27.3779
+        ]
+        ,
+        "陕西省": [
+            108.5996,
+            33.7396
+        ]
+        ,
+        "广东省": [
+            113.8668,
+            22.8076
+        ]
+        ,
+        "吉林省": [
+            126.1746,
+            43.5938
+        ]
+        ,
+        "河北省": [
+            115.4004,
+            38.1688
+        ]
+        ,
+        "湖北省": [
+            112.2363,
+            30.8572
+        ]
+        ,
+        "贵州省": [
+            106.6113,
+            26.6385
+        ]
+        ,
+        "山东省": [
+            118.2402,
+            36.2307
+        ]
+        ,
+        "江西省": [
+            115.7156,
+            27.99
+        ]
+        ,
+        "河南省": [
+            113.0668,
+            33.8818
+        ]
+        ,
+        "辽宁省": [
+            123.0438,
+            41.0889
+        ]
+        ,
+        "山西省": [
+            112.4121,
+            36.6611
+        ]
+        ,
+        "安徽省": [
+            117.2461,
+            31.0361
+        ]
+        ,
+        "福建省": [
+            118.3008,
+            25.9277
+        ]
+        ,
+        "浙江省": [
+            120.498,
+            29.0918
+        ]
+        ,
+        "江苏省": [
+            119.8586,
+            32.915
+        ]
+        ,
+        "重庆省": [
+            107.7539,
+            29.8904
+        ]
+        ,
+        "宁夏回族自治区": [
+            105.9961,
+            37.1096
+        ]
+        ,
+        "海南省": [
+            109.9512,
+            19.2041
+        ]
+        ,
+        "台湾省": [
+            120.8254,
+            23.5986
+        ]
+        ,
+        "北京省": [
+            116.4551,
+            40.2539
+        ]
+        ,
+        "天津省": [
+            117.4219,
+            39.4189
+        ]
+        ,
+        "上海省": [
+            121.4648,
+            31.2891
+        ]
+        ,
+        "香港特别行政区": [
+            114.6178,
+            22.3242
+        ]
+        ,
+        "澳门特别行政区": [
+            113.5547,
+            21.6484
+        ]
+    }
+;

src/module/databoard/components/map/map-point-mark.vue

+<template>
+  <div ref="charts" class="echarts">
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import * as geo from "./geo_data";
+import china from "./geojson.json";
+import TitleContentMark from "../layout/title-content-mark.vue";
+import SimpleCard from "../card/simple-card.vue";
+
+export default {
+  name: "mapPointMark",
+  components: {geo, TitleContentMark, SimpleCard},
+  data() {
+    return {
+      outdata: [],
+      max: 8000,
+      min: 10,
+      maxSize4Pin: 150,
+      minSize4Pin: 20,
+      option: {}
+    };
+  },
+  props: {
+    derviceDis: []
+  },
+  methods: {
+    convertData(outdata) {
+      var res = [];
+      for (var i = 0; i < this.outdata.length; i++) {
+        var geoCoord = geo.geoCoordMap[this.outdata[i].name];
+        if (geoCoord) {
+          res.push({
+            name: this.outdata[i].name,
+            value: geoCoord.concat(this.outdata[i].value),
+          });
+        }
+      }
+      return res;
+    },
+    initData() {
+      this.outdata = [];
+      for (let i = 0; i < this.derviceDis.length; i++) {
+        let province = this.derviceDis[i]['province']
+        let count = this.derviceDis[i]['count']
+        this.outdata.push({
+          name: province,
+          value: count
+        })
+      }
+      const vm = this;
+      this.option = {
+        backgroundColor: '#020046',
+        tooltip: {
+          show: true,
+          formatter: function (params) {
+            if (params.value.length > 1) {
+              return '&nbsp;&nbsp;' + params.name + '&nbsp;&nbsp;&nbsp;' + params.value[2] + '&nbsp;&nbsp;';
+            } else {
+              return '&nbsp;&nbsp;' + params.name + '&nbsp;&nbsp;&nbsp;' + params.value + '&nbsp;&nbsp;';
+            }
+          },
+
+        },
+        title: {
+          top: 20,
+          text: '',
+          subtext: '',
+          x: 'center',
+          textStyle: {
+            color: '#ccc'
+          }
+        },
+        visualMap: {
+          min: 0,
+          max: 2000,
+          left: 26,
+          bottom: 90,
+          showLabel: !0,
+          text: ["高", "低"],
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 16
+          },
+          pieces: [{
+            gte: 100,
+            label: ">100",
+            color: '#e81c00'
+          }, {
+            gte: 11,
+            lt: 100,
+            label: "11 - 100",
+            color: '#fdc002'
+          }, {
+            gte: 1,
+            lt: 10,
+            label: "1 - 10",
+            color: '#00cbfe'
+          }],
+          show: !0
+        },
+        geo: {
+          map: 'china',
+          layoutCenter: ['50%', '50%'],// 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
+          layoutSize: 100,
+          zoom: 6.5,
+          label: {
+            normal: {
+              show: true,//是否显示标签
+              textStyle: {
+                color: '#fff',
+              },
+            },
+            emphasis: {
+              textStyle: {
+                color: '#fff',
+              },
+            },
+          },
+          roam: true,
+          itemStyle: {
+            normal: {
+              areaColor: {
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [{
+                  offset: 0,
+                  color: '#082b7f' // 0% 处的颜色
+                }, {
+                  offset: 1,
+                  color: '#082b7f' // 100% 处的颜色
+                }],
+              },
+              borderColor: '#68c7e7',
+              borderWidth: 1,
+            },
+          }
+        },
+        series: [
+          {
+            type: 'effectScatter',
+            coordinateSystem: 'geo',
+            rippleEffect: {
+              brushType: 'stroke'
+            },
+            showEffectOn: 'render',
+            itemStyle: {
+              normal: {
+                color: {
+                  type: 'radial',
+                  x: 0.5,
+                  y: 0.5,
+                  r: 0.5,
+                  colorStops: [{
+                    offset: 0,
+                    color: 'rgba(5,80,151,0.2)'
+                  }, {
+                    offset: 0.8,
+                    color: 'rgba(5,80,151,0.8)'
+                  }, {
+                    offset: 1,
+                    color: 'rgba(0,108,255,0.7)'
+                  }],
+                  global: false // 缺省为 false
+                },
+              }
+
+            },
+            label: {
+              normal: {
+                show: true,
+                color: '#fff',
+                fontWeight: 'bold',
+                position: 'inside',
+                formatter: function (para) {
+                  return '{cnNum|' + para.data.value[2] + '}'
+                },
+                rich: {
+                  cnNum: {
+                    fontSize: 13,
+                    color: '#D4EEFF',
+                  }
+                }
+              },
+            },
+            symbol: 'circle',
+            symbolSize: function (val) {
+              if (val[2] === 0) {
+                return 0;
+              }
+              var a = (vm.maxSize4Pin - vm.minSize4Pin) / (vm.max - vm.min);
+              var b = vm.maxSize4Pin - a * vm.max;
+              return a * val[2] + b * 1.2;
+            },
+            data: this.convertData(this.outdata),
+            zlevel: 1,
+          },
+        ]
+      }
+    },
+    refreshChart() {
+      if (this.chart) {
+        this.chart.setOption(this.option);
+      } else {
+        let chartDom = this.$refs.charts;
+        this.chart = echarts.init(chartDom);
+        echarts.registerMap('china', china);
+        this.chart.setOption(this.option);
+      }
+      this.chart.resize;
+    },
+  },
+  watch: {
+    derviceDis(n, o) {
+      console.log(JSON.stringify(this.derviceDis))
+      this.initData()
+      this.refreshChart();
+    },
+  },
+  computed: {},
+  mounted() {
+    this.initData()
+    this.refreshChart()
+    //注意，第一个参数的名字必须和option.geo.map一致
+    window.addEventListener('resize', this.chart.resize);
+  }
+};
+</script>
+<style scoped>
+
+</style>

src/module/databoard/components/map/map-transport-line.vue

+<template>
+  <div ref="charts" class="echarts"></div>
+</template>
+<script>
+import * as echarts from "echarts";
+import * as geo from "./geo_data"
+import china from "./geojson.json"
+
+export default {
+  name: "mapTransportLine",
+  components: {geo},
+  data() {
+    return {
+      BJData: [[{name: '成都'}, {name: '潍坊', value: 5}],
+        [{name: '潍坊'}, {name: '西宁', value: 5}]],
+      series: [],
+      chart: null,
+      option: {
+        backgroundColor: '#404a59',
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {},
+        geo: {
+          map: 'china',
+          layoutCenter: ['50%', '70%'],// 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
+          layoutSize: 100,
+          zoom: 7,
+          label: {
+            emphasis: {
+              show: false
+            }
+          },
+          roam: true,
+          itemStyle: {
+            normal: {
+              areaColor: '#323c48',
+              borderColor: '#404a59'
+            },
+            emphasis: {
+              areaColor: '#2a333d'
+            }
+          }
+        },
+        series: [{
+          "type": "lines",
+          "zlevel": 1,
+          "effect": {"show": true, "period": 6, "trailLength": 0.7, "color": "#fff", "symbolSize": 3},
+          "lineStyle": {"normal": {"color": "#a6c84c", "width": 0, "curveness": 0.2}},
+          "data": [{"fromName": "成都", "toName": "潍坊", "coords": [[103.9526, 30.7617], [119.0918, 36.524]]}]
+        }, {
+          "type": "lines",
+          "zlevel": 2,
+          "effect": {"show": true, "period": 6, "trailLength": 0, "symbolSize": 5},
+          "lineStyle": {"normal": {"color": "#a6c84c", "width": 1, "opacity": 0.4, "curveness": 0.2}},
+          "data": [{"fromName": "成都", "toName": "潍坊", "coords": [[103.9526, 30.7617], [119.0918, 36.524]]}]
+        }, {
+          "type": "effectScatter",
+          "coordinateSystem": "geo",
+          "zlevel": 2,
+          "rippleEffect": {"brushType": "stroke"},
+          "label": {"normal": {"show": true, "position": "right", "formatter": "{b}"}},
+          "itemStyle": {"normal": {"color": "#a6c84c"}},
+          "data": [{"name": "潍坊", "value": [119.0918, 36.524, 5]}]
+        }]
+      }
+    };
+  },
+  props: {},
+  methods: {
+    convertData(data) {
+      var res = [];
+      for (var i = 0; i < data.length; i++) {
+        var dataItem = data[i];
+        var fromCoord = geo.geoCoordMap[dataItem[0].name];
+        var toCoord = geo.geoCoordMap[dataItem[1].name];
+        if (fromCoord && toCoord) {
+          res.push({
+            fromName: dataItem[0].name,
+            toName: dataItem[1].name,
+            coords: [fromCoord, toCoord]
+          });
+        }
+      }
+      return res;
+    },
+    initData() {
+      const vm = this; // 捕获Vue实例
+      const color = ['#a6c84c', '#ffa022', '#46bee9'];
+      [['北京', this.BJData]].forEach(function (item, i) {
+        vm.series.push({
+              name: item[0] + ' Top10',
+              type: 'lines',
+              zlevel: 1,
+              effect: {
+                show: true,
+                period: 6,
+                trailLength: 0.7,
+                color: '#fff',
+                symbolSize: 3
+              },
+              lineStyle: {
+                normal: {
+                  color: color[i],
+                  width: 0,
+                  curveness: 0.2
+                }
+              },
+              data: vm.convertData(item[1])
+            },
+            {
+              name: item[0] + ' Top10',
+              type: 'lines',
+              zlevel: 2,
+              effect: {
+                show: true,
+                period: 6,
+                trailLength: 0,
+                //symbol: planePath,
+                symbolSize: 5
+              },
+              lineStyle: {
+                normal: {
+                  color: color[i],
+                  width: 1,
+                  opacity: 0.4,
+                  curveness: 0.2
+                }
+              },
+              data: vm.convertData(item[1])
+            },
+            {
+              name: item[0] + ' Top10',
+              type: 'effectScatter',
+              coordinateSystem: 'geo',
+              zlevel: 2,
+              rippleEffect: {
+                brushType: 'stroke'
+              },
+              label: {
+                normal: {
+                  show: true,
+                  position: 'right',
+                  formatter: '{b}'
+                }
+              },
+              symbolSize: function (val) {
+                return val[2] / 8;
+              },
+              itemStyle: {
+                normal: {
+                  color: color[i]
+                }
+              },
+              data: item[1].map(function (dataItem) {
+                return {
+                  name: dataItem[1].name,
+                  value: geo.geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
+                };
+              })
+            });
+      });
+    }
+  },
+  computed: {},
+  mounted() {
+    this.initData()
+    //注意，第一个参数的名字必须和option.geo.map一致
+    let chartDom = this.$refs.charts;
+    this.chart = echarts.init(chartDom);
+    echarts.registerMap('china', china);
+    this.chart.setOption(this.option);
+    window.addEventListener('resize', this.chart.resize);
+  }
+};
+</script>
+<style scoped>
+
+</style>

src/module/databoard/databoard/safe-quality.vue

@@ -3,17 +3,19 @@
     <div class="full_page">
       <!-- 左-->
       <div class="trade_left">
-      <div style="height: 37%;" >
+        <div style="height: 37%;">
           <display-board style="display: flex; justify-content: space-between; height: 98%;" title="安全">
-          <winners-list style="height: 96%;overflow: auto;" :mouseHand="true" @click.native="goArBar" id="safe_list" :rows="arSafeList"/>
+            <winners-list style="height: 96%;overflow: auto;" :mouseHand="true" @click.native="goArBar" id="safe_list"
+                          :rows="arSafeList"/>
           </display-board>
         </div>
-      <div style="height: 37%;" >
+        <div style="height: 37%;">
           <display-board style="display: flex; justify-content: space-between; height: 98%;" title="质量">
-          <winners-list style="height: 96%;overflow: auto;" :mouseHand="true" @click.native="goArBar" id="quality_list" :rows="arQualityList"/>
+            <winners-list style="height: 96%;overflow: auto;" :mouseHand="true" @click.native="goArBar"
+                          id="quality_list" :rows="arQualityList"/>
           </display-board>
         </div>
-        <div style="height: 26%;" >
+        <div style="height: 26%;">
           <display-board style="display: flex; justify-content: space-between; height: 98%;" title="人员情况表">
             <div class="bar">
               <div ref="bar"></div>
@@ -22,10 +24,20 @@
         </div>
       </div>
       <!--中-->
-      <display-board class="trade_middle" >
+      <display-board class="trade_middle">
         <div class="trade_middle" style="border: none;box-shadow: none;">
-          <div style="display: flex; justify-content: space-between; height: 80%;">
-
+          <div style="justify-content: space-between; height: 80%;display: inline-block;">
+            <div style="height: 100%;display: flex;justify-content: space-evenly;">
+              <simple-card   @click.native="changeDevireMap('truckDis')" :class="{'selectedBtn': crurrDevireMapTyep === 'truckDis'}" style="width: 20%;height: 100%">
+                <title-content-mark style="color: #5eeef4;" title="车辆" :content="truckCount" mark="辆"
+                                    isCenter isBold/>
+              </simple-card>
+              <simple-card  @click.native="changeDevireMap('shipDis')" :class="{'selectedBtn': crurrDevireMapTyep === 'shipDis'}" style="width: 20%;height: 100%">
+                <title-content-mark style="color: #5eeef4;" title="船舶" :content="shipCount" mark="艘"
+                                    isCenter isBold/>
+              </simple-card>
+            </div>
+            <map-point-mark style="width: calc(43vw); height: calc(50vh);" :derviceDis="derviceDis"></map-point-mark>
           </div>
           <div style="display: flex; justify-content: space-between; height: 20%;">
           </div>
@@ -33,17 +45,17 @@
       </display-board>
       <!-- 右-->
       <div class="trade_right">
-        <div style="height: 33%;" >
+        <div style="height: 33%;">
           <display-board style="display: flex; justify-content: space-between; height: 98%;" title="汽运">
 
           </display-board>
         </div>
-        <div style="height: 33%;" >
+        <div style="height: 33%;">
           <display-board style="display: flex; justify-content: space-between; height: 98%;" title="水运">
 
           </display-board>
         </div>
-        <div style="height: 34%;" >
+        <div style="height: 34%;">
           <display-board style="display: flex; justify-content: space-between; height: 98%;" title="铁运">
 
           </display-board>
@@ -56,22 +68,41 @@
 import DisplayBoard from "../components/container/display-board.vue";
 import WinnersList from "../components/card/winners-list.vue";
 import TitleContentMark from "../components/layout/title-content-mark.vue";
+import SimpleCard from "../components/card/simple-card.vue";
+import mapPointMark from "../components/map/map-point-mark.vue"
+import {
+  getTruckShipConditionData
+} from "../../api/apiList"
+
 export default {
   name: "SafeQuality",
   components: {
     TitleContentMark,
     DisplayBoard,
-    WinnersList
+    WinnersList,
+    mapPointMark,
+    SimpleCard
   },
   data() {
-      return {}
+    return {
+      arSafeList: [],
+      arQualityList: [],
+      truckCount: "0",
+      shipCount: "0",
+      truckDis: [],
+      shipDis: [],
+      derviceDis: [],
+      crurrDevireMapTyep: ""
+
+    }
   },
   methods: {
 
     refreshData() {
       this.getPeopleInfos();
+      this.getTruckShipCondition();
     },
-    getPeopleInfos(){
+    getPeopleInfos() {
 
       // var seriesBar = [];
       // seriesBar.push(adapterSeriesDataBar(null, "在编", [10,20]));
@@ -83,7 +114,42 @@ export default {
       // let chart=echarts.init(barDom);
       // chart.setOption(this.peopleInfoOption);
 
+    },
+    getTruckShipCondition() {
+      getTruckShipConditionData().then(res => {
+        let data = res.data
+        let truckCount = 0;
+        let shipCount = 0;
+        for (let device of data.device_type_sum) {
+          if (device.device_type == '3' || device.device_type == '1') {
+            truckCount = truckCount + parseInt(device.count)
+          }
+          if (device.device_type == '4') {
+            shipCount = shipCount + parseInt(device.count)
+          }
+        }
+        this.truckCount = truckCount + "";
+        this.shipCount = shipCount + "";
+        this.shipDis = data.ship_by_province_sum;
+        this.truckDis = data.truck_by_province_sum;
+        if(this.crurrDevireMapTyep == "") {
+          this.changeDevireMap('truckDis');
         }
+      })
+    },
+    changeDevireMap(dimension) {
+      this.crurrDevireMapTyep = dimension;
+      switch (dimension) {
+        case 'truckDis':
+          this.derviceDis = this.truckDis;
+          break;
+        case 'shipDis':
+          this.derviceDis = this.shipDis;
+          break;
+        default:
+          return;
+      }
+    },
   },
   mounted() {
     this.refreshData();
@@ -91,15 +157,15 @@ export default {
   beforeDestroy() {
 
   },
-  watch:{
-    countDown(n,o){
-      if (n === 1){
+  watch: {
+    countDown(n, o) {
+      if (n === 1) {
         this.refreshData();
       }
     },
   },
-  props:{
-    countDown:{
+  props: {
+    countDown: {
       type: Number
     }
   }
@@ -111,4 +177,15 @@ export default {
   background-color: #19EBFF10;
   transform: scale(101%);
 }
+
+.selectedBtn {
+  color: #1234a1 !important;
+  background-color: #005dd6 !important;
+}
+
+.unSelectedBtn {
+  color: #00c8d6;
+  background-color: #1234a1;
+}
+
 </style>