Merge branch 'master' of http://120.76.84.145:10101/gitblit/r/H5/shehong-ve...

pyt

2025-03-06 7f0d3f73c6d91c15778753e21f1b90f50f689504

Merge branch 'master' of http://120.76.84.145:10101/gitblit/r/H5/shehong-vehicle-supervision

 .gitignore

@@ -10,6 +10,7 @@
npm-debug.log*

yarn-debug.log*

yarn-error.log*

package-lock.json



# Editor directories and files

.idea


 package.json

@@ -17,10 +17,10 @@
    "echarts": "^5.5.0",

    "element-ui": "^2.15.14",

    "ezuikit-js": "^7.7.10",

    "html2canvas": "^1.4.1",

    "moment": "^2.29.4",

    "qs": "^6.11.2",

    "vue": "^2.6.10",

    "html2canvas": "^1.4.1",

    "vue-cookies": "^1.8.3",

    "vue-router": "^3.6.5",

    "vuex-persistedstate": "^4.1.0"


 src/assets/homeImg/QQ20241223-103023.mp4

Binary files differ

 src/main.js

@@ -10,6 +10,8 @@
Vue.use(ElementUI)

Vue.prototype.$cookies = cookies;

Vue.prototype.$baseURL = apiConfig.baseURL

Vue.prototype.$mapKey = apiConfig.mapKey

Vue.prototype.$secretKey = apiConfig.secretKey

Vue.config.productionTip = false

/* 全局TableHeight */

Vue.prototype.$baseTableHeight = (formType) => {


 src/utils/baseurl.js

@@ -2,6 +2,8 @@
    // 开发环境
    development: {
        baseURL: "",
        mapKey: "67968c82f27c7e2cb9f40c1a9aa3042b",
        secretKey: "37ce61ae86efa5ad82b649a277f5097c",
    },
    // 生产环境
    production: {

 src/view/home/index.vue

@@ -206,14 +206,14 @@


<script>

import * as echarts from "echarts";

import html2canvas from 'html2canvas';

import html2canvas from "html2canvas";

import AMapLoader from "@amap/amap-jsapi-loader";

export default {

  data() {

    return {

      activeIndex: "1",

      activeIndex2: "1",

      countList: [], //预警情况统计数据

      countList: [1, 2, 3], //预警情况统计数据

      rankList: [

        { name: "射洪客运公司", value: 90 },

        { name: "滴滴网约车客运公司", value: 80 },

@@ -232,6 +232,22 @@
      carList: [], //车辆列表数据

    };

  },

  watch: {

    map(val) {

      if (val) {

        HTMLCanvasElement.prototype.getContext = (function (origFn) {

          return function (type, attributes) {

            if (type.indexOf("webgl") > -1) {

              attributes = Object.assign({}, attributes, {

                preserveDrawingBuffer: true,

              });

            }

            return origFn.call(this, type, attributes);

          };

        })(HTMLCanvasElement.prototype.getContext);

      }

    },

  },

  created() {

    //初始化窗口点击事件

    window.toCarDetail = (record) => {

@@ -244,10 +260,6 @@
    window.shotScreen = () => {

      this.shotScreen();

    };

  },

  onload() {

    // if (this.carList.length > 0) {

    // }

  },

  mounted() {

    let arr = [

@@ -334,6 +346,7 @@
    this.initMap();

    setTimeout(() => {

      this.addMarker(this.carList, [105.444444, 31.523333]);

      this.getCountList();

    }, 1000);

  },

  methods: {

@@ -441,7 +454,7 @@
          let marker = new AMap.Marker({

            position: [Number(item.longitude), Number(item.latitude)], //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]

            map: this.map,

            zooms: [5, 20],

            zooms: [13, 20],

            icon: new AMap.Icon({

              size: iconConfig.size,

              image: iconConfig.icon,

@@ -458,13 +471,25 @@
        });

      }

    },

    // <img

    //   style="width: 460px; height: 330px; border-radius: 9px" id="monitoringCard"

    //   src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"

    // />

    listRender(record) {

      return `<div style="background: #ffffff; padding: 24px 20px;z-index: 999">

          <div style="position: relative; width: 460px; height: 330px">

            <img

              style="width: 460px; height: 330px; border-radius: 9px" id="monitoringCard"

              src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"

            />

           
              <canvas ref="canvas" id="myCanvas" style="width: 460px; height: 330px;display:none" crossOrigin="anonymous"></canvas>

              <video

              ref="video"

               style="width: 460px; height: 330px; border-radius: 9px" 
               id="monitoringCard"

               ref="monitoringCard"

                :controls="false"

                autoPlay

                src="${require("../../assets/homeImg/QQ20241223-103023.mp4")}"

                width="620">

              </video>

            <div style="position: absolute; right: 11px; top: 10px">

              <!-- 全屏 -->

              <div

@@ -509,133 +534,189 @@
      }

    },

    chartTnit(x, y1, y2) {

      // 基于准备好的dom，初始化echarts实例

      // 基于准备好的dom，初始化echarts实例 grid: {

      //   width: "auto",

      //   height: "auto",

      //   left: "0",

      //   right: "5%",

      //   bottom: "0",

      //   top: "15%",

      //   containLabel: true,

      // },

      const myChart = echarts.init(document.getElementById("countChart"));

      console.log("22222222222222222", myChart);



      // 绘制数量图表

      myChart.setOption({

        tooltip: {

          trigger: "axis",

          axisPointer: {

            // 坐标轴指示器，坐标轴触发有效

            type: "cross", // 默认为直线，可选为：'line' | 'cross'

            type: "shadow",

          },

          //  formatter: '{b}月\n'

        },

        legend: {

          x: "right",

          itemWidth: 12,

          itemHeight: 12,

          itemGap: 56, // 设置间距

          textStyle: {

            color: "rgba(68, 68, 68, 0.65)",

            fontSize: 16,

            padding: [0, 0, 0, 8],

          },

          data: ["充电电费", "充电服务费"],

        },

        grid: {

          width: "auto",

          height: "auto",

          left: "0",

          right: "5%",

          bottom: "0",

          top: "15%",

          top: "5%",

          left: "3%",

          right: "4%",

          bottom: "0%",

          containLabel: true,

        },

        xAxis: {

          type: "category",

          axisLabel: {

            color: "rgba(80, 105, 122, 1)",

            fontSize: 15,

            lineHeight: 23,

            fontFamily: "PingFangSC, PingFang SC",

            // formatter:'{value}月'

          },

          axisTick: {

            show: true,

          },

          axisLine: {

            lineStyle: {

              color: "RGBA(234, 234, 234, 1)",

        xAxis: [

          {

            type: "category",

            data: ["未系安全带", "疲劳驾驶", "抽烟", "打电话", "激烈驾驶"],

            axisTick: {

              alignWithLabel: true,

              lineStyle: {

                color: "#777777",

              },

            },

            axisLabel: {

              color: "rgba(0, 0, 0, 0.45)",

            },

          },

          splitLine: {

            // 去掉网格线

            show: false,

        ],

        yAxis: [

          {

            type: "value",

          },

          data: x,

        },

        yAxis: {

          type: "value",

          axisLabel: {

            color: "rgba(80, 105, 122, 1)",

            fontSize: 15,

            lineHeight: 23,

            fontFamily: "PingFangSC, PingFang SC",

            formatter: "{value} 元",

          },

          splitLine: {

            // show: false  // 去掉网格线

            color: "rgb(242, 242, 242, 1)",

          },

          axisTick: {

            alignWithLabel: true,

          },

        },

        ],

        series: [

          {

            name: "充电服务费",

            type: "bar",

            barMaxWidth: 13,

            // showBackground: true,

            barWidth: "20px",

            itemStyle: {

              color: new echarts.graphic.LinearGradient(

                0,

                0,

                0,

                1, // x0, y0, x1, y1

                [

                  { offset: 0, color: "rgba(157, 245, 144, 1)" }, // 0% 处的颜色

                  { offset: 1, color: "rgba(107, 228, 178, 1)" }, // 100% 处的颜色

                ]

              ),

              borderRadius: [20, 20, 20, 20],

              color: (params) => {

                console.log("111111", params);

                return ["#5B8FF9", "#5AD8A6", "#F6BD16", "#6DC8EC", "#945FB9"][

                  params.dataIndex

                ];

              },

            },

            // label: {

            //     show: true,

            //     fontSize: 12,

            //     lineHeight: 17,

            //     // align:'right',

            //     color: 'rgba(123, 123, 123, 1)',

            //     position: 'right', // 设置标签显示在柱状条右侧

            //     // formatter: function (params) {

            //     //     return params.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + '户'

            //     // } // 使用模板字符串保留两位小数



            // },

            data: y1,

          },

          {

            name: "充电电费",

            type: "bar",

            barMaxWidth: 13,

            // showBackground: true,

            itemStyle: {

              color: new echarts.graphic.LinearGradient(

                0,

                0,

                0,

                1, // x0, y0, x1, y1

                [

                  { offset: 0, color: "rgba(98, 251, 255, 1)" }, // 0% 处的颜色

                  { offset: 1, color: "rgba(61, 221, 255, 1)" }, // 100% 处的颜色

                ]

              ),

            },



            data: y2,

            data: [10, 52, 200, 33, 39, 30, 20],

          },

        ],

      });



      // myChart.setOption({

      //   tooltip: {

      //     trigger: "axis",

      //     axisPointer: {

      //       // 坐标轴指示器，坐标轴触发有效

      //       type: "cross", // 默认为直线，可选为：'line' | 'cross'

      //     },

      //     //  formatter: '{b}月\n'

      //   },

      //   legend: {

      //     x: "right",

      //     itemWidth: 12,

      //     itemHeight: 12,

      //     itemGap: 56, // 设置间距

      //     textStyle: {

      //       color: "rgba(68, 68, 68, 0.65)",

      //       fontSize: 16,

      //       padding: [0, 0, 0, 8],

      //     },

      //     data: ["充电电费", "充电服务费"],

      //   },



      //   xAxis: {

      //     type: "category",

      //     axisLabel: {

      //       color: "rgba(80, 105, 122, 1)",

      //       fontSize: 15,

      //       lineHeight: 23,

      //       fontFamily: "PingFangSC, PingFang SC",

      //       // formatter:'{value}月'

      //     },

      //     axisTick: {

      //       show: true,

      //     },

      //     axisLine: {

      //       lineStyle: {

      //         color: "RGBA(234, 234, 234, 1)",

      //       },

      //     },

      //     splitLine: {

      //       // 去掉网格线

      //       show: false,

      //     },

      //     data: x,

      //   },

      //   yAxis: {

      //     type: "value",

      //     axisLabel: {

      //       color: "rgba(80, 105, 122, 1)",

      //       fontSize: 15,

      //       lineHeight: 23,

      //       fontFamily: "PingFangSC, PingFang SC",

      //       formatter: "{value} 元",

      //     },

      //     splitLine: {

      //       // show: false  // 去掉网格线

      //       color: "rgb(242, 242, 242, 1)",

      //     },

      //     axisTick: {

      //       alignWithLabel: true,

      //     },

      //   },

      //   series: [

      //     {

      //       name: "充电服务费",

      //       type: "bar",

      //       barMaxWidth: 13,

      //       // showBackground: true,

      //       itemStyle: {

      //         color: new echarts.graphic.LinearGradient(

      //           0,

      //           0,

      //           0,

      //           1, // x0, y0, x1, y1

      //           [

      //             { offset: 0, color: "rgba(157, 245, 144, 1)" }, // 0% 处的颜色

      //             { offset: 1, color: "rgba(107, 228, 178, 1)" }, // 100% 处的颜色

      //           ]

      //         ),

      //       },

      //       // label: {

      //       //     show: true,

      //       //     fontSize: 12,

      //       //     lineHeight: 17,

      //       //     // align:'right',

      //       //     color: 'rgba(123, 123, 123, 1)',

      //       //     position: 'right', // 设置标签显示在柱状条右侧

      //       //     // formatter: function (params) {

      //       //     //     return params.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + '户'

      //       //     // } // 使用模板字符串保留两位小数



      //       // },

      //       data: y1,

      //     },

      //     {

      //       name: "充电电费",

      //       type: "bar",

      //       barMaxWidth: 13,

      //       // showBackground: true,

      //       itemStyle: {

      //         color: new echarts.graphic.LinearGradient(

      //           0,

      //           0,

      //           0,

      //           1, // x0, y0, x1, y1

      //           [

      //             { offset: 0, color: "rgba(98, 251, 255, 1)" }, // 0% 处的颜色

      //             { offset: 1, color: "rgba(61, 221, 255, 1)" }, // 100% 处的颜色

      //           ]

      //         ),

      //       },



      //       data: y2,

      //     },

      //   ],

      // });

      myChart.resize();

    },

    // 获取预警排行榜数据

@@ -646,28 +727,44 @@
    },

    fullScreen() {

      console.log("全屏");

      const video = document.getElementById("monitoringCard");

      if (video.requestFullscreen) {

        video.requestFullscreen();

      } else if (video.mozRequestFullScreen) {

        // Firefox

        video.mozRequestFullScreen();

      } else if (video.webkitRequestFullscreen) {

        // Chrome, Safari and Opera

        video.webkitRequestFullscreen();

      } else if (video.msRequestFullscreen) {

        // IE/Edge

        video.msRequestFullscreen();

      }

    },

    shotScreen() {

      console.log("截图");



      // 获取video和canvas元素

      const video = document.getElementById("monitoringCard");

      const canvas = document.getElementById("myCanvas");

      // 设置canvas的宽度和高度与video相同

      canvas.width = video.videoWidth;

      canvas.height = video.videoHeight;

      // 获取canvas的2d绘图上下文

      const context = canvas.getContext("2d");

      // 将当前video帧绘制到canvas上

      context.drawImage(video, 0, 0, canvas.width, canvas.height);



      setTimeout(() => {

        let targetDom = document.querySelector("#monitoringCard");

        console.log('targetDom',targetDom)

        html2canvas(targetDom, {

          height: document.querySelector("#monitoringCard").scrollHeight,

          windowHeight: document.querySelector("#monitoringCard").scrollHeight,

          backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）

          useCORS: true, //支持图片跨域

          scale: 2, //设置放大的倍数

        }).then((canvas) => {

          let url = canvas.toDataURL("image/png"); // toDataURL: 图片格式转成 base64

          this.downloadImage(url);

        });

      }, 10);

        // 将canvas内容转换为图片

        let dataURL = canvas.toDataURL("image/png");

        this.downloadImage(dataURL);

      }, 100);

    },

    downloadImage(base64) {

      const link = document.createElement("a");

      link.href = base64;

      link.download = "image.png"; // 你希望下载的文件名

      link.download = "screenshot.png"; // 你希望下载的文件名

      document.body.appendChild(link);

      link.click();

      document.body.removeChild(link);

@@ -1044,7 +1141,7 @@
    .warnCount {

      position: relative;



      .countChart {

      #countChart {

        width: 453px;

        height: 150px;

      }


 src/view/order/component/detailModal.vue

@@ -28,7 +28,7 @@
            </div>
            <!-- 行程轨迹 -->
            <div v-show="tabPosition == 'track'">
                
                <div class="mapContainer" id="mapContainer"></div>
            </div>
            <!-- 行程监控 -->
            <div v-show="tabPosition == 'monitoring'"></div>
@@ -37,28 +37,88 @@
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
    components: {},
    props: {},
    data() {
        return {
            dialogVisible: true,
            dialogVisible: false,
            tabPosition: 'order',
        };
    },
    computed: {},
    watch: {},
    created() { },
    mounted() { },
    mounted() {
        this.initMap();
    },
    methods: {
        initMap() {
            window._AMapSecurityConfig = {
                securityJsCode: this.$secretKey,
            };
            AMapLoader.load({
                key: this.$mapKey,
                version: "2.0",
                plugins: [
                    "AMap.ToolBar",
                ],
            })
                .then((AMap) => {
                    this.map = new AMap.Map("mapContainer", {
                        center: [105.574542, 30.5061493],
                        zoom: 15,
                    });
                    this.map.addControl(new AMap.ToolBar());
                    let path = [
                        new AMap.LngLat(105.57, 30.51),
                        new AMap.LngLat(116.382122, 39.901176),
                        new AMap.LngLat(116.387271, 39.912501),
                        new AMap.LngLat(116.398258, 39.9046),
                    ]
                    const content = `<div class="custom-content-marker">
                                        <img src="${require("@/assets/logo.png")}">
                                    </div>`;
                    const marker = new AMap.Marker({
                        content: content, //自定义点标记覆盖物内容
                        position: [105.57, 30.51], //基点位置
                        offset: new AMap.Pixel(-30, -15), //相对于基点的偏移位置
                    });
                    this.map.add(marker);
                    let polyline = new AMap.Polyline({
                        path: path,
                        strokeWeight: 2, //线条宽度
                        strokeColor: "red", //线条颜色
                        lineJoin: "round", //折线拐点连接处样式
                    });
                    this.map.add(polyline);
                })
                .catch((e) => {
                });
        },
        closeClick() {
            this.dialogVisible = false
        }
    },
};
</script>
<style>
.custom-content-marker {
    width: 30px;
    height: 30px;
}

.custom-content-marker img {
    width: 100%;
    height: 100%;
}
</style>
<style scoped lang="less">
::v-deep .el-descriptions .el-descriptions-item__cell {
    padding-bottom: 25px;
}

#mapContainer {
    width: 100%;
    height: 600px;
}
</style>

 src/view/order/index.vue

@@ -3,33 +3,39 @@
        <div class="form flex a-center j-between mt--23">
            <div class="form-left ml--30">
                <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                    <el-form-item label="派单时间:" prop="level" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.level" placeholder="请输入"></el-input>
                    <el-form-item label="派单时间:" prop="level" class="unset_m" style="margin-right: 100px;">
                        <el-date-picker style="width: 400px;" v-model="value1" type="datetimerange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="订单编号:" prop="name" class="unset_m" style="margin-right: 15px;">
                    <el-form-item label="订单编号:" prop="name" class="unset_m" style="margin-right: 100px;">
                        <el-input v-model="searchForm.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="车辆号牌:" prop="name" class="unset_m" style="margin-right: 15px;">
                    <el-form-item label="车辆号牌:" prop="name" class="unset_m" style="margin-right: 100px;">
                        <el-input v-model="searchForm.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="驾驶员姓名:" prop="date" class="unset_m" style="margin-right: 15px;">
                    <el-form-item label="驾驶员姓名:" prop="date" class="unset_m" style="margin-right: 100px;">
                        <el-input v-model="searchForm.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="公司名称:" prop="date" class="unset_m" style="margin-right: 15px;">
                    <el-form-item label="公司名称:" prop="date" class="unset_m" style="margin-right: 100px;">
                        <el-input class="companyName" v-model="searchForm.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="上车地点:" prop="date" class="unset_m" style="margin-right: 100px;">
                        <el-input v-model="searchForm.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="上车地点:" prop="date" class="unset_m" style="margin-right: 15px;">
                    <el-form-item label="下车地点:" prop="date" class="unset_m" style="margin-right: 100px;">
                        <el-input v-model="searchForm.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="下车地点:" prop="date" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="里程范围:" prop="date" class="unset_m" style="margin-right: 15px;">
                        <el-input v-model="searchForm.name" placeholder="请输入"></el-input>
                    <el-form-item label="里程范围:" prop="date" class="unset_m" style="margin-right: 100px;">
                        <div class="flex a-center j-between">
                            <el-input class="range" v-model="searchForm.name" placeholder="请输入"></el-input>
                            <div class="mx--20">-</div>
                            <el-input class="range" v-model="searchForm.name" placeholder="请输入"></el-input>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
            <div class="form-right mr--24 mb--22">
            <div class="form-right mr--24 mb--22 shrink0">
                <el-button class="search-button h--40 w--90 fs--14" icon="el-icon-search" type="primary" size="small"
                    @click="search">查询</el-button>
                <el-button @click="reset" icon="el-icon-refresh-right" class="reset-button h--40 w--90 fs--14"
@@ -123,4 +129,16 @@
::v-deep .el-form-item .el-input__inner {
    width: 240px;
}

::v-deep .companyName {
    .el-input__inner {
        width: 400px !important;
    }
}

::v-deep .range {
    .el-input__inner {
        width: 100% !important;
    }
}
</style>