diff --git a/src/assets/CommandPlatform/c8112e.png b/src/assets/CommandPlatform/c8112e.png
new file mode 100644
index 0000000..d1c88ab
Binary files /dev/null and b/src/assets/CommandPlatform/c8112e.png differ
diff --git a/src/assets/CommandPlatform/dd.png b/src/assets/CommandPlatform/dd.png
new file mode 100644
index 0000000..9a3419c
Binary files /dev/null and b/src/assets/CommandPlatform/dd.png differ
diff --git a/src/assets/CommandPlatform/j520.png b/src/assets/CommandPlatform/j520.png
new file mode 100644
index 0000000..a439bde
Binary files /dev/null and b/src/assets/CommandPlatform/j520.png differ
diff --git a/src/assets/CommandPlatform/r1.png b/src/assets/CommandPlatform/r1.png
new file mode 100644
index 0000000..b181452
Binary files /dev/null and b/src/assets/CommandPlatform/r1.png differ
diff --git a/src/assets/CommandPlatform/r2.png b/src/assets/CommandPlatform/r2.png
new file mode 100644
index 0000000..551234a
Binary files /dev/null and b/src/assets/CommandPlatform/r2.png differ
diff --git a/src/assets/CommandPlatform/r3.png b/src/assets/CommandPlatform/r3.png
new file mode 100644
index 0000000..ea678fb
Binary files /dev/null and b/src/assets/CommandPlatform/r3.png differ
diff --git a/src/assets/CommandPlatform/r4.png b/src/assets/CommandPlatform/r4.png
new file mode 100644
index 0000000..90e4835
Binary files /dev/null and b/src/assets/CommandPlatform/r4.png differ
diff --git a/src/assets/CommandPlatform/r5.png b/src/assets/CommandPlatform/r5.png
new file mode 100644
index 0000000..1ea66ee
Binary files /dev/null and b/src/assets/CommandPlatform/r5.png differ
diff --git a/src/assets/CommandPlatform/z10.png b/src/assets/CommandPlatform/z10.png
new file mode 100644
index 0000000..3dde92a
Binary files /dev/null and b/src/assets/CommandPlatform/z10.png differ
diff --git a/src/assets/CommandPlatform/z4.png b/src/assets/CommandPlatform/z4.png
new file mode 100644
index 0000000..bb4cca8
Binary files /dev/null and b/src/assets/CommandPlatform/z4.png differ
diff --git a/src/assets/CommandPlatform/z5.png b/src/assets/CommandPlatform/z5.png
new file mode 100644
index 0000000..f5fb533
Binary files /dev/null and b/src/assets/CommandPlatform/z5.png differ
diff --git a/src/assets/CommandPlatform/z6.png b/src/assets/CommandPlatform/z6.png
new file mode 100644
index 0000000..a638393
Binary files /dev/null and b/src/assets/CommandPlatform/z6.png differ
diff --git a/src/assets/CommandPlatform/z7.png b/src/assets/CommandPlatform/z7.png
new file mode 100644
index 0000000..ca605b8
Binary files /dev/null and b/src/assets/CommandPlatform/z7.png differ
diff --git a/src/assets/CommandPlatform/数字框.png b/src/assets/CommandPlatform/数字框.png
new file mode 100644
index 0000000..e764bef
Binary files /dev/null and b/src/assets/CommandPlatform/数字框.png differ
diff --git a/src/assets/CommandPlatform/用车公车.png b/src/assets/CommandPlatform/用车公车.png
new file mode 100644
index 0000000..09cf8b6
Binary files /dev/null and b/src/assets/CommandPlatform/用车公车.png differ
diff --git a/src/components/CommandPlatform/left/BarChart2.js b/src/components/CommandPlatform/left/BarChart2.js
new file mode 100644
index 0000000..6966927
--- /dev/null
+++ b/src/components/CommandPlatform/left/BarChart2.js
@@ -0,0 +1,170 @@
+export function BarChart2(data) {
+  // 计算总数
+  const getAll = () => {
+    if (data.yData && data.yData.length > 0) {
+      return data.yData.reduce((a, b) => a + b);
+    }
+    return 0;
+  };
+  const loadingFunnel = {
+    title: '',
+    arrDataX: [],
+    arrDataY: [],
+  };
+  // title标示文字,标示线
+  loadingFunnel.title = (text, top, left, color, fontStyle, fontFamily, fontSize) => ({
+    text,
+    top,
+    left,
+    textStyle: {
+      color,
+      fontStyle,
+      fontFamily,
+      fontSize,
+    },
+  });
+  loadingFunnel.arrDataX = data?.xData;
+  loadingFunnel.arrDataY = data?.yData;
+  const option = {
+    title: [
+      loadingFunnel.title(
+        `———— ${loadingFunnel.arrDataX[0]} ${loadingFunnel.arrDataY[0]} ${(loadingFunnel
+          .arrDataY[0] /
+          getAll()) *
+        100}%`,
+        '12%',
+        '42%',
+        '#ffffff',
+        'normal',
+        '',
+        '14'
+      ),
+
+      loadingFunnel.title(
+        `—— ${loadingFunnel.arrDataX[1]} ${loadingFunnel.arrDataY[1]} ${(loadingFunnel.arrDataY[1] /
+          getAll()) *
+        100}%`,
+        '33%',
+        '50%',
+        '#ffffff',
+        'normal',
+        '',
+        '14'
+      ),
+
+      loadingFunnel.title(
+        `— ${loadingFunnel.arrDataX[2]} ${loadingFunnel.arrDataY[2]} ${(loadingFunnel.arrDataY[2] /
+          getAll()) *
+        100}%`,
+        '52%',
+        '54%',
+        '#ffffff',
+        'normal',
+        '',
+        '14'
+      ),
+    ],
+    tooltip: {
+      show: false,
+      formatter(params) {
+        console.log(params);
+        return `${params.marker + params.name}:${params.data.number}万`;
+      },
+    },
+    grid: {
+      // containLabel: true,
+      left: '10%',
+      top: '10%',
+      bottom: '0%',
+    },
+    xAxis: {
+      show: false,
+      data: ['', '', '', ''],
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        color: '#5EA2ED',
+        interval: 0,
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#1B5BBA',
+        },
+      },
+    },
+    yAxis: {
+      show: false,
+      splitLine: {
+        show: false,
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#1B5BBA',
+        },
+      },
+      axisLabel: {
+        color: '#5EA2ED',
+        interval: 0,
+      },
+    },
+    series: [
+      {
+        type: 'pictorialBar',
+        //  labelLine:{
+        //      show:true,
+        //      length2:20,
+        //       lineStyle:{
+        //           color:'red',
+        //           width:5
+        //       }
+
+        //  },
+        //  label: {
+        //          show: true,
+        //          position: 'right',
+        //          formatter: '{b}{c} 万头',
+        //          fontSize: 16,
+        //          color: '#e54035',
+        //          verticalAlign:'top'
+        // },
+        data: [
+          {
+            name: loadingFunnel.arrDataX[0],
+            z: 100,
+            value: 20,
+            number: loadingFunnel.arrDataY[0],
+            symbolSize: ['130%', '90%'],
+            symbolPosition: 'center',
+            symbolOffset: ['60%', '-250%'],
+            symbol:
+              'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABDCAYAAAAh43M3AAAEXUlEQVR4nOXbPYxVRRjG8d9uVqCBRQuVBW2IQZBeWFypaF0CSAFEMeFTrChAPqKxkF3sxF0TNVFJRAtiY7SjwsJY0hgaEqMJiSSS4BaEkIDFnKuX5X7OmTPnLvyTk+zunXnPO092Zp53zrlDe3/8ywCwFL/9fWsO1mGu3nQYrjuBgg+xqrjO1JwLBkOYDTjS9Pvb2FhTLv9RtzBP4It5eQzjcyyqJaOmJOrkONa3+Pt6HMucywPUKcwanOrw+amiTS3UJcwQPsOSDm2WCFNqKEtG86hLmH3Y3EO7V4u22alDmBU420f7j4o+WalDmI/xZB/tl+NcRbm0Jbcwr+H1iH47ir7ZyCnMUsyW6D9bxMhCTmGmBMsfy6oiRhZyCbMRhxPEOYzxBHG6kkOYRYIfSXGvbOVCDmGOaW37Y3lJhnKhamHW4HQFcU+ruFyoUpghoXJeXEHsxUXsysqFKoXZh4kK409gf1XBqxJmhWDlq+YsxqoIXJUw5wQrXzXLhRIjOVUIMylY+FzsKO6ZlNTCLMNM4pi9MFPcOxmphTmjnO2PJXm5kFKYcWlsfyyHJCwXUgmT0vbHMix4myTlQqqBHBeset2sE3IpTQphXtT5tD83p4ScSlFWmCFhClVh+2NZLMHThbLC7Fet7Y9lAgfKBCgjzJj+TvtzU6pcKCNMLtsfy6gSTxdihZnE9tibZmS7yHIhRphlyp3252ZWRLkQI8wUVkb0q4uVmO63U7/CjAvWe6FxEJv66dCPMIs8/JLPQqHvpwv9DPJdwXIvVNYJY+iJXoVZi5NR6QwWJ4WxdKUXYRov+QyS7Y+l53KhF2EOGEzbH8srwmLckW7CDLrtj2Val3KhmzCfCNb6UWNUGFtbOgmzFduSpjNYbBPG2JJ2wtR12p+bGW1mRDthpi0s2x/LSm2eLrQSZpMeVu1HiENalAvzhWns8wvR9sfS8nh2vgAL3fbH8lC50CzMWpzIms5gcUJTudAQZhBP+3PzwMtIDWEOClb5cWeT4rxpWLDGfZ9wPcJMYWxYB5PzmDKKmRF8gN+xG0/XmdEAcAMXcH4YV3BUeMdkEhdxp77csnNHGPNWQYOjuDLS1OAufiiup7ALe/By3jyz8Su+wbe4Of/Ddg73prD2bBD29rO4XlGCObkujGWtMLYZLUShN+t/VXCFz2GLMAdvJ0kzD7eFnLfgeWEsV7t1GunWoIl7uFRco8LjzzeFY89avtDZgfv4GefxPW71G6AfYZq5hS+LazXeEHa11ZHxUnFNWDPOFz9Hk6KKvob38YLwzdiv8U+CuL0yV9xzc5HDe0qKQtrjhfu4jLfwrLCjXRKmYGoa03oPninuebnIIQmxU6kbjQXvgrBo78Je5d+Nuyr8d3yHP0rG6kiOA6k//b9FjguvZbTcIttwE58WfRvWoVJRyH9S9wveEQrXnfhJMJbzuVt8trNoe6Tom42qplI3Gjb8olCf7RbWCfhKmII36kkt8C/As56eiakjhwAAAABJRU5ErkJggg==',
+          },
+          {
+            name: loadingFunnel.arrDataX[1],
+            z: 90,
+            value: 40,
+            number: loadingFunnel.arrDataY[1],
+            symbolSize: ['200%', '40%'],
+            symbolPosition: 'center',
+            symbolOffset: ['-22%', '-130%'],
+            symbol:
+              'image://data:image/png;base64,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',
+          },
+          {
+            name: loadingFunnel.arrDataX[2],
+            z: 80,
+            value: 60,
+            number: loadingFunnel.arrDataY[2],
+            symbolSize: ['280%', '35%'],
+            symbolPosition: 'center',
+            symbolOffset: ['-60%', '10%'],
+            symbol:
+              'image://data:image/png;base64,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',
+          },
+        ],
+      },
+    ],
+  };
+  return option;
+}
diff --git a/src/components/CommandPlatform/left/Congestion.js b/src/components/CommandPlatform/left/Congestion.js
index f42928e..a6bcb3e 100644
--- a/src/components/CommandPlatform/left/Congestion.js
+++ b/src/components/CommandPlatform/left/Congestion.js
@@ -1,7 +1,11 @@
 import React from 'react';
 import styles from './Congestion.less';
-const up1 = require('@/assets/arrow-up.png'); // 红升
+const car = require('@/assets/CommandPlatform/用车公车.png');
+const up1 = require('@/assets/arrow-up.png');
 const down2 = require('@/assets/arrow-down.png'); // 绿降
+const z4 = require('@/assets/CommandPlatform/z4.png');
+const z5 = require('@/assets/CommandPlatform/z5.png');
+const z6 = require('@/assets/CommandPlatform/z6.png');
 
 
 class Congestion extends React.PureComponent {
@@ -13,7 +17,10 @@ class Congestion extends React.PureComponent {
   render() {
     return (
       <div className={styles.congestion}>
-        <div className={styles.tit}>拥堵预警</div>
+        <div className={styles.tit}>
+          <img src={car} />
+          <div>拥堵预警</div>
+        </div>
         <div className={styles.containerTop}>
           <div className={styles.top1}>拥堵路段数</div>
           <div className={styles.top2}>
@@ -47,9 +54,9 @@ class Congestion extends React.PureComponent {
         </div>
         <div className={styles.containerBottom}>
           <div>
-            <div className={styles.num}>
-              <div>246</div>
-              <div>一级</div>
+            <div className={styles.num1}>
+              <div style={{ color: '#fe7938'}} className={styles.numtop}>246</div>
+              <div className={styles.numbottom}>一级</div>
             </div>
             <div className={styles.compare}>
               <div className={styles.compareFont}>
@@ -65,16 +72,16 @@ class Congestion extends React.PureComponent {
                 <div>
                   <div><img src={up1} alt="" /></div>
                   <div>
-                    <img src={up1} alt="" /></div>
+                    <img src={down2} alt="" /></div>
                 </div>
               </div>
             </div>
 
           </div>
           <div>
-            <div className={styles.num}>
-              <div>246</div>
-              <div>二级</div>
+            <div className={styles.num2}>
+              <div style={{ color: '#ffad0f'}} className={styles.numtop}>246</div>
+              <div className={styles.numbottom}>二级</div>
             </div>
             <div className={styles.compare}>
               <div className={styles.compareFont}>
@@ -90,16 +97,16 @@ class Congestion extends React.PureComponent {
                 <div>
                   <div><img src={up1} alt="" /></div>
                   <div>
-                    <img src={up1} alt="" /></div>
+                    <img src={down2} alt="" /></div>
                 </div>
               </div>
             </div>
 
           </div>
           <div>
-            <div className={styles.num}>
-              <div>246</div>
-              <div>三级</div>
+            <div className={styles.num3}>
+              <div style={{ color: '#ffeb0f'}} className={styles.numtop}>246</div>
+              <div className={styles.numbottom}>三级</div>
             </div>
             <div className={styles.compare}>
               <div className={styles.compareFont}>
@@ -112,9 +119,9 @@ class Congestion extends React.PureComponent {
                   <div>0</div>
                 </div>
                 <div>
-                <div><img src={up1} alt="" /></div>
+                  <div><img src={up1} alt="" /></div>
                   <div>
-                    <img src={up1} alt="" /></div>
+                    <img src={down2} alt="" /></div>
                 </div>
               </div>
             </div>
diff --git a/src/components/CommandPlatform/left/Congestion.less b/src/components/CommandPlatform/left/Congestion.less
index 9955fbe..bc4719a 100644
--- a/src/components/CommandPlatform/left/Congestion.less
+++ b/src/components/CommandPlatform/left/Congestion.less
@@ -5,41 +5,78 @@
         width: 100%;
         background: url(../../../assets/CommandPlatform/tit.png);
         background-size: 100% 100%;
-        background-repeat:no-repeat;
-        height: 52px;
-        padding-left: 128px;
-        margin-bottom: 28px;
+        background-repeat: no-repeat;
+        height: 58px;
+        font-family: PangMenZhengDao;
+        font-weight: normal;
+        font-style: italic;
+        font-stretch: normal;
+        line-height: 16px;
+        letter-spacing: 6px;
+        color: #ffffff;
+        box-shadow: 0px 1px 2px 0px rgba(38, 46, 64, 0.27);
+        margin-bottom: 40px;
+        position: relative;
+
+        img {
+            position: absolute;
+            left: 120px;
+            top: -20px;
+            width: 48px;
+            height: 42px;
+        }
+
+        div {
+            position: absolute;
+            left: 180px;
+            top: -12px;
+            font-size: 44px;
+        }
     }
 
 
 
     .containerTop {
         width: 100%;
-        height: 58px;
-        margin-bottom: 24px;
+        height: 95px;
+        margin-bottom: 44px;
         display: flex;
 
         .interval {
-            margin-bottom: 20px;
+            margin-bottom: 14px;
         }
 
         .top1 {
-            margin: 0 18px 0 24px;
-            line-height: 58px;
+            margin: 0 20px 0 36px;
+            line-height: 95px;
+            font-size: 30px;
+            font-family: MicrosoftYaHei;
+            font-weight: normal;
+            font-stretch: normal;
+            letter-spacing: 3px;
         }
 
         .top2 {
-            margin-right: 10px;
+            margin-right: 12px;
             display: flex;
 
             .num {
-                width: 48px;
-                height: 58px;
-                line-height: 58px;
+                width: 82px;
+                height: 95px;
+                line-height: 95px;
                 text-align: center;
-                font-size: 34px;
-                border: 1px solid lime;
                 margin-right: 12px;
+
+                font-family: LetsgoDigital-Regular;
+                font-size: 50px;
+                font-weight: normal;
+                font-stretch: normal;
+                letter-spacing: 8px;
+                color: #ffffff;
+                box-shadow: 0px 10px 5px 0px rgba(1, 10, 18, 0.17);
+                background: url(../../../assets/CommandPlatform/数字框.png);
+                background-size: 100% 100%;
+                background-repeat: no-repeat;
             }
 
         }
@@ -49,21 +86,45 @@
         }
 
         .top3 {
-            margin-right: 28px;
-            line-height: 58px;
+            margin-right: 45px;
+            line-height: 95px;
+            font-family: MicrosoftYaHei;
+            font-size: 29px;
+            font-weight: normal;
+            font-stretch: normal;
+            letter-spacing: 0px;
+            color: #b7dff9;
         }
 
         .top4 {
             margin-right: 18px;
+            font-family: MicrosoftYaHei;
+            font-size: 30px;
+            font-weight: normal;
+            font-stretch: normal;
+            letter-spacing: 0px;
+            color: #b7dff9;
         }
 
         .top5 {
             display: flex;
+
+            img {
+                width: 30px;
+                height: 32px;
+                margin-top: 10px;
+            }
         }
 
         .top5>div:nth-child(1) {
             margin-right: 10px;
             text-align: right;
+            font-family: MicrosoftYaHei;
+            font-size: 30px;
+            font-weight: normal;
+            font-stretch: normal;
+            letter-spacing: 0px;
+            color: #ffffff;
         }
     }
 
@@ -73,21 +134,58 @@
         justify-content: space-between;
 
         &>div {
-            width: 142px;
+            width: 236px;
+
+            .num1 {
+                background: url(../../../assets/CommandPlatform/z4.png);
+
+                background-size: 100% 100%;
+                background-repeat: no-repeat;
+            }
+
+            .num2 {
+                background: url(../../../assets/CommandPlatform/z5.png);
+
+                background-size: 100% 100%;
+                background-repeat: no-repeat;
+            }
+
+            .num3 {
+                background: url(../../../assets/CommandPlatform/z6.png);
+
+                background-size: 100% 100%;
+                background-repeat: no-repeat;
+            }
+
+            &>div {
+
 
-            .num {
                 width: 100%;
-                height: 62px;
+                height: 82px;
                 text-align: center;
-                padding-bottom: 10px;
-                margin-bottom: 6px;
-
-                &>div:nth-child(1) {
-                    font-size: 24px;
+                margin-bottom: 12px;
+                position: relative;
+
+                .numtop {
+                    width: 100%;
+                    position: absolute;
+                    top: -14px;
+                    font-size: 36px;
+                    font-weight: normal;
+                    font-stretch: normal;
+                    letter-spacing: 5px;
+                    font-family: MicrosoftYaHei;
                 }
 
-                &>div:nth-child(2) {
-                    font-size: 20px;
+                .numbottom {
+                    width: 100%;
+                    position: absolute;
+                    top: 32px;
+                    font-family: MicrosoftYaHei;
+                    font-size: 30px;
+                    font-weight: normal;
+                    font-stretch: normal;
+                    letter-spacing: 3px;
                 }
             }
 
@@ -98,17 +196,33 @@
                 padding: 0 24px;
 
                 .compareFont {
-                    color: rgba(250, 250, 250, 0.8);
+                    font-family: MicrosoftYaHei;
+                    font-size: 30px;
+                    font-weight: normal;
+                    font-stretch: normal;
+                    letter-spacing: 0px;
+                    color: #b7dff9;
 
                 }
 
                 .compareNum {
                     display: flex;
                     text-align: right;
+                    font-size: 30px;
+                    font-weight: normal;
+                    font-stretch: normal;
+                    letter-spacing: 0px;
+                    color: #ffffff;
 
                     &>div:nth-child(1) {
                         margin-right: 8px;
                     }
+
+                    img {
+                        width: 30px;
+                        height: 30px;
+                        margin-top: -6px;
+                    }
                 }
             }
         }
diff --git a/src/components/CommandPlatform/left/CongestionTrend.js b/src/components/CommandPlatform/left/CongestionTrend.js
index 94b28c6..73ea5df 100644
--- a/src/components/CommandPlatform/left/CongestionTrend.js
+++ b/src/components/CommandPlatform/left/CongestionTrend.js
@@ -3,8 +3,8 @@ import ReactEcharts from 'echarts-for-react';
 import styles from './CongestionTrend.less';
 
 import { getNowDate } from '../../../utils/util';
- const serverTime = getNowDate();
- 
+const serverTime = getNowDate();
+
 function echartsOption(xAxisData, seriesData) {
     const option = {
         grid: {
@@ -99,30 +99,30 @@ function echartsOption(xAxisData, seriesData) {
     return option
 }
 
-function echartsDay () {
-    let xAxisData = Array.from({length: 24}, (value, index) => index);
-    let seriesData = Array.from({length: 24}, (value, index) => index + 1);
+function echartsDay() {
+    let xAxisData = Array.from({ length: 24 }, (value, index) => index);
+    let seriesData = Array.from({ length: 24 }, (value, index) => index + 1);
     let option = echartsOption(xAxisData, seriesData)
     return option
 }
 
-function echartsWeek () {
-    let xAxisData = Array.from({length: 7}, (value, index) => index + 1);
-    let seriesData = [1,333,4,524,66,8888,10984];
+function echartsWeek() {
+    let xAxisData = Array.from({ length: 7 }, (value, index) => index + 1);
+    let seriesData = [1, 333, 4, 524, 66, 8888, 10984];
     let option = echartsOption(xAxisData, seriesData)
     return option
 }
 
-function echartsMonth () {
-    let xAxisData = Array.from({length: 30}, (value, index) => index + 1);
-    let seriesData = Array.from({length: 24}, (value, index) => index + 1);
+function echartsMonth() {
+    let xAxisData = Array.from({ length: 30 }, (value, index) => index + 1);
+    let seriesData = Array.from({ length: 24 }, (value, index) => index + 1);
     let option = echartsOption(xAxisData, seriesData)
     return option
 }
 
-function echartsRegion () {
-    let xAxisData = Array.from({length: 30}, (value, index) => index + 1);
-    let seriesData = Array.from({length: 24}, (value, index) => index + 1);
+function echartsRegion() {
+    let xAxisData = Array.from({ length: 30 }, (value, index) => index + 1);
+    let seriesData = Array.from({ length: 24 }, (value, index) => index + 1);
     let option = echartsOption(xAxisData, seriesData)
     return option
 }
@@ -163,57 +163,57 @@ class CongestionTrend extends React.PureComponent {
                     </div>
                 </div>
                 {
-                    this.state.tagNum  == 0 &&
+                    this.state.tagNum == 0 &&
 
                     <ReactEcharts
-                      ref={e => {
-                        // console.log(e)
-                      }}
-                      option={echartsDay()}
-                      notMerge
-                      lazyUpdate
-                      style={{ width: '100%', height: 160 }}
+                        ref={e => {
+                            // console.log(e)
+                        }}
+                        option={echartsDay()}
+                        notMerge
+                        lazyUpdate
+                        style={{ width: '100%', height: '244px' }}
                     />
-                  }
+                }
                 {
-                    this.state.tagNum  == 1 &&
+                    this.state.tagNum == 1 &&
 
                     <ReactEcharts
-                      ref={e => {
-                        // console.log(e)
-                      }}
-                      option={echartsWeek()}
-                      notMerge
-                      lazyUpdate
-                      style={{ width: '100%', height: 160 }}
+                        ref={e => {
+                            // console.log(e)
+                        }}
+                        option={echartsWeek()}
+                        notMerge
+                        lazyUpdate
+                        style={{ width: '100%', height: '244px' }}
                     />
-                  }
-                  {
-                    this.state.tagNum  == 2 &&
+                }
+                {
+                    this.state.tagNum == 2 &&
 
                     <ReactEcharts
-                      ref={e => {
-                        // console.log(e)
-                      }}
-                      option={echartsMonth()}
-                      notMerge
-                      lazyUpdate
-                      style={{ width: '100%', height: 160 }}
+                        ref={e => {
+                            // console.log(e)
+                        }}
+                        option={echartsMonth()}
+                        notMerge
+                        lazyUpdate
+                        style={{ width: '100%', height: '244px' }}
                     />
-                  }
-                  {
-                    this.state.tagNum  == 3 &&
+                }
+                {
+                    this.state.tagNum == 3 &&
 
                     <ReactEcharts
-                      ref={e => {
-                        // console.log(e)
-                      }}
-                      option={echartsRegion()}
-                      notMerge
-                      lazyUpdate
-                      style={{ width: '100%', height: 160 }}
+                        ref={e => {
+                            // console.log(e)
+                        }}
+                        option={echartsRegion()}
+                        notMerge
+                        lazyUpdate
+                        style={{ width: '100%', height: '244px' }}
                     />
-                  }
+                }
             </div>
         );
     }
diff --git a/src/components/CommandPlatform/left/CongestionTrend.less b/src/components/CommandPlatform/left/CongestionTrend.less
index 77eea1d..c431408 100644
--- a/src/components/CommandPlatform/left/CongestionTrend.less
+++ b/src/components/CommandPlatform/left/CongestionTrend.less
@@ -1,27 +1,44 @@
 .congestionTrend {
     width: 100%;
+
     .tit {
-        font-size: 22px;
+        font-family: MicrosoftYaHei;
+        font-size: 36px;
+        font-weight: normal;
+        font-stretch: normal;
+        letter-spacing: 4px;
+        color: #feffff;
         display: flex;
         justify-content: space-between;
-        margin-bottom: 14px;
+        margin: 0 0 16px 0;
+
         .tag {
 
             &>div {
-                font-size: 16px;
-                padding: 4px;
-                border: 1px solid rgb(30, 163, 194);;
-                margin-right: 4px;
+                font-family: MicrosoftYaHei;
+                font-size: 24px;
+                font-weight: normal;
+                font-stretch: normal;
+                line-height: 24px;
+                letter-spacing: 2px;
+                color: #cde9fc;
+                padding: 12px;
+                background: #0e2752;
+                border: 1px solid #2e84d7;
+                margin-right: 6px;
                 text-align: center;
                 line-height: 16px;
                 display: inline-block;
                 cursor: pointer;
             }
-            &>div:last-child{
+
+            &>div:last-child {
                 margin-right: 0;
             }
-            .tagNum{
-                background: rgb(30, 163, 194);
+
+            .tagNum {
+                color: #fff;
+                background: #0799b8;
             }
         }
     }
diff --git a/src/components/CommandPlatform/left/Pyramid.js b/src/components/CommandPlatform/left/Pyramid.js
index fab0b39..9ec1446 100644
--- a/src/components/CommandPlatform/left/Pyramid.js
+++ b/src/components/CommandPlatform/left/Pyramid.js
@@ -1,153 +1,8 @@
 import React from 'react';
 import ReactEcharts from 'echarts-for-react';
+import { BarChart2 } from './BarChart2'
 import styles from './SituationDispose.less';
 
-function echartsOption(seriesData) {
-    let xAxisData = ['', '', '', '']
-
-    let loadingFunnel = {
-        title: '',
-        arrDataX: [],
-        arrDataY: []
-    }
-    //title标示文字,标示线
-    loadingFunnel.title = (text, top, left, color, fontstyle, fontFamily, fontsize) => {
-        return {
-            text: text,
-            top: top,
-            left: left,
-            textstyle: {
-                color: color,
-                fontstyle: fontstyle,
-                fontFamily: fontFamily,
-                fontsize: fontsize,
-            }
-        }
-    }
-    loadingFunnel.arrDataX = ['已接警', '已到场', '已反馈']
-    loadingFunnel.arrDataY = [20, 30, 50]
-
-
-    const option = {
-        title: [
-            loadingFunnel.title(loadingFunnel.arrDataX[0], '17%', '32%', '#fff', 'normal', 'sans-serif', '16'),
-            loadingFunnel.title(loadingFunnel.arrDataY[0], '17%', '42%', '#ffffff', 'normal', 'sans-serif', '16'),
-            loadingFunnel.title(loadingFunnel.arrDataX[1], '38%', '62%', '#4dc6ff', 'normal', 'sans-serif', '16'),
-            loadingFunnel.title(loadingFunnel.arrDataY[1], '43%', '62%', '#ffffff', 'normal', 'sans-serif', '16'),
-            loadingFunnel.title(loadingFunnel.arrDataX[2], '55%', '62%', '#eaad38', 'normal', 'sans-serif', '16'),
-            loadingFunnel.title(loadingFunnel.arrDataY[2], '61%', '62%', '#ffffff', 'normal', 'sans-serif', '16')
-        ],
-        tooltip: {
-            show: false,
-            formatter: function (params) {
-                console.log(params)
-                return params.marker + params.name + ':' + params.data.number + '万'
-            }
-        },
-        grid: {
-            top: "19",
-            left: "10%",
-            bottom: "0",
-            // containLabel: true,
-        },
-        legend: {
-            selectedMode: false,
-            right: 0,
-            textStyle: {
-                color: '#fff'
-            },
-        },
-        xAxis: [
-            {
-                show: false,
-                type: "category",
-                data: xAxisData,
-                axisLabel: {
-                    textStyle: {
-                        color: "#fff",
-                        margin: 14,
-                    },
-                },
-                axisTick: {
-                    show: false,
-                },
-                axisLine: {
-                    show: false,
-                    lineStyle: {
-                        color: "#9fabc1",
-                    },
-                },
-            },
-        ],
-        yAxis: [
-            {
-                show: false,
-                type: "value",
-                axisLabel: {
-                    textStyle: {
-                        color: "#fff",
-                    },
-                },
-                axisTick: {
-                    show: false,
-                },
-                axisLine: {
-                    show: false,
-                    lineStyle: {
-                        color: "#9fabc1",
-                    },
-                },
-                splitLine: {
-                    show: false,
-                },
-            },
-        ],
-        series: [{
-            type: 'pictorialBar',
-            data: [
-                {
-                    name: loadingFunnel.arrDataX[0],
-                    // z:100,
-                    value: 20,
-                    number: loadingFunnel.arrDataY[0],
-                    symbolsize: ['130%', '90%'],
-                    symbolPosition: 'center',
-                    symboloffset: ['60%', '-250%'],
-                    symbol: 'image://Funnel1.png',
-                },
-                {
-                    name: loadingFunnel.arrDataX[1],
-                    // z: 90,
-                    value: 40,
-                    number: loadingFunnel.arrDataY[1],
-                    symbolsize: ['200%', '40%'],
-                    symbolPosition: 'center',
-                    symboloffset: ['-22%', '-130%'],
-                    symbol: 'image://Funnel2.png'
-                },
-                {
-                    name: loadingFunnel.arrDataX[2],
-                    // z:80,
-                    value: 60,
-                    number: loadingFunnel.arrDataY[2],
-                     symbolsize: ['280%', '35%'], 
-                     symbolPosition: 'center', symboloffset:
-                      ['-60%','10%'], 
-                      symbol: 'image://Funnel3.png'
-                }
-            ]
-        }]
-    }
-    return option
-}
-
-function echartsData() {
-    let seriesData = Array.from({ length: 24 }, (value, index) => index + 1);
-    let option = echartsOption(seriesData)
-    return option
-}
-
-
 class SituationDispose extends React.PureComponent {
     constructor(props) {
         super(props);
@@ -158,6 +13,10 @@ class SituationDispose extends React.PureComponent {
     }
 
     render() {
+        const chart2Data = {
+            xData: ['已接警', '已到场', '已反馈'],
+            yData: [20, 30, 50],
+        };
         return (
             <div className={styles.situationDispose}>
 
@@ -165,10 +24,10 @@ class SituationDispose extends React.PureComponent {
                     ref={e => {
                         // console.log(e)
                     }}
-                    option={echartsData()}
+                    option={BarChart2(chart2Data)}
                     notMerge
                     lazyUpdate
-                    style={{ width: '100%', height: 180 }}
+                    style={{ width: '100%', height: '328px' }}
                 />
 
             </div>
diff --git a/src/components/CommandPlatform/left/Pyramid.less b/src/components/CommandPlatform/left/Pyramid.less
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/CommandPlatform/left/Rank.js b/src/components/CommandPlatform/left/Rank.js
index dbd542c..c22973e 100644
--- a/src/components/CommandPlatform/left/Rank.js
+++ b/src/components/CommandPlatform/left/Rank.js
@@ -23,19 +23,19 @@ class Rank extends React.PureComponent {
             <div className={styles.rank}>
                 <div className={styles.tit}>拥堵路段排名</div>
                 {
-                    this.state.arr.map((r,i) => {
+                    this.state.arr.map((r, i) => {
                         return (<div className={styles.progress}>
                             <div className={styles.font}>
                                 <div className={styles.left}>
-                                    <img src=''></img>
-                                    {r.name}
+                                    <div className={styles.imgs + ' ' + styles[`imgs${i}`]}>{i + 1}</div>
+                                    <div className={styles.name}>{r.name}</div>
                                 </div>
-                                <div className={styles.right}>
+                                <div className={styles.right+ ' ' + styles[`right${i}`]}>
                                     {r.num}
                                 </div>
                             </div>
                             <div className={styles.progressLine}>
-                            <Progress percent={62} showInfo={false} className={styles['progress' + i]}/>
+                                <Progress percent={32} showInfo={false} className={styles['progress' + i] + ' ' + styles.progress} />
                             </div>
                         </div>)
                     })
diff --git a/src/components/CommandPlatform/left/Rank.less b/src/components/CommandPlatform/left/Rank.less
index b252a74..e70c0db 100644
--- a/src/components/CommandPlatform/left/Rank.less
+++ b/src/components/CommandPlatform/left/Rank.less
@@ -2,13 +2,18 @@
     width: 100%;
 
     .tit {
-        font-size: 22px;
-        height: 38px;
-        margin-top: 32px;
+        height: 46px;
+        margin: 30px 0 30px 0;
+        font-family: MicrosoftYaHei;
+        font-size: 36px;
+        font-weight: normal;
+        font-stretch: normal;
+        letter-spacing: 4px;
+        color: #feffff;
     }
 
     .progress {
-        margin-bottom: 24px;
+        margin-bottom: 48px;
 
         .font {
 
@@ -17,16 +22,88 @@
 
             .left {
                 font-size: 18px;
+                display: flex;
+                margin-bottom: 10px;
+
+                .name {
+                    font-family: MicrosoftYaHei;
+                    font-size: 32px;
+                    font-weight: normal;
+                    font-stretch: normal;
+                    color: #ffffff;
+                    margin-left: 18px;
+                    line-height: 32px;
+                }
+
+                .imgs {
+                    width: 38px;
+                    height: 38px;
+                    line-height: 38px;
+                    text-align: center;
+                    background-size: 100% 100%;
+                    background-repeat: no-repeat;
+                    font-family: MicrosoftYaHei;
+                    font-size: 26px;
+                    font-weight: normal;
+                    font-stretch: normal;
+                    letter-spacing: 0;
+                    color: #ff420f;
+                }
+
+                .imgs0 {
+                    background: url(../../../assets/CommandPlatform/r1.png);
+                }
+
+                .imgs1 {
+                    background: url(../../../assets/CommandPlatform/r2.png);
+                }
+
+                .imgs2 {
+                    background: url(../../../assets/CommandPlatform/r3.png);
+                }
+
+                .imgs3 {
+                    background: url(../../../assets/CommandPlatform/r4.png);
+                }
+
+                .imgs4 {
+                    background: url(../../../assets/CommandPlatform/r5.png);
+                }
             }
 
             .right {
-                font-size: 18px;
+                font-family: MicrosoftYaHei;
+                font-size: 33px;
+                font-weight: normal;
+                font-stretch: normal;
+                letter-spacing: 0px;
+
+            }
+
+            .right0 {
+                color: #ff1021;
+            }
+
+            .right1 {
+                color: #ff4d1d;
+            }
+
+            .right2 {
+                color: #ff9f39;
+            }
+
+            .right3 {
+                color: #f9cf3b;
+            }
+
+            .right4 {
+                color: #bdcd48;
             }
         }
 
         .progressLine {
             height: 18px;
-            border: 1px solid rgb(32, 112, 163);
+            border: 1px solid #0fa2ff;
             border-radius: 8px;
             padding: 0 2px;
         }
@@ -34,23 +111,44 @@
         :global(.ant-progress-inner) {
             margin-top: -8px;
         }
+
         :global(.ant-progress-inner) {
-            background-color: rgb(32, 112, 163);
+            background-color: #1d71a6;
+        }
+
+        .progress :global(.ant-progress-bg)::after {
+            content: '';
+            position: absolute;
+            top: -46px;
+            right: -54px;
+            width: 104px;
+            height: 96px;
+            background: url(../../../assets/CommandPlatform/c8112e.png);
+            background-size: 100% 100%;
+            background-repeat: no-repeat;
         }
+
         .progress0 :global(.ant-progress-bg) {
-            background-color: rgb(236, 21, 37) !important;
+            background-color: #ff1021 !important;
+            position: relative;
+
+
         }
+
         .progress1 :global(.ant-progress-bg) {
-            background-color: rgb(220, 86, 61) !important;
+            background-color: #ff4d1d !important;
         }
+
         .progress2 :global(.ant-progress-bg) {
-            background-color: rgb(226, 157, 79) !important;
+            background-color: #ff9f39 !important;
         }
+
         .progress3 :global(.ant-progress-bg) {
-            background-color: rgb(245, 209, 69) !important;
+            background-color: #f9cf3b !important;
         }
+
         .progress4 :global(.ant-progress-bg) {
-            background-color: rgb(178, 200, 91) !important;
+            background-color: #bdcd48 !important;
         }
     }
 }
\ No newline at end of file
diff --git a/src/components/CommandPlatform/left/SituationDispose.js b/src/components/CommandPlatform/left/SituationDispose.js
index 4de503e..ca52fe4 100644
--- a/src/components/CommandPlatform/left/SituationDispose.js
+++ b/src/components/CommandPlatform/left/SituationDispose.js
@@ -129,7 +129,7 @@ class SituationDispose extends React.PureComponent {
                     option={echartsData()}
                     notMerge
                     lazyUpdate
-                    style={{ width: '100%', height: 180, marginBottom: 28 }}
+                    style={{ width: '100%', height: '284px', marginBottom: 28 }}
                 />
                 <SituationTable />
             </div>
diff --git a/src/components/CommandPlatform/left/SituationDispose.less b/src/components/CommandPlatform/left/SituationDispose.less
index 84ac798..95d59d3 100644
--- a/src/components/CommandPlatform/left/SituationDispose.less
+++ b/src/components/CommandPlatform/left/SituationDispose.less
@@ -1,26 +1,35 @@
 .situationDispose {
     width: 100%;
+
     .tit {
-        font-size: 22px;
+        font-family: MicrosoftYaHei;
+        font-size: 36px;
+        font-weight: normal;
+        font-stretch: normal;
+        letter-spacing: 4px;
+        color: #feffff;
         display: flex;
         justify-content: space-between;
-        margin:28px 0 14px 0;
+        margin: 40px 0 24px 0;
+
         .tag {
 
             &>div {
                 font-size: 16px;
                 padding: 4px;
-                border: 1px solid rgb(30, 163, 194);;
+                border: 1px solid rgb(30, 163, 194);
                 margin-right: 4px;
                 text-align: center;
                 line-height: 16px;
                 display: inline-block;
                 cursor: pointer;
             }
-            &>div:last-child{
+
+            &>div:last-child {
                 margin-right: 0;
             }
-            .tagNum{
+
+            .tagNum {
                 background: rgb(30, 163, 194);
             }
         }
diff --git a/src/components/CommandPlatform/left/SituationNum.js b/src/components/CommandPlatform/left/SituationNum.js
index ce2099c..abd3f87 100644
--- a/src/components/CommandPlatform/left/SituationNum.js
+++ b/src/components/CommandPlatform/left/SituationNum.js
@@ -3,6 +3,7 @@ import styles from './SituationNum.less';
 
 const up1 = require('@/assets/arrow-up.png'); // 红升
 const down2 = require('@/assets/arrow-down.png'); // 绿降
+const car = require('@/assets/CommandPlatform/dd.png');
 
 class SituationNum extends React.PureComponent {
   constructor(props) {
@@ -13,7 +14,10 @@ class SituationNum extends React.PureComponent {
   render() {
     return (
       <div className={styles.situationNum}>
-        <div className={styles.tit}>指挥调度</div>
+        <div className={styles.tit}>
+          <img src={car} />
+          <div>指挥调度</div>
+        </div>
         <div className={styles.situationNumTop}>
           <div className={styles.top1}>今日警情数</div>
           <div className={styles.top2}>
@@ -49,8 +53,12 @@ class SituationNum extends React.PureComponent {
         <div className={styles.situationNumBottom}>
           <div>
             <div className={styles.num}>
-              <div>246</div>
-              <div>拥堵</div>
+              <div className={styles.imgs + ' ' + styles.imgs1}></div>
+              <div className={styles.font}>
+                <div>246</div>
+                <div>拥堵</div>
+              </div>
+
             </div>
             <div className={styles.compare}>
               <div>
@@ -73,8 +81,11 @@ class SituationNum extends React.PureComponent {
 
           <div>
             <div className={styles.num}>
-              <div>246</div>
-              <div>事故</div>
+              <div className={styles.imgs + ' ' + styles.imgs2}></div>
+              <div className={styles.font}>
+                <div>246</div>
+                <div>事故</div>
+              </div>
             </div>
             <div className={styles.compare}>
               <div>
diff --git a/src/components/CommandPlatform/left/SituationNum.less b/src/components/CommandPlatform/left/SituationNum.less
index 096b862..b95558e 100644
--- a/src/components/CommandPlatform/left/SituationNum.less
+++ b/src/components/CommandPlatform/left/SituationNum.less
@@ -3,41 +3,80 @@
 
     .tit {
         width: 100%;
-        background: lightblue;
-        height: 52px;
-        padding-left: 128px;
-        margin-bottom: 28px;
+        background: url(../../../assets/CommandPlatform/tit.png);
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        height: 58px;
+        font-family: PangMenZhengDao;
+        font-weight: normal;
+        font-style: italic;
+        font-stretch: normal;
+        line-height: 16px;
+        letter-spacing: 6px;
+        color: #ffffff;
+        box-shadow: 0px 1px 2px 0px rgba(38, 46, 64, 0.27);
+        margin-bottom: 40px;
+        position: relative;
+
+        img {
+            position: absolute;
+            left: 120px;
+            top: -20px;
+            width: 48px;
+            height: 42px;
+        }
+
+        div {
+            position: absolute;
+            left: 180px;
+            top: -12px;
+            font-size: 44px;
+        }
     }
 
 
 
     .situationNumTop {
         width: 100%;
-        height: 58px;
-        margin-bottom: 24px;
+        height: 95px;
+        margin-bottom: 44px;
         display: flex;
 
         .interval {
-            margin-bottom: 20px;
+            margin-bottom: 14px;
         }
 
         .top1 {
-            margin: 0 18px 0 24px;
-            line-height: 58px;
+            margin: 0 20px 0 36px;
+            line-height: 95px;
+            font-size: 30px;
+            font-family: MicrosoftYaHei;
+            font-weight: normal;
+            font-stretch: normal;
+            letter-spacing: 3px;
         }
 
         .top2 {
-            margin-right: 10px;
+            margin-right: 12px;
             display: flex;
 
             .num {
-                width: 48px;
-                height: 58px;
-                line-height: 58px;
+                width: 82px;
+                height: 95px;
+                line-height: 95px;
                 text-align: center;
-                font-size: 34px;
-                border: 1px solid lime;
                 margin-right: 12px;
+
+                font-family: LetsgoDigital-Regular;
+                font-size: 50px;
+                font-weight: normal;
+                font-stretch: normal;
+                letter-spacing: 8px;
+                color: #ffffff;
+                box-shadow: 0px 10px 5px 0px rgba(1, 10, 18, 0.17);
+                background: url(../../../assets/CommandPlatform/数字框.png);
+                background-size: 100% 100%;
+                background-repeat: no-repeat;
             }
 
         }
@@ -47,21 +86,45 @@
         }
 
         .top3 {
-            margin-right: 28px;
-            line-height: 58px;
+            margin-right: 45px;
+            line-height: 95px;
+            font-family: MicrosoftYaHei;
+            font-size: 29px;
+            font-weight: normal;
+            font-stretch: normal;
+            letter-spacing: 0px;
+            color: #b7dff9;
         }
 
         .top4 {
             margin-right: 18px;
+            font-family: MicrosoftYaHei;
+            font-size: 30px;
+            font-weight: normal;
+            font-stretch: normal;
+            letter-spacing: 0px;
+            color: #b7dff9;
         }
 
         .top5 {
             display: flex;
+
+            img {
+                width: 30px;
+                height: 32px;
+                margin-top: 10px;
+            }
         }
 
         .top5>div:nth-child(1) {
             margin-right: 10px;
             text-align: right;
+            font-family: MicrosoftYaHei;
+            font-size: 30px;
+            font-weight: normal;
+            font-stretch: normal;
+            letter-spacing: 0px;
+            color: #ffffff;
         }
     }
 
@@ -71,21 +134,58 @@
         justify-content: space-around;
 
         &>div {
-            width: 230px;
+            width: 340px;
 
             .num {
+                display: flex;
                 width: 100%;
-                height: 62px;
+                height: 130px;
                 text-align: center;
                 padding-bottom: 10px;
                 margin-bottom: 6px;
 
-                &>div:nth-child(1) {
-                    font-size: 24px;
+                .imgs1 {
+
+                    background: url(../../../assets/CommandPlatform/z7.png);
                 }
 
-                &>div:nth-child(2) {
-                    font-size: 20px;
+                .imgs2 {
+
+                    background: url(../../../assets/CommandPlatform/z10.png);
+                }
+
+                .imgs {
+                    width: 130px;
+                    height: 100%;
+                    background-size: 100% 100%;
+                    background-repeat: no-repeat;
+                }
+
+                .font {
+                    width: 240px;
+                    height: 100%;
+                    text-align: center;
+                    background: url(../../../assets/CommandPlatform/j520.png);
+                    background-size: 100% 100%;
+                    background-repeat: no-repeat;
+                    &>div:nth-child(1) {
+                        font-family: MicrosoftYaHei;
+                        font-size: 38px;
+                        font-weight: normal;
+                        font-stretch: normal;
+                        letter-spacing: 4px;
+                        color: #20ffed;
+                        margin-bottom: 8px;
+                    }
+
+                    &>div:nth-child(2) {
+                        font-family: MicrosoftYaHei;
+                        font-size: 30px;
+                        font-weight: normal;
+                        font-stretch: normal;
+                        letter-spacing: 3px;
+                        color: #ffffff;
+                    }
                 }
             }
 
@@ -101,7 +201,12 @@
                 }
 
                 .compareFont {
-                    color: rgba(250, 250, 250, 0.8);
+                    font-family: MicrosoftYaHei;
+                    font-size: 26px;
+                    font-weight: normal;
+                    font-stretch: normal;
+                    letter-spacing: 0px;
+                    color: #b7dff9;
                     margin-right: 18px;
                 }
 
@@ -110,8 +215,20 @@
                     text-align: right;
 
                     &>div:nth-child(1) {
+                        font-family: MicrosoftYaHei;
+                        font-size: 26px;
+                        font-weight: normal;
+                        font-stretch: normal;
+                        letter-spacing: 0px;
+                        color: #ffffff;
                         margin-right: 8px;
                     }
+
+                    img {
+                        width: 30px;
+                        height: 32px;
+                        margin-top: 6px;
+                    }
                 }
             }
         }
diff --git a/src/components/CommandPlatform/left/SituationTable.js b/src/components/CommandPlatform/left/SituationTable.js
index 467f555..a2fe204 100644
--- a/src/components/CommandPlatform/left/SituationTable.js
+++ b/src/components/CommandPlatform/left/SituationTable.js
@@ -1,6 +1,6 @@
 
 import React from 'react';
-import { Row, Col, Tabs, Select, DatePicker, message, Icon, Tooltip, Input } from 'antd';
+import { Row, Col, Tabs, Select, DatePicker, message, Icon, Tooltip, Input, TimePicker } from 'antd';
 import { connect } from 'dva';
 import ReactEcharts from 'echarts-for-react';
 // import { getAlarmSituationEcharts1, getAlarmSituationEcharts2, getAlarmSituationEcharts3, getNewAlarmSituationEcharts1, get24TimePoliceCaseLine, get24TimePoliceCaseLine1 } from '../BDCharts/AlarmSituationEcharts';
@@ -222,7 +222,7 @@ class AlarmSituation extends React.Component {
 
       this.doRefreshData();
       this.doRefreshData1();
-    //   this.refreshEcharts()
+      //   this.refreshEcharts()
 
     }
   }
@@ -703,33 +703,33 @@ class AlarmSituation extends React.Component {
     return optionlist;
   };
   // //辖区
-  // getAreaOption = (AreaList) => {
-  //   const optionlist = [];
-  //   optionlist.push(<Option value="">辖区</Option>);
-  //   if (AreaList && AreaList.length > 0) {
-  //     for (let i = 0; i < AreaList.length; i += 1) {
-  //       const area = AreaList[i];
-  //       if (area.enumvalue && area.enumname) {
-  //         optionlist.push(<Option title={area.enumname} value={area.enumvalue}>{area.enumname}</Option>);
-  //       }
-  //     }
-  //   }
-  //   return optionlist;
-  // };
-  getAreaOption = () => {
-    const AreaList = this.props.global.mainDeptList
+  getAreaOption = (AreaList) => {
     const optionlist = [];
-    optionlist.push(<Option value="">部门</Option>);
+    optionlist.push(<Option value="">辖区</Option>);
     if (AreaList && AreaList.length > 0) {
       for (let i = 0; i < AreaList.length; i += 1) {
         const area = AreaList[i];
-        if (area.cdepartmentid && area.deptshortname) {
-          optionlist.push(<Option title={area.deptshortname} value={area.cdepartmentid}>{area.deptshortname}</Option>);
+        if (area.enumvalue && area.enumname) {
+          optionlist.push(<Option title={area.enumname} value={area.enumvalue}>{area.enumname}</Option>);
         }
       }
     }
     return optionlist;
-  }
+  };
+  // getAreaOption = () => {
+  //   const AreaList = this.props.global.mainDeptList
+  //   const optionlist = [];
+  //   optionlist.push(<Option value="">部门</Option>);
+  //   if (AreaList && AreaList.length > 0) {
+  //     for (let i = 0; i < AreaList.length; i += 1) {
+  //       const area = AreaList[i];
+  //       if (area.cdepartmentid && area.deptshortname) {
+  //         optionlist.push(<Option title={area.deptshortname} value={area.cdepartmentid}>{area.deptshortname}</Option>);
+  //       }
+  //     }
+  //   }
+  //   return optionlist;
+  // }
   createPoliceList = (policeCaseList) => {
     const {
       selectSourceTab,//当前选中的警情来源
@@ -1608,7 +1608,7 @@ class AlarmSituation extends React.Component {
     let selectDiv = [];
     selectDiv.push(
       <Row style={{ width: '100%' }}>
-        <Col span={6}>
+        <Col span={5}>
           <Select style={{ width: '96%' }}
             notFoundContent="暂无数据"
             defaultValue=""
@@ -1618,7 +1618,7 @@ class AlarmSituation extends React.Component {
             {this.getSourceOption(CaseSourceList)}
           </Select>
         </Col>
-        <Col span={6}>
+        <Col span={5}>
           <Select style={{ width: '96%' }}
             notFoundContent="暂无数据"
             defaultValue=""
@@ -1628,7 +1628,7 @@ class AlarmSituation extends React.Component {
             {this.getTypeOption(CaseCategoryList)}
           </Select>
         </Col>
-        {/* <Col span={6}>
+        <Col span={5}>
           <Select style={{ width: '96%' }}
             notFoundContent="暂无数据"
             defaultValue=""
@@ -1637,8 +1637,8 @@ class AlarmSituation extends React.Component {
           >
             {this.getLevelOption()}
           </Select>
-        </Col> */}
-        <Col span={6}>
+        </Col>
+        <Col span={5}>
           <Select style={{ width: '96%' }}
             notFoundContent="暂无数据"
             defaultValue=""
@@ -1649,7 +1649,8 @@ class AlarmSituation extends React.Component {
             {this.getAreaOption(AreaList)}
           </Select>
         </Col>
-        <Col span={6}>
+        {/* <Col span={6}>
+          
           <Search
             className={styles.select}
             placeholder="地址/描述"
@@ -1661,16 +1662,16 @@ class AlarmSituation extends React.Component {
               })
             }}
           />
+        </Col> */}
+        <Col span={4} className={styles.timePicker}>
+          <RangePicker style={{ width: '100%' }}
+            showTime={{ format: 'HH:mm' }}
+            format="YYYY-MM-DD HH:mm"
+            placeholder="时"
+          // onChange={onChange}
+          // onOk={onOk}
+          />
         </Col>
-        {/*<Col span={5} className={styles.timePicker}>*/}
-        {/*<RangePicker style={{width:'100%'}}*/}
-        {/*showTime={{ format: 'HH:mm' }}*/}
-        {/*format="YYYY-MM-DD HH:mm"*/}
-        {/*placeholder="时"*/}
-        {/*// onChange={onChange}*/}
-        {/*// onOk={onOk}*/}
-        {/*/>*/}
-        {/*</Col>*/}
       </Row>
     )
     return selectDiv;
@@ -1916,16 +1917,16 @@ class AlarmSituation extends React.Component {
             <PoliceCaseAddModal  {...policeCaseAddModal} />
             <div className={styles.AlarmSituationBox} >
               <div className={styles.AlarmSituationAll}>
-                
-                
+
+
                 <div className={styles.policeCaseDiv}>
-                 
+
                   <div className={styles.AlarmSituation3}>
                     <Tabs activeKey={selectTab} defaultActiveKey="1" onChange={this.getTabKey}
                       className={stylesSituationTable.box}
                     >
-                      <TabPane tab={<span style={{ fontSize: `16px` }}>已接警（25）
-                      {/* (<span className={styles.AlarmSituation_tabnum} style={{ fontSize: `${0.64 * basefont}px` }}>{nothandingNum !== null ? nothandingNum : 0}</span>) */}
+                      <TabPane tab={<span className={stylesSituationTable.tagn}>已接警（25）
+                        {/* (<span className={styles.AlarmSituation_tabnum} style={{ fontSize: `${0.64 * basefont}px` }}>{nothandingNum !== null ? nothandingNum : 0}</span>) */}
                       </span>} key="1">
                         {this.getSelectDiv()}
                         <div id="scrollPoliceSituation1" className={styles.AlarmSituation_list}>
@@ -1939,8 +1940,8 @@ class AlarmSituation extends React.Component {
                           >{policelistdom}</ul>
                         </div>
                       </TabPane>
-                      <TabPane tab={<span style={{ fontSize: `16px` }}>已派警（128）
-                      {/* (<span className={styles.AlarmSituation_tabnum} style={{ fontSize: `${0.64 * basefont}px` }}>{alreadyNum !== null ? alreadyNum : 0}</span>) */}
+                      <TabPane tab={<span className={stylesSituationTable.tagn}>已派警（128）
+                        {/* (<span className={styles.AlarmSituation_tabnum} style={{ fontSize: `${0.64 * basefont}px` }}>{alreadyNum !== null ? alreadyNum : 0}</span>) */}
                       </span>} key="3">
                         {this.getSelectDiv()}
                         <div id="scrollPoliceSituation3" className={styles.AlarmSituation_list}>
@@ -1954,8 +1955,8 @@ class AlarmSituation extends React.Component {
                           >{policelistdom}</ul>
                         </div>
                       </TabPane>
-                      <TabPane tab={<span style={{ fontSize: `16px` }}>已到达（128）
-                      {/* (<span className={styles.AlarmSituation_tabnum} style={{ fontSize: `${0.64 * basefont}px` }}>{arriveNum !== null ? arriveNum : 0}</span>) */}
+                      <TabPane tab={<span className={stylesSituationTable.tagn}>已到达（128）
+                        {/* (<span className={styles.AlarmSituation_tabnum} style={{ fontSize: `${0.64 * basefont}px` }}>{arriveNum !== null ? arriveNum : 0}</span>) */}
                       </span>} key="11">
                         {this.getSelectDiv()}
                         <div id="scrollPoliceSituation11" className={styles.AlarmSituation_list}>
@@ -1969,12 +1970,12 @@ class AlarmSituation extends React.Component {
                           >{policelistdom}</ul>
                         </div>
                       </TabPane>
-                      <TabPane tab={<span style={{ fontSize: `16px` }}>已完成（128）
-                      {/* (<span className={styles.AlarmSituation_tabnum} style={{ fontSize: `${0.64 * basefont}px` }}>{handedNum !== null ? handedNum : 0}</span>) */}
+                      <TabPane tab={<span className={stylesSituationTable.tagn}>已完成（128）
+                        {/* (<span className={styles.AlarmSituation_tabnum} style={{ fontSize: `${0.64 * basefont}px` }}>{handedNum !== null ? handedNum : 0}</span>) */}
                       </span>} key="7">
                         {this.getSelectDiv()}
-                        <div id="scrollPoliceSituation7" className={styles.AlarmSituation_list} 
-                            style={{ height: 190 }}>
+                        <div id="scrollPoliceSituation7" className={styles.AlarmSituation_list}
+                          style={{ height: 190 }}>
                           <ul
                             className={styles.AlarmSituation_ul}
                             style={{ overflowY: 'auto', height: 190 }}
@@ -1987,10 +1988,10 @@ class AlarmSituation extends React.Component {
                       </TabPane>
                     </Tabs>
                   </div>
-                  
+
 
                 </div>
-                
+
               </div>
             </div>
           </div>
diff --git a/src/components/CommandPlatform/left/SituationTable.less b/src/components/CommandPlatform/left/SituationTable.less
index 2695f8d..bc39838 100644
--- a/src/components/CommandPlatform/left/SituationTable.less
+++ b/src/components/CommandPlatform/left/SituationTable.less
@@ -2,4 +2,12 @@
     :global(.ant-tabs-tab) {
         padding: 12px 6px !important;
     }
+}
+
+.tagn {
+    font-family: MicrosoftYaHei;
+    font-size: 32px;
+    font-weight: normal;
+    font-stretch: normal;
+    letter-spacing: 0px;
 }
\ No newline at end of file
diff --git a/src/components/CommandPlatform/left/SpeedTrend.js b/src/components/CommandPlatform/left/SpeedTrend.js
index af3031c..a97146b 100644
--- a/src/components/CommandPlatform/left/SpeedTrend.js
+++ b/src/components/CommandPlatform/left/SpeedTrend.js
@@ -3,8 +3,8 @@ import ReactEcharts from 'echarts-for-react';
 import styles from './SpeedTrend.less';
 
 import { getNowDate } from '../../../utils/util';
- const serverTime = getNowDate();
- console.log(serverTime)
+const serverTime = getNowDate();
+console.log(serverTime)
 function echartsOption(xAxisData, seriesData) {
     const option = {
         grid: {
@@ -82,7 +82,7 @@ function echartsOption(xAxisData, seriesData) {
                         colorStops: [
                             {
                                 offset: 0,
-                                
+
                                 color: "rgba(60, 88, 109, 1)",
                             },
                             {
@@ -100,30 +100,30 @@ function echartsOption(xAxisData, seriesData) {
     return option
 }
 
-function echartsDay () {
-    let xAxisData = Array.from({length: 24}, (value, index) => index);
-    let seriesData = Array.from({length: 24}, (value, index) => index + 1);
+function echartsDay() {
+    let xAxisData = Array.from({ length: 24 }, (value, index) => index);
+    let seriesData = Array.from({ length: 24 }, (value, index) => index + 1);
     let option = echartsOption(xAxisData, seriesData)
     return option
 }
 
-function echartsWeek () {
-    let xAxisData = Array.from({length: 7}, (value, index) => index + 1);
-    let seriesData = [1,333,4,524,66,8888,10984];
+function echartsWeek() {
+    let xAxisData = Array.from({ length: 7 }, (value, index) => index + 1);
+    let seriesData = [1, 333, 4, 524, 66, 8888, 10984];
     let option = echartsOption(xAxisData, seriesData)
     return option
 }
 
-function echartsMonth () {
-    let xAxisData = Array.from({length: 30}, (value, index) => index + 1);
-    let seriesData = Array.from({length: 24}, (value, index) => index + 1);
+function echartsMonth() {
+    let xAxisData = Array.from({ length: 30 }, (value, index) => index + 1);
+    let seriesData = Array.from({ length: 24 }, (value, index) => index + 1);
     let option = echartsOption(xAxisData, seriesData)
     return option
 }
 
-function echartsRegion () {
-    let xAxisData = Array.from({length: 30}, (value, index) => index + 1);
-    let seriesData = Array.from({length: 24}, (value, index) => index + 1);
+function echartsRegion() {
+    let xAxisData = Array.from({ length: 30 }, (value, index) => index + 1);
+    let seriesData = Array.from({ length: 24 }, (value, index) => index + 1);
     let option = echartsOption(xAxisData, seriesData)
     return option
 }
@@ -164,57 +164,57 @@ class CongestionTrend extends React.PureComponent {
                     </div>
                 </div>
                 {
-                    this.state.tagNum  == 0 &&
+                    this.state.tagNum == 0 &&
 
                     <ReactEcharts
-                      ref={e => {
-                        // console.log(e)
-                      }}
-                      option={echartsDay()}
-                      notMerge
-                      lazyUpdate
-                      style={{ width: '100%', height: 160 }}
+                        ref={e => {
+                            // console.log(e)
+                        }}
+                        option={echartsDay()}
+                        notMerge
+                        lazyUpdate
+                        style={{ width: '100%', height: '244px' }}
                     />
-                  }
+                }
                 {
-                    this.state.tagNum  == 1 &&
+                    this.state.tagNum == 1 &&
 
                     <ReactEcharts
-                      ref={e => {
-                        // console.log(e)
-                      }}
-                      option={echartsWeek()}
-                      notMerge
-                      lazyUpdate
-                      style={{ width: '100%', height: 160 }}
+                        ref={e => {
+                            // console.log(e)
+                        }}
+                        option={echartsWeek()}
+                        notMerge
+                        lazyUpdate
+                        style={{ width: '100%', height: '244px' }}
                     />
-                  }
-                  {
-                    this.state.tagNum  == 2 &&
+                }
+                {
+                    this.state.tagNum == 2 &&
 
                     <ReactEcharts
-                      ref={e => {
-                        // console.log(e)
-                      }}
-                      option={echartsMonth()}
-                      notMerge
-                      lazyUpdate
-                      style={{ width: '100%', height: 160 }}
+                        ref={e => {
+                            // console.log(e)
+                        }}
+                        option={echartsMonth()}
+                        notMerge
+                        lazyUpdate
+                        style={{ width: '100%', height: '244px' }}
                     />
-                  }
-                  {
-                    this.state.tagNum  == 3 &&
+                }
+                {
+                    this.state.tagNum == 3 &&
 
                     <ReactEcharts
-                      ref={e => {
-                        // console.log(e)
-                      }}
-                      option={echartsRegion()}
-                      notMerge
-                      lazyUpdate
-                      style={{ width: '100%', height: 160 }}
+                        ref={e => {
+                            // console.log(e)
+                        }}
+                        option={echartsRegion()}
+                        notMerge
+                        lazyUpdate
+                        style={{ width: '100%', height: '244px' }}
                     />
-                  }
+                }
             </div>
         );
     }
diff --git a/src/components/CommandPlatform/left/SpeedTrend.less b/src/components/CommandPlatform/left/SpeedTrend.less
index 2bfaa8d..ac2af38 100644
--- a/src/components/CommandPlatform/left/SpeedTrend.less
+++ b/src/components/CommandPlatform/left/SpeedTrend.less
@@ -1,27 +1,44 @@
 .speedTrend {
     width: 100%;
+
     .tit {
-        font-size: 22px;
+        font-family: MicrosoftYaHei;
+        font-size: 36px;
+        font-weight: normal;
+        font-stretch: normal;
+        letter-spacing: 4px;
+        color: #feffff;
         display: flex;
         justify-content: space-between;
-        margin:12px 0 14px 0;
+        margin: 32px 0 16px 0;
+
         .tag {
 
             &>div {
-                font-size: 16px;
-                padding: 4px;
-                border: 1px solid rgb(30, 163, 194);;
-                margin-right: 4px;
+                font-family: MicrosoftYaHei;
+                font-size: 24px;
+                font-weight: normal;
+                font-stretch: normal;
+                line-height: 24px;
+                letter-spacing: 2px;
+                color: #cde9fc;
+                padding: 12px;
+                background: #0e2752;
+                border: 1px solid #2e84d7;
+                margin-right: 6px;
                 text-align: center;
                 line-height: 16px;
                 display: inline-block;
                 cursor: pointer;
             }
-            &>div:last-child{
+
+            &>div:last-child {
                 margin-right: 0;
             }
-            .tagNum{
-                background: rgb(30, 163, 194);
+
+            .tagNum {
+                color: #fff;
+                background: #0799b8;
             }
         }
     }
diff --git a/src/pages/CommandPlatform/One.js b/src/pages/CommandPlatform/One.js
index 2669699..2beb91a 100644
--- a/src/pages/CommandPlatform/One.js
+++ b/src/pages/CommandPlatform/One.js
@@ -26,16 +26,16 @@ class One extends React.PureComponent {
                 <div className={styles.left}>
                     <div style={{ width: '910px' }}>
                         <Congestion />
-                        {/* <Rank />
+                         <Rank />
                         <CongestionTrend />
-                        <SpeedTrend /> */}
+                        <SpeedTrend />
                     </div>
                     <div style={{ width: '860px' }}>
-                        {/* <SituationNum />
-                        <SituationDispose /> */}
+                        <SituationNum />
+                        <SituationDispose />
                     </div>
                 </div>
-                {/* <div className={styles.maps}></div>
+                <div className={styles.maps}></div>
                 <div className={styles.right}>
                     <div style={{ width: '10.16rem' }}>
                        <Controls />
@@ -46,7 +46,7 @@ class One extends React.PureComponent {
                        <Baseline />
                        <Opinion/>
                     </div>
-                </div> */}
+                </div>
             </div>
         );
     }
diff --git a/src/pages/CommandPlatform/One.less b/src/pages/CommandPlatform/One.less
index 1c7f151..244c1e8 100644
--- a/src/pages/CommandPlatform/One.less
+++ b/src/pages/CommandPlatform/One.less
@@ -11,7 +11,8 @@
 
   .left {
     width: 2136px;
-    height: 2064px;
+    height: 1785px;
+    margin-top: 257px;
     padding: 0 76px 0 150px;
     display: flex;
     justify-content: space-between;