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

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>