Merge branch 'dev' of http://122.51.230.86:3000/dianliang/lanan-system-vue into dev

src/api/repair/stockOperate/stockOperate.js

@@ -52,3 +52,12 @@ export function confirmBack(id){
     method: 'get'
   })
 }
+
+// 采购入库
+export function inWare(data){
+  return request({
+    url: preUrl + "/inWare",
+    method: 'post',
+    data
+  })
+}

src/views/inspection/screen/jcBigScreen.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="cont">
     <div class="top_">
-      <div>车辆检测数据大屏</div>
+<!--      <div>车辆检测数据大屏</div>-->
+
     </div>
     <!--    -->
     <div class="content_">
@@ -66,78 +67,38 @@
           </el-date-picker>
         </div>
         <div class="five_box">
-          <div class="f_box">
+          <div class="three_box">
-            <div class="img_left">
+            <div class="three_title">订单数量</div>
-              <!--              <img src="./imgs/1.png" style="width: 60px;height: 60px">-->
+            <div class="three_size">{{ data2.allNum || 0 }}</div>
-              订单数量
-            </div>
-            <div>
-              <div class="f_size">{{ data2.allNum || 0 }}</div>
-              <!--              <div class="f_size">2</div>-->
-              <!--              <div class="f_num">{{ statusTickets[3].value }}</div>-->
-            </div>
           </div>
-          <div class="f_box">
+          <div class="three_box">
-            <div class="img_left">
+            <div class="three_title">完成数量</div>
-              <!--              <img src="./imgs/2.png" style="width: 60px;height: 60px">-->
+            <div class="three_size">{{ data2.ywcNum || 0 }}</div>
-              完成数量
-            </div>
-            <div>
-              <div class="f_size">{{ data2.ywcNum || 0 }}</div>
-              <!--              <div class="f_num">{{ statusTickets[4].value }}</div>-->
-            </div>
           </div>
-          <div class="f_box">
+          <div class="three_box">
-            <div class="img_left">
+            <div class="three_title">检测中</div>
-              <!--              <img src="./imgs/3.png" style="width: 60px;height: 60px">-->
+            <div class="three_size">{{ data2.jxzNum || 0 }}</div>
-              检测中数量
-            </div>
-            <div>
-              <div class="f_size">{{ data2.jxzNum || 0 }}</div>
-              <!--              <div class="f_num">{{ statusTickets[0].value }}</div>-->
-            </div>
           </div>
+
         </div>
-        <div class="five_box">
+        <div class="fv_box">
-          <div class="f_box">
+          <div class="b-b">
-            <div class="img_left">
+              <div>公示价格</div>
-              <!--              <img src="./imgs/1.png" style="width: 60px;height: 60px">-->
+              <div class="b_box">4090</div>
-              公示价格
-            </div>
-            <div>
-              <!--              <div class="f_size">1</div>-->
-              <div class="f_size">{{ data1.gsAmount || 0 }}</div>
-              <!--              <div class="f_num">{{ statusTickets[3].value }}</div>-->
-            </div>
           </div>
-          <div class="f_box">
+          <div class="b-b">
-            <div class="img_left">
+            <div>应收</div>
-              <!--              <img src="./imgs/2.png" style="width: 60px;height: 60px">-->
+            <div class="b_box">4090</div>
-              应收款
-            </div>
-            <div>
-              <div class="f_size">{{ data1.ysAmount || 0 }}</div>
-              <!--              <div class="f_num">{{ statusTickets[4].value }}</div>-->
-            </div>
           </div>
-          <div class="f_box">
+          <div class="b-b">
-            <div class="img_left">
+            <div>已收</div>
-              已收款
+            <div class="b_box">4090</div>
-            </div>
-            <div>
-              <div class="f_size">{{ data1.yjsAmount || 0 }}</div>
-            </div>
           </div>
-          <div class="f_box">
+          <div class="b-b">
-            <div class="img_left">
+            <div>待收</div>
-              <!--                        <img src="./imgs/4.png" style="width: 60px;height: 60px">-->
+            <div class="b_box">4090</div>
-              待收款
-            </div>
-            <div>
-              <div class="f_size">{{ data1.ysAmount - data1.yjsAmount || 0 }}</div>
-              <!--              <div class="f_num">{{ statusTickets[1].value }}</div>-->
-            </div>
           </div>
+
         </div>
         <div class="co_title">
           客户来源统计
@@ -179,16 +140,69 @@
               </div>
             </div>
           </div>
-          <div class="echaets_box">
+          <div class="echaets_box" style="padding-top: 15px" >
-            <div id="jchgl" style="width: 400px; height: 267px;"></div>
+<!--            gdt-->
+            <div class="jd_box">
+              <div class="jd_bt">
+                <div>重型货车</div>
+                <div>{{Progress1}}%</div>
+              </div>
+              <div class="jd_k">
+                <div class="jd_v" :style=" 'width:' + Progress1+'%' " ></div>
+              </div>
+            </div>
+            <div class="jd_box">
+              <div class="jd_bt">
+                <div>3.5以上 轻型货车</div>
+                <div>{{Progress1}}%</div>
+              </div>
+              <div class="jd_k">
+                <div class="jd_v" :style=" 'width:' + Progress1+'%' " ></div>
+              </div>
+            </div>
+            <div class="jd_box">
+              <div class="jd_bt">
+                <div>3.5以下 轻型货车</div>
+                <div>{{Progress1}}%</div>
+              </div>
+              <div class="jd_k">
+                <div class="jd_v" :style=" 'width:' + Progress1+'%' " ></div>
+              </div>
+            </div>
+
           </div>
         </div>
         <div class="six_box">
           <div class="s_title">
             检测商品统计
           </div>
-          <div class="echaets_box">
+          <div class="echaets_box" style="display: flex;align-items: center;justify-content: space-around">
-            <div id="jcsptj" style="width: 400px; height: 267px;"></div>
+            <div id="jcsptj" style="width: 170px; height: 170px;"></div>
+            <div>
+              <div class="hang_box">
+                <div>
+                  <div class="jt_"></div>
+                  <div class="jt_size" style="color: #0174F6">双燃料机油</div>
+                </div>
+                <div>278</div>
+              </div>
+              <div class="hang_box" >
+                <div>
+                  <div class="jt_" style="background: #40CC97"></div>
+                  <div class="jt_size" style="color: #40CC97">双燃料机油</div>
+                </div>
+
+                <div>278</div>
+              </div>
+              <div class="hang_box">
+                <div>
+                  <div class="jt_" style="background: #FFB323"></div>
+                  <div class="jt_size" style="color: #FFB323">双燃料机油</div>
+                </div>
+                <div>278</div>
+              </div>
+
+            </div>
           </div>
         </div>
       </div>
@@ -217,6 +231,7 @@ export default {
     };
     return {
       Amount: [],
+      Progress1:60,
       unit: 'day',
       unit1: 'day',
       unit2: 'day',
@@ -242,6 +257,10 @@ export default {
     }
   },
   created() {
+
+
+  },
+  mounted() {
     this.customerSource()
     this.getServerData1()
     this.chartInfoNum()
@@ -251,10 +270,6 @@ export default {
     this.getfive1()
     this.getfive3()
     this.getProduct()
-
-  },
-  mounted() {
-
   },
   methods: {
     handleChange() {
@@ -285,27 +300,113 @@ export default {
      * @returns {Promise<void>}
      */
     async getServerData1() {
-      const params = {
+
-        unit: this.unit,
-      }
-      let res = await jcBigScreen.getServerData1(params)
-      console.log('已收款金额', res)
-      res.data.series.forEach(item => {
-        item.type = 'bar'
-      })
       var chartDom = document.getElementById('yskje');
       var myChart = echarts.init(chartDom);
-      var option;
+
-      option = {
+      let option = {
+        tooltip: {
+          trigger: 'axis'
+        },
+
         xAxis: {
           type: 'category',
-          data: res.data.categories
+          data: ['小型汽车', '中型汽车', '大型汽车'],
+          //更改坐标轴颜色
+          axisLine: {
+            lineStyle: {
+              color: '#fff'
+            },
+            onZero:false
+          },
+          // x轴的字体样式
+          axisLabel: {
+            interval: 0,
+            textStyle: {
+              color: '#fff',  //更改坐标轴文字颜色
+              fontSize: 14,      //更改坐标轴文字大小
+              fontFamily: 'MicrosoftYaHei'
+            },
+            formatter:function(params) {
+              return params.split(" ").join("\n")
+//                console.log(' formatter',params);
+            },
+          },
+
+
         },
         yAxis: {
-          type: 'value'
+          type: 'value',
+          axisLabel: {
+            formatter: '{value}',
+            textStyle: {
+              color: '#fff',  //更改坐标轴文字颜色
+              fontSize: 16,      //更改坐标轴文字大小
+              fontFamily: 'MicrosoftYaHei'
+            }
+          },
+          //更改坐标轴颜色
+          axisLine: {
+            lineStyle: {
+              color: '#657CA8'
+            }
+          },
+          //网格线
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#294a88',
+              width: 2,
+              opacity: 0.2
+            }
+          },
         },
-        series: res.data.series
+        series: [{
-      };
+          data: [6,6,6],//this.PLAN_COUNT, this.ACTUAL_COUNT,this.GAP
+          type: 'bar',
+          barWidth:40,
+          itemStyle: {
+            normal: {
+              color: function (params) {
+                // build a color map as your need.
+                var colorList = [
+                  new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                    offset: 0,
+                    color: '#4DA9FF' // 0% 处的颜色
+                  }, {
+                    offset: 1,
+                    color: '#1D92FF' // 100% 处的颜色
+                  }], false),
+                  new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                    offset: 0,
+                    color: '#FF5C00' // 0% 处的颜色
+                  }, {
+                    offset: 1,
+                    color: '#FF9F0A' // 100% 处的颜色
+                  }], false),
+                  new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                    offset: 0,
+                    color: '#D7FF39' // 0% 处的颜色
+                  }, {
+                    offset: 1,
+                    color: '#32D74B' // 100% 处的颜色
+                  }], false)
+                ];
+                return colorList[params.dataIndex]
+              },
+              //以下为是否显示，显示位置和显示格式的设置了
+              label: {
+                show: true,
+                position: 'top',
+                formatter: '{c}',
+                fontSize: 20,
+                color:'#B8CBF7'
+              }
+            }
+          },
+        }]
+      }
+      // 绘制图表
       option && myChart.setOption(option);
     },
     /**
@@ -313,75 +414,169 @@ export default {
      * @returns {Promise<void>}
      */
     async getProduct() {
-      let res = await jcBigScreen.hotGoodsList()
-      console.log('检测商品统计', res)
-      res.data.forEach(item => {
-        item.name = item.goodsName
-        item.value = item.salesNum
-      })
-      setTimeout(() => {
         var chartDom = document.getElementById('jcsptj');
-        var myChart = echarts.init(chartDom);
-        var option;
-        option = {
-          title: {
-            // text: 'Referer of a Website',
-            // subtext: 'Fake Data',
-            left: 'center'
-          },
-          tooltip: {
-            trigger: 'item'
-          },
-          legend: {
-            orient: 'vertical',
-            left: 'left'
-          },
-          series: [
-            {
-              // name: 'Access From',
-              type: 'pie',
-              radius: '50%',
-              data: res.data,
-              emphasis: {
-                itemStyle: {
-                  shadowBlur: 10,
-                  shadowOffsetX: 0,
-                  shadowColor: 'rgba(0, 0, 0, 0.5)'
-                }
-              }
-            }
-          ]
-        };
-        option && myChart.setOption(option);
-      }, 2000)
 
+      var myChart = echarts.init(chartDom);
+      var option;
+
+      option = {
+        color: ['#0174F6', '#40CC97', '#FFB323'],
+        title: {
+          text: '33%',
+          left: 'center',
+          top: '40%',
+          textStyle: {
+            fontSize: 30,
+            color: '#017fff',
+            align: 'center'
+          }
+        },
+        tooltip: {
+          trigger: 'item'
+        },
+
+        series: [
+          {
+            name: '',
+            type: 'pie',
+            radius: ['60%', '70%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: false,
+                fontSize: 40,
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: 1048, name: '单燃料机油' },
+              { value: 735, name: '双燃料机油' },
+              { value: 580, name: '三燃料机油' }
+            ]
+          }
+        ]
+      };
+
+      option && myChart.setOption(option);
     },
     /**
      * 数量统计
      * @returns {Promise<void>}
      */
     async chartInfoNum() {
-      const params = {
-        unit: this.unit1,
-      }
-      let res = await jcBigScreen.chartInfoNum(params)
-      console.log('数量统计', res)
-      res.data.series.forEach(item => {
-        item.type = 'bar'
-      })
       var chartDom = document.getElementById('sltj');
       var myChart = echarts.init(chartDom);
-      var option;
+
-      option = {
+      let option = {
+        tooltip: {
+          trigger: 'axis'
+        },
+
         xAxis: {
           type: 'category',
-          data: res.data.categories
+          data: ['小型汽车', '中型汽车', '大型汽车'],
+          //更改坐标轴颜色
+          axisLine: {
+            lineStyle: {
+              color: '#fff'
+            },
+            onZero:false
+          },
+          // x轴的字体样式
+          axisLabel: {
+            interval: 0,
+            textStyle: {
+              color: '#fff',  //更改坐标轴文字颜色
+              fontSize: 14,      //更改坐标轴文字大小
+              fontFamily: 'MicrosoftYaHei'
+            },
+            formatter:function(params) {
+              return params.split(" ").join("\n")
+//                console.log(' formatter',params);
+            },
+          },
+
+
         },
         yAxis: {
-          type: 'value'
+          type: 'value',
+          axisLabel: {
+            formatter: '{value}',
+            textStyle: {
+              color: '#fff',  //更改坐标轴文字颜色
+              fontSize: 16,      //更改坐标轴文字大小
+              fontFamily: 'MicrosoftYaHei'
+            }
+          },
+          //更改坐标轴颜色
+          axisLine: {
+            lineStyle: {
+              color: '#657CA8'
+            }
+          },
+          //网格线
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#294a88',
+              width: 2,
+              opacity: 0.2
+            }
+          },
         },
-        series: res.data.series
+        series: [{
-      };
+          data: [6,6,6],//this.PLAN_COUNT, this.ACTUAL_COUNT,this.GAP
+          type: 'bar',
+          barWidth:40,
+          itemStyle: {
+            normal: {
+              color: function (params) {
+                // build a color map as your need.
+                var colorList = [
+                  new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                    offset: 0,
+                    color: '#4DA9FF' // 0% 处的颜色
+                  }, {
+                    offset: 1,
+                    color: '#1D92FF' // 100% 处的颜色
+                  }], false),
+                  new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                    offset: 0,
+                    color: '#FF5C00' // 0% 处的颜色
+                  }, {
+                    offset: 1,
+                    color: '#FF9F0A' // 100% 处的颜色
+                  }], false),
+                  new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                    offset: 0,
+                    color: '#D7FF39' // 0% 处的颜色
+                  }, {
+                    offset: 1,
+                    color: '#32D74B' // 100% 处的颜色
+                  }], false)
+                ];
+                return colorList[params.dataIndex]
+              },
+              //以下为是否显示，显示位置和显示格式的设置了
+              label: {
+                show: true,
+                position: 'top',
+                formatter: '{c}',
+                fontSize: 20,
+                color:'#B8CBF7'
+              }
+            }
+          },
+        }]
+      }
+      // 绘制图表
       option && myChart.setOption(option);
     },
     /**
@@ -406,7 +601,15 @@ export default {
           data: res.data.categories
         },
         yAxis: {
-          type: 'value'
+          type: 'value',
+          axisLabel: {
+            formatter: '{value}',
+            textStyle: {
+              color: '#fff',  //更改坐标轴文字颜色
+              fontSize: 16,      //更改坐标轴文字大小
+              fontFamily: 'MicrosoftYaHei'
+            }
+          },
         },
         series: res.data.series
       };
@@ -417,49 +620,76 @@ export default {
      * @returns {Promise<void>}
      */
     async chartLineInspectionNum() {
-      const params = {
-        unit: this.unit,
-      }
-      let res = await jcBigScreen.chartLineInspectionNum(params)
-      console.log('检测数量', res)
-      res.data.series.forEach(item => {
-        item.type = 'bar'
-      })
-      const names = res.data.series.map(item => item.name)
       var chartDom = document.getElementById('jcsl');
       var myChart = echarts.init(chartDom);
       var option;
+
       option = {
-        title: {
+        color: ['#0663f0', '#FFD78B'],
-          text: '最近七天'
-        },
-        tooltip: {
-          trigger: 'axis'
-        },
         legend: {
-          data: names
+          top: '5%',
-        },
+          left: 'center'
-        grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          containLabel: true
-        },
-        toolbox: {
-          feature: {
-            saveAsImage: {}
-          }
         },
         xAxis: {
           type: 'category',
           boundaryGap: false,
-          data: res.data.categories
+          data: ['01', '02', '03', '04', '05', '06', '07'],
+          axisLine: {
+            lineStyle: {
+              color: '#fff'
+            },
+            onZero:false
+          },
+          axisLabel: {
+            formatter: '{value}',
+            textStyle: {
+              color: '#fff',
+              fontSize: 12,
+
+            }
+          },
         },
         yAxis: {
-          type: 'value'
+          type: 'value',
+          axisLabel: {
+            formatter: '{value}',
+            textStyle: {
+              color: '#fff',  //更改坐标轴文字颜色
+              fontSize: 12,      //更改坐标轴文字大小
+
+            }
+          },
         },
-        series: res.data.series
+        series: [
+          {
+            data: [820, 932, 901, 934, 1290, 1330, 1320],
+            type: 'line',
+            symbolSize: 0,
+            smooth: true,
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: '#0663f0' },
+                { offset: 0, color: '#0663f0' }
+              ])
+            }
+          },
+          {
+            data: [220, 182, 191, 234, 290, 330, 310],
+            type: 'line',
+            symbolSize: 0,
+            smooth: true,
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: '#FFD78B' },
+                { offset: 0, color: '#FFD78B' }
+              ])
+            }
+          }
+        ]
       };
+
       option && myChart.setOption(option);
     },
 
@@ -467,47 +697,61 @@ export default {
      * 客户来源分析饼图
      */
     async customerSource() {
-      const params = {
-        unit: this.unit,
-      }
-      const res = await jcBigScreen.chartLineInspectionAmount(params);
-      res.data.series.forEach(item => {
-        // console.log( '475'+  JSON.stringify(res.data.series[0].data))
-        item.type = 'line'
-      })
       var chartDom = document.getElementById('khly');
       var myChart = echarts.init(chartDom);
       var option;
 
-      const color = ['#31daf0', '#3367e6', '#d9458d', ];
       option = {
-        legend: {
+        tooltip: {
-          top: 'bottom'
+          trigger: 'axis'
         },
-        toolbox: {
+        xAxis: {
-          show: true,
+          type: 'category',
-          feature: {
+          data: ['01', '02', '03', '04', '05', '06', '07'],
-            mark: { show: true },
+          axisLine: {
-            dataView: { show: true, readOnly: false },
+            lineStyle: {
-            restore: { show: traue },
+              color: '#fff'
-            saveAsImage: { show: true }
+            },
-          }
+            onZero:false
+          },
+          axisLabel: {
+            formatter: '{value}',
+            textStyle: {
+              color: '#fff',
+              fontSize: 16,
+
+            }
+          },
+        },
+        yAxis: {
+          type: 'value',
+          lineStyle: {
+            color: '#fff'
+          },
+          axisLabel: {
+            formatter: '{value}',
+            textStyle: {
+              color: '#fff',
+              fontSize: 16,
+
+            }
+          },
         },
         series: [
           {
-            name: 'Nightingale Chart',
+            data: [120, 200, 150, 80, 70, 110, 130],
-            type: 'pie',
+            type: 'line',
-            radius: [20, 50],
+
-            center: ['50%', '50%'],
+            symbolSize: 10,
-            roseType: 'area',
+            lineStyle: {
-            itemStyle: {
+              color: '#009EDA',
-              borderRadius: 8
+              width: 2
             },
-            data: [
+            itemStyle: {
-              { value: 40, name: 'rose 1' },
+              borderWidth: 3,
-              { value: 38, name: 'rose 2' },
+              borderColor: '#009EDA',
-              { value: 32, name: 'rose 3' }
+              color: '#009EDA'
-            ]
+            }
           }
         ]
       };
@@ -557,7 +801,7 @@ export default {
 <style lang="scss" scoped>
 .cont {
   background: #020F32;
-  //background: url("./imgs/back.png") no-repeat;
+  background: url("./imgs/bcke.png") no-repeat;
   background-size: 100% 100%;
   width: 100%;
   height: 100vh;
@@ -627,9 +871,9 @@ export default {
   align-items: center;
   justify-content: center;
   width: 100%;
-  border-bottom: 4px solid #0174F6;
+  //border-bottom: 4px solid #0174F6;
   box-sizing: border-box;
-  padding-bottom: 20px;
+
 }
 
 .tab_buttom {
@@ -684,6 +928,35 @@ yb_title {
   justify-content: space-around;
   margin: 30px auto;
 }
+.fv_box{
+  width: 100%;
+  height: 142px;
+  background: url("./imgs/top-bj.png") no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 20px;
+  align-items: center;
+}
+.three_box{
+  width: 190px;
+  height: 80px;
+  background: url("./imgs/kuang.png") no-repeat;
+  background-size: 100% 100%;
+  text-align: center;
+  box-sizing: border-box;
+  padding-top: 15px;
+}
+.three_title{
+  font-weight: 500;
+  font-size: 14px;
+  color: #FFFFFF;
+}
+.three_size{
+  font-weight: 500;
+  font-size: 30px;
+  color: #FFFFFF;
+}
 
 .f_size {
   font-size: 14px;
@@ -710,13 +983,30 @@ yb_title {
 .co_title {
   width: 100%;
   height: 32px;
-  background: url("./imgs/c_title.png") no-repeat;
+  background: url("./imgs/c-title.png") no-repeat;
   background-size: 100% 100%;
   font-weight: 500;
-  font-size: 20px;
+  font-size: 18px;
   color: #FFFFFF;
   box-sizing: border-box;
-  padding-left: 40px;
+  padding-left: 10px;
+  padding-top: 5px;
+}
+.b-b{
+  font-weight: 500;
+  font-size: 16px;
+  color: #FFFFFF;
+  text-align: center;
+}
+.b_box{
+  text-align: center;
+  font-weight: 500;
+  font-size: 30px;
+  color: #FFFFFF;
+  width: 105px;
+  height: 80px;
+  background: url("./imgs/box.png") no-repeat;
+  background-size: 100% 100%;
 }
 
 .s_title {
@@ -725,10 +1015,11 @@ yb_title {
   background: url("./imgs/title.png") no-repeat;
   background-size: 100% 100%;
   font-weight: 500;
-  font-size: 20px;
+  font-size: 18px;
   color: #FFFFFF;
   box-sizing: border-box;
-  padding-left: 40px;
+  padding-left: 10px;
+  padding-top: 5px;
   margin: 0px auto;
 }
 
@@ -737,6 +1028,7 @@ yb_title {
   height: 267px;
   margin: 0px auto;
   border-bottom: 1px solid #0174F6;
+  background: rgba(82,125,243,0.1);
 }
 
 .list_long {
@@ -817,5 +1109,49 @@ yb_title {
 .c_right {
   width: 25%;
 }
-
+.jd_k{
+  height: 20px;
+  width: 100%;
+  background: rgba(1,116,246,0.3);
+  border: 1px solid rgba(1,116,246,0.3);
+  box-shadow: inset 0px 1px 3px 0px rgba(116,129,163,0.5);
+}
+.jd_v{
+  width: 70%;
+  height: 100%;
+  background: linear-gradient( 90deg, rgba(77,241,227,0) 0%, rgba(77,241,227,0.5) 50%, #4DF1E3 100%);
+  border-right: 4px solid #fff;
+}
+.jd_bt{
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-weight: 500;
+  font-size: 16px;
+  color: #FFFFFF;
+  margin-bottom: 5px;
+}
+.jd_box{
+  box-sizing: border-box;
+  padding: 10px;
+  margin: 10px auto;
+}
+.hang_box{
+  display: flex;
+  align-items: center;
+  font-weight: bold;
+  font-size: 16px;
+  color: #FFFFFF;
+  margin: 15px auto;
+}
+.jt_{
+  width: 100px;
+  height: 2px;
+  border-radius: 2px 2px 2px 2px;
+  background: #0174F6;
+}
+.jt_size{
+  font-size: 14px;
+}
 </style>

src/views/repair/Components/StaffChoose.vue

@@ -8,6 +8,7 @@
 <script>
 
 import {getStaffList} from "@/api/company/staff";
+import {getUserProfile} from "@/api/system/user";
 
 export default {
   name: "StaffChoose",
@@ -19,6 +20,9 @@ export default {
       type: String,
       default: '',
       required: false
+    },
+    roleCode:{
+      type: String,
     }
   },
   data() {
@@ -47,14 +51,23 @@ export default {
   },
   mounted() {
     this.listStaff()
+    this.getNow()
   },
   methods: {
     async listStaff() {
       this.selectLoading = true
       try {
         if (!this.isGet) return;
-        const res = await getStaffList(this.query)
+        if (this.roleCode){
-        this.staffList = res.data
+          // todo 暂时先把流程跑通了来
+        }else {
+          const res = await getStaffList(this.query)
+          this.staffList = res.data
+          if (this.query){
+            this.staffSelected = this.staffList.filter(item => item.tel === this.query)[0].id
+            this.query = null
+          }
+        }
       } finally {
         this.selectLoading = false
       }
@@ -62,6 +75,11 @@ export default {
     changeQuery(val) {
       this.query = val
       this.listStaff()
+    },
+    async getNow(){
+      // 获取当前登录用户
+      const res = await getUserProfile()
+      this.changeQuery(res.data.mobile)
     }
   }
 }

src/views/repair/stockOperate/Components/SoIndex.vue

@@ -108,9 +108,9 @@
           <el-button size="mini" type="text" icon="el-icon-view" @click="handleShow(scope.row)"
           >查看
           </el-button>
-<!--          <el-button size="mini" type="text" icon="el-icon-edit-outline"-->
+          <el-button @click="handleInWares(scope.row)" v-if="scope.row.soStatus === '02'" size="mini" type="text" icon="el-icon-edit-outline"
-<!--          >修改-->
+          >入库
-<!--          </el-button>-->
+          </el-button>
           <el-button size="mini" type="text" icon="el-icon-close" @click="handleVoidSo(scope.row)"
           >作废
           </el-button>
@@ -123,6 +123,33 @@
     />
 
     <SoShow :so-by-type="soByType" :is-back="isBack" ref="soShow" />
+
+    <el-dialog title="入库" :visible.sync="dialogVisible" width="80%" v-dialogDrag append-to-body>
+      <el-table v-loading="inLoading" :data="inItems" :stripe="true" :show-overflow-tooltip="true"
+                @selection-change="selectRow"
+                @cell-mouse-enter="handleCellEnter"
+                @cell-mouse-leave="handleCellLeave"
+                @cell-click="handleCellClick"
+                :key="tableKey"
+      >
+        <el-table-column type="selection" width="55" align="center"/>
+        <el-table-column label="商品名称" align="center" prop="repairWares.name" />
+        <el-table-column label="商品编码" align="center" prop="repairWares.code" width="180" />
+        <el-table-column label="条形码" align="center" prop="repairWares.barCode" width="180" />
+        <el-table-column label="规格" align="center" prop="repairWares.model" width="180" />
+        <el-table-column label="采购数量" align="center" prop="goodsCount" width="150" />
+        <el-table-column label="入库数量" align="center" prop="inCount" width="150">
+          <div class="item" slot-scope="scope">
+            <el-input @blur="save(scope.row)" class="item__input" v-model="scope.row.inCount"/>
+            <span class="item__txt">{{ scope.row.inCount }}</span>
+          </div>
+        </el-table-column>
+      </el-table>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" :disabled="selectRows.length === 0" @click="doInWares">确定</el-button>
+        <el-button @click="dialogVisible = false">取消</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -132,8 +159,10 @@ import SupplierChoose from "@/views/repair/Components/SupplierChoose.vue";
 import CorpChoose from "@/views/repair/Components/CorpChoose.vue";
 import StaffChoose from "@/views/repair/Components/StaffChoose.vue";
 import {DICT_TYPE} from "@/utils/dict";
-import {getRepairSoPage, voidSo, getRepairSoById} from "@/api/repair/stockOperate/stockOperate";
+import {getRepairSoPage, voidSo, getRepairSoById, inWare} from "@/api/repair/stockOperate/stockOperate";
 import SoShow from "@/views/repair/stockOperate/Components/SoSow.vue";
+import {getRepairSoiByIds} from "@/api/repair/stockOperate/stockOperateItem";
+import {createUniqueCodeByHead} from "@/utils/createUniqueCode";
 
 export default {
   name: "SoIndex",
@@ -203,7 +232,19 @@ export default {
       showSearch: true,
       list: [],
       loading: false,
-      total: 0
+      total: 0,
+      dialogVisible: false,
+      inItems: [],
+      inLoading: false,
+      selectRows: [],
+      inWaresFormData:{
+        id: null,
+        soiList: [],
+        soNo: null
+      },
+      editProp: ['inCount'],
+      clickCellMap: {},
+      tableKey: 0
     }
   },
   mounted() {
@@ -283,11 +324,136 @@ export default {
     async handleShow(row){
       const res = await getRepairSoById(row.id)
       await this.$refs.soShow.open(res.data)
-    }
+    },
+    // 入库操作
+    async handleInWares(row){
+      this.inWaresFormData = {
+        id: null,
+          soiList: []
+      }
+      this.inWaresFormData['id'] = row.id
+      try {
+        this.dialogVisible = true
+        this.inLoading = true
+        const resRow = await getRepairSoById(row.id)
+        const ids = resRow.data.goodsList.map(item => item.id)
+        const res = await getRepairSoiByIds(ids)
+        this.inItems = res.data
+        this.inItems = this.inItems.filter(item => item.inCount !== item.goodsCount)
+        this.inItems = [...this.inItems.map(item => {
+          return {
+            ...item,
+            goodsCount: item.goodsCount - item?.inCount | 0,
+            inCount: item.goodsCount - item?.inCount | 0
+          }
+        })]
+      }finally {
+        this.inLoading = false
+      }
+    },
+    selectRow(val){
+      this.selectRows = val
+    },
+    async doInWares(){
+      try {
+        this.inWaresFormData.soiList = this.selectRows
+        this.inWaresFormData.soNo = createUniqueCodeByHead("RC")
+        this.inLoading = true
+        await inWare(this.inWaresFormData)
+        this.dialogVisible = false
+        this.$modal.msgSuccess("入库成功")
+        await this.pageSo()
+      }catch{}
+    },
+    /** 鼠标移入cell */
+    handleCellEnter(row, column, cell, event) {
+      const property = column.property
+      if (row.id && this.editProp.includes(property)) {
+        cell.querySelector('.item__txt').classList.add('item__txt--hover')
+      }
+    },
+    /** 鼠标移出cell */
+    handleCellLeave(row, column, cell, event) {
+      const property = column.property
+      if (row.id && this.editProp.includes(property)) {
+        cell.querySelector('.item__txt').classList.remove('item__txt--hover')
+      }
+    },
+    /** 点击cell */
+    handleCellClick(row, column, cell, event) {
+      const property = column.property
+      if (this.editProp.includes(property)) {
+        if (!row.id || property !== 'goods') {
+          // 保存cell
+          this.saveCellClick(row, cell)
+          cell.querySelector('.item__txt').style.display = 'none'
+          cell.querySelector('.item__input').style.display = 'inline'
+          cell.querySelector('input').focus()
+        }
+      }
+    },
+    /** 取消编辑状态 */
+    cancelEditable(cell) {
+      cell.querySelector('.item__txt').style.display = 'inline'
+      cell.querySelector('.item__input').style.display = 'none'
+    },
+    /** 保存进入编辑的cell */
+    saveCellClick(row, cell) {
+      const id = row.id
+      if (this.clickCellMap[id] !== undefined) {
+        if (!this.clickCellMap[id].includes(cell)) {
+          this.clickCellMap[id].push(cell)
+        }
+      } else {
+        this.clickCellMap[id] = [cell]
+      }
+    },
+    /** 保存数据 */
+    save(row) {
+      const id = row.id
+      // 取消本行所有cell的编辑状态
+      this.clickCellMap[id].forEach(cell => {
+        this.cancelEditable(cell)
+      })
+      this.clickCellMap[id] = []
+      this.tableKey++
+      this.selectRows = []
+    },
   }
 }
 </script>
 
 <style scoped lang="scss">
+.item {
+  .item__input {
+    display: none;
+    width: 100px;
+    /* 调整elementUI中样式 如果不需要调整请忽略 */
+    .el-input__inner {
+      height: 24px !important;
+    }
 
+    /* 调整elementUI中样式 如果不需要调整请忽略 */
+    .el-input__suffix {
+      i {
+        font-size: 12px !important;
+        line-height: 26px !important;
+      }
+    }
+  }
+
+  .item__txt {
+    box-sizing: border-box;
+    border: 1px solid transparent;
+    width: 100px;
+    line-height: 24px;
+    padding: 0 8px;
+  }
+
+  .item__txt--hover {
+    border: 1px solid #dddddd;
+    border-radius: 4px;
+    cursor: text;
+  }
+}
 </style>

src/views/repair/stockOperate/Components/WaresItem.vue

@@ -21,15 +21,15 @@
         </template>
       </el-table-column>
       <el-table-column label="单据号" align="center" prop="no" width="200"/>
-      <el-table-column label="客户车牌" align="center" prop="licenseNumber" />
+      <el-table-column label="客户车牌" align="center" prop="licenseNumber"/>
-      <el-table-column label="服务顾问" align="center" prop="adviserName" />
+      <el-table-column label="服务顾问" align="center" prop="adviserName"/>
-      <el-table-column label="申请人" align="center" prop="repairName" />
+      <el-table-column label="申请人" align="center" prop="repairName"/>
       <el-table-column label="状态" align="center" prop="status">
         <template slot-scope="scope">
-          <dict-tag :type="DICT_TYPE.TICKET_WARES_STATUS" v-model="scope.row.status" />
+          <dict-tag :type="DICT_TYPE.TICKET_WARES_STATUS" v-model="scope.row.status"/>
         </template>
       </el-table-column>
-      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="备注" align="center" prop="remark"/>
       <el-table-column label="操作" align="center">
         <template slot-scope="scope">
           <el-button type="text" size="mini" @click="handleDispose(scope.row)" icon="el-icon-edit">
@@ -55,7 +55,7 @@
         @selection-change="handleSelect"
         :key="tableKey"
       >
-        <el-table-column type="selection" width="80" align="center" />
+        <el-table-column type="selection" width="80" align="center"/>
         <el-table-column label="名称" align="center" prop="waresName" :show-overflow-tooltip="true"/>
         <el-table-column label="规格" align="center" prop="wares.model" width="180"/>
         <el-table-column label="领料数量" v-if="type" align="center" prop="waresCount" width="180">
@@ -76,10 +76,12 @@
         </el-table-column>
       </el-table>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" v-if="type" @click="handlePass" :disabled="selections.length === 0 || selections.filter(item => !item.isStock).length !== 0">
+        <el-button type="primary" v-if="type" @click="handlePass"
+                   :disabled="selections.length === 0 || selections.filter(item => !item.isStock).length !== 0">
           通知领料
         </el-button>
-        <el-button type="primary" v-else @click="handlePass" :disabled="selections.length === 0 || selections.filter(item => !item.isStock).length !== 0">
+        <el-button type="primary" v-else @click="handlePass"
+                   :disabled="selections.length === 0 || selections.filter(item => !item.isStock).length !== 0">
           通知退料
         </el-button>
         <el-button v-if="type" type="primary" @click="handleCreate" :disabled="selections.length === 0">
@@ -90,14 +92,14 @@
 
     <el-dialog title="采购单" :visible.sync="inStockDialog" width="80%" v-dialogDrag append-to-body>
       <el-table
-                :data="partList"
+        :data="partList"
-                :stripe="true"
+        :stripe="true"
-                :show-overflow-tooltip="true"
+        :show-overflow-tooltip="true"
-                show-summary
+        show-summary
-                :summary-method="getSummaries"
+        :summary-method="getSummaries"
-                @cell-mouse-enter="handleCellEnter"
+        @cell-mouse-enter="handleCellEnter"
-                @cell-mouse-leave="handleCellLeave"
+        @cell-mouse-leave="handleCellLeave"
-                @cell-click="handleCellClick"
+        @cell-click="handleCellClick"
       >
         <el-table-column label="序号" align="center">
           <template scope="scope">
@@ -163,7 +165,7 @@
         </el-col>
       </el-row>
       <div slot="footer" class="dialog-footer">
-        <el-button type="danger" @click="handleSubmit">结算</el-button>
+        <el-button type="primary" @click="handleSubmit">确定</el-button>
       </div>
     </el-dialog>
   </div>
@@ -182,12 +184,12 @@ import {getUserProfile} from "@/api/system/user";
 export default {
   name: "WaresItem",
   components: {WarehouseChoose, SoTable},
-  props:{
+  props: {
     type: Boolean,
   },
-  data(){
+  data() {
-    return{
+    return {
-      queryParams:{
+      queryParams: {
         pageNo: 1,
         pageSize: 10,
         query: null,
@@ -196,13 +198,13 @@ export default {
       },
       showSearch: true,
       loading: false,
-      list:[],
+      list: [],
       total: 0,
       dialogVisible: false,
-      items:[],
+      items: [],
       dialogLoading: false,
-      selections:[],
+      selections: [],
-      formData:{},
+      formData: {},
       inStockDialog: false,
       partList: [],
       includeColumn: ['count', 'totalPrice'],
@@ -217,86 +219,75 @@ export default {
   mounted() {
     this.getList()
   },
-  methods:{
+  methods: {
     // 通过 true是全部、false是选择
-    async handlePass(){
+    async handlePass() {
       // 生成领料单、退料单
-        this.formData.repairSo = {
+      this.formData.repairSo = {
-          soType: this.type ? "02" : "04",
+        soType: this.type ? "02" : "04",
-          soNo: createUniqueCodeByHead(this.type ? "LL" : "TL"),
+        soNo: createUniqueCodeByHead(this.type ? "LL" : "TL"),
-          userId: this.formData.repairId,
+        userId: this.formData.repairId,
-          userName: this.formData.repairName,
+        userName: this.formData.repairName,
-          soTime: parseTime(Date.now(), '{y}-{m}-{d}'),
+        soTime: parseTime(Date.now(), '{y}-{m}-{d}'),
-          soStatus: this.type ? "04" : "07",
+        soStatus: this.type ? "04" : "07",
-          // purchaseType: "01"
+        // purchaseType: "01"
+      }
+      this.formData.repairSois = [...this.selections.map(item => {
+        return {
+          soiType: this.type ? '02' : "04",
+          goodsId: item.waresId,
+          goodsCount: item.waresCount,
         }
-        this.formData.repairSois = [...this.selections.map(item => {
+      })]
+      if (this.type) {
+        this.formData.items = [...this.selections.map(item => {
           return {
-            soiType: this.type ? '02' : "04",
+            id: item.id,
-            goodsId: item.waresId,
-            goodsCount: item.waresCount,
-          }
-        })]
-        if (this.type){
-          this.formData.items = [...this.selections.map(item => {
-            return {
-              id: item.id,
-            }
-          })]
-        }
-        try {
-          await pass(this.formData)
-          this.$modal.msgSuccess("处理成功")
-          await this.getList()
-        }finally {
-          this.dialogVisible = false
-        }
-    },
-    // 生成采购 true是全部、false是选择
-    async handleCreate(flag){
-      this.inStockDialog = true
-      if (flag){
-        this.partList = [...this.items.map(item => {
-          return {
-            ...item.wares,
-            count: item.waresCount,
-            newPrice: item.wares.purPrice,
-            totalPrice: item.waresCount * item.wares.purPrice
-          }
-        })]
-      }else {
-        this.partList =  [...this.selections.map(item => {
-          return {
-            ...item.wares,
-            count: item.waresCount,
-            newPrice: item.wares.price,
-            totalPrice: item.waresCount * item.wares.price
           }
         })]
       }
+      try {
+        await pass(this.formData)
+        this.$modal.msgSuccess("处理成功")
+        await this.getList()
+      } finally {
+        this.dialogVisible = false
+      }
+    },
+    // 生成采购 true是全部、false是选择
+    async handleCreate() {
+      this.inStockDialog = true
+      this.partList = [...this.selections.map(item => {
+        return {
+          ...item.wares,
+          count: item.waresCount,
+          newPrice: item.wares.purPrice,
+          totalPrice: item.waresCount * item.wares.purPrice
+        }
+      })]
       this.dialogVisible = false
     },
-    async getList(){
+    async getList() {
       try {
         this.loading = true
         const res = await getPage(this.queryParams)
-        if (res.data){
+        if (res.data) {
           this.list = res.data.records
           this.total = res.data.total
         }
-      }finally {
+      } finally {
         this.loading = false
       }
     },
-    handleQuery(){
+    handleQuery() {
       this.queryParams.pageNo = 1
       this.getList()
     },
-    resetQuery(){
+    resetQuery() {
       this.resetForm('queryForm')
       this.handleQuery()
     },
-    async handleDispose(row){
+    async handleDispose(row) {
       this.formData = {}
       this.formData = {
         ...row
@@ -308,25 +299,25 @@ export default {
         const res = await listTwItem(data)
         this.items = res.data
         this.items.forEach(item => {
-              const count = item.waresAlreadyCount ? parseInt(item.waresCount) - parseInt(item.waresAlreadyCount) : item.waresCount
+          const count = item.waresAlreadyCount ? parseInt(item.waresCount) - parseInt(item.waresAlreadyCount) : item.waresCount
-              item.waresCount = this.type ? count : item.waresAlreadyCount
+          item.waresCount = this.type ? count : item.waresAlreadyCount
-              item.isStock = this.type ? count <= item.wares.stock : true
+          item.isStock = this.type ? count <= item.wares.stock : true
-            })
+        })
         this.items = this.items.filter(item => this.type ? item.waresStatus === '02' : item.waresAlreadyCount)
-        if (!this.type){
+        if (!this.type) {
           this.items = this.items.filter(item => item.waresAlreadyCount !== item.waresBackCount)
         }
-      }finally {
+      } finally {
         this.dialogLoading = false
       }
     },
-    getRowClass(row){
+    getRowClass(row) {
-      if (this.type && !row.row.isStock){
+      if (this.type && !row.row.isStock) {
         return 'stock'
       }
       return ''
     },
-    handleSelect(row){
+    handleSelect(row) {
       this.selections = row
     },
     // 设置不统计的字段
@@ -397,8 +388,10 @@ export default {
     /** 保存数据 */
     save(row) {
       // 更新表格的数据
-      row.isStock = this.type ? row.waresCount <= row.wares.stock : row.waresCount <= row.waresAlreadyCount
+      if (row.wares) {
-      if (!this.type && !row.isStock){
+        row.isStock = this.type ? row.waresCount <= row.wares.stock : row.waresCount <= row.waresAlreadyCount
+      }
+      if (!this.type && !row.isStock) {
         this.$modal.msgWarning("退料数量不能超过领取数量")
         row.waresCount = row.waresAlreadyCount
       }
@@ -424,18 +417,18 @@ export default {
       this.partList.splice(index, 1)
     },
     // 提交
-    async handleSubmit(){
+    async handleSubmit() {
       try {
         await this.createInit()
         await createRepairSo(this.formData)
         this.inStockDialog = false
         this.$modal.msgSuccess("新增成功")
         await this.getList()
-      }catch{
+      } catch {
       }
     },
     // 提交前的构建
-    async createInit(){
+    async createInit() {
       const res = await getUserProfile()
       this.formData = {}
       this.formData = {
@@ -446,8 +439,10 @@ export default {
         userName: res.data.nickname,
         soTime: parseTime(Date.now(), '{y}-{m}-{d}'),
         itemCount: this.partList.length,
-        totalPrice: this.partList.reduce((x, y) => {return x + y.totalPrice}, 0),
+        totalPrice: this.partList.reduce((x, y) => {
-        soStatus: "03",
+          return x + y.totalPrice
+        }, 0),
+        soStatus: "02",
         remark: this.remark,
       }
       this.formData.goodsList = [...this.partList.map(item => {
@@ -467,9 +462,10 @@ export default {
 </script>
 
 <style scoped lang="scss">
-::v-deep .el-table .stock td{
+::v-deep .el-table .stock td {
   color: #ff0000 !important; /* 红色背景 */
 }
+
 .item {
   .item__input {
     display: none;

src/views/repair/tickets/Components/TicketManagerItem.vue

@@ -63,7 +63,7 @@
           <el-button size="mini"
                      v-if=" scope.row.ticketsWorkStatus !== '01' && userRole === 'repair_staff' && !isFinish && nowUser.id === scope.row.nowRepairId"
                      type="text" icon="el-icon-monitor" @click="handleRecord(scope.row, 'sgz')">
-            过程记录{{scope.row.ticketsWorkStatus !== '01' && ((userRole === 'service_advisor' || userRole === 'general_inspection') && !isFinish)}}
+            过程记录
           </el-button>
           <el-button size="mini"
                      v-if="scope.row.ticketsWorkStatus !== '01' && userRole === 'repair_staff' && !isFinish && nowUser.id === scope.row.nowRepairId"

src/views/repair/tickets/Components/TicketSearch.vue

@@ -14,16 +14,17 @@
           end-placeholder="结束日期">
         </el-date-picker>
       </el-form-item>
-      <el-form-item v-if="TicketType === 'tp'"  label="服务顾问" prop="userId">
+      <el-form-item v-if="TicketType === 'tp'" label="服务顾问" prop="userId">
-        <StaffChoose />
+        <StaffChoose/>
       </el-form-item>
       <el-form-item v-if="TicketType === 'tu'" label="维修类别" prop="repairType">
         <el-select v-model="queryParams.repairType" size="small">
-          <el-option v-for="item in this.getDictDatas(DICT_TYPE.REPAIR_TYPE)" :key="item.value" :label="item.label" :value="item.value" />
+          <el-option v-for="item in this.getDictDatas(DICT_TYPE.REPAIR_TYPE)" :key="item.value" :label="item.label"
+                     :value="item.value"/>
         </el-select>
       </el-form-item>
       <el-form-item v-if="TicketType === 'tp'" label="类型" prop="repairType">
-        <RepairTypeChoose @selected="getRepairType" />
+        <RepairTypeChoose @selected="getRepairType"/>
       </el-form-item>
       <el-form-item label="门店" prop="corpId">
         <CorpChoose v-model="queryParams.corp"/>
@@ -41,8 +42,9 @@
       </el-col>
       <right-toolbar :showSearch.sync="showSearch"></right-toolbar>
     </el-row>
-    <TicketTable :ticket-type="TicketType" :list="list" @setVoid="getPage" :is-w-x-c-w="isWXCW"/>
+    <TicketTable :ticket-type="TicketType" :list="list" @setVoid="getPage" :is-w-x-c-w="isCW"/>
-    <pagination @pagination="getPage" v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+    <pagination @pagination="getPage" v-show="total > 0" :total="total" :page.sync="queryParams.pageNo"
+                :limit.sync="queryParams.pageSize"
     />
   </div>
 </template>
@@ -63,8 +65,8 @@ export default {
     RepairTypeChoose,
     CorpChoose
   },
-  props:{
+  props: {
-    TicketType:{
+    TicketType: {
       type: String,
       defaultValue: 'tp',
       required: true
@@ -72,7 +74,7 @@ export default {
   },
   data() {
     return {
-      queryParams:{
+      queryParams: {
         pageNo: 1,
         pageSize: 10,
         ticketsStatus: null,
@@ -85,25 +87,30 @@ export default {
       showSearch: true,
       total: 0,
       list: [],
-      isWXCW: false
+      isCW: false
     }
   },
   mounted() {
     this.getPage()
-    this.getIsWXCW()
+    this.getIsCW()
   },
   methods: {
     // 是否是财务
-    async getIsWXCW(){
+    async getIsCW() {
-      const res = await checkRole("wxcw")
+      const kjRes = await checkRole("kj")
-      this.isWXCW = res.data
+      if (kjRes.data) {
+        this.isCW = kjRes.data
+      } else {
+        const cnRes = await checkRole("cn")
+        this.isCW = cnRes.data
+      }
     },
     // 类型选择
-    getRepairType(data){
+    getRepairType(data) {
       console.log(data)
     },
-    async getPage(){
+    async getPage() {
-      switch (this.TicketType){
+      switch (this.TicketType) {
         case "tu":
           this.queryParams.ticketsStatus = "01"
           break
@@ -121,11 +128,11 @@ export default {
       this.list = res.data.records
       this.total = res.data.total
     },
-    handleQuery(){
+    handleQuery() {
       this.queryParams.pageNo = 1
       this.getPage()
     },
-    handleReset(){
+    handleReset() {
       this.resetForm("queryForm")
       this.queryParams.corp = null
       this.handleQuery()

src/views/repair/tickets/Components/TicketTable.vue

@@ -104,7 +104,7 @@
           <el-button size="mini" type="text" icon="el-icon-view" @click="handleShow(scope.row)"
           >查看
           </el-button>
-          <el-button v-if="TicketType === 'tu' && isWXCW && !scope.row.payType" size="mini" type="text" icon="el-icon-finished"
+          <el-button v-if="TicketType === 'tu' && isWXCW && scope.row.isFinish === '1'" size="mini" type="text" icon="el-icon-finished"
                      @click="handlePaid(scope.row)"
           >结算
           </el-button>

src/views/repair/tickets/form/UserAndCarForm.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-dialog title="客户信息" :visible.sync="dialogVisible" width="80%" v-dialogDrag append-to-body>
+    <el-dialog title="客户信息" ref="dialogRef" :visible.sync="dialogVisible" width="80%" v-dialogDrag append-to-body v-loading="dialogLoading">
       <el-form size="small" ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading"
                label-width="100px">
         <el-collapse v-model="activeNames">
@@ -68,16 +68,16 @@
                 </el-form-item>
               </el-col>
             </el-row>
-            <el-row :gutter="2">
+<!--            <el-row :gutter="2">-->
-              <el-col :span="12">
+<!--              <el-col :span="12">-->
-                <el-form-item label="选择会员" prop="userInfo.memberLevelId">
+<!--                <el-form-item label="选择会员" prop="userInfo.memberLevelId">-->
-                  <el-select v-model="formData.userInfo.memberLevelId" placeholder="请选择会员">
+<!--                  <el-select v-model="formData.userInfo.memberLevelId" placeholder="请选择会员">-->
-                    <el-option v-for="(item,index) in levelList" :key="item.id"
+<!--                    <el-option v-for="(item,index) in levelList" :key="item.id"-->
-                               :label="item.name" :value="item.id"/>
+<!--                               :label="item.name" :value="item.id"/>-->
-                  </el-select>
+<!--                  </el-select>-->
-                </el-form-item>
+<!--                </el-form-item>-->
-              </el-col>
+<!--              </el-col>-->
-            </el-row>
+<!--            </el-row>-->
             <el-row>
               <el-col :span="24">
                 <el-form-item label="联系地址" prop="userInfo.address">
@@ -318,26 +318,34 @@ export default {
       sexDictDatas: getDictDatas(DICT_TYPE.DICT_SYS_USER_SEX),
       cusBusiTypeDictDatas: getDictDatas(DICT_TYPE.DICT_CUS_BUSI_TYPE),
       buttonLoading: false,
+      dialogLoading: null,
     }
   },
   methods: {
     async open(data) {
-      this.reset()
-      if (data?.userInfo?.id){
-        this.formData.userInfo = {
-          ...this.formData.userInfo,
-          ...data.userInfo
-        }
-      }
-      if (data?.carInfo?.id){
-        this.formData.carInfo = {
-          ...this.formData.carInfo,
-          ...data.carInfo,
-          brandAndModel: [data.carInfo?.carBrand, data.carInfo?.carModel]
-        }
-      }
-      await this.listLevel()
       this.dialogVisible = true
+      try {
+        this.reset()
+        // this.dialogLoading = this.$loading({
+        //   target: this.$refs.dialogRef.$el
+        // })
+        if (data?.userInfo?.id){
+          this.formData.userInfo = {
+            ...this.formData.userInfo,
+            ...data.userInfo
+          }
+        }
+        if (data?.carInfo?.id){
+          this.formData.carInfo = {
+            ...this.formData.carInfo,
+            ...data.carInfo,
+            brandAndModel: [data.carInfo?.carBrand, data.carInfo?.carModel]
+          }
+        }
+        // await this.listLevel()
+      }finally {
+        // this.dialogLoading.close()
+      }
     },
     async compute(){
       this.buttonLoading = true

src/views/rescue/screen/api/rescueBigScreen.js

@@ -0,0 +1,70 @@
+import request from '@/utils/request'
+
+// 救援大屏救援订单
+export function getRescueOrderCount(params) {
+  return request({
+    url: '/rescue/bigScree/getRescueOrderCount',
+    method: 'get',
+    params: params
+  })
+}
+// 救援大屏日常费用统计接口
+export function getRescueExpenseCount(params) {
+  return request({
+    url: '/rescue/bigScree/getRescueExpenseCount',
+    method: 'get',
+    params: params
+  })
+}
+// 救援大屏获取经营分析接口
+export function getManageAnalyze(params) {
+  return request({
+    url: '/rescue/bigScree/getManageAnalyze',
+    method: 'get',
+    params: params
+  })
+}
+// 救援大屏获取出车次数统计接口
+export function getDrawOutAVehicleCount(params) {
+  return request({
+    url: '/rescue/bigScree/getDrawOutAVehicleCount',
+    method: 'get',
+    params: params
+  })
+}
+// 救援大屏获取司机排名接口
+export function getDriverSort(params) {
+  return request({
+    url: '/rescue/bigScree/getDriverSort',
+    method: 'get',
+    params: params
+  })
+}
+// 救援大屏获取救援详细数据接口
+export function getRescueStatistics(params) {
+  return request({
+    url: '/rescue/bigScree/getRescueStatistics',
+    method: 'get',
+    params: params
+  })
+}
+// 救援大屏获取车辆预警接口
+export function getRescueCarEarlyWarning(params) {
+  return request({
+    url: '/rescue/bigScree/getRescueCarEarlyWarning',
+    method: 'get',
+    params: params
+  })
+}
+// 救援大屏获取救援订单占比接口
+export function getRescueOrderByRoad(params) {
+  return request({
+    url: '/rescue/bigScree/getRescueOrderByRoad',
+    method: 'get',
+    params: params
+  })
+}
+
+
+
+

src/views/rescue/screen/rescueBigScreen.vue

@@ -1,13 +1,852 @@
 <template>
+  <div class="cont">
+    <div class="top_">
+      <div>道路救援监管云平台</div>
+    </div>
+    <!--    -->
+    <div class="content_">
+      <div class="c_left">
+        <div class="six_box">
+          <div class="s_title">
+            救援订单统计
+          </div>
+          <div class="dis-t">
 
+            <div class="lan-you">
+              <div class="yi" :class="{'er' : qhindex == index}" v-for="(item,index) in zilist" :key="index"
+                   @click="gbindex(index,item.unit)"> {{ item.text }}
+              </div>
+            </div>
+            <div class="lan-you">
+              <div class="yi" :class="{'er' : typeIndex == index}" v-for="(item,index) in typeList" :key="index"
+                   @click="indexType(index,item.type)"> {{ item.text }}
+              </div>
+            </div>
+          </div>
+          <div class="echaets_box">
+            <div id="rescueOrder" style="width: 400px; height: 267px;"></div>
+          </div>
+        </div>
+        <div class="six_box">
+          <div class="s_title">
+            日常费用统计
+          </div>
+          <div class="dis-t">
+
+            <div class="lan-you">
+              <div class="yi" :class="{'er' : qhindex3 == index}" v-for="(item,index) in zilist" :key="index"
+                   @click="gbindex3(index,item.unit)"> {{ item.text }}
+              </div>
+            </div>
+          </div>
+          <div class="echaets_box">
+            <div id="rescueExpense" style="width: 400px; height: 267px;"></div>
+          </div>
+        </div>
+        <div class="six_box">
+          <div class="s_title">
+            经营贡献分析
+          </div>
+          <div class="dis-t">
+
+            <div class="lan-you">
+              <div class="yi" :class="{'er' : qhindex1 == index}" v-for="(item,index) in zilist" :key="index"
+                   @click="gbindex1(index,item.unit)"> {{ item.text }}
+              </div>
+            </div>
+          </div>
+          <div class="echaets_box">
+            <div id="sltj" style="width: 400px; height: 267px;"></div>
+          </div>
+        </div>
+      </div>
+      <div class="c_cont">
+        <div class="tab_">
+          <!--          <div @click="countOrAmount()" class="tab_buttom tab_acvit">数量</div>-->
+          <!--          <div @click="countOrAmount()" class="tab_buttom">金额</div>-->
+        </div>
+
+
+        <div class="tab_bt">
+          <el-date-picker
+            v-model="value1"
+            type="daterange"
+            @change="handleChange"
+            value-format="yyyy-MM-dd"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期">
+          </el-date-picker>
+        </div>
+        <div class="five_box">
+          <div class="f_box">
+            <div class="img_left">
+              <!--              <img src="./imgs/1.png" style="width: 60px;height: 60px">-->
+              订单数量
+            </div>
+            <div>
+              <div class="f_size">{{ data2.allNum || 0 }}</div>
+              <!--              <div class="f_size">2</div>-->
+              <!--              <div class="f_num">{{ statusTickets[3].value }}</div>-->
+            </div>
+          </div>
+          <div class="f_box">
+            <div class="img_left">
+              <!--              <img src="./imgs/2.png" style="width: 60px;height: 60px">-->
+              完成数量
+            </div>
+            <div>
+              <div class="f_size">{{ data2.ywcNum || 0 }}</div>
+              <!--              <div class="f_num">{{ statusTickets[4].value }}</div>-->
+            </div>
+          </div>
+          <div class="f_box">
+            <div class="img_left">
+              <!--              <img src="./imgs/3.png" style="width: 60px;height: 60px">-->
+              检测中数量
+            </div>
+            <div>
+              <div class="f_size">{{ data2.jxzNum || 0 }}</div>
+              <!--              <div class="f_num">{{ statusTickets[0].value }}</div>-->
+            </div>
+          </div>
+        </div>
+        <div class="five_box">
+          <div class="f_box">
+            <div class="img_left">
+              <!--              <img src="./imgs/1.png" style="width: 60px;height: 60px">-->
+              公示价格
+            </div>
+            <div>
+              <!--              <div class="f_size">1</div>-->
+              <div class="f_size">{{ data1.gsAmount || 0 }}</div>
+              <!--              <div class="f_num">{{ statusTickets[3].value }}</div>-->
+            </div>
+          </div>
+          <div class="f_box">
+            <div class="img_left">
+              <!--              <img src="./imgs/2.png" style="width: 60px;height: 60px">-->
+              应收款
+            </div>
+            <div>
+              <div class="f_size">{{ data1.ysAmount || 0 }}</div>
+              <!--              <div class="f_num">{{ statusTickets[4].value }}</div>-->
+            </div>
+          </div>
+          <div class="f_box">
+            <div class="img_left">
+              已收款
+            </div>
+            <div>
+              <div class="f_size">{{ data1.yjsAmount || 0 }}</div>
+            </div>
+          </div>
+          <div class="f_box">
+            <div class="img_left">
+              <!--                        <img src="./imgs/4.png" style="width: 60px;height: 60px">-->
+              待收款
+            </div>
+            <div>
+              <div class="f_size">{{ data1.ysAmount - data1.yjsAmount || 0 }}</div>
+              <!--              <div class="f_num">{{ statusTickets[1].value }}</div>-->
+            </div>
+          </div>
+        </div>
+        <div class="co_title">
+          司机贡献排序
+        </div>
+        <div class="list_long">
+          <div class="long_title">
+            <div class="l_one">序号</div>
+            <div class="l_two">姓名</div>
+            <div class="l_three">营业额</div>
+            <div class="l_four">订单量</div>
+            <!--            <div class="l_four">创建时间</div>-->
+          </div>
+          <div class="ot_vox">
+            <div class="long_box" v-for="(item,index) in data3" :key="index">
+              <div class="l_one">{{ item.sort || '' }}</div>
+              <div class="l_two">{{ item.nickname || '' }}</div>
+              <div class="l_three">{{ item.money || '' }}</div>
+              <div class="l_four">{{ item.count || '' }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="c_right">
+        <div class="six_box">
+          <div class="s_title">
+            救援订单数占比
+          </div>
+          <div class="echaets_box">
+            <div id="rescueOrderByRoad" style="width: 400px; height: 267px;"></div>
+          </div>
+        </div>
+        <div class="six_box">
+          <div class="s_title">
+            出车次数统计
+          </div>
+          <div class="dis-t">
+
+            <div class="lan-you">
+              <div class="yi" :class="{'er' : qhindex2 == index}" v-for="(item,index) in zilist" :key="index"
+                   @click="gbindex2(index,item.unit)"> {{ item.text }}
+              </div>
+            </div>
+          </div>
+          <div class="echaets_box">
+            <div id="drawOutAVehicle" style="width: 400px; height: 267px;"></div>
+          </div>
+        </div>
+        <div class="six_box">
+          <div class="s_title">
+            救援车辆预警
+          </div>
+          <div class="echaets_box">
+            <div id="jcsptj" style="width: 400px; height: 267px;"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
 </template>
 
 <script>
+import * as echarts from 'echarts';
+import * as jcBigScreen from '@/views/inspection/screen/api/jcBigScreen';
+import {
+  chartInfoNum,
+  chartLineInspectionAmount,
+  getfive1,
+  getfive2,
+  getfive3, hotGoodsList
+} from "@/views/inspection/screen/api/jcBigScreen";
+import * as rescueBigScreen from "@/views/rescue/screen/api/rescueBigScreen";
+import {getDriverSort} from "@/views/rescue/screen/api/rescueBigScreen";
+
 export default {
-  name: 'rescueBigScreen'
+  name: 'Index',
+  components: {},
+  data() {
+    const formatDate = (date) => {
+      return date.toISOString().split('T')[0];
+    };
+    return {
+      Amount: [],
+      unit: 'day',
+      unit1: 'day',
+      unit2: 'day',
+      unit3: 'day',
+      unit4: 'recentMonth',
+      data2: '',
+      data1: '',
+      data3: '',
+      chartData1: {},
+      params: {
+        unit: this.unit,
+      },
+      typeIndex:0,
+      type:'count',
+      // value1: [new Date(), new Date()],
+      value1: [formatDate(new Date()), formatDate(new Date())], // 格式化日期
+      qhindex: 0,
+      qhindex1: 0,
+      qhindex2: 0,
+      qhindex3: 0,
+      zilist: [
+        {text: '日', unit: 'day'},
+        {text: '周', unit: 'week'},
+        {text: '月', unit: 'month'},
+        {text: '年', unit: 'year'},
+
+      ],
+      timelist: [
+        {text: '日', unit: 'day'},
+        {text: '周', unit: 'week'},
+        {text: '月', unit: 'month'},
+        {text: '年', unit: 'year'},
+
+      ],
+      typeList: [
+        {text: '数量', type : 'count'},
+        {text: '金额', type : 'money'},
+      ],
+    }
+  },
+  created() {
+    this.customerSource()
+    this.getServerData1()
+    this.chartInfoNum()
+    this.chartLineInspectionNum()
+    this.chartInfoRatio()
+    this.getfive2()
+    this.getfive1()
+    this.getfive3()
+    this.getProduct()
+
+  },
+  mounted() {
+
+  },
+  methods: {
+    handleChange() {
+      console.log('选择的时间', this.value1)
+      this.getfive2()
+      this.getfive1()
+    },
+    gbindex(index, unit) {
+      this.qhindex = index
+      this.unit = unit
+      this.customerSource()
+    },
+    gbindex1(index, unit) {
+      console.log('22', unit);
+      this.qhindex1 = index
+      this.unit1 = unit
+      this.chartInfoNum()
+    },
+    gbindex2(index, unit) {
+      console.log('33');
+      this.qhindex2 = index
+      this.unit2 = unit
+      this.chartInfoRatio()
+    },
+    gbindex3(index, unit) {
+      console.log('33');
+      this.qhindex3 = index
+      this.unit3 = unit
+      this.getServerData1()
+    },
+    indexType(index, type) {
+      this.typeIndex = index
+      this.type = type
+      this.customerSource()
+    },
+
+    /**
+     * 日常费用
+     * @returns {Promise<void>}
+     */
+    async getServerData1() {
+      const params = {
+        timeType: this.unit3,
+      }
+      let res = await rescueBigScreen.getRescueExpenseCount(params)
+      console.log('日常费用', res)
+      // res.data.series.forEach(item => {
+      //   item.type = 'bar'
+      // })
+      var chartDom = document.getElementById('rescueExpense');
+      var myChart = echarts.init(chartDom);
+      var option;
+      option = {
+        legend: {},
+        tooltip: {},
+        xAxis: {
+          type: 'category'
+        },
+        dataset: {
+          source: res.data.source
+        },
+        yAxis: {},
+        series:[{ type: 'bar' }, { type: 'bar' }]
+      };
+      option && myChart.setOption(option);
+    },
+    /**
+     * 检测商品统计
+     * @returns {Promise<void>}
+     */
+    async getProduct() {
+      let res = await jcBigScreen.hotGoodsList()
+      console.log('检测商品统计', res)
+      res.data.forEach(item => {
+        item.name = item.goodsName
+        item.value = item.salesNum
+      })
+      setTimeout(() => {
+        var chartDom = document.getElementById('jcsptj');
+        var myChart = echarts.init(chartDom);
+        var option;
+        option = {
+          title: {
+            // text: 'Referer of a Website',
+            // subtext: 'Fake Data',
+            left: 'center'
+          },
+          tooltip: {
+            trigger: 'item'
+          },
+          legend: {
+            orient: 'vertical',
+            left: 'left'
+          },
+          series: [
+            {
+              // name: 'Access From',
+              type: 'pie',
+              radius: '50%',
+              data: res.data,
+              emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+              }
+            }
+          ]
+        };
+        option && myChart.setOption(option);
+      }, 2000)
+
+    },
+    /**
+     * 数量统计
+     * @returns {Promise<void>}
+     */
+    async chartInfoNum() {
+      const params = {
+        unit: this.unit1,
+      }
+      let res = await jcBigScreen.chartInfoNum(params)
+      console.log('数量统计', res)
+      res.data.series.forEach(item => {
+        item.type = 'bar'
+      })
+      var chartDom = document.getElementById('sltj');
+      var myChart = echarts.init(chartDom);
+      var option;
+      option = {
+        xAxis: {
+          type: 'category',
+          data: res.data.categories
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: res.data.series
+      };
+      option && myChart.setOption(option);
+    },
+    /**
+     * 出车次数
+     * @returns {Promise<void>}
+     */
+    async chartInfoRatio() {
+      const params = {
+        timeType: this.unit2,
+      }
+      let res = await rescueBigScreen.getDrawOutAVehicleCount(params)
+      console.log('出车次数', res)
+      var chartDom = document.getElementById('drawOutAVehicle');
+      var myChart = echarts.init(chartDom);
+      var option;
+      option = {
+        xAxis: {
+          type: 'category',
+          data: res.data.xList
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: res.data.yList,
+            type: 'line',
+            smooth: true
+          }
+        ]
+      };
+      option && myChart.setOption(option);
+    },
+    /**
+     * 救援订单占比
+     * @returns {Promise<void>}
+     */
+    async chartLineInspectionNum() {
+      // const params = {
+      //   timeType: this.unit,
+      // }
+      let res = await rescueBigScreen.getRescueOrderByRoad()
+      console.log('救援订单占比', res)
+      res.data.forEach(item => {
+        item.value = item.count
+      })
+      var chartDom = document.getElementById('rescueOrderByRoad');
+      var myChart = echarts.init(chartDom);
+      var option;
+      option = {
+        title: {
+          // text: 'Referer of a Website',
+          // subtext: 'Fake Data',
+          left: 'center'
+        },
+        tooltip: {
+          trigger: 'item'
+        },
+        // legend: {
+        //   orient: 'vertical',
+        //   left: 'left'
+        // },
+        series: [
+          {
+            // name: 'Access From',
+            type: 'pie',
+            radius: '50%',
+            data: res.data,
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      };
+      option && myChart.setOption(option);
+    },
+
+    /**
+     * 救援大屏救援订单
+     */
+    async customerSource() {
+      const params = {
+        timeType: this.unit,
+        type: this.type
+      }
+      const res = await rescueBigScreen.getRescueOrderCount(params);
+      const name = []
+      const data = []
+      res.data.forEach(item => {
+        name.push(item.name)
+        data.push(item.value)
+      })
+      var chartDom = document.getElementById('rescueOrder');
+      var myChart = echarts.init(chartDom);
+      var option;
+      option = {
+        xAxis: {
+          type: 'category',
+          data: name
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: {
+          data: data,
+          type: 'line'
+        }
+      };
+      option && myChart.setOption(option);
+    },
+    /**
+     * 订单数量
+     */
+    async getfive2() {
+      let data2 = {
+        startTime: this.value1[0],
+        endTime: this.value1[1]
+      }
+      console.log('订单数量等参数', data2)
+      const res = await getfive2(data2)
+      console.log('订单数量等', res.data)
+      this.data2 = res.data
+    },
+    /**
+     * 营业额统计
+     * @returns {Promise<void>}
+     */
+    async getfive1() {
+      let data1 = {
+        startTime: this.value1[0],
+        endTime: this.value1[1]
+      }
+      const res = await getfive1(data1)
+      console.log('营业额统计', res.data)
+      this.data1 = res.data
+    },
+    /**
+     * 客户来源
+     * @returns {Promise<void>}
+     */
+    async getfive3() {
+      const params = {
+        timeType: this.unit4
+      }
+      const res = await getDriverSort(params)
+      console.log('司机排名', res.data)
+      this.data3 = res.data
+    }
+  }
+
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.cont {
+  background: #020F32;
+  //background: url("./imgs/back.png") no-repeat;
+  background-size: 100% 100%;
+  width: 100%;
+  height: 100vh;
+}
+
+.top_ {
+  width: 100%;
+  height: 86px;
+  background: url("./imgs/top.png") no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 50px;
+  color: #FFFFFF;
+  font-weight: bold;
+  margin-bottom: 15px;
+}
+
+.content_ {
+  width: 100%;
+  display: flex;
+  //align-items: center;
+  justify-content: space-between;
+}
+
+.dis-t {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 10px auto;
+}
+
+.lan-you {
+  display: flex;
+  align-items: center;
+}
+
+.c_left {
+  width: 25%;
+}
+
+.c_cont {
+  width: 50%;
+}
+
+.tab_ {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  font-size: 18px;
+  color: #FFFFFF;
+  margin: 15px auto;
+}
+
+.yb_title {
+  text-align: center;
+  font-size: 18px;
+  color: #FFFFFF;
+  margin: 15px auto;
+}
+
+.tab_bt {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  border-bottom: 4px solid #0174F6;
+  box-sizing: border-box;
+  padding-bottom: 20px;
+}
+
+.tab_buttom {
+  width: 120px;
+  height: 32px;
+
+  border: 1px solid #0174F6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+yb_title {
+  font-size: 16px;
+  color: #FFFFFF;
+  text-align: center;
+  width: 100%;
+}
+
+.numlist {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.num_box {
+  width: 38px;
+  height: 50px;
+  border-radius: 0px 0px 0px 0px;
+  font-weight: 600;
+  font-size: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: url("./imgs/numbcak.png") no-repeat;
+  background-size: 100% 100%;
+  color: #FFFFFF;
+  margin: 0px 10px;
+}
+
+.yb_ {
+  width: 50%;
+}
+
+.tab_acvit {
+  background: #0174F6 !important;
+}
+
+.five_box {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  margin: 30px auto;
+}
+
+.f_size {
+  font-size: 14px;
+  color: #FFFFFF;
+}
+
+.f_num {
+  font-weight: bold;
+  font-size: 24px;
+  color: #FFFFFF;
+}
+
+.img_left {
+  width: 60px;
+  height: 60px;
+  margin-right: 10px;
+}
+
+.f_box {
+  display: flex;
+  align-items: center;
+}
+
+.co_title {
+  width: 100%;
+  height: 32px;
+  background: url("./imgs/c_title.png") no-repeat;
+  background-size: 100% 100%;
+  font-weight: 500;
+  font-size: 20px;
+  color: #FFFFFF;
+  box-sizing: border-box;
+  padding-left: 40px;
+}
+
+.s_title {
+  width: 90%;
+  height: 32px;
+  background: url("./imgs/title.png") no-repeat;
+  background-size: 100% 100%;
+  font-weight: 500;
+  font-size: 20px;
+  color: #FFFFFF;
+  box-sizing: border-box;
+  padding-left: 40px;
+  margin: 0px auto;
+}
+
+.echaets_box {
+  width: 90%;
+  height: 267px;
+  margin: 0px auto;
+  border-bottom: 1px solid #0174F6;
+}
+
+.list_long {
+  width: 100%;
+  height: 563px;
+
+}
+
+.l_one {
+  width: 30%;
+  text-align: left;
+  font-size: 18px;
+  color: rgba(255, 255, 255, 0.7);
+  overflow: hidden;
+  box-sizing: border-box;
+  padding-left: 35px;
+}
+
+.l_two {
+  width: 20%;
+  text-align: center;
+  font-size: 18px;
+  color: rgba(255, 255, 255, 0.7);
+  overflow: hidden;
+}
+
+.l_three {
+  width: 20%;
+  text-align: center;
+  font-size: 18px;
+  color: rgba(255, 255, 255, 0.7);
+  overflow: hidden;
+}
+
+.l_four {
+  width: 30%;
+  text-align: right;
+  font-size: 18px;
+  color: rgba(255, 255, 255, 0.7);
+  overflow: hidden;
+  box-sizing: border-box;
+  padding-right: 35px;
+}
+
+.long_title {
+  width: 100%;
+  height: 58px;
+  background: rgba(1, 116, 246, 0.1);
+  background: url("./imgs/c_list.png") no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 10px auto;
+}
+
+.ot_vox {
+  width: 100%;
+  height: 500px;
+  overflow: auto;
+  scrollbar-width: none;
+}
+
+.long_box {
+  width: 100%;
+  height: 58px;
+  background: rgba(1, 116, 246, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 10px auto;
+}
+
+.six_box {
+  margin-bottom: 15px;
+}
+
+.c_right {
+  width: 25%;
+}
 
 </style>