ISCS_Cabinet_WIN/content/MaterialInstructions.qml

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Pdf
import QtMultimedia
import Qt.labs.platform

import com.InteractiveTask 1.0

Item {
    id: materialinstructions
    x: 290
    y: 130
    width: 1600
    height: 920

    signal signal_get()
    signal signal_pdf_click(string text)

    property string strMaterialTypeGet: ""
    property string strInstructionsGet: ""

    property string strJsonData: "";

    property string strInstructionsTitle: ""
    property bool bResetTimer: false

    Connections {
        target: materialinstructions
        onVisibleChanged: {
            if (materialinstructions.visible === true)
            {
                 proThread.moveCursorTo(0, 0);
                // materialInstructionsModel.clear();
                // materialsellistInstructionsModel.clear();
                // signal_get();

                var taskType = InteractiveTask.TypeHttpGet_getInstructionsList;
                interactiveCore.appendTask(taskType, null, (data)=>{
                                               strJsonData = data;
                                               callback_refresh_view("全部");
                                           });
            }
            else
            {
                materialinstructionsPdf.visible = false;
                materialinstructionsVideo.visible = false;
            }
        }
    }

    // 标题表格
    ListModel {
        id: materialsellistInstructionsModel
    }

    // 主体表格
    ListModel {
        id: materialInstructionsModel
    }

    // 返回按钮
    Button {
        id: button_return_instructions
        x: 1408
        y: 835
        width: 192
        height: 75
        background: Rectangle {
            color: "#055eb3" // 设置背景为透明
            radius: 10 // 可选，设置圆角
        }
        text: qsTr("返回")
        font.pixelSize: 30
        palette.buttonText: "white"  // 设置字体颜色为绿色
        Connections {
            target: button_return_instructions
            onClicked: {
                materialInstructions.visible = false;
                materialSelmodel.visible = true;

                mainScreen.resetLogin_timeout();
            }
        }
    }


    Rectangle {
        id: materialsel11
        width: 1600
        height: 800
        color: "#272b7ae9"
        radius: 20
        clip: true
        Rectangle {
            x: 50
            y: 100
            width: parent.width - 100
            height: parent.height - 100
            clip: true
            color: "#002b7ae9"
            GridView {
                width: parent.width
                height: parent.height
                cellWidth: 360  // 每个单元格的宽度，这里是平均分配宽度给5列
                cellHeight: 350       // 每个单元格的高度
                model: materialInstructionsModel
                delegate: Rectangle{
                    width: 360
                    height: 350
                    color: "#00ffffff"

                    Rectangle {
                        x: 25
                        y: 25
                        width: 350
                        height: 300
                        color: model.color

                        Image {
                            x: 75
                            y: 25
                            width: 200
                            height: 200
                            visible: true
                            source: model.png
                            fillMode: Image.PreserveAspectFit
                        }

                        Text {
                            x: 0
                            y: 250
                            width: parent.width
                            height: 25
                            visible: true
                            text: model.instructionsTitle
                            font.pixelSize: 28
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            color: "#ffffff"
                        }

                        MouseArea {
                            anchors.fill: parent  // 让MouseArea覆盖整个Image区域
                            onClicked: {
                                strInstructionsTitle = model.instructionsTitle;

                                if (model.fileType === "0")
                                {
                                    videoPlayer.source = model.fileUrl;
                                    materialinstructionsVideo.visible = true;
                                }
                                else if (model.fileType === "1")
                                {
                                    signal_pdf_click(model.fileUrl);

                                }

                                mainScreen.resetLogin_timeout();
                            }
                        }
                    }
                }
            }
        }



        Rectangle {
            id: materialselviewInstruction
            width: 1600
            height: 100 // 减去顶部圆角矩形的高度
            radius: 20
            clip: true
            color: "#8f2b7ae9"

            Grid {
                x: 50
                y: 0
                width: parent.width - 150
                height: parent.height
                visible: true
                verticalItemAlignment: Grid.AlignVCenter
                horizontalItemAlignment: Grid.AlignHCenter
                columns: 5
                spacing: 20

                Repeater {
                    model: materialsellistInstructionsModel
                    delegate: Rectangle {
                        width: 250
                        height: 100
                        color: "#00ffffff"

                        Image {
                            x: 0
                            y: 25
                            width: 50
                            height: 50
                            visible: true
                            source: model.icon
                            fillMode: Image.PreserveAspectFit
                        }

                        Text {
                            x: 55
                            y: 25
                            width: parent.width - 55
                            height: 50
                            visible: true
                            text: model.name + "(" + model.count + ")";
                            font.pixelSize: 25
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            color: "#ffffff"
                        }

                        Canvas {
                            anchors.fill: parent
                            visible: model.view
                            onPaint: {
                                var ctx = getContext("2d");
                                ctx.lineWidth = 10; // 设置线的宽度
                                ctx.strokeStyle = "skyblue"; // 设置线的颜色为白色
                                ctx.beginPath();
                                ctx.moveTo(0, 90); // 直线的起点
                                ctx.lineTo(parent.width, 90); // 直线的终点
                                ctx.stroke(); // 绘制直线
                            }
                        }

                        MouseArea {
                            anchors.fill: parent  // 让MouseArea覆盖整个Image区域
                            onClicked: {
                                callback_refresh_view(model.name)
                            }
                        }

                    }
                }
            }


            Image {
                id: viewImage
                x: parent.width - 80
                y: 20
                width: 60
                height: 60
                source: "qrc:/png/right.png"
                fillMode: Image.PreserveAspectFit
                MouseArea {
                    anchors.fill: parent  // 让MouseArea覆盖整个Image区域
                    onClicked: {
                        var bIsUnfolding = (materialselviewInstruction.height === 100 ? true : false);
                        if(bIsUnfolding)
                        {
                            viewImage.rotation = 90;
                            materialselviewInstruction.height = 600;
                        }
                        else
                        {
                            viewImage.rotation = 0;
                            materialselviewInstruction.height = 100;
                        }

                        mainScreen.resetLogin_timeout();
                    }
                }
            }
        }
    }

    Timer {
        interval: 1000
        running: true
        repeat: true
        onTriggered: {
            if (bResetTimer)
            {
                mainScreen.resetLogin_timeout();
            }
        }
    }

    // pdf显示
    Rectangle
    {
        id: materialinstructionsPdf
        x:0
        y:0
        width: parent.width
        height: parent.height - 100
        color: "#ffffff"
        radius: 10 // 可选，设置圆角
        visible: false

        Rectangle {
            x:0
            y:0
            width: 1600
            height: 800
            color: "#ffffff"
            radius: 10 // 可选，设置圆角

            Connections {
                target: materialinstructionsPdf
                onVisibleChanged: {
                    if (materialinstructionsPdf.visible === true)
                    {
                        bResetTimer = true;
                        mainScreen.changeModel_text_Instructions(strInstructionsTitle);
                    }
                    else
                    {
                        bResetTimer = false;
                        mainScreen.changeModel_text_Instructions("物资使用说明");
                    }
                }
            }

            // pdf显示-pdf文档
            PdfDocument {
                id: pdfDocument
            }

            PdfPageView {
                id: pdfView
                document: pdfDocument
                anchors.top: parent.top
                anchors.bottom: parent.bottom

                // 左右居中
                anchors.horizontalCenter: parent.horizontalCenter
                clip: true

                Connections {
                    target: pdfView
                    onCurrentPageChanged: {
                        pdfView.scaleToPage(pdfView.parent.width, pdfView.parent.height);
                    }
                }

                Component.onCompleted: {
                    pdfView.scaleToPage(pdfView.parent.width, pdfView.parent.height);
                }
            }


            Image {
                id: materialinstruction_image_pdf_left
                x: 20
                y: parent.height / 2 - 64
                width: 128
                height: 128
                opacity: 0.25
                source: "qrc:/png/pdf_left.png"
                fillMode: Image.PreserveAspectFit
                visible: true;
            }

            Image {
                id: materialinstruction_image_pdf_right
                x: parent.width - 20 - 128
                y: parent.height / 2 - 64
                width: 128
                height: 128
                opacity: 0.25
                source: "qrc:/png/pdf_right.png"
                fillMode: Image.PreserveAspectFit
                visible: true;
            }


            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                onWheel: {
                    if (wheel.angleDelta.y > 0) {
                        // 向上滚动 - 上一页
                        if (pdfView.currentPage > 0) {
                            pdfView.goToPage(pdfView.currentPage - 1)
                        }
                    } else {
                        // 向下滚动 - 下一页
                        if (pdfView.currentPage < pdfView.document.pageCount - 1) {
                            pdfView.goToPage(pdfView.currentPage + 1)
                        }
                    }
                }

                onClicked:
                {
                    if (mouse.x < parent.width / 2) {
                        // 向上滚动 - 上一页
                        if (pdfView.currentPage > 0) {
                            pdfView.goToPage(pdfView.currentPage - 1)
                        }
                    } else {
                        // 向下滚动 - 下一页
                        if (pdfView.currentPage < pdfView.document.pageCount - 1) {
                            pdfView.goToPage(pdfView.currentPage + 1)
                        }
                    }
                }
            }
        }

        Button {
            id: button_return_instructions_pdf
            x: 1408
            y: 835
            width: 192
            height: 75
            background: Rectangle {
                color: "#055eb3" // 设置背景为透明
                radius: 10 // 可选，设置圆角
            }
            text: qsTr("返回")
            font.pixelSize: 30
            palette.buttonText: "white"  // 设置字体颜色为绿色
            Connections {
                target: button_return_instructions_pdf
                onClicked: {
                    pdfDocument.source = "invalid_path";
                    pdfView.document = pdfDocument;


                    materialinstructionsPdf.visible = false;
                    mainScreen.resetLogin_timeout();
                }
            }
        }
    }


    // mp4显示
    Rectangle
    {

        id: materialinstructionsVideo
        x:0
        y:0
        width: parent.width
        height: parent.height - 100
        color: "#000000"
        radius: 10 // 可选，设置圆角
        visible: false

        Connections {
            target: materialinstructionsVideo
            onVisibleChanged: {
                if (materialinstructionsVideo.visible === true)
                {
                    bResetTimer = true;
                    mainScreen.changeModel_text_Instructions(strInstructionsTitle);
                }
                else
                {
                    bResetTimer = false;
                    mainScreen.changeModel_text_Instructions("物资使用说明");
                }
            }
        }

        Video {
            id: videoPlayer
            anchors.fill: parent
            visible: true

            onPlaybackStateChanged: {
                if (videoPlayer.playbackState === MediaPlayer.PlayingState)
                {
                    materialinstruction_image_video.visible = false;
                }
                else
                {
                    materialinstruction_image_video.visible = true;
                }
            }
        }

        MouseArea {
            anchors.fill: parent
            onClicked: {
                if (videoPlayer.playbackState === MediaPlayer.PlayingState) {
                    videoPlayer.pause()
                } else {
                    videoPlayer.play()
                }
            }
        }

        Button {
            id: button_return_instructions_video
            x: 1408
            y: 835
            width: 192
            height: 75
            background: Rectangle {
                color: "#055eb3" // 设置背景为透明
                radius: 10 // 可选，设置圆角
            }
            text: qsTr("返回")
            font.pixelSize: 30
            palette.buttonText: "white"  // 设置字体颜色为绿色
            Connections {
                target: button_return_instructions_video
                onClicked: {
                    videoPlayer.source = "";
                    materialinstructionsVideo.visible = false;
                    mainScreen.resetLogin_timeout();
                }
            }
        }

        Slider {
            id: progressBar
            anchors {
                left: parent.left
                right: parent.right
                bottom: parent.bottom
                margins: 10
            }

            from: 0
            to: videoPlayer.duration
            value: videoPlayer.position

            onMoved: {
                videoPlayer.seek(progressBar.value)
            }
        }

        Image {
            id: materialinstruction_image_video
            anchors.centerIn: parent
            width: 128
            height: 128
            source: "qrc:/png/play.png"
            fillMode: Image.PreserveAspectFit
            visible: true;
        }
    }

    function slot_pdf_relay(name)
    {
        pdfDocument.source = ""
        pdfDocument.source = "file:///" + name
        materialinstructionsPdf.visible = true
        pdfView.goToPage(pdfView.currentPage + 1);
        pdfView.goToPage(0);
    }


    function callback_refresh_view(title)
    {
        materialInstructionsModel.clear();
        materialsellistInstructionsModel.clear();

        var jsonObjRoot = JSON.parse(strJsonData);
        if (jsonObjRoot.code === 200)
        {
            var jsonArrData = jsonObjRoot.data;
            for (var i = 0; i < jsonArrData.length; ++i)
            {
                var jsonObjData = jsonArrData[i];
                var materialsTypeId  = jsonObjData.materialsTypeId;
                var materialsTypeName = jsonObjData.materialsTypeName;
                var materialsTypeIcon = jsonObjData.materialsTypeIcon;
                var number = jsonObjData.number;


                if (materialsTypeName === "全部")
                {
                    materialsTypeIcon = "qrc:/png/allsel.png";
                }

                materialsellistInstructionsModel.append({
                                                            count: number,
                                                            icon: materialsTypeIcon,
                                                            name: materialsTypeName,
                                                            view: materialsTypeName === title ? true : false
                                                        });

                if (materialsTypeName !== title)
                {
                    continue;
                }

                var jsonArrInstructions = jsonObjData.instructions;

                for (var j = 0; j < jsonArrInstructions.length; ++j)
                {
                    var jsonObjInstructions = jsonArrInstructions[j];

                    var fileUrl = jsonObjInstructions.fileUrl;
                    var fileType = jsonObjInstructions.fileType;
                    var instructionsId = jsonObjInstructions.instructionsId;
                    var instructionsTitle = jsonObjInstructions.instructionsTitle;

                    var png = "";
                    if (fileType === "0")
                    {
                        png = "qrc:/png/videoImg.png";
                    }
                    else if (fileType === "1")
                    {
                        png = "qrc:/png/pdfImg.png";
                    }

                    materialInstructionsModel.append({
                                                         instructionsTitle:instructionsTitle,
                                                         png:png,
                                                         fileType: fileType,
                                                         fileUrl: fileUrl,
                                                         color: "#8fffffff"
                                                     });

                }

            }
        }

    }

    // 获取使用说明列表
    function slot_materialTypeGet(data)
    {
        strMaterialTypeGet = data;
    }

    // 获取使用说明列表
    function slot_instructionsGet(data)
    {
        strInstructionsGet = data;
        build_view("全部");
    }

    // 构建表头List
    function build_view(name)
    {
        var listStr = [];
        var mapData = {};

        materialInstructionsModel.clear();
        materialsellistInstructionsModel.clear();

        var jsonObjInstructionsRoot = JSON.parse(strInstructionsGet);
        if (jsonObjInstructionsRoot.code === 200)
        {
            var jsonObjInstructionsData = jsonObjInstructionsRoot.data;
            var jsonArrInstructionsRecords = jsonObjInstructionsData.records;
            for (var i = 0; i < jsonArrInstructionsRecords.length; ++i)
            {
                var jsonObjInstructions = jsonArrInstructionsRecords[i];

                var fileType = jsonObjInstructions.fileType;
                var fileUrl = jsonObjInstructions.fileUrl;
                var strPath = fileUrl.substring(0, fileUrl.lastIndexOf('/') + 1);
                var strName = fileUrl.substring(fileUrl.lastIndexOf('/') + 1);

                var png = "";
                if (fileType === "0")
                {
                    png = "qrc:/png/videoImg.png";
                }
                else if (fileType === "1")
                {
                    png = "qrc:/png/pdfImg.png";
                }

                // 获取标题
                var instructionsTitle = jsonObjInstructions.instructionsTitle;
                var materialsTypeName = jsonObjInstructions.materialsTypeName;

                if (materialsTypeName === name || name === "全部")
                {
                    materialInstructionsModel.append({instructionsTitle:instructionsTitle, png:png, fileType: fileType, fileUrl: fileUrl, strPath:strPath, strName: strName, color: "#8fffffff"});
                }

                if(listStr.indexOf(materialsTypeName) === -1)
                {
                    listStr.push(materialsTypeName);
                    mapData[materialsTypeName] = 1;
                }
                else
                {
                    mapData[materialsTypeName]++;
                }
            }
        }

        // 读取类型
        var jsonObjMaterialTypeRoot = JSON.parse(strMaterialTypeGet);
        if (jsonObjMaterialTypeRoot.code === 200)
        {
            var jsonObjMaterialTypeData = jsonObjMaterialTypeRoot.data;
            var jsonArrMaterialTypeRecords = jsonObjMaterialTypeData.records;

            var count = 0;
            for (var j = 0; j < jsonArrMaterialTypeRecords.length; ++j)
            {
                var jsonObjMaterialType = jsonArrMaterialTypeRecords[j];

                var typeName = jsonObjMaterialType.materialsTypeName;
                var typeIcon = jsonObjMaterialType.materialsTypeIcon;

                if (listStr.indexOf(typeName) !== -1)
                {
                    var countView = typeName + "(" + mapData[typeName] + ")";
                    materialsellistInstructionsModel.append({count: countView,icon: typeIcon, name: typeName, view: name === typeName ? true : false});
                    count += mapData[typeName];
                }
            }

            var countAllView = "全部" + "(" + count + ")";
            materialsellistInstructionsModel.insert(0, {count: countAllView, icon: "qrc:/png/allsel.png", name: "全部", view: name === "全部" ? true : false});
        }
    }

}