Cockpit-cpp/Monitor/components/MainWindow.qml

import QtQml 2.3
import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.0
import QtDataVisualization 1.2
import QtQuick3D
import QtCharts 2.0
Item {
    id: mainWindow
    visible: true
    width: 3840
    height: 1080

    property int mainHeight: 1000
    property int camHeight: 360
    property int lineWidth: 10
    property int statusWidth: 480
    property int leftCamWidth: 720
    property int frontCamWidth: 1660
    property int rightCamWidth: 720
    property int radarWidth: 480
    property int radarSize: 120

    property int radarRedRange: 2000
    property int radarGreenRange: 4000

    property string radarRightFGreenImg: 'qrc:/images/right_f_green.png'
    property string radarRightFYellowImg: 'qrc:/images/right_f_yellow.png'
    property string radarRightFRedImg: 'qrc:/images/right_f_red.png'

    property string radarRightRGreenImg: 'qrc:/images/right_r_green.png'
    property string radarRightRYellowImg: 'qrc:/images/right_r_yellow.png'
    property string radarRightRRedImg: 'qrc:/images/right_r_red.png'

    property string radarLeftFGreenImg: 'qrc:/images/left_f_green.png'
    property string radarLeftFYellowImg: 'qrc:/images/left_f_yellow.png'
    property string radarLeftFRedImg: 'qrc:/images/left_f_red.png'

    property string radarLeftRGreenImg: 'qrc:/images/left_r_green.png'
    property string radarLeftRYellowImg: 'qrc:/images/left_r_yellow.png'
    property string radarLeftRRedImg: 'qrc:/images/left_r_red.png'

    property string radarBottomGreenImg: 'qrc:/images/bottom_green.png'
    property string radarBottomYellowImg: 'qrc:/images/bottom_yellow.png'
    property string radarBottomRedImg: 'qrc:/images/bottom_red.png'

    property int radarRightMargin: 40
    property int radarTopMargin: 350
    property int radarBottomMargin: 280
    property int radarleftMargin: 200
    property int radarTxtSize: 18

    FontLoader {
        id: alibaba
        source: "qrc:/components/font/Alibaba-PuHuiTi-Bold.ttf"
    }

    FontLoader {
        id: fontawesome
        source: "qrc:/components/font/fontawesome-webfont.ttf"
    }

    Rectangle {
        id: mainForm
        anchors.fill: parent

        Image {
            fillMode: Image.PreserveAspectFit
            source: 'qrc:/images/bg4k.png'
        }

        Rectangle {
            id: mainFormHeader
            width: mainForm.width
            height: 80
            color: 'transparent'

            Image {
                id: mainFormBannerBg
                anchors.top: mainFormHeader.top
                anchors.horizontalCenter: mainFormHeader.horizontalCenter
                fillMode: Image.PreserveAspectFit
                source: 'qrc:/images/banner.png'
            }
            Text {
                id: mainFormTitle
                width: mainFormHeader.width
                height: mainFormHeader.height
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                text: textTitle
                font.family: alibaba.name
                font.pointSize: 24
                color: mainTextColor
            }

            Text {
                id: delayms
                text: '网络延迟： ' + (appModel.ping / 2).toFixed(1) + ' ms'
                color: appModel.ping/2 > 200 ? popupBgColorErr : mainTextColor
                font.family: alibaba.name
                font.pointSize: 12
                anchors.right: mainFormHeader.right
                anchors.rightMargin: 50
                anchors.top: mainFormHeader.top
                anchors.topMargin: 50
            }
        }

        Rectangle {
            id: mainFormContent
            width: mainForm.width  
            height: mainForm.height - 80
            anchors.top: mainFormHeader.bottom
            color: 'transparent'

            Row {
                Rectangle {
                    id: statusData
                    width: statusWidth + lineWidth -100
                    height: mainHeight
                    color: 'transparent'

                  /*  Image {
                        width: lineWidth 
                        height: mainHeight
                        anchors.left: statusData.left
                        anchors.leftMargin: 20
                        fillMode: Image.Stretch
                        source: 'qrc:/images/border_l.png'
                    }
                    */
                    Rectangle {
                        id: carImage
                        width: statusData.width - 200
                        height: 300
                        color: 'transparent'
                        anchors.horizontalCenter: statusData.horizontalCenter
                        anchors.top: statusData.top
                        anchors.topMargin: 50
                        anchors.left: statusData.left
                        anchors.horizontalCenterOffset: 10
                        Image {
                            width: 360
                            height: 240
                            fillMode: Image.Stretch
                            source: 'qrc:/images/wagon.png'
                            anchors.horizontalCenter: carImage.horizontalCenter
                        }
                    }
                     Row {
                        id: driveDataForm
                        width: statusData.width - 100
                        height: 300
                        anchors.top: carImage.bottom
                        anchors.topMargin: 0
                        anchors.left: carImage.left
                        anchors.leftMargin: 100

                        Text {
                            text:"舱位:"
                            color: mainTextColor
                            anchors.left: statusData.left
                            anchors.leftMargin: 20
                            font.family: alibaba.name
                            font.pointSize: 20
                        }
                        Text {
                            id: driveOpType
                            text: appModel.DriveName
                            color: mainTextColor
                            anchors.left: radarData.left
                            anchors.leftMargin: 180
                            font.family: digtalFont.name
                            font.pointSize: 20
                        }
                         
                        spacing: 50
                    }
                    Row {
                        id: carDataForm
                        width: statusData.width - 100
                        height: 300
                        anchors.top: carImage.bottom
                        anchors.topMargin: 40
                        anchors.left: carImage.left
                        anchors.leftMargin: 100

                        Text {
                            text:"车号 :"
                            color: mainTextColor
                            anchors.left: statusData.left
                            anchors.leftMargin: 20
                            font.family: alibaba.name
                            font.pointSize: 20
                        }
                        Text {
                            id: carOpType
                            text: appModel.CarName
                            color: mainTextColor
                            anchors.left: radarData.left
                            anchors.leftMargin: 180
                            font.family: digtalFont.name
                            font.pointSize: 20
                        }
                         
                        spacing: 50
                    }
                      Row {
                        id: tempState
                        width: statusData.width - 100
                        height: 300
                        anchors.top: carImage.bottom
                        anchors.topMargin: 80
                        anchors.left: carImage.left
                        anchors.leftMargin: 100
                         visible:true
                        Text {
                            text: "系统温度:"
                            color: mainTextColor
                            anchors.left: statusData.left
                            anchors.leftMargin: 20
                            font.family: alibaba.name
                            font.pointSize: 20
                        }
                        Text {
                            id: tempValue
                           
                            text: appModel.temp +"°C"
                            color:  appModel.temp<70? mainTextColor:popupBgColorErr
                            anchors.left: radarData.left
                            anchors.leftMargin: 180
                            font.family: digtalFont.name
                            font.pointSize: 24
                        }
                     
                        spacing: 50
                    }
                      Row {
                        id: steerState
                        width: statusData.width - 100
                        height: 300
                        anchors.top: carImage.bottom
                        anchors.topMargin: 120
                        anchors.left: carImage.left
                        anchors.leftMargin: 100
                        visible:true
                        Text {
                            text: "转向角度 :"
                            color: mainTextColor
                            anchors.left: statusData.left
                            anchors.leftMargin: 20
                            font.family: alibaba.name
                            font.pointSize: 20
                        }
                        Text {
                            id: steer
                            text: appModel.Steer
                            color: mainTextColor
                            anchors.left: radarData.left
                            anchors.leftMargin: 180
                            font.family: digtalFont.name
                            font.pointSize: 24
                        }
                     
                     
                        spacing: 50
                    }
                    Row {
                        id: rpmState
                        width: statusData.width - 100
                        height: 300
                        anchors.top: carImage.bottom
                        anchors.topMargin: 160
                        anchors.left: carImage.left
                        anchors.leftMargin: 100
                         visible:appModel.Visible
                        Text {
                            text: "发动机转速:"
                            color: mainTextColor
                            anchors.left: statusData.left
                            anchors.leftMargin: 20
                            font.family: alibaba.name
                            font.pointSize: 20
                        }
                        Text {
                            id: rpmValue
                           
                            text: appModel.EnginRpm
                            color:  appModel.EnginRpm>200? mainTextColor:popupBgColorErr
                            anchors.left: radarData.left
                            anchors.leftMargin: 180
                            font.family: digtalFont.name
                            font.pointSize: 24
                        }
                     
                        spacing: 50
                    }
                    Row {
                        id: gpaState
                        width: statusData.width - 100
                        height: 300
                        anchors.top: carImage.bottom
                        anchors.topMargin: 200
                        anchors.left: carImage.left
                        anchors.leftMargin: 100
                        visible:appModel.Visible
                        Text {
                            text: "发动机油压:"
                           
                            color: mainTextColor
                            anchors.left: statusData.left
                            anchors.leftMargin: 20
                            font.family: alibaba.name
                            font.pointSize: 20
                        }
                        Text {
                            id: gpavalue
                           
                            text: appModel.EngineOilPressure
                            color: mainTextColor
                            anchors.left: radarData.left
                            anchors.leftMargin: 180
                            font.family: digtalFont.name
                            font.pointSize: 24
                        }
                     
                        spacing: 50
                    }
                    Row {
                        id: coldState
                        width: statusData.width - 100
                        height: 300
                        anchors.top: carImage.bottom
                        anchors.topMargin: 240
                        anchors.left: carImage.left
                        anchors.leftMargin: 100
                        visible:appModel.Visible
                        Text {
                            text: "冷却液温度:"
                            color: mainTextColor
                            anchors.left: statusData.left
                            anchors.leftMargin: 20
                            font.family: alibaba.name
                            font.pointSize: 20
                        }
                        Text {
                            id: coldValue
                            text: appModel.Cold
                            color: mainTextColor
                            anchors.left: radarData.left
                            anchors.leftMargin: 180
                            font.family: digtalFont.name
                            font.pointSize: 24
                        }

                        spacing: 50
                    }
                        Row {
                        id: paState
                        width: statusData.width - 100
                        height: 300
                        anchors.top: carImage.bottom
                        anchors.topMargin: 280
                        anchors.left: carImage.left
                        anchors.leftMargin: 100
                        visible:appModel.Visible
                        Text {
                            text: "变速箱油压:"
                            color: mainTextColor
                            anchors.left: statusData.left
                            anchors.leftMargin: 20
                            font.family: alibaba.name
                            font.pointSize: 20
                        }
                        Text {
                            id: paValue
                            text: appModel.GearboxOilPressure
                            color: appModel.GearboxOilPressure<16 || appModel.GearboxOilPressure>20? popupBgColorErr:mainTextColor
                            anchors.left: radarData.left
                            anchors.leftMargin: 180
                            font.family: digtalFont.name
                            font.pointSize: 24
                        }
                         
                        spacing: 50
                    }
                      Row {
                        id: gearState
                        width: statusData.width - 100
                        height: 300
                        anchors.top: carImage.bottom
                        anchors.topMargin: 320
                        anchors.left: carImage.left
                        anchors.leftMargin: 100
                        visible:appModel.Visible
                        Text {
                            text: "变速箱油温:"
                            color: mainTextColor
                            anchors.left: statusData.left
                            anchors.leftMargin: 20
                            font.family: alibaba.name
                            font.pointSize: 20
                        }
                        Text {
                            id: gearValue
                            text: appModel.GearboxOilTemp
                            color: appModel.GearboxOilTemp>100 ? popupBgColorErr:mainTextColor
                            anchors.left: radarData.left
                            anchors.leftMargin: 180
                            font.family: digtalFont.name
                            font.pointSize: 24
                        }
                     
                     
                        spacing: 50
                    }
                         Row {
                        id: brakeState
                        width: statusData.width - 100
                        height: 300
                        anchors.top: carImage.bottom
                        anchors.topMargin: 360
                        anchors.left: carImage.left
                        anchors.leftMargin: 100
                        visible:appModel.Visible
                        Text {
                            text: "制动压力 :"
                            color: mainTextColor
                            anchors.left: statusData.left
                            anchors.leftMargin: 20
                            font.family: alibaba.name
                            font.pointSize: 20
                        }
                        Text {
                            id: brakeValue
                            text: appModel.BrakePressure
                            color:  appModel.BrakePressure<6 ? popupBgColorErr:mainTextColor
                            anchors.left: radarData.left
                            anchors.leftMargin: 180
                            font.family: digtalFont.name
                            font.pointSize: 24
                        }
                     
                     
                        spacing: 50
                    }
                      Row {
                        id: presState
                        width: statusData.width - 100
                        height: 300
                        anchors.top: carImage.bottom
                        anchors.topMargin: 400
                        anchors.left: carImage.left
                        anchors.leftMargin: 100
                        visible:appModel.Visible
                        Text {
                            text: "液压压力 :"
                            color: mainTextColor
                            anchors.left: statusData.left
                            anchors.leftMargin: 20
                            font.family: alibaba.name
                            font.pointSize: 20
                        }
                        Text {
                            id: preValue
                            text: appModel.BrakePressure
                            color: mainTextColor
                            anchors.left: radarData.left
                            anchors.leftMargin: 180
                            font.family: digtalFont.name
                            font.pointSize: 24
                        }
                     
                     
                        spacing: 50
                    }
                     /*
                     Row {
                        id: speedState
                        width: statusData.width - 100
                        height: 300
                        anchors.top: carImage.bottom
                        anchors.topMargin: 320
                        anchors.left: carImage.left
                        anchors.leftMargin: 100
                        visible:appModel.Visible
                        Text {
                            text: "车辆速度 :"
                            color: mainTextColor
                            anchors.left: statusData.left
                            anchors.leftMargin: 20
                            font.family: alibaba.name
                            font.pointSize: 20
                        }
                        Text {
                            id: speed
                            text:appModel.Speed
                            color: mainTextColor
                            anchors.left: radarData.left
                            anchors.leftMargin: 180
                            font.family: digtalFont.name
                            font.pointSize: 24
                        }
                     
                     
                        spacing: 50
                    }
                    */
                    
                   /*   Row {
                        id: leftlockState
                        width: statusData.width - 100
                        height: 300
                        anchors.top: carImage.bottom
                        anchors.topMargin: 390
                        anchors.left: carImage.left
                        anchors.leftMargin: 100
                        
                        Text {
                            text: "左锁钩状态 :"
                            color: mainTextColor
                            anchors.left: statusData.left
                            anchors.leftMargin: 20
                            font.family: alibaba.name
                            font.pointSize: 20
                        }
                        Text {
                            id: leftlock
                            text:  appModel.Steer
                            color: mainTextColor
                            anchors.left: radarData.left
                            anchors.leftMargin: 180
                            font.family: digtalFont.name
                            font.pointSize: 24
                        }


                        spacing: 50
                    }
                    Row {
                        id: rightlockState
                        width: statusData.width - 100
                        height: 300
                        anchors.top: carImage.bottom
                        anchors.topMargin: 425
                        anchors.left: carImage.left
                        anchors.leftMargin: 100

                        Text {
                            text: "右锁钩状态 :"
                            color: mainTextColor
                            anchors.left: statusData.left
                            anchors.leftMargin: 20
                            font.family: alibaba.name
                            font.pointSize: 20
                        }
                        Text {
                            id: rightlock
                            text:  appModel.Steer
                            color: mainTextColor
                            anchors.left: radarData.left
                            anchors.leftMargin: 180
                            font.family: digtalFont.name
                            font.pointSize: 24
                        }


                        spacing: 50
                    }*/
                    Rectangle {
                        id: refreshDate
                        width: statusData.width - 100
                        height: 50
                        color: mainAppColor
                        anchors.bottom: statusData.bottom
                        anchors.bottomMargin: 30
                        anchors.horizontalCenter: statusData.horizontalCenter
                        anchors.horizontalCenterOffset: 10
                        Text {
                            id: localTime
                            width: 140
                            height: 50
                            anchors.horizontalCenter: refreshDate.horizontalCenter
                            color: '#FFFFFF'
                            font.family: digtalFont.name
                            font.pointSize: 36
                            text: new Date().toLocaleTimeString()
                            Component.onCompleted: {
                                localTimeRefresh.start()
                            }
                        }
                        Timer {
                            id: localTimeRefresh
                            interval: 1000
                            repeat: true
                            onTriggered: {
                                localTime.text = new Date().toLocaleTimeString()
                            }
                        }
                    }

                   /* Image {
                        width: lineWidth
                        height: mainHeight
                        anchors.right: statusData.right
                        fillMode: Image.Stretch
                        source: 'qrc:/images/border_r.png'
                    }
                    */
                }

                Rectangle {
                    id: leftCam
                    width: leftCamWidth + lineWidth
                    height: mainHeight
                    color: 'transparent'

                   /* Image {
                        width: lineWidth
                        height: mainHeight
                        anchors.left: leftCam.left
                        anchors.leftMargin: 20
                        fillMode: Image.Stretch
                        source: 'qrc:/images/border_l.png'
                        z: 99
                    }
                    */

                    Rectangle {
                        width: leftCamWidth
                        height: mainHeight/2
                        color: 'transparent'
                        anchors.left: leftCam.left
                        anchors.leftMargin: 20
                        border.color: mainAppColor
                        border.width: 1
                        // CAM Left
                        Image {
                            id: leftImg
                            width: leftCamWidth
                            height: mainHeight/2
                            fillMode: Image.Stretch
                        }
                        Connections {
                            target: LeftImage
                            onCallQmlRefeshLeftImg: {
                                leftImg.source = ""
                                leftImg.source = "image://LeftImage"
                            }
                        }
                    }
                    Rectangle {
                        width: leftCamWidth
                        height: mainHeight/2
                        y:mainHeight/2
                        color: 'transparent'
                        anchors.left: leftCam.left
                        anchors.leftMargin: 20
                        border.color: mainAppColor
                        border.width: 1
                        // CAM Left
                        Image {
                            id: leftan
                            width: leftCamWidth
                            height: mainHeight/2
                            fillMode: Image.Stretch
                        }
                        Connections {
                            target: LeftAnchor
                            onCallQmlRefeshLeftAnchor: {
                                leftan.source = ""
                                leftan.source = "image://LeftAnchor"
                            }
                        }
                    }

                   /* Image {
                        width: lineWidth
                        height: mainHeight
                        anchors.right: leftCam.right
                        fillMode: Image.Stretch
                        source: 'qrc:/images/border_r.png'
                        z: 99
                    }
                    */
                }

                Rectangle {
                    id: centerPanel
                    width: frontCamWidth + 3 * lineWidth
                    height: mainHeight
                    anchors.top: mainFormContent.top
                    anchors.horizontalCenter: mainFormContent.horizontalCenter
                    color: 'transparent'
                    /*
                    MouseArea {
                        anchors.fill: parent
                        drag.target: backImgRect
                        drag.axis: Drag.XandYAxis
                        drag.minimumX: 20
                        drag.maximumX: centerPanel.width - backImgRect.width - 20
                        drag.minimumY: 0
                        drag.maximumY: centerPanel.height - backImgRect.height
                    }
                    */
                  /*  Image {
                        width: lineWidth
                        height: mainHeight
                        anchors.left: centerPanel.left
                        anchors.leftMargin: 20
                        fillMode: Image.Stretch
                        source: 'qrc:/images/border_l.png'
                        z: 99
                    }
                    */
                    Rectangle {
                        width: frontCamWidth
                        height: mainHeight/2+200
                        color: 'transparent'
                        anchors.left: centerPanel.left
                        anchors.leftMargin: 20
                        border.color: mainAppColor
                        border.width: 1
                        // CAM FRONT
                        Image {
                            id: frontImg
                            anchors.topMargin: 140
                            width: frontCamWidth
                            height: mainHeight/2+200
                            fillMode: Image.Stretch
                            z: 97
                        }
                        Connections {
                            target: FrontImage
                            onCallQmlRefeshFrontImg: {
                                frontImg.source = ""
                                frontImg.source = "image://FrontImage"
                            }
                        }
                    }

                    Rectangle {
                        id: backImgRect
                        width: frontCamWidth/2
                        height: mainHeight / 2-200
                        color: 'transparent'
                        x:430
                        y:mainHeight/2+200
                        border.color: mainAppColor
                        border.width: 1
                        /*
                         Image {
                            id: cautionLine
                            anchors.horizontalCenter: parent.horizontalCenter
                            width: parent.width / 1.5
                            height: parent.height / 3
                            fillMode: Image.Stretch
                            x: 1000; y: 222
                            z: 99
                          
                            source: 'qrc:/images/caution.png'
                        }
                         */

                        // CAM BACK REAR
                        Image {
                            id: backImg
                            anchors.topMargin: 140
                            width: parent.width
                            height: parent.height
                            fillMode: Image.Stretch
                            z: 98
                        }

                        Connections {
                            target: BackImage
                            onCallQmlRefeshBackImg: {
                                backImg.source = ""
                                backImg.source = "image://BackImage"
                            }
                        }
                    }
                    /*
                    Image {
                        width: lineWidth
                        height: mainHeight
                        anchors.right: centerPanel.right
                        anchors.rightMargin: 20
                        fillMode: Image.Stretch
                        source: 'qrc:/images/border_r.png'
                        z: 99
                    }
                    */
                }

                Rectangle {
                    id: rightCam
                    width: rightCamWidth +  lineWidth  
                    height: mainHeight
                    color: 'transparent'

                    /*Image {
                        width: lineWidth
                        height: mainHeight
                        anchors.left: rightCam.left
                        fillMode: Image.Stretch
                        source: 'qrc:/images/border_l.png'
                        z: 99
                    }
                    */
                    Rectangle {
                        width: rightCamWidth
                        height: mainHeight/2
                        color: 'transparent'
                        anchors.left: rightCam.left
                        border.color: mainAppColor
                        border.width: 1
                        // CAM Right
                        Image {
                            id: rightImg
                            width: rightCamWidth
                            height: mainHeight/2
                            fillMode: Image.Stretch

                        }
                        Connections {
                            target: RightImage
                            onCallQmlRefeshRightImg: {
                                rightImg.source = ""
                                rightImg.source = "image://RightImage"
                            }
                        }
                    }
                    Rectangle {
                        width: rightCamWidth
                        height: mainHeight/2
                        y:mainHeight/2
                        color: 'transparent'
                        anchors.left: rightCam.left
                        border.color: mainAppColor
                        border.width: 1
                        // CAM Right
                        Image {
                            id: rightan
                            width: rightCamWidth
                            height: mainHeight/2
                            fillMode: Image.Stretch

                        }
                        Connections {
                            target: RightAnchor
                            onCallQmlRefeshRightAnchor: {
                                rightan.source = ""
                                rightan.source = "image://RightAnchor"
                            }
                        }
                    }

                   /* Image {
                        width: lineWidth
                        height: mainHeight
                        anchors.right: rightCam.right
                        anchors.rightMargin: 20
                        fillMode: Image.Stretch
                        source: 'qrc:/images/border_r.png'

                    }
                    */
                }

                Rectangle {
                    id: radarData
                    width: radarWidth -160
                    height: mainHeight
                    color: 'transparent'

                   /* Image {
                        width: lineWidth-200
                        height: mainHeight
                        anchors.left: radarData.left
                        fillMode: Image.Stretch
                        source: 'qrc:/images/border_l.png'
                    }
                    */
                      /*
                    Image {
                        id: radar_car
                        width: 600
                        height: 800
                        anchors.horizontalCenter: radarData.horizontalCenter
                        anchors.verticalCenter: radarData.verticalCenter
                        fillMode: Image.Stretch
                        source: 'qrc:/images/radar_car.png'
                    }

                    //------------ radarRightF
                  
                    Image {
                        id: radarRightF0
                        width: radarSize
                        height: radarSize
                        anchors.right: radarData.right
                        anchors.rightMargin: radarRightMargin
                        anchors.top: radarData.top
                        anchors.topMargin: radarTopMargin
                        fillMode: Image.PreserveAspectFit
                        source: radarRightFGreenImg
                        visible: appModel.radar1 >= radarGreenRange
                    }
                    Image {
                        id: radarRightF1
                        width: radarSize
                        height: radarSize
                        anchors.right: radarData.right
                        anchors.rightMargin: radarRightMargin
                        anchors.top: radarData.top
                        anchors.topMargin: radarTopMargin
                        fillMode: Image.PreserveAspectFit
                        source: radarRightFYellowImg
                        visible: appModel.radar1 < radarGreenRange
                                 && appModel.radar1 > radarRedRange
                    }
                    Image {
                        id: radarRightF2
                        width: radarSize
                        height: radarSize
                        anchors.right: radarData.right
                        anchors.rightMargin: radarRightMargin
                        anchors.top: radarData.top
                        anchors.topMargin: radarTopMargin
                        fillMode: Image.PreserveAspectFit
                        source: radarRightFRedImg
                        visible: appModel.radar1 <= radarRedRange
                    }

                    //------------ radarRightR
                    Image {
                        id: radarRightR0
                        width: radarSize
                        height: radarSize
                        anchors.bottom: radarData.bottom
                        anchors.bottomMargin: radarTopMargin
                        anchors.right: radarData.right
                        anchors.rightMargin: radarRightMargin
                        fillMode: Image.PreserveAspectFit
                        source: radarRightRGreenImg
                        visible: appModel.radar2 >= radarGreenRange
                    }
                    Image {
                        id: radarRightR1
                        width: radarSize
                        height: radarSize
                        anchors.bottom: radarData.bottom
                        anchors.bottomMargin: radarTopMargin
                        anchors.right: radarData.right
                        anchors.rightMargin: radarRightMargin
                        fillMode: Image.PreserveAspectFit
                        source: radarRightRYellowImg
                        visible: appModel.radar2 < radarGreenRange
                                 && appModel.radar2 > radarRedRange
                    }
                    Image {
                        id: radarRightR2
                        width: radarSize
                        height: radarSize
                        anchors.bottom: radarData.bottom
                        anchors.bottomMargin: radarTopMargin
                        anchors.right: radarData.right
                        anchors.rightMargin: radarRightMargin
                        fillMode: Image.PreserveAspectFit
                        source: radarRightRRedImg
                        visible: appModel.radar2 <= radarRedRange
                    }

                    //------------ radarLeftF
                    Image {
                        id: radarLeftF0
                        width: radarSize
                        height: radarSize
                        anchors.left: radarData.left
                        anchors.leftMargin: radarRightMargin
                        anchors.top: radarData.top
                        anchors.topMargin: radarTopMargin
                        fillMode: Image.PreserveAspectFit
                        source: radarLeftFGreenImg
                        visible: appModel.radar3 >= radarGreenRange
                    }
                    Image {
                        id: radarLeftF1
                        width: radarSize
                        height: radarSize
                        anchors.left: radarData.left
                        anchors.leftMargin: radarRightMargin
                        anchors.top: radarData.top
                        anchors.topMargin: radarTopMargin
                        fillMode: Image.PreserveAspectFit
                        source: radarLeftFYellowImg
                        visible: appModel.radar3 < radarGreenRange
                                 && appModel.radar3 > radarRedRange
                    }
                    Image {
                        id: radarLeftF2
                        width: radarSize
                        height: radarSize
                        anchors.left: radarData.left
                        anchors.leftMargin: radarRightMargin
                        anchors.top: radarData.top
                        anchors.topMargin: radarTopMargin
                        fillMode: Image.PreserveAspectFit
                        source: radarLeftFRedImg
                        visible: appModel.radar3 <= radarRedRange
                    }

                    //------------ radarLeftR
                    Image {
                        id: radarLeftR0
                        width: radarSize
                        height: radarSize
                        anchors.bottom: radarData.bottom
                        anchors.bottomMargin: radarTopMargin
                        anchors.left: radarData.left
                        anchors.leftMargin: radarRightMargin
                        fillMode: Image.PreserveAspectFit
                        source: radarLeftRGreenImg
                        visible: appModel.radar4 >= radarGreenRange
                    }

                    Image {
                        id: radarLeftR1
                        width: radarSize
                        height: radarSize
                        anchors.bottom: radarData.bottom
                        anchors.bottomMargin: radarTopMargin
                        anchors.left: radarData.left
                        anchors.leftMargin: radarRightMargin
                        fillMode: Image.PreserveAspectFit
                        source: radarLeftRYellowImg
                        visible: appModel.radar4 < radarGreenRange
                                 && appModel.radar4 > radarRedRange
                    }

                    Image {
                        id: radarLeftR2
                        width: radarSize
                        height: radarSize
                        anchors.bottom: radarData.bottom
                        anchors.bottomMargin: radarTopMargin
                        anchors.left: radarData.left
                        anchors.leftMargin: radarRightMargin
                        fillMode: Image.PreserveAspectFit
                        source: radarLeftRRedImg
                        visible: appModel.radar4 <= radarRedRange
                    }

                    //------------ radarBottomL
                    Image {
                        id: radarBottomL0
                        width: radarSize
                        height: radarSize
                        anchors.bottom: radarData.bottom
                        anchors.bottomMargin: radarBottomMargin
                        anchors.left: radarData.left
                        anchors.leftMargin: radarleftMargin
                        fillMode: Image.PreserveAspectFit
                        source: radarBottomGreenImg
                        visible: appModel.radar5 >= radarGreenRange
                    }

                    Image {
                        id: radarBottomL1
                        width: radarSize
                        height: radarSize
                        anchors.bottom: radarData.bottom
                        anchors.bottomMargin: radarBottomMargin
                        anchors.left: radarData.left
                        anchors.leftMargin: radarleftMargin
                        fillMode: Image.PreserveAspectFit
                        source: radarBottomYellowImg
                        visible: appModel.radar5 < radarGreenRange
                                 && appModel.radar5 > radarRedRange
                    }

                    Image {
                        id: radarBottomL2
                        width: radarSize
                        height: radarSize
                        anchors.bottom: radarData.bottom
                        anchors.bottomMargin: radarBottomMargin
                        anchors.left: radarData.left
                        anchors.leftMargin: radarleftMargin
                        fillMode: Image.PreserveAspectFit
                        source: radarBottomRedImg
                        visible: appModel.radar5 <= radarRedRange
                    }
                    */

                    //------------ radarBottomR
                    /*
                    Image {
                        id: radarBottomR0
                        width: radarSize
                        height: radarSize
                        anchors.bottom: radarData.bottom
                        anchors.bottomMargin: radarBottomMargin
                        anchors.right: radarData.right
                        anchors.rightMargin: radarleftMargin
                        fillMode: Image.PreserveAspectFit
                        source: radarBottomGreenImg
                        visible: appModel.radar6 >= radarGreenRange
                    }

                    Image {
                        id: radarBottomR1
                        width: radarSize
                        height: radarSize
                        anchors.bottom: radarData.bottom
                        anchors.bottomMargin: radarBottomMargin
                        anchors.right: radarData.right
                        anchors.rightMargin: radarleftMargin
                        fillMode: Image.PreserveAspectFit
                        source: radarBottomYellowImg
                        visible: appModel.radar6 < radarGreenRange
                                 && appModel.radar6 > radarRedRange
                    }

                    Image {
                        id: radarBottomR2
                        width: radarSize
                        height: radarSize
                        anchors.bottom: radarData.bottom
                        anchors.bottomMargin: radarBottomMargin
                        anchors.right: radarData.right
                        anchors.rightMargin: radarleftMargin
                        fillMode: Image.PreserveAspectFit
                        source: radarBottomRedImg
                        visible: appModel.radar6 <= radarRedRange
                    }
                    */


                    Row {
                        height: parent.height
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.top: radarData.top
                        anchors.topMargin: 60

                        Text {
                            text: "前方雷达："
                            color: mainTextColor
                            anchors.left: radarData.left
                            anchors.leftMargin: 20
                            font.family: alibaba.name
                            font.pointSize: radarTxtSize
                        }
                        spacing: 50
                        Text {
                            id: radar1
                            text: (appModel.radar1 / 100).toFixed(2)
                            color: appModel.radar1>200? mainTextColor:popupBgColorErr
                            anchors.left: radarData.left
                            anchors.leftMargin: 20
                            font.family: alibaba.name
                            font.pointSize: radarTxtSize
                        }

                    }

                    Row {
                        height: parent.height
                        anchors.top: radarData.top
                        anchors.topMargin: 100
                        anchors.horizontalCenter: parent.horizontalCenter
                        Text {
                            text: "左前雷达："
                            color: mainTextColor
                            anchors.left: radarData.left
                            anchors.leftMargin: 20
                            font.family: alibaba.name
                            font.pointSize: radarTxtSize
                        }
                        spacing: 50
                        Text {
                            id: radar2
                            text: (appModel.radar2 / 100).toFixed(2)
                            color: appModel.radar2>200? mainTextColor:popupBgColorErr
                            anchors.left: radarData.left
                            anchors.leftMargin: 60
                            font.family: alibaba.name
                            font.pointSize: radarTxtSize
                        }
                    }
                    Row{
                        height: parent.height
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.top: radarData.top
                        anchors.topMargin: 140

                        Text {
                            text: "右前雷达："
                            color: mainTextColor
                            anchors.left: radarData.left
                            anchors.leftMargin: 20
                            font.family: alibaba.name
                            font.pointSize: radarTxtSize
                        }
                        spacing: 50
                        Text {
                            id: radar3
                            text: (appModel.radar3 / 100).toFixed(2)
                            color: appModel.radar3>200? mainTextColor:popupBgColorErr
                            anchors.left: radarData.left
                            anchors.leftMargin: 100
                            font.family: alibaba.name
                            font.pointSize: radarTxtSize
                        }
                    }
                    Row {
                        height: parent.height
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.top: radarData.top
                        anchors.topMargin: 180

                           Text {
                            text: "左后雷达："
                            color: mainTextColor
                            anchors.left: radarData.left
                            anchors.leftMargin: 20
                            font.family: alibaba.name
                            font.pointSize: radarTxtSize
                        }
                        spacing: 50
                        Text {
                            id: radar4
                            text: (appModel.radar4 / 100).toFixed(2)
                            color: appModel.radar4>200? mainTextColor:popupBgColorErr
                            anchors.left: radarData.left
                            anchors.leftMargin: 140
                            font.family: alibaba.name
                            font.pointSize: radarTxtSize
                        }
                    }
                    Row{
             //            spacing: 30
                        height: parent.height
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.top: radarData.top
                        anchors.topMargin: 220
                        Text {
                            text: "右后雷达："
                            color: mainTextColor
                            anchors.left: radarData.left
                            anchors.leftMargin: 20
                            font.family: alibaba.name
                            font.pointSize: radarTxtSize
                        }
                        spacing: 50
                        Text {
                            id: radar5
                            text: (appModel.radar5 / 100).toFixed(2)
                            color: appModel.radar5>200? mainTextColor:popupBgColorErr
                            anchors.left: radarData.left
                            anchors.leftMargin: 180
                            font.family: alibaba.name
                            font.pointSize: radarTxtSize
                        }

                       

                        
                    }
                    /*
                    Row{
             //            spacing: 30
                        height: parent.height
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.top: radarData.top
                        anchors.topMargin: 220
                        Text {
                            text: "左倒车雷达："
                            color: mainTextColor
                            anchors.left: radarData.left
                            anchors.leftMargin: 0
                            font.family: alibaba.name
                            font.pointSize: radarTxtSize
                        }
                        spacing: 30
                        Text {
                            id: radar6
                            text: (appModel.radar6 / 100).toFixed(2)
                            color: appModel.radar6>200? mainTextColor:popupBgColorErr
                            anchors.left: radarData.left
                            anchors.leftMargin: 0
                            font.family: alibaba.name
                            font.pointSize: radarTxtSize
                        }




                    }
                    Row{
             //            spacing: 30
                        height: parent.height
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.top: radarData.top
                        anchors.topMargin: 260
                        Text {
                            text: "右倒车雷达："
                            color: mainTextColor
                            anchors.left: radarData.left
                            anchors.leftMargin: 0
                            font.family: alibaba.name
                            font.pointSize: radarTxtSize
                        }
                        spacing: 30
                        Text {
                            id: radar7
                            text: (appModel.radar7 / 100).toFixed(2)
                            color: appModel.radar7>200? mainTextColor:popupBgColorErr
                            anchors.left: radarData.left
                            anchors.leftMargin: 0
                            font.family: alibaba.name
                            font.pointSize: radarTxtSize
                        }




                    }*/
                     Rectangle {
                        id: chart
                        width: radarData.width
                        height: 400
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.top: radarData.top
                        anchors.topMargin: 400
                        anchors.left: radarData.left
                        anchors.leftMargin: 0
                        color: 'transparent'

                     //   anchors.topMargin: 30


                        ChartView {
                            titleColor: mainTextColor
                            title: "支腿高度"
                            anchors.fill: parent
                          //  legend.alignment: Qt.AlignBottom
                            antialiasing: true
                            backgroundColor: "#050e34"
                            titleFont.pixelSize: 24

                            StackedBarSeries {
                                id: mySeries
                                axisX: BarCategoryAxis {
                                    color: mainTextColor
                                    //categories: [  "左支腿", "右支腿" ] }
                                    categories: [  "左支腿", "右支腿" ] }

                                axisY: ValueAxis {
                                    id: barY;
                                    gridLineColor: "gray";
                                    labelsColor: "white";
                                    max: 400 }
                                BarSet {values: [ appModel.rightAngle, appModel.leftAngle ] }


                              //  BarSet { label: "James"; values: [  5, 8] }
                            }
                        }
                        
                        
                    }
 
                    Rectangle {
                        id: warning
                        width: radarData.width - 60
                        height: 50
                        color: popupBgColorErr
                        anchors.bottom: radarData.bottom
                        anchors.bottomMargin: 30
                        anchors.horizontalCenter: radarData.horizontalCenter
                        Text {
                            id: warningtxt
                            text: qsTr("注意保持车距")
                            color: '#FFFFFF'
                            font.family: alibaba.name
                            font.pointSize: 24
                            anchors.horizontalCenter: warning.horizontalCenter
                        }
                        visible: appModel.radar1 < radarRedRange
                                 || appModel.radar2 < radarRedRange
                                 || appModel.radar3 < radarRedRange
                                 || appModel.radar4 < radarRedRange
                                 || appModel.radar5 < radarRedRange
                                 || appModel.radar6 < radarRedRange
                         
                    }

                    //                        Rectangle {
                    //                            width: radarData.width
                    //                            height: rightPanel.height
                    //                            color: 'transparent'

                    //                            Rectangle {
                    //                                width: radarData.width - 300
                    //                                height: radarData.height
                    //                                color: 'lightblue'

                    //                                Image {
                    //                                    width: 800
                    //                                    height: 1200
                    //                                    anchors.left: radarData.left
                    //                                    fillMode: Image.Stretch
                    //                                    source: 'qrc:/images/radar_car.png'
                    //                                }
                    //                            }
                    //                        }
                   /* Image {
                        width: lineWidth
                        height: mainHeight
                        anchors.right: radarData.right
                        fillMode: Image.Stretch
                        source: 'qrc:/images/border_r.png'
                    }
                    */
                }
            }
        }
    }
}